/* ==========================================================================
   Okaz.ma — complements du nouveau design (okz-)

   Ce fichier complete `redesign.okz.css` avec les elements qui n'existent
   pas dans les maquettes mais sont necessaires en production :

   - la barre de navigation basse mobile (l'app a une PWA mobile)
   - le tiroir (drawer) de navigation mobile
   - le bouton « retour en haut »
   - quelques utilitaires de mise en page

   Les classes sont prefixees `okz-` comme tout le design system.
   ========================================================================== */

/* --- Polices ---------------------------------------------------------------
   Le design system (redesign.okz.css) utilise 'Plus Jakarta Sans' mais ne
   declare pas les @font-face : ils vivent dans public/app.css, que le
   layout `okz-` ne charge pas (il ne charge que les CSS okz-).

   Sans ces declarations, le navigateur retombe sur une police systeme :
   le nouveau design n'a pas la meme typo que la maquette.

   Meme fichiers que public/app.css, donc aucun doublon de telechargement
   si les deux stylesheets sont charges sur la meme page.

   En arabe (locale `ar`), le RTL utilise 'Noto Sans Arabic' : Plus Jakarta
   Sans n'a pas de glyphees arabes, le rendu serait heterogene.
   --------------------------------------------------------------------- */
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/plus-jakarta-sans-latin-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/plus-jakarta-sans-latin-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/plus-jakarta-sans-latin-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/plus-jakarta-sans-latin-700.woff2') format('woff2');
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('/fonts/plus-jakarta-sans-latin-800.woff2') format('woff2');
}
@font-face {
    font-family: 'Noto Sans Arabic';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/noto-sans-arabic-arabic-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Noto Sans Arabic';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/noto-sans-arabic-arabic-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Noto Sans Arabic';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/noto-sans-arabic-arabic-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Noto Sans Arabic';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/noto-sans-arabic-arabic-700.woff2') format('woff2');
}

/* L'arabe utilise Noto Sans Arabic : Plus Jakarta Sans n'a pas de
   glyphees arabes. */
html[dir='rtl'] body.okz-body {
    font-family: 'Noto Sans Arabic', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* --- Barre de navigation basse (mobile) ---------------------------------- */
.okz-bottom-nav {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 60;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: saturate(180%) blur(18px);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    border-top: 1px solid var(--line);
    padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0px));
}
.okz-bottom-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 4px 10px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--ink-3);
    min-width: 56px;
}
.okz-bottom-nav a:hover { color: var(--ink); }
.okz-bottom-nav a.is-active { color: var(--brand); }
.okz-bottom-nav a i { font-size: 17px; line-height: 1; }

.okz-bottom-nav-publish {
    margin-top: -22px;
}
.okz-bottom-nav-publish i {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 18px;
    box-shadow: var(--okz-shadow-blue);
}
.okz-bottom-nav-publish:hover i { background: var(--brand-600); }

.okz-bottom-nav-badge-wrap { position: relative; display: block; }
.okz-bottom-nav-badge {
    position: absolute;
    top: -6px;
    inset-inline-end: -10px;
    background: #E5484D;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    padding: 0 4px;
}

/* --- Corps : reserve la place de la barre basse sur mobile ---------------- */
@media (max-width: 820px) {
    .okz-body { padding-bottom: 72px; }
}

/* --- Barre basse : mobile uniquement --------------------------------------
   En desktop le header (logo + recherche + actions) suffit : la barre
   basse fixee recouvrait le contenu et se superposait aux stats. */
@media (min-width: 821px) {
    .okz-bottom-nav { display: none !important; }
}

/* --- Bouton retour en haut ------------------------------------------------ */
.okz-to-top {
    position: fixed;
    inset-inline-end: 20px;
    bottom: 92px;
    z-index: 55;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink-2);
    display: grid;
    place-items: center;
    box-shadow: var(--okz-shadow-card-md);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s, visibility .2s, transform .2s;
    transform: translateY(8px);
    cursor: pointer;
}
.okz-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.okz-to-top:hover { color: var(--brand); border-color: var(--brand); }

/* --- Tiroir mobile --------------------------------------------------------- */
.okz-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(8, 14, 28, .45);
    z-index: 70;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s, visibility .25s;
}
.okz-drawer.open .okz-drawer-overlay { opacity: 1; visibility: visible; }

.okz-drawer-panel {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    width: min(320px, 86vw);
    background: #fff;
    z-index: 71;
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.4, 0, .2, 1);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    box-shadow: 0 0 40px rgba(8, 14, 28, .18);
}
html[dir="rtl"] .okz-drawer-panel { transform: translateX(100%); }
.okz-drawer.open .okz-drawer-panel { transform: translateX(0); }

.okz-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid var(--line);
}
.okz-drawer-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 20px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink-2);
    border-bottom: 1px solid var(--line);
}
.okz-drawer-link:hover { background: var(--bg); color: var(--brand); }
.okz-drawer-link i { width: 18px; text-align: center; color: var(--ink-3); }

/* --- Grille d'annonces : ajustements de densite ---------------------------- */
.okz-grid { align-items: stretch; }
.okz-grid > * { display: block; height: 100%; }

/* --- Impression ----------------------------------------------------------- */
@media print {
    .okz-hdr, .okz-bottom-nav, .okz-to-top { display: none !important; }
}