/* ===== Navigation principale (méga-menu) — V1 ===== */
:root{
  --mm-text:#2D3748; --mm-accent:#ED7C00; --mm-pink:#D01050; --mm-bg:#fff; --mm-soft:#F6F6F7; --mm-line:#E6E6E9;
}

/* un seul bloc sticky : la barre de nav. Le bandeau + logo défilent avec la page */
header{ display:contents; }
#sticky-header.navbar{
  position:sticky; top:0; z-index:99;
  background:var(--mm-bg); border-bottom:1px solid var(--mm-line);
  box-shadow:0 1px 0 rgba(0,0,0,.02);
}
/* neutralise l'ancien comportement « fixed + animation » de main.js */
#sticky-header.sticky-menu{
  position:sticky; animation:none; border-radius:0;
  box-shadow:0 8px 20px -12px rgba(0,0,0,.25);
}
#sticky-header > .container{ display:flex; align-items:center; gap:1.5rem; }

/* logo compact : visible seulement une fois la barre « collée » */
.mm-brand{ align-items:center; flex:0 0 auto; overflow:hidden; max-width:0; opacity:0; transition:max-width .25s ease, opacity .25s ease; }
.mm-brand img{ height:38px; width:auto; display:block; }
.sticky-menu .mm-brand{ max-width:160px; opacity:1; }

/* liste de premier niveau */
.mm-list{ list-style:none; margin:0; padding:0; display:flex; width:100%; justify-content:space-between; }
.mm-item{ position:static; display:flex; align-items:center; }
.mm-link{
  font-family:'Barlow Semi Condensed',sans-serif; font-weight:700; font-size:1.05rem;
  color:var(--mm-text); text-decoration:none; padding:1.1rem .15rem 1.1rem .75rem; position:relative;
}
.mm-link::after{ content:""; position:absolute; left:.75rem; right:.4rem; bottom:.55rem; height:3px; border-radius:2px; background:var(--mm-accent); transform:scaleX(0); transform-origin:left; transition:transform .2s ease; }
.mm-item:hover .mm-link::after,.mm-item.open .mm-link::after,.mm-link:focus-visible::after{ transform:scaleX(1); }
.mm-item:hover .mm-link,.mm-item.open .mm-link{ color:var(--mm-pink); }
.mm-toggle{ border:0; background:none; color:var(--mm-text); padding:.5rem .6rem .5rem .15rem; display:flex; align-items:center; cursor:pointer; border-radius:6px; }
.mm-toggle:focus-visible,.mm-link:focus-visible{ outline:2px solid var(--mm-accent); outline-offset:2px; }
.mm-toggle .lucide,.mm-toggle svg{ width:16px; height:16px; stroke-width:2.5; transition:transform .2s ease; }
.mm-item.open .mm-toggle svg{ transform:rotate(180deg); color:var(--mm-pink); }

/* panneau */
.mm-panel{ background:var(--mm-bg); }
.mm-intro-title{ font-family:'Barlow Semi Condensed',sans-serif; font-weight:700; font-size:1.5rem; line-height:1.1; color:var(--mm-text); margin:0 0 .5rem; }
.mm-intro-text{ color:#5b6472; font-size:.95rem; line-height:1.4; margin:0 0 1rem; }
.mm-all{ display:inline-flex; align-items:center; gap:.4rem; font-weight:700; color:var(--mm-pink); text-decoration:none; font-size:.95rem; }
.mm-all svg{ width:1.1em; height:1.1em; transition:transform .2s; }
.mm-all:hover svg{ transform:translateX(4px); }
.mm-col-title{ font-family:'Barlow Semi Condensed',sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.06em; font-size:.8rem; color:var(--mm-accent); margin:0 0 .6rem; padding-bottom:.5rem; border-bottom:1px solid var(--mm-line); }
.mm-col ul{ list-style:none; margin:0; padding:0; }
.mm-col li a{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  padding:.45rem .6rem; margin:0 -.6rem; border-radius:6px;
  font-family:'Barlow Semi Condensed',sans-serif; font-weight:600; font-size:1.02rem; line-height:1.2;
  color:var(--mm-text); text-decoration:none; transition:background .15s, color .15s;
}
.mm-col li a:hover,.mm-col li a:focus-visible{ background:var(--mm-soft); color:var(--mm-pink); }
.mm-badge{ background:var(--mm-pink); color:#fff; font-size:.7rem; font-weight:700; padding:.1rem .45rem; border-radius:99px; }

/* ===== Desktop ===== */
@media (min-width:1200px){
  .mm-panel{
    position:absolute; left:0; right:0; top:100%;
    border-top:1px solid var(--mm-line); box-shadow:0 24px 40px -20px rgba(0,0,0,.28);
    opacity:0; visibility:hidden; transform:translateY(-6px);
    transition:opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
  }
  .mm-item.open .mm-panel{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
  .mm-inner{ max-width:1140px; margin:0 auto; padding:2rem 1rem 2.25rem; display:grid; grid-template-columns:280px 1fr; gap:2.5rem; }
  .mm-intro{ padding-right:2rem; border-right:1px solid var(--mm-line); }
  .mm-cols{ display:grid; gap:2.5rem; grid-template-columns:repeat(var(--mm-cols,3),minmax(0,1fr)); align-content:start; }
  .mm-panel[data-cols="1"] .mm-cols{ --mm-cols:2; }
  .mm-panel[data-cols="2"] .mm-cols{ --mm-cols:2; }
  .mm-panel[data-cols="3"] .mm-cols{ --mm-cols:3; }
  .mm-panel.mm-simple .mm-cols{ grid-template-columns:1fr 1fr; }
  .mm-panel.mm-simple .mm-col{ grid-column:1 / -1; }
  .mm-panel.mm-simple .mm-col ul{ columns:2; column-gap:2.5rem; }
  .mm-panel.mm-simple .mm-col li{ break-inside:avoid; }
}
@media (min-width:1200px) and (max-width:1399px){
  .mm-link{ font-size:1rem; padding-left:.5rem; }
  .mm-inner{ grid-template-columns:230px 1fr; gap:2rem; }
}

/* ===== Mobile / tablette : panneau latéral en accordéon ===== */
@media (max-width:1199px){
  #sticky-header .navbar-toggler{ padding:.4rem .2rem; z-index:auto; }
  header .navbar .offcanvas-body{ margin-top:0; padding:0 1rem 2rem; }
  #offcanvasNavbar{ width:min(400px,100vw); }
  .mm-offhead{ display:flex; align-items:center; justify-content:space-between; padding:.9rem 1rem; border-bottom:1px solid var(--mm-line); }
  .mm-offhead img{ height:36px; width:auto; }
  .mm-close{ display:flex; align-items:center; gap:.4rem; border:0; background:var(--mm-soft); color:var(--mm-text); font-weight:700; padding:.5rem .8rem; border-radius:99px; }
  .mm-close svg{ width:18px; height:18px; }
  .mm-list{ flex-direction:column; }
  .mm-item{ flex-wrap:wrap; border-bottom:1px solid var(--mm-line); }
  .mm-link{ flex:1; padding:1rem .25rem; font-size:1.15rem; }
  .mm-link::after{ display:none; }
  .mm-toggle{ padding:1rem .75rem; }
  .mm-toggle svg{ width:20px; height:20px; }
  .mm-panel{ flex-basis:100%; display:none; padding:0 0 1rem .25rem; }
  .mm-item.open .mm-panel{ display:block; }
  .mm-intro{ display:none; }
  .mm-col{ margin-bottom:.75rem; }
  .mm-col-title{ border:0; margin-bottom:.15rem; padding:0; }
  .mm-col li a{ padding:.55rem .6rem; font-size:1.05rem; }
}
@media (prefers-reduced-motion:reduce){ .mm-panel,.mm-brand,.mm-link::after,.mm-toggle svg{ transition:none !important; } }

/* ===== Bandeau Oktopod (live preview) ===== */
.okto-bar{ display:flex; align-items:center; justify-content:center; gap:.5rem; flex-wrap:wrap; text-align:center; padding:.3rem 1rem; background:#144242; color:#d4f1f2; font:500 .78rem/1.3 system-ui,-apple-system,"Segoe UI",sans-serif; letter-spacing:.01em; }
.okto-bar strong{ color:#7ad5d6; font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:.7rem; }
.okto-bar b{ color:#fff; font-weight:700; }
.okto-sep{ opacity:.45; }
.okto-dot{ width:.5rem; height:.5rem; border-radius:50%; background:#4cc6c8; box-shadow:0 0 0 0 rgba(76,198,200,.6); animation:okto-pulse 2s infinite; }
@keyframes okto-pulse{ 70%{ box-shadow:0 0 0 .4rem rgba(76,198,200,0); } 100%{ box-shadow:0 0 0 0 rgba(76,198,200,0); } }
@media (prefers-reduced-motion:reduce){ .okto-dot{ animation:none; } }
@media (max-width:575px){ .okto-sep{ display:none; } .okto-bar{ font-size:.72rem; } }