/* Barre de navigation du jeu : UNIQUE source, chargée après public.css sur les pages du
   plugin, et sur les pages WordPress du jeu (voir render-common.php). Ordre des règles inchangé. */
.wc-nav-bar{
    position:fixed;
    bottom:0; left:0; right:0;
    padding-bottom:env(safe-area-inset-bottom,0px);
    display:flex;
    background:#fff;
    border-radius:16px 16px 0 0;
    box-shadow:0 -4px 20px rgba(63,42,28,.12);
    border-top:3px solid #a07d70;
    z-index:200;
}
.wc-nav-item{
    flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:10px 2px 12px; text-decoration:none; color:#c4a99e; gap:5px; transition:color .15s;
}
.wc-nav-item:hover{ color:#a07d70; }
.wc-nav-active{ color:#3d3028!important; }
/* Sur grand écran, les items restent groupés au centre plutôt que de s'étirer sur
   toute la largeur, tout en gardant le fond de la barre ancré bord à bord.
   IMPORTANT : cette règle doit rester APRÈS .wc-nav-item ci-dessus. Elle était
   auparavant déclarée plus haut dans le fichier, donc écrasée par le flex:1 de la
   règle de base — le centrage ne s'appliquait jamais sur les pages du plugin,
   alors qu'il marchait sur les pages WordPress (dont le CSS inline a le bon ordre). */
@media(min-width:720px){
    .wc-nav-bar{ justify-content:center; }
    .wc-nav-item{ flex:0 0 112px; }
}
/* Appel à l'ouverture de la page, en deux temps : la barre entière arrive par
   le bas et rebondit légèrement comme un objet qui se pose, puis les icônes se
   dévoilent une à une juste après, avec leur propre petit rebond. Le mouvement
   (plutôt qu'un simple changement de couleur) est ce qui attire vraiment l'œil.
   Joué une seule fois, pas en boucle, pour ne pas devenir agaçant. */
@keyframes wc-nav-bounce{
    0%   { transform:translateY(100%) scale(.92); }
    58%  { transform:translateY(-5px) scale(1.012); }
    100% { transform:translateY(0) scale(1); }
}
@keyframes wc-nav-icon-pop{
    0%   { opacity:0; transform:translateY(10px) scale(.55); }
    65%  { opacity:1; }
    100% { opacity:1; transform:translateY(0) scale(1); }
}
.wc-nav-bar{
    animation: wc-nav-bounce .62s cubic-bezier(.34,1.56,.64,1) .05s 1 both;
    transform-origin: bottom center;
}
.wc-nav-item{
    opacity:0;
    animation: wc-nav-icon-pop .45s cubic-bezier(.34,1.56,.64,1) both;
}
.wc-nav-item:nth-child(1){ animation-delay:.30s; }
.wc-nav-item:nth-child(2){ animation-delay:.37s; }
.wc-nav-item:nth-child(3){ animation-delay:.44s; }
.wc-nav-item:nth-child(4){ animation-delay:.51s; }
.wc-nav-item:nth-child(5){ animation-delay:.58s; }
.wc-nav-item:nth-child(n+6){ animation-delay:.58s; } /* filet de sécurité si un jour un 6e item s'ajoute */
@media(prefers-reduced-motion:reduce){
    .wc-nav-bar{ animation:none; }
    .wc-nav-item{ animation:none; opacity:1; }
}
.wc-nav-active .wc-nav-ic{ background:#f5edd8; border-radius:50%; width:30px; height:30px; }
.wc-nav-ic{ width:22px; height:22px; display:flex; align-items:center; justify-content:center; transition:all .2s; flex-shrink:0; position:relative; }
.wc-nav-dot{ position:absolute; top:-1px; right:-1px; width:9px; height:9px; border-radius:50%; background:#c89b4a; border:1.5px solid #fff; animation:wc-nav-dot-pulse 2.2s ease-in-out infinite; }
@keyframes wc-nav-dot-pulse{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.25); opacity:.75; } }
@media(prefers-reduced-motion:reduce){ .wc-nav-dot{ animation:none; } }
.wc-nav-ic svg{ width:20px; height:20px; flex-shrink:0; }
.wc-nav-ic svg.wc-nav-acorn{ width:19px; height:21px; }
.wc-nav-lb{ font-size:9px; font-weight:700; letter-spacing:.2px; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }