/* ====================================================================
   app-nav.css — barre de navigation basse (mobile), source unique.
   S'adapte aux deux thèmes via var(--x, fallback) : les pages Doux
   définissent déjà --card/--soft/--accent, les pages à l'ancien design
   sombre retombent sur les valeurs de repli ci-dessous.
   ==================================================================== */
#sos-app-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 9000;
  display: none;
  align-items: flex-end;
  justify-content: space-around;
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
  background: var(--card, rgba(255,255,255,0.88));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(20,30,50,0.08);
  box-shadow: 0 -6px 24px rgba(20,30,50,0.10);
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  /* Nom stable pour les View Transitions cross-document (app-shell.css) :
     la barre reste visuellement fixe pendant la transition au lieu de
     clignoter avec le reste du contenu. */
  view-transition-name: sos-app-nav;
}
@media (prefers-reduced-motion: reduce) {
  #sos-app-nav { view-transition-name: none; }
}
[data-theme="dark"] #sos-app-nav {
  background: rgba(8,7,6,0.88);
  border-top-color: rgba(255,255,255,0.08);
  box-shadow: 0 -6px 24px rgba(0,0,0,0.35);
}
@media (max-width: 900px) {
  #sos-app-nav { display: flex; }
}
.sos-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-sizing: border-box;
  min-height: 56px;
  padding: 6px 2px;
  border-radius: 14px;
  text-decoration: none;
  color: var(--soft, #4a5872);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1;
  max-width: 92px;
  -webkit-tap-highlight-color: transparent;
}
.sos-nav-item svg { width: 24px; height: 24px; }
[data-theme="dark"] .sos-nav-item { color: rgba(238,242,251,0.64); }
.sos-nav-item.active { color: var(--accent, #1e57d2); }
/* Onglet actif : petite pastille de fond derrière l'icône. */
.sos-nav-item.active svg { background: rgba(30,87,210,0.12); border-radius: 999px; padding: 3px 14px; box-sizing: content-box; margin: -3px 0; }
[data-theme="dark"] .sos-nav-item.active { color: #6ea8ff; }
[data-theme="dark"] .sos-nav-item.active svg { background: rgba(110,168,255,0.16); }
.sos-nav-fab {
  flex: 0 0 auto;
  width: 60px; height: 60px;
  margin: -26px 4px 0;
  border-radius: 50%;
  border: 4px solid var(--card, #fff);
  /* Corail d'action (texte blanc lisible, AA), comme --action du site. */
  background: #d6361a;
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.5px;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(214,54,26,0.40);
}
[data-theme="dark"] .sos-nav-fab { border-color: #080706; }