/* Menu mobile (coup de raclette + bulles) et sommaire « Sur cette page » (bulle qui glisse).
   Chargé sur toutes les pages Sweep it v2, après leur feuille de style. */

/* ============ BOUTON MENU (téléphone) ============ */
.mnav-btn{display:none;align-items:center;gap:8px;margin-left:auto;border:0;background:transparent;color:var(--ink);
  font:600 14px/1 var(--f-body);padding:10px 4px;cursor:pointer}
.mnav-ico{position:relative;width:22px;height:16px;display:block}
.mnav-ico i{position:absolute;left:0;height:2.5px;border-radius:2px;background:currentColor;transition:transform .35s cubic-bezier(.6,0,.2,1),opacity .2s,width .3s}
.mnav-ico i:nth-child(1){top:0;width:22px}
.mnav-ico i:nth-child(2){top:7px;width:16px}
.mnav-ico i:nth-child(3){top:14px;width:22px}
.mnav-open .mnav-ico i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.mnav-open .mnav-ico i:nth-child(2){transform:translateX(18px);opacity:0}   /* le chiffon part sur le côté */
.mnav-open .mnav-ico i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:820px){
  .mnav-btn{display:inline-flex}
  .nav .wrap > .btn{margin-left:0;white-space:nowrap;padding:10px 14px;font-size:13px}
  .nav .wrap{gap:14px}
}
@media (max-width:360px){.mnav-lbl{display:none}}

/* ============ PANNEAU MENU ============ */
.mnav{position:fixed;left:0;right:0;bottom:0;top:var(--mnav-top,60px);z-index:39;background:var(--mist);overflow-y:auto;overscroll-behavior:contain;
  visibility:hidden;clip-path:inset(0 0 100% 0);transition:clip-path .55s cubic-bezier(.77,0,.18,1),visibility 0s linear .55s}
.mnav.open{visibility:visible;clip-path:inset(0 0 0 0);transition:clip-path .55s cubic-bezier(.77,0,.18,1),visibility 0s}
/* la raclette qui essuie l'écran en descendant (et remonte à la fermeture) */
.mnav-squeegee{position:fixed;left:-10px;right:-10px;top:var(--mnav-top,60px);height:16px;z-index:40;pointer-events:none;opacity:0;
  background:linear-gradient(var(--sky) 0 60%,var(--sky-deep) 60% 100%);border-radius:0 0 12px 12px;box-shadow:0 6px 12px -6px rgba(12,53,82,.45)}
.mnav-squeegee.down{animation:sqDown .55s cubic-bezier(.77,0,.18,1) forwards}
.mnav-squeegee.up{animation:sqUp .55s cubic-bezier(.77,0,.18,1) forwards}
@keyframes sqDown{0%{opacity:1;transform:translateY(0)}92%{opacity:1}100%{opacity:0;transform:translateY(calc(100dvh - var(--mnav-top,60px)))}}
@keyframes sqUp{0%{opacity:1;transform:translateY(calc(100dvh - var(--mnav-top,60px)))}92%{opacity:1}100%{opacity:0;transform:translateY(0)}}

.mnav-in{padding:28px var(--gutter) calc(env(safe-area-inset-bottom,0px) + 32px);display:grid;gap:26px;position:relative}
.mnav-group{display:grid;gap:10px}
.mnav-label{font:600 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--sky-deep)}
.mnav-big{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.mnav-big a{display:flex;align-items:center;justify-content:space-between;gap:12px;text-decoration:none;color:var(--ink);
  font:800 clamp(28px,8vw,38px)/1.15 var(--f-display);padding:6px 0;border-bottom:1.5px solid var(--line)}
.mnav-big a::after{content:"→";font:600 20px/1 var(--f-body);color:var(--sky);transition:transform .2s}
.mnav-big a:hover::after,.mnav-big a:focus-visible::after{transform:translateX(4px)}
.mnav-big a[aria-current="page"]{color:var(--sky)}
.mnav-chips{display:flex;flex-wrap:wrap;gap:8px}
.mnav-chips a{text-decoration:none;color:var(--ink);background:var(--foam);border-radius:999px;padding:9px 14px;font-weight:600;font-size:15px}
.mnav-cta{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.mnav-cta .wa{font-weight:700;color:var(--sky-deep);text-decoration:none}
/* entrée des liens, un par un */
.mnav .mnav-rise{opacity:0;transform:translateY(12px);transition:opacity .35s ease,transform .45s cubic-bezier(.3,1.4,.5,1)}
.mnav.open .mnav-rise{opacity:1;transform:none;transition-delay:calc(.28s + var(--i,0) * .05s)}
/* bulles de savon qui remontent après le passage de la raclette */
.mnav-bubbles{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.mnav-bubbles span{position:absolute;bottom:-30px;border-radius:50%;opacity:0;
  background:radial-gradient(circle at 30% 30%,#fff 0 18%,rgba(255,255,255,.2) 19% 55%,rgba(64,164,214,.35) 56% 100%);box-shadow:inset 0 0 0 1.5px rgba(64,164,214,.45)}
.mnav.open .mnav-bubbles span{animation:bubble 2.4s ease-out forwards;animation-delay:var(--d,.3s)}
@keyframes bubble{0%{opacity:0;transform:translateY(0) scale(.6)}15%{opacity:1}100%{opacity:0;transform:translateY(-70vh) translateX(var(--x,10px)) scale(1)}}
html.mnav-lock,html.mnav-lock body{overflow:hidden}

/* ============ SOMMAIRE « SUR CETTE PAGE » ============ */
.toc-bar{position:fixed;left:0;right:0;top:var(--toc-top,68px);z-index:38;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);transform:translateY(-110%);opacity:0;pointer-events:none;transition:transform .35s cubic-bezier(.3,1.2,.5,1),opacity .25s}
.toc-bar.show{transform:none;opacity:1;pointer-events:auto}
.toc-bar .wrap{display:flex;align-items:center;gap:14px;height:46px}
.toc-lbl{flex:none;font:600 11px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.toc-track{position:relative;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;min-width:0;flex:1;padding-block:6px}
.toc-track::-webkit-scrollbar{display:none}
.toc-track a{position:relative;z-index:1;flex:none;text-decoration:none;color:var(--ink);font-weight:600;font-size:14px;padding:7px 13px;border-radius:999px;white-space:nowrap;transition:color .25s}
.toc-track a.on{color:var(--sky-deep)}
.toc-track a:focus-visible{outline:2px solid var(--sky);outline-offset:1px}
/* la bulle qui glisse sous la section en cours */
.toc-bubble{position:absolute;z-index:0;top:6px;left:0;height:calc(100% - 12px);width:0;border-radius:999px;
  background:radial-gradient(circle at 18% 30%,rgba(255,255,255,.95) 0 10%,rgba(255,255,255,0) 11%),linear-gradient(135deg,#DDF0FA,#C4E5F5);
  box-shadow:inset 0 0 0 1.5px rgba(64,164,214,.35);transition:transform .45s cubic-bezier(.3,1.3,.5,1),width .45s cubic-bezier(.3,1.3,.5,1),opacity .2s;opacity:0}
.toc-bubble.on{opacity:1}
@media (max-width:820px){.toc-lbl{display:none}.toc-bar .wrap{height:44px}}
html.has-toc{scroll-padding-top:var(--toc-offset,130px)}

@media (prefers-reduced-motion:reduce){
  .mnav,.mnav.open,.toc-bar,.toc-bubble,.mnav .mnav-rise{transition:none!important}
  .mnav-squeegee,.mnav-bubbles{display:none}
}