/* ==========================================================================
   ORASSI — Barre de navigation commune
   Chargee par toutes les pages ; le balisage vient de includes/nav.php.

   IMPORTANT : toutes les regles sont portees par .site-head et toutes les
   variables sont declarees sur .site-head (et non sur :root). Ce fichier ne
   peut donc rien modifier dans assets/style.css (pages interieures) ni dans
   assets/home.css (accueil), meme si des noms de classes se recoupent.

   Deux variantes :
     .site-head              barre pleine, dans le flux (pages interieures)
     .site-head.is-overlay   barre transparente posee sur le visuel (accueil)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Barre
   -------------------------------------------------------------------------- */
.site-head{
  /* Variables locales : portee limitee a la barre */
  --nav-bg:#02101B;
  --nav-blue:#3B9BE1;
  --nav-line:#2E86D9;
  --nav-btn:#2A7DC3;
  --nav-btn-hi:#3792D9;
  --nav-border:rgba(255,255,255,.10);
  --nav-shell:1408px;
  --nav-h:88px;
  --nav-logo-h:64px;
  --nav-font:"Roboto Condensed","Barlow Semi Condensed","Arial Narrow",system-ui,sans-serif;

  position:sticky;top:0;z-index:100;
  height:var(--nav-h);
  display:flex;align-items:center;
  background:var(--nav-bg);
  border-bottom:1px solid var(--nav-border);
  font-family:var(--nav-font);
  transition:background .3s ease,height .3s ease;
}

/* Variante accueil : posee sur la photo du hero */
.site-head.is-overlay{
  position:absolute;top:0;left:0;right:0;
  --nav-h:120px;
  --nav-logo-h:96px;
  background:none;
  border-bottom-color:transparent;
}
.site-head.is-overlay::before{      /* voile sombre pour asseoir la barre */
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(1,3,6,.88) 0%,rgba(1,3,6,.52) 60%,rgba(1,3,6,0) 100%);
}

.site-head .nav-shell{
  width:min(var(--nav-shell),100% - 48px);
  margin-inline:auto;
  display:flex;align-items:center;gap:24px;
}

/* --------------------------------------------------------------------------
   2. Logo
   -------------------------------------------------------------------------- */
.site-head .brand{display:block;flex:0 0 auto;line-height:0}
.site-head .brand img{
  height:var(--nav-logo-h);width:auto;
  transition:height .3s ease;
}

/* --------------------------------------------------------------------------
   3. Liens
   -------------------------------------------------------------------------- */
.site-head .nav{
  margin-left:auto;
  display:flex;align-items:center;gap:37px;
}
.site-head .nav a{
  position:relative;
  font-size:17.2px;font-weight:400;line-height:1;
  text-transform:uppercase;color:#EDF2F6;
  padding:11px 0;
  transition:color .2s ease;
}
.site-head .nav a::after{
  content:"";position:absolute;left:-16px;right:-16px;bottom:-6px;height:3px;
  background:var(--nav-line);
  transform:scaleX(0);transform-origin:center;
  transition:transform .25s ease;
}
.site-head .nav a:hover{color:#fff}
.site-head .nav a:hover::after{transform:scaleX(.5)}
.site-head .nav a.is-active{color:var(--nav-blue)}
.site-head .nav a.is-active::after{transform:scaleX(1)}

/* --------------------------------------------------------------------------
   4. Bouton CONTACT
   -------------------------------------------------------------------------- */
.site-head .nav-cta{
  flex:0 0 auto;margin-left:31px;
  display:inline-flex;align-items:center;justify-content:center;
  min-width:121px;height:41px;padding:0 20px;
  background:var(--nav-btn);color:#fff;
  font-size:17.2px;font-weight:500;line-height:1;
  letter-spacing:.04em;text-transform:uppercase;text-decoration:none;
  border:0;border-radius:3px;
  transition:background .2s ease,transform .2s ease,box-shadow .2s ease;
}
.site-head .nav-cta:hover{
  background:var(--nav-btn-hi);transform:translateY(-1px);
  box-shadow:0 8px 22px rgba(42,125,195,.35);
}

/* --------------------------------------------------------------------------
   5. Bouton burger (mobile)
   -------------------------------------------------------------------------- */
.site-head .nav-toggle{
  display:none;margin-left:auto;
  width:44px;height:44px;
  background:none;border:1px solid rgba(255,255,255,.16);border-radius:3px;
  color:#fff;cursor:pointer;
  align-items:center;justify-content:center;
}
.site-head .nav-toggle span{position:relative;display:block;width:20px;height:1.5px;background:currentColor}
.site-head .nav-toggle span::before,
.site-head .nav-toggle span::after{
  content:"";position:absolute;left:0;width:20px;height:1.5px;background:currentColor;
}
.site-head .nav-toggle span::before{top:-6px}
.site-head .nav-toggle span::after{top:6px}

/* --------------------------------------------------------------------------
   6. Barre compacte au defilement (variante accueil uniquement :
      la variante pleine est deja collante)
   -------------------------------------------------------------------------- */
.is-scrolled .site-head.is-overlay{
  position:fixed;
  --nav-h:76px;
  --nav-logo-h:56px;
  background:rgba(3,14,23,.95);
  backdrop-filter:blur(12px);
  border-bottom-color:var(--nav-border);
}

/* --------------------------------------------------------------------------
   7. Adaptatif
   -------------------------------------------------------------------------- */
@media (max-width:1440px){
  .site-head .nav{gap:28px}
  .site-head .nav-cta{margin-left:24px}
}

@media (max-width:1280px){
  .site-head{--nav-logo-h:56px}
  .site-head.is-overlay{--nav-logo-h:78px}
  .site-head .nav{gap:18px}
  .site-head .nav a{font-size:16px}
}

/* Menu deroulant */
@media (max-width:1119px){
  .site-head{--nav-h:76px;--nav-logo-h:52px}
  .site-head.is-overlay{--nav-h:88px;--nav-logo-h:56px}

  .site-head .nav{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--nav-bg);
    border-top:1px solid var(--nav-border);
    border-bottom:1px solid var(--nav-border);
    box-shadow:0 20px 44px rgba(0,0,0,.5);
    padding:8px 24px 16px;
    display:none;
  }
  .site-head .nav.is-open{display:flex}
  .site-head .nav a{padding:14px 0;font-size:18px;border-bottom:1px solid rgba(255,255,255,.06)}
  .site-head .nav a::after{display:none}
  .site-head .nav-toggle{display:flex}
  .site-head .nav-cta{order:3;margin-left:14px}
}

@media (max-width:660px){
  .site-head{--nav-logo-h:46px}
  .site-head.is-overlay{--nav-logo-h:52px}
  .site-head .nav-shell{width:min(var(--nav-shell),100% - 32px)}
  .site-head .nav-cta{min-width:0;height:36px;padding:0 14px;font-size:15px}
}