/* ═══════════════════════════════════════════════════════════════
   DarJadida Design System — LOT 5 : Bottom nav mobile + responsive/RTL
   Barre de navigation basse (style app), visible UNIQUEMENT ≤768px.
   Tokens --dj-* (LOT 1). Cohérent navbar LOT 2 / hero LOT 4.
═══════════════════════════════════════════════════════════════ */

/* ── Barre fixe (masquée par défaut, affichée en mobile) ─────── */
.dj-bottom-nav {
  display: none;
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 1040;                 /* > contenu, < lang-menu (1050) / modals */
  background: var(--dj-dark);
  border-top: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 -2px 12px rgba(0,0,0,.25);
  padding-bottom: env(safe-area-inset-bottom);  /* encoche iOS */
}

/* ── Onglet ─────────────────────────────────────────────────── */
.dj-bn-item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 58px;              /* zone tactile ≥44px largement */
  padding: 6px 2px;
  color: rgba(255,255,255,.72);  /* AA sur fond sombre */
  font-family: var(--dj-font-corps);
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--dj-transition);
}
.dj-bn-item i { font-size: 20px; line-height: 1; }
.dj-bn-item span { line-height: 1.1; white-space: nowrap; }
/* Nom du compte à la place de « Profil » : borné à la largeur de l'onglet */
.dj-bn-item .dj-nom-compte { max-inline-size: 100%; }
.dj-bn-item:active { color: #fff; }
.dj-bn-item:focus-visible {
  outline: 3px solid var(--dj-vert-clair);
  outline-offset: -3px;
  border-radius: var(--dj-radius-sm);
}

/* Onglet actif → vert clair (identite drapeau, cf retrait du dore) */
.dj-bn-item.is-active { color: var(--dj-vert-clair); }

/* Police arabe pour les labels en RTL */
html[lang="ar"] .dj-bn-item { font-family: var(--dj-font-ar-corps); font-size: 12px; }

/* ── CTA central "Déposer" : cercle vert en relief ──────────── */
.dj-bn-center { justify-content: flex-end; }
.dj-bn-fab {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-top: -22px;             /* surélevé au-dessus de la barre */
  border-radius: 50%;
  background: var(--dj-vert);
  color: #fff;
  border: 4px solid var(--dj-dark);
  box-shadow: 0 4px 12px rgba(0,98,51,.5);
  font-size: 24px;
}
.dj-bn-center:active .dj-bn-fab { background: var(--dj-vert-fonce); }
.dj-bn-center.is-active { color: var(--dj-vert-clair); }

/* ── Favoris (placeholder Phase 2) : légèrement atténué ─────── */
.dj-bn-soon { opacity: .6; }

/* ── Toast "bientôt disponible" ─────────────────────────────── */
.dj-bn-toast {
  position: fixed;
  left: 50%;
  bottom: calc(72px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 1060;
  background: rgba(26,31,46,.97);
  color: #fff;
  border: 1px solid rgba(102,161,133,.4);
  border-radius: 50px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: var(--dj-shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.dj-bn-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — seuil 768px
   ≤768 : bottom nav visible + navbar allégée (nav principale en bas)
   ≥769 : bottom nav masquée, navbar classique LOT 2
═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .dj-bottom-nav { display: flex; }

  /* Le dernier contenu (footer / dernière card) ne doit pas être
     caché par la barre fixe. */
  body { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }

  /* Navbar réduite : nav principale déléguée à la bottom nav →
     on masque hamburger, collapse et CTA top (redondants). */
  .dj-navbar-toggle   { display: none !important; }
  .dj-navbar-collapse { display: none !important; }
  .dj-btn-deposer     { display: none !important; }
}

/* ── Garde anti-débordement horizontal (toutes pages) ───────── */
/* overflow-x: clip ne crée pas de conteneur de défilement →
   ne casse PAS la navbar sticky (contrairement à overflow: hidden). */
html { overflow-x: clip; }

/* ═══════════════════════════════════════════════════════════════
   RTL — l'ordre des onglets s'inverse automatiquement (flex suit
   la direction d'écriture) : Accueil passe à droite. Le FAB central
   reste centré. Rien d'autre à forcer.
═══════════════════════════════════════════════════════════════ */