/* ============================================================
   FIXA-EXPLORER v005 — Navigation principale du site
   Réutilise le système de couleurs par brique établi sur les
   pages d'authentification et d'informations.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400..700&family=Public+Sans:wght@400;500;600&family=Space+Mono:wght@400;700&display=swap');

:root{
  --fnav-ink:#16242C;
  --fnav-ink-raised:#1F303A;
  --fnav-bone:#EFEEE5;
  --fnav-bone-raised:#F8F7F0;
  --fnav-line: rgba(239,238,229,0.14);
  --fnav-line-strong: rgba(239,238,229,0.24);
  --fnav-text: rgba(239,238,229,0.85);
  --fnav-brass:#D9B26B;
  --fnav-brass-dark:#A87B2E;

  --c-geo:#3D6B8C;
  --c-perso:#4F7D72;
  --c-seign:#7A3B4A;
  --c-archi:#5C6E78;
  --c-brick:#6B4C70;
  --c-imobs:#C2622E;
  --c-omobs:#B8923A;
  --c-road:#8C6D2E;
  --c-event:#2C4D63;

  --font-display:'Fraunces', serif;
  --font-ui:'Public Sans', sans-serif;
  --font-mono:'Space Mono', monospace;
}

/* ===================== BARRE PRINCIPALE ===================== */

.fixa-nav{
  background: var(--fnav-ink);
  border-bottom: 1px solid var(--fnav-line);
  display:flex;
  align-items:center;
  gap:6px;
  padding: 0 18px;
  height:58px;
  position:sticky;
  top:0;
  z-index:200;
  font-family: var(--font-ui);
}

.fixa-nav-brand{
  font-family: var(--font-display);
  font-weight:600;
  font-size:18px;
  color: var(--fnav-bone-raised);
  text-decoration:none;
  margin-right:10px;
  white-space:nowrap;
}
.fixa-nav-brand span{ color: var(--fnav-brass); }

.fixa-nav-group{ position:relative; }

.fixa-nav-link{
  display:flex; align-items:center; gap:6px;
  background:none; border:none; cursor:pointer;
  color: var(--fnav-text);
  font-family: var(--font-ui);
  font-size:13.5px;
  font-weight:500;
  padding:9px 12px;
  border-radius:4px;
  text-decoration:none;
}
.fixa-nav-link:hover, .fixa-nav-link.is-open{ background: rgba(239,238,229,0.07); color:#fff; }
.fixa-nav-link svg{ width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:1.8; }

.fixa-nav-spacer{ flex:1; }

.fixa-nav-icons{ display:flex; align-items:center; gap:4px; }
.fixa-nav-icon{
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  color: var(--fnav-text);
  text-decoration:none;
  position:relative;
  background:none; border:none; cursor:pointer;
}
.fixa-nav-icon:hover{ background: rgba(239,238,229,0.08); color:#fff; }
.fixa-nav-icon svg{ width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.7; }
.fixa-nav-icon .badge-count{
  position:absolute; top:1px; right:1px;
  background: var(--c-event);
  color:#fff;
  font-family: var(--font-mono);
  font-size:9px;
  line-height:1;
  padding:2px 4px;
  border-radius:8px;
  min-width:14px;
  text-align:center;
}

.fixa-nav-avatar{
  width:30px; height:30px;
  border-radius:50%;
  background: var(--fnav-brass-dark);
  color: var(--fnav-ink);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-mono);
  font-weight:700;
  font-size:12px;
  text-transform:uppercase;
}

/* ===================== MÉGA-MENU "EXPLORER" ===================== */

.fixa-mega{
  position:fixed;
  left:0; right:0; top:58px;
  background: var(--fnav-bone-raised);
  border-bottom:1px solid rgba(22,36,44,0.18);
  box-shadow: 0 14px 28px rgba(0,0,0,0.18);
  display:none;
  z-index:199;
  max-height: calc(100vh - 58px);
  overflow-y:auto;
}
.fixa-mega.is-open{ display:block; }

.fixa-mega-grid{
  display:flex;
  flex-wrap:wrap;
  gap:0;
  max-width:1280px;
  margin:0 auto;
  padding: 22px 18px 26px;
}
.fixa-mega-col{
  flex: 1 1 220px;
  min-width:200px;
  padding: 0 16px 16px;
  border-left:3px solid var(--cat-color, #A87B2E);
  margin: 0 6px 6px 0;
}
.fixa-mega-col .head{
  display:flex; align-items:center; gap:8px;
  margin-bottom:10px;
}
.fixa-mega-col .head .ic{
  width:28px; height:28px; border-radius:50%;
  border:1.5px solid var(--cat-color, #A87B2E);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.fixa-mega-col .head .ic svg{ width:14px; height:14px; stroke: var(--cat-color, #A87B2E); fill:none; stroke-width:1.7; }
.fixa-mega-col .head h4{
  font-family: var(--font-display);
  font-weight:600;
  font-size:14.5px;
  margin:0;
  color:#16242C;
}
.fixa-mega-col ul{ list-style:none; margin:0; padding:0; }
.fixa-mega-col li{ margin-bottom:6px; }
.fixa-mega-col a{
  font-size:12.5px;
  color:#3F4F55;
  text-decoration:none;
}
.fixa-mega-col a:hover{ color: var(--cat-color, #A87B2E); text-decoration:underline; }

/* ===================== MENU UTILISATEUR / RÉFÉRENTIELS ===================== */

.fixa-dropdown{
  position:absolute;
  top:46px; right:0;
  background: var(--fnav-bone-raised);
  border:1px solid rgba(22,36,44,0.18);
  box-shadow: 0 12px 24px rgba(0,0,0,0.2);
  border-radius:6px;
  min-width:220px;
  padding:8px;
  display:none;
  z-index:201;
}
.fixa-dropdown.is-open{ display:block; }
.fixa-dropdown.is-wide{ min-width:540px; }
.fixa-dropdown a, .fixa-dropdown button{
  display:flex; align-items:center; gap:9px;
  width:100%;
  text-align:left;
  font-family: var(--font-ui);
  font-size:13px;
  color:#26343A;
  text-decoration:none;
  padding:8px 10px;
  border-radius:4px;
  background:none; border:none; cursor:pointer;
}
.fixa-dropdown a:hover, .fixa-dropdown button:hover{ background: rgba(168,123,46,0.08); }
.fixa-dropdown a svg, .fixa-dropdown button svg{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.7; flex-shrink:0; }
.fixa-dropdown hr{ border:none; border-top:1px solid rgba(22,36,44,0.1); margin:6px 0; }
.fixa-dropdown .danger{ color: #B8923A; }
.fixa-dropdown-title{
  font-family: var(--font-mono);
  font-size:10px;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:#8A9296;
  padding:8px 10px 4px;
}
.fixa-dropdown-cols{ display:flex; gap:4px; }
.fixa-dropdown-cols > div{ flex:1; min-width:0; }

/* ===================== TIROIR MOBILE ===================== */

.mobile-menu{
  position:fixed; top:58px; left:0; right:0; bottom:0;
  background: var(--fnav-ink);
  transform: translateX(-100%);
  transition: transform .25s ease;
  z-index:198;
  overflow-y:auto;
  font-family: var(--font-ui);
}
.mobile-menu.active{ transform: translateX(0); }

.mobile-section{ border-bottom:1px solid var(--fnav-line); }
.mobile-section-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px;
  cursor:pointer;
  color: var(--fnav-bone-raised);
}
.mobile-section-header .left{ display:flex; align-items:center; gap:10px; }
.mobile-section-header .ic{
  width:26px; height:26px; border-radius:50%;
  border:1.5px solid var(--cat-color, #A87B2E);
  display:flex; align-items:center; justify-content:center;
}
.mobile-section-header .ic svg{ width:13px; height:13px; stroke: var(--cat-color, #A87B2E); fill:none; stroke-width:1.7; }
.mobile-section-header span.label{ font-size:14px; font-weight:600; }
.mobile-section-header .chev{ width:16px; height:16px; stroke: var(--fnav-text); fill:none; stroke-width:1.8; transition: transform .2s; }
.mobile-section.open .chev{ transform: rotate(180deg); }

.mobile-section-body{ display:none; padding: 0 18px 14px 54px; }
.mobile-section.open .mobile-section-body{ display:block; }
.mobile-section-body a{
  display:block;
  font-size:13px;
  color: var(--fnav-text);
  text-decoration:none;
  padding:6px 0;
}
.mobile-section-body a:hover{ color:#fff; }

.mobile-nav-footer{
  display:flex; flex-wrap:wrap;
  gap:4px;
  padding:16px 14px;
}
.mobile-nav-icon{
  display:flex; flex-direction:column; align-items:center; gap:5px;
  flex:1 1 70px;
  padding:10px 4px;
  color: var(--fnav-text);
  text-decoration:none;
  border-radius:6px;
  background:none; border:none; cursor:pointer;
  font-family: var(--font-ui);
}
.mobile-nav-icon:hover{ background: rgba(239,238,229,0.06); color:#fff; }
.mobile-nav-icon svg{ width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.7; }
.mobile-nav-icon span{ font-size:10.5px; }
.mobile-nav-icon--danger{ color:#C2622E; }

/* ===================== RESPONSIVE ===================== */

@media (max-width: 880px){
  .fixa-nav .fixa-nav-group:not(.fixa-nav-account){ display:none; }
  .fixa-nav .hamburger{ display:flex; order:-1; }
  .fixa-mega{ display:none !important; }
}

@media (min-width: 881px){
  .mobile-menu, .hamburger{ display:none; }
}

/* ===================== COMPATIBILITÉ : anciens icon-btn de {% block creation %} ===================== */
/* De nombreuses apps injectent leur propre bouton "créer" via un include
   générique utilisant les anciennes classes .icon-btn/.nav-link. On les
   restyle ici pour qu'ils s'intègrent visuellement à la nouvelle barre,
   sans avoir à modifier chaque creation.html un par un. */

.fixa-nav-icons .icon-btn{
  min-width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  border-radius:18px;
  padding:0 4px;
  background:none;
}
.fixa-nav-icons .icon-btn:hover{ background: rgba(239,238,229,0.08); }
.fixa-nav-icons .icon-btn .nav-link, .fixa-nav-icons .icon-btn .nav-link:visited{
  font-family: var(--font-ui);
  font-size:12px;
  font-weight:600;
  color: var(--fnav-text);
  text-decoration:none;
  display:flex; align-items:center; justify-content:center;
  gap:4px;
  padding:0 6px;
}
.fixa-nav-icons .icon-btn .nav-link:hover{ color:#fff; }
/* Icônes PNG déjà en couleur (pas un simple trait monochrome) : on ne les
   "blanchit" plus — le filtre cassait leurs couleurs d'origine en les
   inversant. On leur donne plutôt un disque clair pour qu'elles restent
   nettement visibles sur le fond sombre de la barre. */
.fixa-nav-icons .icon-btn .nav-link img{
  width:22px; height:22px;
  object-fit:contain;
  background: var(--fnav-bone-raised, #F8F7F0);
  border-radius:50%;
  padding:2px;
  box-sizing:border-box;
}
.mobile-nav-footer .icon-btn{
  display:flex; flex-direction:column; align-items:center; gap:5px;
  flex:1 1 70px; padding:10px 4px; border-radius:6px;
}
.mobile-nav-footer .icon-btn .nav-link{ font-size:10.5px; color: var(--fnav-text); display:flex; flex-direction:column; align-items:center; gap:5px; text-decoration:none; }
.mobile-nav-footer .icon-btn .nav-link img{
  width:22px; height:22px;
  background: var(--fnav-bone-raised, #F8F7F0);
  border-radius:50%;
  padding:2px;
  box-sizing:border-box;
}