/* GODTHIC — Corrections navbar : logo + mobile deux bulles */

/* ============================================================
   LOGO NAVBAR DESKTOP
   ============================================================ */

.nav-brand {
  display: flex;
  align-items: center;
  padding: 0;
  background: none;
  border: none;
}

.nav-logo {
  display: block;
  width: auto;
  height: 38px;
  object-fit: contain;
  object-position: center;
  /* Le logo metal est sur fond sombre, il s'intègre naturellement sur la navbar glassmorphism */
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5));
  transition: opacity 0.2s ease;
}

.nav-brand:hover .nav-logo {
  opacity: 0.82;
}

/* ============================================================
   NAVBAR DESKTOP — conserver le design actuel
   On cache la bulle mobile sur desktop
   ============================================================ */

.nav-mobile-menu {
  display: none;
}

/* ============================================================
   NAVBAR MOBILE — DEUX BULLES LIQUID GLASS
   ============================================================ */

@media (max-width: 760px) {

  /* ─── Neutralise TOTALEMENT v2-fixes.css (pill floating centrée) ─── */
  /* Cause : v2-fixes.css:391 force left:50% + transform:translateX(-50%) + width:fit-content */
  .nav {
    position: fixed !important;
    /* Respiration supérieure : safe-area + espace visuel confortable */
    top: calc(env(safe-area-inset-top, 0px) + clamp(16px, 3.5vw, 24px)) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    /* CRITIQUE : neutralise le translateX(-50%) qui décalait la navbar hors écran */
    transform: none !important;
    -webkit-transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 clamp(18px, 5vw, 26px) !important;
    gap: 0 !important;
    /* Fond : TOTALEMENT TRANSPARENT — aucun fond commun, aucun contour commun */
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    border-bottom: none !important;
    border-color: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    isolation: auto !important;
    white-space: normal !important;
    z-index: 1001 !important;
    pointer-events: none !important; /* Le vide central laisse passer les clics */
  }

  /* Neutralise le specular highlight ::after (inset 1px dans v2-fixes.css) */
  .nav::after {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
  }

  /* Cacher le nav desktop et le brand desktop sur mobile */
  .nav > .nav-brand,
  .nav > nav#site-navigation {
    display: none;
  }

  /* Afficher la composition mobile */
  .nav-mobile-menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 0;
    pointer-events: none;
  }

  /* Activer les clics uniquement sur les deux bulles */
  .nav-mobile-logo,
  .nav-mobile-toggle {
    pointer-events: auto !important;
  }

  /* BULLE GAUCHE — Logo GODTHIC (Smoke Liquid Glass) */
  .nav-mobile-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 999px;
    /* Smoke Black Liquid Glass */
    background: linear-gradient(145deg, rgba(28, 28, 30, 0.78), rgba(14, 14, 16, 0.88) 60%, rgba(8, 8, 10, 0.94));
    border-top: 1px solid rgba(255, 255, 255, 0.36);
    border-left: 1px solid rgba(255, 255, 255, 0.18);
    border-right: 1px solid rgba(255, 255, 255, 0.18);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
      inset 0 1px 1px rgba(255, 255, 255, 0.5),
      inset 0 -1px 1px rgba(0, 0, 0, 0.6),
      0 12px 30px rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(24px) saturate(145%);
    -webkit-backdrop-filter: blur(24px) saturate(145%);
    cursor: pointer;
    position: relative;
    isolation: isolate;
    flex-shrink: 0;
  }

  .nav-mobile-logo::after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(125deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.05) 26%, transparent 55%, rgba(255, 255, 255, 0.03) 100%);
    opacity: 0.85;
  }

  .nav-mobile-logo img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
  }

  /* BULLE DROITE — MENU / FERMER (Smoke Liquid Glass, ~100–110px) */
  .nav-mobile-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    height: 50px;
    width: clamp(100px, 27vw, 110px) !important;
    min-width: 100px;
    min-height: 44px;
    border-radius: 999px;
    /* Smoke Black Liquid Glass */
    background: linear-gradient(145deg, rgba(28, 28, 30, 0.78), rgba(14, 14, 16, 0.88) 60%, rgba(8, 8, 10, 0.94));
    border-top: 1px solid rgba(255, 255, 255, 0.36);
    border-left: 1px solid rgba(255, 255, 255, 0.18);
    border-right: 1px solid rgba(255, 255, 255, 0.18);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
      inset 0 1px 1px rgba(255, 255, 255, 0.5),
      inset 0 -1px 1px rgba(0, 0, 0, 0.6),
      0 12px 30px rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(24px) saturate(145%);
    -webkit-backdrop-filter: blur(24px) saturate(145%);
    color: #fff;
    font: 700 11.5px/1 Helvetica Neue, Helvetica, Arial, sans-serif;
    letter-spacing: .09em;
    cursor: pointer;
    position: relative;
    isolation: isolate;
    margin-left: auto !important;
    margin-right: 0 !important;
  }

  .nav-mobile-toggle::after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(125deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.05) 26%, transparent 55%, rgba(255, 255, 255, 0.03) 100%);
    opacity: 0.85;
  }

  /* ─── CASCADE MENU MOBILE : BULLES INDÉPENDANTES ALIGNÉES SUR LE MÊME AXE DROIT ─── */
  nav#site-navigation {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important; /* BORD DROIT STRICTEMENT ALIGNÉ SOUS FERMER (D) */
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + clamp(16px, 3.5vw, 24px) + 58px) !important;
    right: clamp(18px, 5vw, 26px) !important;
    left: auto !important;
    width: auto !important;
    max-width: calc(100vw - 36px) !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 9px !important;
    /* AUCUN panneau commun, AUCUN fond, AUCUNE boîte */
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    z-index: 1002 !important;
    pointer-events: none !important;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s linear 0.32s, opacity 0.22s ease;
  }

  .nav.is-open nav#site-navigation {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none !important;
    transition: visibility 0s linear 0s, opacity 0.2s ease;
  }

  /* Chaque destination est une bulle indépendante Smoke Liquid Glass */
  nav#site-navigation a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 48px !important;
    min-height: 44px !important;
    border-radius: 999px !important;
    color: #fff !important;
    text-decoration: none !important;
    font: 700 11px/1 Helvetica Neue, Helvetica, Arial, sans-serif !important;
    letter-spacing: .09em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    pointer-events: auto !important;
    position: relative !important;
    isolation: isolate !important;
    align-self: flex-end !important; /* MÊME X DROIT (D1) */
    margin: 0 !important;
    margin-right: 0 !important;
    /* Smoke Black Liquid Glass */
    background: linear-gradient(145deg, rgba(28, 28, 30, 0.78), rgba(14, 14, 16, 0.88) 60%, rgba(8, 8, 10, 0.94)) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.34) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow:
      inset 0 1px 1px rgba(255, 255, 255, 0.48),
      inset 0 -1px 1px rgba(0, 0, 0, 0.6),
      0 12px 30px rgba(0, 0, 0, 0.65) !important;
    backdrop-filter: blur(24px) saturate(145%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(145%) !important;
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }

  /* Highlight spéculaire individuel */
  nav#site-navigation a::after {
    content: "" !important;
    position: absolute !important;
    inset: 1px !important;
    border-radius: inherit !important;
    z-index: -1 !important;
    pointer-events: none !important;
    background: linear-gradient(125deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.04) 26%, transparent 55%, rgba(255, 255, 255, 0.02) 100%) !important;
    opacity: 0.85 !important;
  }

  /* ─── Largeurs progressives (D2) : alignées à droite, grandissent vers la gauche ─── */
  /* FERMER : ~100–110px */
  /* 1. BARA : ~130–145px */
  nav#site-navigation a[href*="projects"] {
    width: clamp(130px, 35vw, 145px) !important;
  }
  /* 2. ARCHIVES : ~160–175px */
  nav#site-navigation a[href*="archives"] {
    width: clamp(160px, 43vw, 175px) !important;
  }
  /* 3. À PROPOS : ~190–205px */
  nav#site-navigation a[href*="about"] {
    width: clamp(190px, 51vw, 205px) !important;
  }
  /* 4. BARA AVEC MOI : ~220–240px + signal rouge GODTHIC subtil (G) */
  nav#site-navigation a.nav-cta,
  nav#site-navigation a[href*="contact"] {
    width: clamp(220px, 59vw, 240px) !important;
    border-top: 1px solid rgba(240, 60, 40, 0.5) !important;
    border-left: 1px solid rgba(200, 30, 20, 0.35) !important;
    border-right: 1px solid rgba(200, 30, 20, 0.35) !important;
    border-bottom: 1px solid rgba(160, 20, 15, 0.2) !important;
    background: linear-gradient(145deg, rgba(36, 20, 22, 0.85), rgba(180, 0, 10, 0.18) 45%, rgba(14, 8, 10, 0.94)) !important;
    box-shadow:
      inset 0 1px 1px rgba(255, 200, 190, 0.55),
      inset 0 -1px 1px rgba(0, 0, 0, 0.6),
      0 12px 32px rgba(180, 0, 10, 0.32) !important;
  }

  /* ─── Stagger d'ouverture progressive : ≈ 60ms entre chaque bulle (D3) ─── */
  .nav.is-open nav#site-navigation a[href*="projects"] {
    animation: bubble-cascade-in 0.24s cubic-bezier(.16,1,.3,1) 60ms both !important;
  }
  .nav.is-open nav#site-navigation a[href*="archives"] {
    animation: bubble-cascade-in 0.24s cubic-bezier(.16,1,.3,1) 120ms both !important;
  }
  .nav.is-open nav#site-navigation a[href*="about"] {
    animation: bubble-cascade-in 0.24s cubic-bezier(.16,1,.3,1) 180ms both !important;
  }
  .nav.is-open nav#site-navigation a.nav-cta,
  .nav.is-open nav#site-navigation a[href*="contact"] {
    animation: bubble-cascade-in 0.24s cubic-bezier(.16,1,.3,1) 240ms both !important;
  }

  /* ─── Stagger de fermeture en ordre inverse (D4) ─── */
  .nav.is-closing nav#site-navigation a.nav-cta,
  .nav.is-closing nav#site-navigation a[href*="contact"] {
    animation: bubble-cascade-out 0.18s cubic-bezier(.4,0,.2,1) 0ms both !important;
  }
  .nav.is-closing nav#site-navigation a[href*="about"] {
    animation: bubble-cascade-out 0.18s cubic-bezier(.4,0,.2,1) 60ms both !important;
  }
  .nav.is-closing nav#site-navigation a[href*="archives"] {
    animation: bubble-cascade-out 0.18s cubic-bezier(.4,0,.2,1) 120ms both !important;
  }
  .nav.is-closing nav#site-navigation a[href*="projects"] {
    animation: bubble-cascade-out 0.18s cubic-bezier(.4,0,.2,1) 180ms both !important;
  }

  @keyframes bubble-cascade-in {
    from { opacity: 0; transform: translateY(-6px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }

  @keyframes bubble-cascade-out {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to   { opacity: 0; transform: translateY(-6px) scale(0.98); }
  }

  /* Overflow mobile safe */
  .nav {
    overflow: visible !important;
  }

  /* Padding body pour que le contenu ne soit pas caché sous les bulles fixed */
  body {
    padding-top: calc(env(safe-area-inset-top, 0px) + clamp(16px, 3.5vw, 24px) + 64px) !important;
  }

  body.intro-open {
    padding-top: 0 !important;
  }
}

/* ============================================================
   SAFE AREAS — éviter les bords sur 360/390/430px
   ============================================================ */
@media (max-width: 760px) {
  .nav-mobile-menu {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }
}