/* ============================================================
   MENU — page plein écran, inspirée Novembre
   ============================================================ */
body.menu-body{ background: var(--noir); color: var(--creme); height:100vh; overflow:hidden; }

.menu-screen{
  position:relative; height:100vh; display:flex; flex-direction:column; justify-content:space-between;
  padding: 2rem 5vw 3rem;
  background:
    radial-gradient(circle at 85% 12%, rgba(163,171,146,.14), transparent 55%),
    var(--noir);
}
.menu-top{ display:flex; justify-content:space-between; align-items:center; }
.menu-brand{ display:flex; align-items:center; gap:.7rem; }
.menu-brand img{ width:42px; border-radius:50%; }
.menu-brand span{ color:#fff; font-weight:700; letter-spacing:.02em; }
.menu-close{
  width:48px; height:48px; border-radius:50%; border:1px solid rgba(255,255,255,.25);
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.3rem;
  transition: transform .4s var(--ease), background .4s;
}
.menu-close:hover{ transform: rotate(90deg); background: rgba(255,255,255,.08); }

.menu-body-main{
  display:flex; flex-wrap:wrap; gap: clamp(2rem, 6vw, 5rem); justify-content:space-between; align-items:flex-end;
  flex:1; padding: 2rem 0;
}
.menu-links{ display:flex; flex-direction:column; gap: .2rem; }
.menu-links a{
  position:relative;
  font-size: clamp(2.6rem, 9vw, 7rem); font-weight:800; letter-spacing:-.02em;
  color: rgba(247,246,242,.32);
  line-height:1.04; transition: color .45s var(--ease), transform .45s var(--ease), padding .45s var(--ease);
  display:flex; align-items:baseline; gap:1.2rem;
}
.menu-links a .mi{ font-size:.32em; color: var(--sage); opacity:0; transition: opacity .4s; font-weight:700; }
.menu-links a:hover{ color:#fff; padding-left: 1.6rem; }
.menu-links a:hover .mi{ opacity:1; }
.menu-links a span.num{ font-size:.3em; color: var(--sage-light); font-weight:700; align-self:center; }

.menu-side{ max-width: 340px; display:flex; flex-direction:column; gap: 2.4rem; }
.menu-side h4{
  font-size:.74rem; letter-spacing:.22em; text-transform:uppercase; color: var(--sage-light); margin:0 0 .8rem;
}
.menu-side p, .menu-side a{ color: rgba(247,246,242,.62); font-size:.96rem; line-height:1.8; }
.menu-side a:hover{ color:#fff; }
.menu-socials{ display:flex; gap:1rem; margin-top:.4rem; }
.menu-socials a{ width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; transition: border-color .3s, transform .3s; }
.menu-socials a:hover{ border-color: var(--sage); transform: translateY(-3px); }
.menu-socials svg{ width:15px; height:15px; }

.menu-bottom{ display:flex; justify-content:space-between; color: rgba(247,246,242,.4); font-size:.78rem; letter-spacing:.05em; flex-wrap:wrap; gap:1rem; }

@media (max-width: 760px){
  .menu-links a{ font-size: clamp(2.2rem, 13vw, 3.6rem); }
  .menu-body-main{ flex-direction:column; align-items:flex-start; gap:2.6rem; justify-content:flex-start; }
}
@media (max-width: 640px){
  body.menu-body{ height:100vh; overflow:hidden; }
  .menu-screen{ height:100vh; overflow:hidden; padding:1.2rem 6vw 1rem; justify-content:flex-start; gap:0; }
  .menu-body-main{ flex:none; padding:.5rem 0; align-items:flex-start; justify-content:flex-start; gap:0; }
  .menu-links{ gap:0; align-items:flex-start; width:100%; }
  .menu-links a{ font-size:clamp(2.6rem,13vw,3.6rem); line-height:1.1; text-align:left; white-space:nowrap; color:rgba(247,246,242,.75); }
  .menu-links a:hover{ padding-left:0; }
  .menu-side{ margin-top:50vw; gap:.6rem; max-width:100%; align-items:flex-start; text-align:left; }
  .menu-side p, .menu-side a{ font-size:.78rem; line-height:1.4; text-align:left; }
  .menu-side h4{ font-size:.58rem; margin:0 0 .25rem; text-align:left; }
  .menu-socials{ justify-content:flex-start; gap:.5rem; margin-top:.2rem; }
  .menu-socials a{ width:28px; height:28px; }
  .menu-bottom{ margin-top:.3rem; font-size:.66rem; justify-content:flex-start; flex-wrap:wrap; }
}
@media (max-width: 480px){
  .menu-links a{ font-size: clamp(1.5rem, 8vw, 2.2rem); white-space: nowrap; }
  .menu-screen{ padding: 1rem 6vw .9rem; }
  .menu-side{ gap: .6rem; }
  .menu-body-main{ gap: .7rem; }
}