/* Legrand Juridique - couche mobile finale */
@media (max-width:860px){
  html{scroll-behavior:smooth}
  body{overflow-x:hidden}
  .wrap{width:min(100% - 30px,680px)!important}
  .site-header{position:sticky!important;top:0;z-index:1000}
  .nav{min-height:64px!important}
  .brand img,.footer-brand img{max-width:40px;height:auto}
  .menu-btn{display:block!important;min-width:44px;min-height:44px}
  .navlinks{
    position:fixed!important;inset:64px 0 0!important;z-index:999!important;
    display:flex!important;flex-direction:column!important;align-items:stretch!important;
    padding:22px 20px 36px!important;background:rgba(2,9,20,.985)!important;
    transform:translateX(100%);opacity:0;pointer-events:none;
    transition:transform .28s ease,opacity .28s ease;overflow-y:auto
  }
  .navlinks.is-open{transform:translateX(0);opacity:1;pointer-events:auto}
  .navlinks a{display:flex!important;align-items:center;min-height:56px;border-bottom:1px solid rgba(255,255,255,.08)}
  body.menu-open{overflow:hidden}
  .hero,.hero--inner,.page-hero{padding-top:46px!important;padding-bottom:48px!important}
  .hero-grid,.univers-grid,.universes,.grid2,.grid3,.grid4,.cards,.contact-grid,.footer-grid{
    grid-template-columns:1fr!important
  }
  h1{font-size:clamp(38px,11vw,54px)!important;line-height:1!important}
  .hero h1{font-size:clamp(42px,12vw,58px)!important}
  h2,.section-title{font-size:clamp(30px,9vw,42px)!important}
  section{padding-top:52px!important;padding-bottom:52px!important}
  .hero-actions,.cta-inner{display:flex!important;flex-direction:column!important;align-items:stretch!important}
  .btn{width:100%;min-height:50px;justify-content:center;text-align:center}
  .metrics-grid{display:flex!important;overflow-x:auto;gap:10px;padding-bottom:8px;scroll-snap-type:x mandatory}
  .metric{flex:0 0 78%;scroll-snap-align:center}
  .card,.univers,.universe{padding:22px!important}
  .footer-grid>div{min-width:0}
  .footer-bottom{flex-direction:column!important;gap:8px!important}
  table{display:block;overflow-x:auto;white-space:nowrap}
  img,svg,video{max-width:100%;height:auto}
}
@media (max-width:440px){
  .wrap{width:calc(100% - 24px)!important}
  .brand small{display:none!important}
  .metric{flex-basis:86%}
}