/* ---------- Dock mobile (bas) ---------- */
.nav-mobile {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /* env(safe-area-inset-bottom) = zone de la barre d'accueil iOS ; le dock l'englobe
     plutôt que de laisser du contenu cliquable dessous. Vaut 0 ailleurs. */
  height: calc(var(--nav-height-mobile) + env(safe-area-inset-bottom, 0px));
  padding: 0 8px env(safe-area-inset-bottom, 0px);
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 30;
}

@media (min-width: 900px) {
  .nav-mobile {
    display: none;
  }
}

.nav-mobile__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--text);
  flex: 1;
  position: relative;
  top: 5px;
}

.nav-mobile__item svg {
  width: 24px;
  height: 24px;
}

.nav-mobile__item.is-active {
  color: var(--accent);
}

/* Icône centrale (Recettes) mise en valeur : plus grande, surélevée */
.nav-mobile__item--main {
  transform: translateY(-14px);
}

.nav-mobile__item--main .nav-mobile__bubble {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-contrast);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);

}
.nav-mobile__item--main .nav-mobile__bubble:hover{
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(0, 122, 255, 0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Mode Îdiää : la bulle elle-même suit déjà var(--accent) (noir), mais cette ombre au
   survol est codée en dur en bleu (seule couleur bleue en dur du repo, hors
   variables.css) — remplacée par un gris translucide pour rester monochrome. */
:root[data-theme="idiaa"] .nav-mobile__item--main .nav-mobile__bubble:hover {
  box-shadow: 0 6px 20px rgba(29, 29, 31, 0.35);
}

.nav-mobile__item--main .nav-mobile__bubble svg {
  width: 28px;
  height: 28px;
}

.nav-mobile__item--main.is-active .nav-mobile__bubble {
  background: var(--accent);
}

/* ---------- Sidebar desktop (gauche) ---------- */
.nav-desktop {
  display: none;
}

@media (min-width: 900px) {
  .nav-desktop {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
    left: 0;
    bottom: 0;
    width: var(--nav-width-desktop);
    padding: 24px 12px;
    background: var(--surface);
    border-right: 1px solid var(--border);
    z-index: 30;
  }
}

.nav-desktop__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: var(--radius-sm);
  color: var(--text);
  background: transparent;
  font-size: 14px;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.nav-desktop__item svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.nav-desktop__item span {
  color: var(--text-muted);
  transition: color 0.2s ease;
}

.nav-desktop__item.is-active {
  color: var(--accent);
}

.nav-desktop__item.is-active span,
.nav-desktop__item:hover span {
  color: var(--accent);
}

.nav-desktop__item:hover {
  background: var(--accent-tint);
  color: var(--accent);
}

.nav-desktop__spacer {
  flex: 1;
}

/* Mode Îdiää : le label suit par défaut var(--text-muted) (gris estompé, cf. plus
   haut) — pas assez lisible sur les panneaux vitrés de ce thème. Icône et texte du
   menu de gauche restent tous les deux var(--text), y compris au survol/actif (où ils
   valent déjà var(--text) dans ce thème puisque --accent = --text, monochrome, voir
   variables.css — donc aucun changement visuel sur ces états, juste plus explicite). */
:root[data-theme="idiaa"] .nav-desktop__item,
:root[data-theme="idiaa"] .nav-desktop__item span {
  color: var(--text);
}

/* Mode Îdiää : la page active se distingue aussi par la graisse du texte (pas
   seulement la couleur — inutile de toute façon en Îdiää, voir juste au-dessus, l'item
   actif a déjà la même couleur var(--text) que les autres). */
:root[data-theme="idiaa"] .nav-desktop__item.is-active span {
  font-weight: 600;
}

/* ---------- Badge "message non lu" (item Amis, assets/js/unread-nav-badge.js) ---------- */
/* hidden par défaut (attribut HTML, voir nav-desktop.php/nav-mobile.php), dévoilé par
   unread-nav-badge.js dès qu'au moins une conversation a un message non lu. Fond
   transparent (aucun disque plein derrière, demandé explicitement) — icône bleue fixe
   (--unread-badge, variables.css), reste bleue même en mode Îdiää monochrome, comme
   --danger ailleurs dans l'app. Superposé au coin du SVG ami, desktop ET mobile
   (demandé explicitement) — voir .nav-badge-wrap plus bas, posé autour de la seule
   icône dans les deux contextes. Valeurs de base pensées pour la sidebar desktop (icône
   22px, voir .nav-desktop__item svg) ; le dock mobile (icône 24px) a ses propres
   réglages ci-dessous. */
.nav-badge {
  position: absolute;
  top: -4px;
  right: -12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
}

/* Piège rencontré (même famille que #ovenTempGroup, voir CLAUDE.md racine du projet) :
   "display: flex" ci-dessus, posé par l'auteur, a la même spécificité qu'une
   classe (0,0,1,0) — à spécificité égale, une règle auteur l'emporte TOUJOURS sur la
   règle "[hidden] { display: none }" du navigateur (origine UA, priorité la plus basse
   de la cascade quelle que soit la spécificité). Résultat : l'attribut hidden posé par
   défaut (nav-desktop.php/nav-mobile.php) et retiré/reposé par unread-nav-badge.js était
   totalement neutralisé — le badge restait affiché en permanence, y compris sans aucun
   message non lu. Corrigé en réaffirmant display:none pour ce cas précis, avec une
   spécificité (classe + attribut) supérieure à la règle display:inline-flex seule
   ci-dessus, qui gagne donc systématiquement quand hidden est présent. */
.nav-badge[hidden] {
  display: none;
}

.nav-badge svg {
  width: 14px;
  height: 14px;
}

/* Piège rencontré : ":root[data-theme='idiaa'] .nav-desktop__item span" (plus haut dans
   ce fichier) a une spécificité plus élevée qu'une simple règle ".nav-badge" (:root +
   attribut + classe + type = 4 équivalents "classe", contre 1 pour .nav-badge seule) et
   repassait donc ce badge en monochrome (var(--text)) en mode Îdiää. Corrigé en
   réaffirmant explicitement la couleur avec une spécificité au moins égale, scopée au
   même thème — le badge doit rester bleu fixe dans les 3 thèmes, jamais soumis à
   --accent/--text. */
.nav-desktop__item .nav-badge,
.nav-mobile__item .nav-badge {
  color: var(--unread-badge);
}

:root[data-theme="idiaa"] .nav-desktop__item .nav-badge,
:root[data-theme="idiaa"] .nav-mobile__item .nav-badge {
  color: var(--unread-badge);
}

/* Posé autour de la seule icône, desktop ET mobile (voir nav-desktop.php/
   nav-mobile.php) : superpose le badge à son coin sans dépendre du reste de la ligne
   (libellé texte en desktop, largeur variable du dock en mobile). */
.nav-badge-wrap {
  position: relative;
  display: inline-flex;
}

/* Dock mobile : réglages propres (icône 24px, plus grande qu'en desktop), ajustés à la
   demande — décalé vers le bas/la droite par rapport au coin de l'icône, et légèrement
   plus grand que la taille de base (14px). */
.nav-mobile__item .nav-badge {
  top: -5px;
  right: -14px;
  width: 16px;
  height: 16px;
}

.nav-mobile__item .nav-badge svg {
  width: 16px;
  height: 16px;
}