/* ---------- 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;
}

/* +20% (24px -> 28.8px), demandé explicitement — icônes latérales du dock (Amis,
   Liste de courses, Menus planifiés, Paramètres). N'affecte pas l'icône de la bulle
   centrale "Recettes" (déjà sa propre taille dédiée, voir .nav-mobile__item--main
   .nav-mobile__bubble svg plus bas), qui ne matche pas ce sélecteur générique. */
.nav-mobile__item svg {
  width: 28.8px;
  height: 28.8px;
}

/* Bleu FIXE (#007aff, même valeur que --unread-badge), pas var(--accent) — demandé
   explicitement : en mode clair/sombre var(--accent) est déjà bleu donc ça ne changeait
   rien de visible, mais en mode Îdiää (thème par défaut, monochrome intégral)
   var(--accent) vaut --text (noir), donc l'icône active n'y ressortait pas du tout.
   Même famille d'exception que --unread-badge/--svg-hover/--danger (variables.css) :
   quelques couleurs restent volontairement hors du monochrome Îdiää pour rester des
   indicateurs visuellement distincts. */
.nav-mobile__item.is-active {
  color: #007aff;
}

/* 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);

}
/* Survol du dock : UNIQUEMENT pour un vrai pointeur (souris/trackpad), demandé
   explicitement — inutile en tactile (téléphone ET tablette, voir CLAUDE.md /
   Détection tactile vs pointeur) : au doigt, `:hover` se déclenche au tap et peut
   rester "collé" jusqu'au tap suivant ailleurs, sans jamais correspondre à un vrai
   survol. Basé sur `hover`/`pointer` (capacité d'entrée réelle), pas sur le breakpoint
   900px — même principe déjà établi pour les tooltips/le glissement des lignes Amis. */
@media (hover: hover) and (pointer: fine) {
  .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 (une des rares couleurs bleues en dur du repo, hors
     variables.css — voir aussi .nav-mobile__item.is-active plus haut) — 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);
  }
}

/* +40%, demandé explicitement (28px de base, comme les autres icônes du dock). */
.nav-mobile__item--main .nav-mobile__bubble svg {
  width: 39px;
  height: 39px;
}

/* Mode Îdiää uniquement, demandé explicitement ("sur la page recette, le fond de
   l'icône recette doit être bleu") : sans cette règle, la bulle reste TOUJOURS
   var(--accent) (posé sans condition d'état actif juste au-dessus) — bleu en
   clair/sombre (déjà correct, var(--accent) y vaut le bleu système, rien à changer),
   mais noir dans TOUS les cas en Îdiää (monochrome, var(--accent) = var(--text)), y
   compris sur la page recette elle-même : aucune distinction visuelle active/inactive
   pour cette bulle précise. Même bleu fixe #007aff que .nav-mobile__item.is-active
   (icônes latérales, voir plus haut) — même exception déjà établie au monochrome
   Îdiää, ici étendue à la bulle centrale. */
:root[data-theme="idiaa"] .nav-mobile__item--main.is-active .nav-mobile__bubble {
  background: #007aff;
}

/* ---------- 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;
  }

  /* Refonte couleurs sombre en cours (voir variables.css) — valeur fixe demandée
     explicitement plutôt que --surface (partagée avec d'autres éléments non
     concernés par cette demande). */
  :root[data-theme="dark"] .nav-desktop {
    background: rgb(39, 39, 39);
  }
}

.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 {
  color: var(--accent);
}

/* Survol UNIQUEMENT au pointeur réel — la sidebar s'affiche aussi sur une tablette en
   mode paysage (≥900px, layout desktop) pilotée au doigt, voir CLAUDE.md / Détection
   tactile vs pointeur : même raison que le dock ci-dessus. */
@media (hover: hover) and (pointer: fine) {
  .nav-desktop__item:hover span {
    color: var(--accent);
  }

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

.nav-desktop__spacer {
  flex: 1;
}

/* Liens CGU/Confidentialité, tout en bas de la sidebar (voir includes/nav-desktop.php)
   — volontairement discrets (petite taille, teinte atténuée), pas des .nav-desktop__item
   comme le reste du menu : ce ne sont pas des sections de l'app, juste des pages
   légales de référence. */
.nav-desktop__footer {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 12px 12px;
}

.nav-desktop__footer a {
  font-size: 12px;
  color: var(--text-muted);
  text-decoration: none;
}

/* Survol UNIQUEMENT au pointeur réel — même raison que .nav-desktop__item ci-dessus. */
@media (hover: hover) and (pointer: fine) {
  .nav-desktop__footer a:hover {
    color: var(--accent);
    text-decoration: underline;
  }
}

/* Bouton "Installer l'application PWA" (#pwaInstallBtn) — même échelle discrète que les
   liens légaux voisins (12px, var(--text-muted)), mais avec une icône (les liens légaux
   n'en ont pas) : bouton natif réinitialisé (fond/bordure transparents, pas de padding
   propre) pour ne se distinguer visuellement des <a> du dessous que par l'icône. Masqué
   par défaut en HTML (`hidden`, voir nav-desktop.php) — dévoilé par
   assets/js/pwa-install.js seulement si le navigateur confirme pouvoir installer. */
.nav-desktop__install-pwa {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  text-align: left;
}

.nav-desktop__install-pwa svg {
  /* Grossie de 100% (14px -> 28px), demandé explicitement. */
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

/* Survol UNIQUEMENT au pointeur réel — même raison que .nav-desktop__item ci-dessus. */
@media (hover: hover) and (pointer: fine) {
  .nav-desktop__install-pwa:hover {
    color: var(--accent);
  }
}

/* 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;
}

/* "Menus planifiés" (sidebar desktop uniquement), demandé explicitement — badge à
   DROITE DU TEXTE plutôt que superposé au coin de l'icône (contrairement à "Amis"
   ci-dessus) : annule le positionnement absolu de .nav-badge (top/right), reprend le
   flux normal juste après le libellé. 28px (bien plus grand que la pastille superposée,
   14px) — sa propre icône "new-badge" (voir includes/icons.php/meal-events.js), pas la
   petite icône .nav-badge svg générique ("unread"). Couleur déjà héritée de
   .nav-desktop__item .nav-badge (bleu fixe, y compris en Îdiää) — .nav-badge--inline ne
   porte que ces deux classes ensemble (voir nav-desktop.php), rien à redéclarer. */
.nav-badge--inline {
  position: static;
  width: 28px;
  height: 28px;
  margin-left: 4px;
}

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