/* ==========================================================
   OZ Criteria — colonne « Affiner la recherche » (en escalier)
   Balises neutres (div/button) + classes préfixées .ozf-* :
   aucune règle du thème (h4, section, ol…) ne peut les déformer.
   ========================================================== */

/* ---------- Mise en page : colonne gauche + résultats à droite ---------- */
.listings-section.ozf-has-side {
    display: grid;
    grid-template-columns: 310px minmax(0, 1fr);
    column-gap: 26px;
    align-items: start;
}
.listings-section.ozf-has-side > * { grid-column: 2; min-width: 0; }
.listings-section.ozf-has-side > #ozf-root {
    grid-column: 1;
    grid-row: 1 / span 40;
    position: sticky;
    top: 14px;
    align-self: start;
    max-height: calc(100vh - 28px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}
.listings-section.ozf-has-side #listings-container {
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

/* ---------- Carte latérale ---------- */
.ozf {
    --ozf-accent: #f97316;
    --ozf-accent-soft: #fff7ed;
    --ozf-accent-dark: #c2410c;
    --ozf-navy: #1e3a8a;
    --ozf-line: #e5e7eb;
    --ozf-text: #111827;
    --ozf-muted: #6b7280;
    box-sizing: border-box;
    width: 100%;
    background: #fff;
    border: 1px solid var(--ozf-line);
    border-radius: 16px;
    box-shadow: 0 4px 18px rgba(17, 24, 39, .07);
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.35;
    color: var(--ozf-text);
    text-align: left;
}
.ozf *, .ozf *::before, .ozf *::after { box-sizing: border-box; }
.lang-ar .ozf { direction: rtl; text-align: right; }
/* Neutralise tout compteur / décor hérité du thème */
.ozf-label::before, .ozf-label::after, .ozf-step::after,
.ozf-step-head::before, .ozf-step-head::after { content: none !important; }
.ozf button { font-family: inherit; }

/* ---------- En-tête ---------- */
.ozf-head {
    padding: 16px 18px 12px;
    background: linear-gradient(135deg, #1e3a8a, #2f5bd1);
    color: #fff;
    border-radius: 15px 15px 0 0;
}
.ozf-head-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ozf-title { font-size: 15.5px; font-weight: 700; display: flex; align-items: center; gap: 9px; }
.ozf-count { margin-top: 6px; font-size: 13.5px; opacity: .92; }
.ozf-count b { font-size: 20px; font-weight: 800; margin-right: 4px; }
.ozf-reset {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px; border: 1px solid rgba(255,255,255,.45); border-radius: 999px;
    background: transparent; color: #fff; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.ozf-reset:hover { background: rgba(255,255,255,.16); }
.ozf-mtoggle { display: none; }

/* ---------- Corps ---------- */
.ozf-body { padding: 14px 16px 16px; }
.ozf-sortrow { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.ozf-sortrow label { font-size: 12.5px; color: var(--ozf-muted); white-space: nowrap; }

.ozf-active { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ozf-active:empty { display: none; }
.ozf-tag {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 4px 3px 10px; background: #eff6ff; color: var(--ozf-navy);
    border: 1px solid #dbeafe; border-radius: 999px; font-size: 12.5px;
}
.ozf-tag b { font-weight: 600; }
.ozf-tag button {
    width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%;
    background: #dbeafe; color: var(--ozf-navy); cursor: pointer; font-size: 10px;
    display: inline-flex; align-items: center; justify-content: center;
}
.ozf-tag button:hover { background: var(--ozf-navy); color: #fff; }

/* ---------- Escalier ---------- */
.ozf-steps { margin: 0; padding: 0; list-style: none; }
.ozf-step { position: relative; margin: 0; padding: 0 0 4px 44px; list-style: none; }
.ozf-step::before {                                   /* trait vertical entre les étapes */
    content: ''; position: absolute; left: 15px; top: 34px; bottom: -2px; width: 2px;
    background: var(--ozf-line);
}
.ozf-step:last-child::before { display: none; }
.ozf-num {
    position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; background: #fff; color: #94a3b8; border: 2px solid #cbd5e1;
    transition: background .15s, color .15s, border-color .15s;
}
.ozf-step.is-open .ozf-num { background: var(--ozf-accent); border-color: var(--ozf-accent); color: #fff; box-shadow: 0 0 0 4px rgba(249,115,22,.15); }
.ozf-step.is-done .ozf-num { background: var(--ozf-navy); border-color: var(--ozf-navy); color: #fff; }
.ozf-step.is-done::before { background: var(--ozf-navy); opacity: .35; }

.ozf-step-head {
    display: flex; align-items: center; gap: 8px; width: 100%; min-height: 32px; padding: 0;
    border: 0; background: none; text-align: left; cursor: pointer; color: var(--ozf-text);
}
.lang-ar .ozf-step-head { text-align: right; }
.ozf-step-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ozf-label { font-size: 14px; font-weight: 700; color: var(--ozf-text); text-transform: none; letter-spacing: 0; margin: 0; padding: 0; border: 0; }
.ozf-step.is-todo .ozf-label { color: #64748b; font-weight: 600; }
.ozf-sum { font-size: 12.5px; color: var(--ozf-accent-dark); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ozf-chev { font-size: 11px; color: #94a3b8; transition: transform .2s; }
.ozf-step.is-open .ozf-chev { transform: rotate(180deg); }
.ozf-step-body { display: none; padding: 8px 0 14px; }
.ozf-step.is-open .ozf-step-body { display: block; animation: ozfIn .2s ease; }
@keyframes ozfIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---------- Boutons à choix ---------- */
.ozf-row + .ozf-row { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--ozf-line); }
.ozf-sublabel { display: block; margin-bottom: 7px; font-size: 12px; color: var(--ozf-muted); }
.ozf-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.ozf-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; margin: 0; border: 1.5px solid var(--ozf-line); border-radius: 999px;
    background: #fff; color: var(--ozf-text); font-size: 13px; line-height: 1.2; cursor: pointer;
    transition: border-color .15s, background .15s, color .15s, transform .1s;
}
.ozf-chip:hover { border-color: var(--ozf-accent); }
.ozf-chip:active { transform: scale(.97); }
.ozf-chip em {
    font-style: normal; font-size: 11px; color: var(--ozf-muted);
    background: #f3f4f6; padding: 1px 6px; border-radius: 8px;
}
.ozf-chip.is-on { border-color: var(--ozf-accent); background: var(--ozf-accent-soft); color: var(--ozf-accent-dark); font-weight: 600; }
.ozf-chip.is-on em { background: #fed7aa; color: var(--ozf-accent-dark); }
.ozf-chip.is-zero { opacity: .55; }
.ozf-flag i { font-size: 10px; opacity: .35; }
.ozf-flag.is-on i { opacity: 1; }

/* ---------- Champs ---------- */
.ozf-select, .ozf-input {
    width: 100%; height: 38px; margin: 0; padding: 0 11px;
    border: 1.5px solid var(--ozf-line); border-radius: 10px; background: #fff;
    color: var(--ozf-text); font: inherit; font-size: 13.5px; box-shadow: none;
}
.ozf-select:focus, .ozf-input:focus { outline: none; border-color: var(--ozf-accent); box-shadow: 0 0 0 3px rgba(249,115,22,.15); }
.ozf-sortrow .ozf-select { flex: 1; }
.ozf-range { display: flex; align-items: center; gap: 7px; }
.ozf-range .ozf-input { min-width: 0; flex: 1; }
.ozf-dash { color: var(--ozf-muted); }
.ozf-unit { font-size: 12.5px; font-weight: 700; color: var(--ozf-muted); }
.ozf-hint { margin: 7px 0 0; font-size: 12px; color: var(--ozf-muted); }

/* ---------- Pied (mobile) ---------- */
.ozf-showbtn { display: none; }

/* ---------- États de la liste ---------- */
#listings-container.ozf-loading { opacity: .45; pointer-events: none; transition: opacity .15s; }
.ozf-empty { text-align: center; padding: 56px 16px; grid-column: 1 / -1; }
.ozf-empty i.fa-search { font-size: 44px; color: #cbd5e1; margin-bottom: 16px; }
.ozf-empty p { margin: 4px 0; }
.ozf-empty .t1 { font-size: 19px; font-weight: 600; color: #111827; }
.ozf-empty .t2 { color: #6b7280; }
.ozf-empty button {
    margin-top: 16px; padding: 10px 20px; border: 0; border-radius: 10px;
    background: #f97316; color: #fff; font: inherit; font-weight: 600; cursor: pointer;
}

/* ---------- Écrans moyens / mobiles : la colonne passe au-dessus, repliable ---------- */
@media (max-width: 960px) {
    .listings-section.ozf-has-side { display: block; }
    .listings-section.ozf-has-side > #ozf-root {
        position: static; max-height: none; overflow: visible; margin: 0 12px 18px;
    }
    .ozf-mtoggle {
        display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 10px;
        padding: 9px 12px; border: 1px solid rgba(255,255,255,.4); border-radius: 10px;
        background: rgba(255,255,255,.12); color: #fff; font-weight: 600; font-size: 13.5px; cursor: pointer;
    }
    .ozf .ozf-body { display: none; }
    .ozf.is-open .ozf-body { display: block; }
    .ozf.is-open .ozf-showbtn {
        display: block; width: 100%; margin-top: 14px; padding: 12px; border: 0; border-radius: 10px;
        background: var(--ozf-accent); color: #fff; font-size: 14.5px; font-weight: 700; cursor: pointer;
    }
}

/* ---------- Colonne « Affiner » collée aux annonces (bloc centré, comme sur le .ma) ---------- */
.listings-section.ozf-has-side {
    width: 100%;
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
}
.listings-section.ozf-has-side #listings-container {
    margin-left: 0;
    margin-right: 0;
    max-width: none;
    width: 100%;
    justify-content: start;
}

/* ---------- OZAMarket : barre orange des sous-catégories ---------- */
.ozf-mbar { background: #eef1f6; padding: 14px 12px; }
.ozf-mbar-in { max-width: 1240px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.ozf-mpill {
    display: inline-flex; align-items: center; gap: 8px; margin: 0;
    padding: 7px 14px; border: 1.5px solid #f97316; border-radius: 999px;
    background: #fff; color: #c2410c; cursor: pointer;
    font: 600 13px/1.2 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    transition: background .15s, color .15s, box-shadow .15s, transform .1s;
}
.ozf-mpill:hover { background: #fff7ed; }
.ozf-mpill:active { transform: scale(.97); }
.ozf-mpill em {
    font-style: normal; font-size: 11px; font-weight: 700;
    background: #fed7aa; color: #c2410c; padding: 1px 7px; border-radius: 9px;
}
.ozf-mpill.is-on { background: #f97316; color: #fff; box-shadow: 0 4px 12px rgba(249,115,22,.35); }
.ozf-mpill.is-on em { background: rgba(255,255,255,.3); color: #fff; }
.ozf-mpill.is-zero { opacity: .55; }


/* ---------- En-tête de la colonne : le titre ne se coupe plus ---------- */
.ozf-head-row { flex-wrap: wrap; row-gap: 8px; }
.ozf-title { white-space: nowrap; }
.ozf-reset { margin-left: auto; white-space: nowrap; }
.lang-ar .ozf-reset { margin-left: 0; margin-right: auto; }
.ozf-tag { max-width: 100%; }
.ozf-tag b { overflow-wrap: anywhere; }

/* ---------- OZAMarket en orange ---------- */
.ozf-market-pill { color: #ea580c !important; border-color: #fdba74 !important; }
.ozf-market-pill i, .ozf-market-pill span { color: inherit !important; }
.ozf-market-pill:hover { background: #fff7ed !important; border-color: #f97316 !important; }
.ozf-market-pill.ozf-m-on {
    background: linear-gradient(135deg, #fb923c, #ea580c) !important;
    border-color: transparent !important; color: #fff !important;
    box-shadow: 0 6px 14px rgba(234, 88, 12, .35) !important;
}
.ozf-market-pill.ozf-m-on:hover { background: linear-gradient(135deg, #fb923c, #ea580c) !important; }
.ozf.ozf-market .ozf-head { background: linear-gradient(135deg, #ea580c, #f97316); }
.ozf.ozf-market .ozf-step.is-done .ozf-num { background: #ea580c; border-color: #ea580c; }
.ozf.ozf-market .ozf-step.is-done::before { background: #ea580c; }
.ozf.ozf-market .ozf-tag { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.ozf.ozf-market .ozf-tag button { background: #fed7aa; color: #c2410c; }
.ozf.ozf-market .ozf-tag button:hover { background: #ea580c; color: #fff; }

/* ==========================================================
   Bande des sous-catégories OZAMarket (version unique)
   ========================================================== */
.ozf-mbar {
    width: 100%; max-width: 100%; min-width: 0;
    box-sizing: border-box;
    background: #eef1f6;
    padding: 12px 16px 14px;
    overflow: hidden;
}
.ozf-mbar-in {
    display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 10px;
    width: 100%; max-width: 1240px; min-width: 0; margin: 0 auto;
    box-sizing: border-box;
    overflow-x: auto; overflow-y: hidden;
    padding: 4px 4px 12px;
    -webkit-overflow-scrolling: touch;
}
/* centré quand tout tient, 1re pastille jamais coupée quand ça déborde */
.ozf-mbar-in > :first-child { margin-left: auto; }
.ozf-mbar-in > :last-child  { margin-right: auto; }
.lang-ar .ozf-mbar-in { direction: rtl; }

.ozf-mpill {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 14px;
    border: 1.5px solid #f97316; border-radius: 999px;
    background: #fff7ed; color: #c2410c;
    font: 600 13.5px/1.2 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    white-space: nowrap; cursor: pointer;
    transition: background .15s, color .15s, transform .1s, box-shadow .15s;
}
.ozf-mpill:hover { background: #ffedd5; }
.ozf-mpill:active { transform: scale(.97); }
.ozf-mpill em {
    font-style: normal; font-size: 11.5px; font-weight: 600;
    background: #fed7aa; color: #c2410c; padding: 1px 7px; border-radius: 8px;
}
.ozf-mpill.is-on { background: #f97316; color: #fff; box-shadow: 0 4px 12px rgba(249,115,22,.35); }
.ozf-mpill.is-on em { background: rgba(255,255,255,.28); color: #fff; }
.ozf-mpill.is-zero { opacity: .55; }

/* Curseur visible : Chrome, Edge, Safari */
.ozf-mbar-in::-webkit-scrollbar { height: 8px; }
.ozf-mbar-in::-webkit-scrollbar-track { background: #fde6d3; border-radius: 8px; }
.ozf-mbar-in::-webkit-scrollbar-thumb { background: #f97316; border-radius: 8px; }
.ozf-mbar-in::-webkit-scrollbar-thumb:hover { background: #ea580c; }
/* Curseur Firefox uniquement (sinon Chrome ignorerait le style ci-dessus) */
@supports (-moz-appearance: none) {
    .ozf-mbar-in { scrollbar-width: thin; scrollbar-color: #f97316 #fde6d3; }
}
@media (min-width: 901px) {
    .ozf .ozf-head .ozf-toggle { pointer-events: none; }
    .ozf-head .ozf-caret { display: none; }
}.ozf-oza-btn::after,
a[href*="ozamarket" i]::after {
    content: "▾";
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; margin-left: 8px; padding: 0;
    border-radius: 50%;
    background: #1e3a8a; color: #fff;
    font-size: 12px; line-height: 1;
}
/* ---------- Bouton OZAMarket : mêmes couleurs que les autres catégories ---------- */
.ozf-market-pill {
    position: relative;
    color: inherit !important;
    background: #fff !important;
    background-image: none !important;
    border-color: #e5e7eb !important;
    box-shadow: 0 3px 0 -1px #fff, 0 4px 0 -1px #d6e0ee !important;  /* effet « pile » */
    margin-bottom: 4px;
}
.ozf-market-pill::after {
    content: "▾";
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; margin-left: 8px; padding: 0;
    border-radius: 50%;
    background: #1e3a8a; color: #fff;
    font-size: 12px; line-height: 1;
}
.ozf-market-pill:hover {
    background: #fff !important;
    border-color: #b9c9e3 !important;
    box-shadow: 0 3px 0 -1px #fff, 0 4px 0 -1px #b9c9e3, 0 8px 16px rgba(30,58,138,.12) !important;
}
/* Actif : même bleu que les autres catégories sélectionnées */
.ozf-market-pill.ozf-m-on {
    background: linear-gradient(135deg, #1d6fe0, #1450b8) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 6px 14px rgba(20,80,184,.35) !important;
}
.lang-ar .ozf-market-pill::after { margin-left: 0; margin-right: 8px; }