/* =========================================================
   AUTO KLIK - BOTTOM NAV (PWA / APP-LIKE)
   - Navbar mobile fixe en bas
   - Icônes SVG inline en currentColor
   - Onglet actif = .is-active
   - Barre active UNIQUE en haut qui glisse horizontalement
   ========================================================= */

/* Desktop : caché */
.ak-bottom-nav { display: none; }

/* Mobile / tablette */
@media (max-width: 1023.98px) {

  /* =========================
     NAV CONTAINER
     ========================= */
  .ak-bottom-nav{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;

    height: 70px;

    display: grid;
    grid-template-columns: repeat(5, 1fr);

    z-index: 11000;
    padding-bottom: env(safe-area-inset-bottom);

    background: rgba(255,255,255,1);
    border-top: 1px solid rgba(107, 114, 128, 0.1);
   

    /* IMPORTANT: pour placer la barre en absolute */
    overflow: visible;
  }

  /* =========================
     NAV ITEMS
     ========================= */
  .ak-nav-item{
    appearance: none;
    border: 0;
    background: transparent;
    text-decoration: none;

    color: #6b7280;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 2px;
    font-size: 11px;
    cursor: pointer;

    -webkit-tap-highlight-color: transparent;
    min-height: 64px;

    transition: color 160ms ease;
  }

  .ak-nav-item.is-active{
    color: #012c5b;
    font-weight: 600;
  }

  /* =========================
     ICONS (SVG inline)
     ========================= */
  .ak-nav-item .ak-ico{
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    line-height: 1;
  }

  .ak-nav-item .ak-ico svg{
    width: 22px;
    height: 22px;
    display: block;

    transition: transform 180ms cubic-bezier(.2,.8,.2,1);
    transform-origin: 50% 50%;
  }

  .ak-nav-item.is-active .ak-ico svg{
    transform: translateY(-1px) scale(1.06);
  }

  .ak-nav-item:active .ak-ico svg{
    transform: scale(.92);
  }

  /* Label */
  .ak-nav-item .ak-label{
    line-height: 1;
    transition: transform 180ms cubic-bezier(.2,.8,.2,1), opacity 180ms ease;
  }

  .ak-nav-item.is-active .ak-label{
    transform: translateY(-1px);
    opacity: 1;
  }

  .ak-nav-item:not(.is-active) .ak-label{
    opacity: .92;
  }

  /* Focus (accessibilité) */
  .ak-nav-item:focus-visible{
    outline: 2px solid rgba(1, 44, 91, 0.35);
    outline-offset: 2px;
    border-radius: 12px;
  }

  /* Empêche le contenu d’être caché sous la nav */
  main{ padding-bottom: 84px; }



/* =========================================================
   FIX centrage horizontal parfait du bouton Publish
   ========================================================= */

/* La cellule publish devient un repère */
.ak-nav-item--publish{
  position: relative;
}

/* On enlève toute influence du wrapper interne */
.ak-nav-item--publish .ak-ico{
  position: static;
}

/* Cercle centré EXACTEMENT dans la cellule */
.ak-nav-item--publish .ak-publish-btn{
  position: absolute;

  left: 50%;
  top: 0;

  transform: translateX(-50%) translateY(-18px);

  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 3px   solid   #fff;
  
  

  display: grid;
  place-items: center;

  background: #facc15;

 box-shadow:
    0 10px 22px rgba(0,0,0,.18),
    0 3px 10px rgba(0,0,0,.12);

  z-index: 3;

  transition: transform 220ms cubic-bezier(.2,.8,.2,1);
}

/* Icône */
.ak-svg--publish{
  width: 20px;
  height: 20px;
  color: #012c5b; 
}


/* Label */
  .ak-nav-item .publish-label{
    line-height: 1;
    font-weight:    bold;
    color: #012c5b ;
 
  }

/* Press effect */
.ak-nav-item--publish:active .ak-publish-btn{
  transform: translateX(-50%) translateY(-14px) scale(.95);
}

/* Réserve espace pour que le texte reste aligné */
.ak-nav-item--publish .ak-label{
  margin-top: 0px;
}




  /* =====================================================
     BARRE ACTIVE UNIQUE (GLISSANTE)
     - HTML requis :
       <span class="ak-active-indicator" aria-hidden="true"></span>
       à la fin du <nav>
     ===================================================== */

  .ak-active-indicator{
    position: absolute;
    top: 0;
    left: 0;

    /* zone = 1/5 de la navbar */
    width: 20%;
    height: 3px;

    pointer-events: none;

    transform: translateX(0%);
    transition: transform 320ms cubic-bezier(.22, .8, .22, 1);
    will-change: transform;
  }

  /* le “pill” visible au centre de la zone */
  .ak-active-indicator::before{
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);

    width: 48px;
    height: 3px;
    border-radius: 999px;
    background: #facc15;
  }

  /* Position selon l’onglet actif (les 5 items) */
  .ak-nav-item:nth-child(1).is-active ~ .ak-active-indicator{ transform: translateX(0%); }
  .ak-nav-item:nth-child(2).is-active ~ .ak-active-indicator{ transform: translateX(100%); }
  .ak-nav-item:nth-child(3).is-active ~ .ak-active-indicator{ transform: translateX(200%); }
  .ak-nav-item:nth-child(4).is-active ~ .ak-active-indicator{ transform: translateX(300%); }
  .ak-nav-item:nth-child(5).is-active ~ .ak-active-indicator{ transform: translateX(400%); }

}

/* Accessibilité : si l’utilisateur demande moins d’animations */
@media (prefers-reduced-motion: reduce){
  .ak-active-indicator,
  .ak-nav-item,
  .ak-nav-item .ak-ico svg,
  .ak-nav-item .ak-label{
    transition: none !important;
  }
}

/* View transitions (si supporté) */
@view-transition { navigation: auto; }

/* Stabiliser la navbar pendant la transition */
.ak-bottom-nav{ view-transition-name: ak-bottom-nav; }
::view-transition-group(ak-bottom-nav){
  animation-duration: 220ms;
}


/* =========================================================
   AUTO KLIK - PAGE LOADER (overlay)
   Actif uniquement sur devices tactiles (JS)
   - Ne doit PAS cacher la navbar -> z-index < 11000
   ========================================================= */

.ak-loader{
  position: fixed;
  inset: 0;

  /* IMPORTANT: sous la navbar (11000), au-dessus du contenu */
  z-index: 10000;

  display: grid;
  place-items: center;
  background: rgba(255,255,255,.92);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition: opacity 160ms ease, visibility 0s linear 160ms;
}

.ak-loader.is-on{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 160ms ease;
}

/* carte centrale */
.ak-loader__card{
  width: min(320px, 86vw);
  padding: 18px 18px 16px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 35px rgba(0,0,0,.12);

  display: grid;
  gap: 10px;
  place-items: center;
}

/* Logo (stable, pas de zoom) */
.ak-loader__logo{
  width: 90px;
  height: 90px;
  display: block;
  animation: none;
}

/* =========================================================
   BARRE DE PROGRESSION (indéterminée) sous le logo
   - HTML requis dans le loader :
     <div class="ak-loader__bar"><span class="ak-loader__barFill"></span></div>
   ========================================================= */

.ak-loader__bar{
  width: 180px;
  max-width: 70vw;
  height: 6px;
  border-radius: 999px;
  background: rgba(1,44,91,.12);
  overflow: hidden;
}

.ak-loader__barFill{
  display: block;
  height: 100%;
  width: 40%;
  border-radius: 999px;
  background: #012c5b;

  transform: translateX(-120%);
  animation: akBarIndeterminate 1100ms ease-in-out infinite;
}

@keyframes akBarIndeterminate{
  0%   { transform: translateX(-120%); }
  50%  { transform: translateX(80%); }
  100% { transform: translateX(220%); }
}

/* (Optionnel) 3 points — tu peux supprimer si tu veux un style plus clean */
.ak-loader__dots{
  display: inline-flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
}

.ak-loader__dots span{
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #012c5b;
  opacity: .25;
  animation: akDots 900ms ease-in-out infinite;
}
.ak-loader__dots span:nth-child(2){ animation-delay: 120ms; }
.ak-loader__dots span:nth-child(3){ animation-delay: 240ms; }

.ak-loader__text{
  font-size: 12px;
  color: #374151;
}

@keyframes akDots{
  0%   { transform: translateY(0); opacity: .25; }
  50%  { transform: translateY(-4px); opacity: .9; }
  100% { transform: translateY(0); opacity: .25; }
}

/* Accessibilité */
@media (prefers-reduced-motion: reduce){
  .ak-loader__barFill,
  .ak-loader__dots span{
    animation: none !important;
  }
  .ak-loader{
    transition: none !important;
  }
}