/* NKS V11 — mobile navigation + CEO photo hardening */

/* CEO portrait: keep the actual <img> for SEO/accessibility, while the parent also
   carries the same image as a safe visual fallback in case the picture source is late. */
.founder-media{
  background-image:url('/henock-kabambi-kalonji-fondateur-ceo-nks-services.jpg')!important;
  background-repeat:no-repeat!important;
  background-size:cover!important;
  background-position:center 15%!important;
  overflow:hidden!important;
  border-radius:20px!important;
  box-shadow:0 16px 38px rgba(15,35,70,.13)!important;
}
.founder-photo-wrap,
.founder-photo-wrap picture{
  display:block!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
}
.founder-img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-height:100%!important;
  max-height:none!important;
  object-fit:cover!important;
  object-position:center 15%!important;
  border-radius:20px!important;
  opacity:1!important;
  visibility:visible!important;
}
body.nks-dark-mode .founder-media{
  box-shadow:0 18px 46px rgba(0,0,0,.34)!important;
  outline:1px solid rgba(125,203,255,.14);
}

@media (max-width:768px){
  /* Compact, centered mobile header. No horizontal clipping or hidden menu item. */
  header{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    padding:10px 12px 12px!important;
    gap:8px!important;
    overflow:visible!important;
  }
  header .brand{
    width:100%!important;
    display:flex!important;
    justify-content:center!important;
    align-items:center!important;
    flex:0 0 auto!important;
  }
  header .brand img{
    width:64px!important;
    height:64px!important;
    object-fit:contain!important;
  }
  header nav{
    order:1!important;
    width:100%!important;
    max-width:100%!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex-wrap:wrap!important;
    overflow:visible!important;
    gap:6px 7px!important;
    margin:0!important;
    padding:0!important;
    white-space:normal!important;
  }
  header nav > a{
    flex:0 0 auto!important;
    min-width:0!important;
    min-height:36px!important;
    padding:0 10px!important;
    margin:0!important;
    border-radius:999px!important;
    font-size:12.5px!important;
    line-height:1!important;
    white-space:nowrap!important;
  }
  /* Login / Mon Espace always receives its own centered row. Works whether
     #auth-menu is inside nav or directly inside header. */
  header #auth-menu,
  header nav > #auth-menu{
    order:2!important;
    flex:0 0 100%!important;
    width:100%!important;
    max-width:100%!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex-wrap:wrap!important;
    gap:8px!important;
    margin:2px 0 0!important;
    padding:0!important;
    overflow:visible!important;
  }
  header #auth-menu > a,
  header #auth-menu > button{
    width:auto!important;
    max-width:calc(100vw - 32px)!important;
    min-height:38px!important;
    padding:0 16px!important;
    margin:0!important;
    white-space:nowrap!important;
    font-size:12.5px!important;
  }

  /* Give the portrait a real fixed mobile box; background acts as fallback. */
  .founder-card{
    grid-template-columns:1fr!important;
    gap:18px!important;
  }
  .founder-media{
    order:-1!important;
    display:block!important;
    justify-self:center!important;
    width:min(62vw,210px)!important;
    max-width:210px!important;
    height:270px!important;
    min-height:270px!important;
    margin:0 auto 4px!important;
    border-radius:20px!important;
  }
  .founder-photo-wrap{
    width:100%!important;
    max-width:none!important;
    height:100%!important;
  }
  .founder-photo-wrap::before{display:none!important;}
  .founder-photo-wrap picture{height:100%!important;}
  .founder-img,
  .page-home .founder-img{
    width:100%!important;
    height:100%!important;
    min-height:270px!important;
    max-height:none!important;
    object-fit:cover!important;
    object-position:center 15%!important;
  }
  .founder-photo-wrap figcaption{display:none!important;}
}

@media (max-width:430px){
  header{padding-left:9px!important;padding-right:9px!important;}
  header nav{gap:5px!important;}
  header nav > a{
    min-height:34px!important;
    padding:0 8px!important;
    font-size:11.8px!important;
  }
  .founder-media{
    width:min(66vw,205px)!important;
    height:262px!important;
    min-height:262px!important;
  }
  .founder-img,.page-home .founder-img{min-height:262px!important;}
}

@media (max-width:360px){
  header nav > a{font-size:11px!important;padding:0 7px!important;}
}