/* Font sizes scaled x0.9 (2026-09-28) to match typography.css. */
/* Offers — Split layout (home + offer page). Hand-written (no Tailwind build needed).
   Design rule: corner radius 5px; round shapes only for PolyTag icons. */

.os-home, .os-page { --os-ink: #0B1F33; --os-line: #E1E7EE; --os-muted: #667788; --os-soft: #F8FAFC; --os-top: 64px; color: var(--os-ink); }

/* ---- Top bar: search + filters toggle + view switcher ---- */
.os-top { margin-bottom: 12px; } /* container styles come from the map bar's Tailwind classes */
.os-top-q { flex: 1 1 320px; min-width: 0; }

/* Country picker + search in one box ("Tous pays" | 🔍 …), home page and map (partial country_search.php). */
.os-qbox { display: flex; align-items: stretch; height: 38px; background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 5px; }
.os-qbox:focus-within { border-color: var(--color-poly-blue); background: #fff; }
.os-qbox-country { flex: none; display: flex; }
.os-qbox-btn { display: flex; align-items: center; gap: 7px; height: 100%; padding: 0 12px; border: 0; border-right: 1px solid #E2E8F0; border-radius: 5px 0 0 5px; background: transparent; color: #0B1F33; font-size: 13px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.os-qbox-btn:hover { background: #EEF2F6; }
.os-qbox-btn .country-filter-label { display: inline-flex; align-items: center; gap: 7px; max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
.os-qbox-pin { flex: none; color: #0B1F33; }
.os-qbox-search { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 0 12px; color: #94A3B8; cursor: text; }
.os-qbox-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: #0B1F33; font-size: 13px; }
@media (max-width: 480px) { .os-qbox-btn .country-filter-label { max-width: 110px; } }
.os-filter-toggle { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; background: #fff; border: 1px solid var(--os-line); border-radius: 5px; font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.os-filter-toggle[aria-expanded="true"] { background: var(--os-ink); border-color: var(--os-ink); color: #fff; }
.os-filter-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 5px; background: var(--color-poly-blue); color: #fff; font-size: 10px; }
.os-filter-count[hidden] { display: none; }
.os-views { flex: none; }

/* ---- Shell ---- */
.os-shell { display: grid; gap: 14px; align-items: start; }
.os-side { display: none; background: #fff; border: 1px solid var(--os-line); border-radius: 5px; padding: 14px; }
.os-side.is-open { display: block; }
.os-side-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.os-side-head strong { font-size: 14px; }
.os-reset { color: #D8423A; font-weight: 700; font-size: 12px; cursor: pointer; background: none; border: 0; }
.os-reset[hidden] { display: none; }
.os-grp + .os-grp { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--os-line); }
.os-grp h4 { margin: 0 0 6px; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--os-muted); font-weight: 700; }
.os-ck { display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 0; text-align: left; font-size: 12px; background: none; border: 0; cursor: pointer; color: inherit; }
.os-ck:hover .os-ck-label { color: var(--color-poly-navy); }
.os-ck-box { flex: none; width: 17px; height: 17px; display: grid; place-items: center; border: 1.5px solid #CBD5E1; border-radius: 4px; color: transparent; }
.os-ck.is-on .os-ck-box { background: var(--os-ink); border-color: var(--os-ink); color: #fff; }
.os-ck.is-on .os-ck-label { font-weight: 700; }
.os-ck.is-empty { opacity: .5; }
.os-ck-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.os-ck em { margin-left: auto; font-style: normal; color: #94A3B8; font-size: 11px; font-variant-numeric: tabular-nums; }
.os-ck-icon { flex: none; width: 18px; height: 18px; object-fit: contain; }
.os-ck-flag { flex: none; width: 18px; text-align: center; }

/* ---- List column ---- */
/* minmax(0, 1fr) everywhere down to the card: an implicit "auto" column grows to the widest unbreakable line
   (a long company name in .os-card-sub, nowrap) and the cards then slide under the offer panel. */
.os-list-col { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.os-lh { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.os-count { font-weight: 700; font-size: 13px; }
.os-lr { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.os-savedbtn, .os-srcbtn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; background: #fff; border: 1px solid var(--os-line); border-radius: 5px; font-size: 12px; font-weight: 700; white-space: nowrap; cursor: pointer; color: inherit; }
.os-savedbtn:hover, .os-srcbtn:hover { border-color: var(--color-poly-blue); color: var(--color-poly-blue); }
.os-savedbtn.is-on, .os-srcbtn.is-on { background: var(--color-poly-blue); border-color: var(--color-poly-blue); color: #fff; }
.os-savedbtn.is-on path { fill: currentColor; }
/* Quick source filters (alumni / recruiter / forum): icon + count, one at a time. */
.os-srcbtns { display: inline-flex; gap: 6px; }
.os-srcbtn { padding: 0 9px; }
.os-srcbtn span { font-variant-numeric: tabular-nums; }
.os-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.os-empty { padding: 32px 16px; text-align: center; color: #64748B; background: #fff; border: 1px dashed var(--os-line); border-radius: 5px; }
.os-empty[hidden] { display: none; }
.os-empty button { margin-left: 4px; color: var(--color-poly-blue); font-weight: 700; text-decoration: underline; background: none; border: 0; cursor: pointer; }
.os-more { text-align: center; }
.os-more button { padding: 6px 16px; background: #fff; border: 1px solid #CBD5E1; border-radius: 5px; cursor: pointer; }

/* ---- Offer card ---- */
.os-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px; background: #fff; border: 1px solid var(--os-line); border-radius: 5px; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.os-card:hover { border-color: #C3CFDC; box-shadow: 0 6px 18px rgba(11,31,51,.07); }
.os-card:focus-visible { outline: 2px solid var(--color-poly-blue); outline-offset: 2px; }
.os-card.is-selected { border-color: var(--color-poly-blue); box-shadow: 0 0 0 3px rgba(0,156,221,.14); }
/* Archived offers (shown only to admins / the owner): greyed card + orange "archived" tag. */
.os-card.is-archived { background: #eef2f6; border-color: #cdd6e0; }
.os-card.is-archived:hover { border-color: #b9c4d2; }
.os-arch-badge { display: inline-block; margin-top: 4px; padding: 1px 8px; border-radius: 5px; background: #ffedd5; color: #9a3412; font-size: 10.5px; font-weight: 700; }
.os-card-head { display: flex; align-items: flex-start; gap: 12px; }
.os-card-main { flex: 1; min-width: 0; }
.os-card-title { margin: 0; font-size: 14px; line-height: 1.3; font-weight: 700; color: var(--os-ink); }
.os-card-title a { color: inherit; text-decoration: none; }
.os-card-title a:hover { text-decoration: underline; }
.os-card-sub { margin-top: 2px; font-size: 11px; color: var(--os-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.os-card-excerpt { margin: 0; font-size: 12px; line-height: 1.5; color: #4B5B6B; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.os-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 10px; border-top: 1px solid var(--os-line); }
.os-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; min-width: 0; font-size: 11px; font-weight: 600; color: #475569; }
.os-meta > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.os-meta svg { color: #8193A6; flex: none; }

.os-logo-wrap { position: relative; flex: none; display: inline-grid; }
/* Archived offers: a red "eye-off" badge overhangs the logo corner — "hidden from everyone else". */
.os-arch-eye { position: absolute; right: -5px; bottom: -5px; width: 18px; height: 18px; border-radius: 50%; background: #dc2626; color: #fff; display: grid; place-items: center; border: 2px solid #fff; box-shadow: 0 1px 2px rgba(11,31,51,.25); }
.os-ph .os-arch-eye { width: 20px; height: 20px; }
.os-logo { flex: none; width: 42px; height: 42px; display: grid; place-items: center; overflow: hidden; border-radius: 5px; background: #EEF2F6; color: var(--color-poly-navy); font-weight: 800; font-size: 15px; }
.os-logo.has-img { background: #fff; border: 1px solid #EEF2F6; }
.os-logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.os-logo-lg { width: 56px; height: 56px; font-size: 20px; }

.os-save { flex: none; width: 34px; height: 34px; display: grid; place-items: center; background: #fff; border: 1px solid var(--os-line); border-radius: 5px; color: #64748B; cursor: pointer; transition: background .15s, color .15s; }
.os-save:hover, .os-save-lg:hover { border-color: var(--color-poly-blue); color: var(--color-poly-blue); }
.os-save.is-on, .os-save-lg.is-on { background: var(--color-poly-blue); border-color: var(--color-poly-blue); color: #fff; }
.os-save.is-on path, .os-save-lg.is-on path { fill: currentColor; }

/* PolyTag stack (bottom right): round icons, overlapping, primary first + star. */
.os-stack { flex: none; display: flex; padding-left: 9px; }
.os-stack-item { position: relative; width: 30px; height: 30px; margin-left: -9px; display: grid; place-items: center; background: #fff; border-radius: 999px; box-shadow: 0 0 0 2px #fff; font-size: 10px; font-weight: 700; color: var(--os-muted); }
.os-stack-item img { width: 28px; height: 28px; object-fit: contain; border-radius: 999px; }
.os-stack-item:nth-child(1) { z-index: 3; } .os-stack-item:nth-child(2) { z-index: 2; } .os-stack-item:nth-child(3) { z-index: 1; }
.os-stack-item.is-primary::after { content: "★"; position: absolute; top: -6px; right: -4px; font-size: 10px; color: #F2A541; text-shadow: 0 0 2px #fff; }

/* ---- Detail panel (home) / offer page ---- */
.os-pane { display: none; min-width: 0; background: #fff; border: 1px solid var(--os-line); border-radius: 5px; }
.os-pane.is-loading { opacity: .55; transition: opacity .15s; }
.os-pane-empty { margin: 0; padding: 40px 20px; text-align: center; color: var(--os-muted); }
.os-detail { padding: 18px; }
.os-detail.is-archived { background: #eef2f6; } /* archived offer: greyed detail, managers/owner only */
.os-detail.is-archived .os-facts > div { background: #eef2f6; } /* facts cells match the greyed detail */
.os-save-lg.os-republish { background: #ea580c; border-color: #ea580c; color: #fff; } /* re-publish: orange, keeps the os-save-lg shape */
.os-manage .os-save-lg.os-republish:hover { background: #c2410c; border-color: #c2410c; color: #fff; }
.os-ph { display: flex; align-items: flex-start; gap: 14px; }
.os-ph-main { flex: 1; min-width: 0; }
.os-ph-title { margin: 0; font-size: 19px; line-height: 1.22; font-weight: 800; color: var(--os-ink); text-wrap: balance; }
.os-ph-sub { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 12px; color: var(--os-muted); }
.os-facts { margin: 16px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--os-line); border: 1px solid var(--os-line); border-radius: 5px; overflow: hidden; }
.os-facts > div { background: #fff; padding: 9px 12px; }
.os-facts dt { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--os-muted); }
.os-facts dd { margin: 0; font-size: 12px; font-weight: 700; }
.os-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* Manage row (admins / the offer's publisher): Modifier wide, the others compact; forms are plain flex items. */
/* One row: Modifier takes the room left, the others keep their size. Side panel: those 3 are 40px icon squares. */
.os-actions.os-manage { flex-wrap: nowrap; }
.os-manage form { display: flex; margin: 0; }
.os-manage .os-apply { flex: 1; min-width: 0; white-space: nowrap; }
.os-manage .os-save-lg { justify-content: center; white-space: nowrap; }
.os-manage-icons .os-save-lg { width: 40px; padding: 0; }
.os-manage-icons .os-mlabel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
a.os-save-lg { text-decoration: none; }
.os-manage .os-save-lg:hover { border-color: var(--color-poly-blue); color: var(--color-poly-blue); }
.os-manage .os-save-lg.os-del:hover { border-color: #DC2626; color: #DC2626; } /* delete: destructive accent */
.os-apply { flex: 1; min-width: 160px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 14px; background: var(--color-poly-blue); color: #fff; border-radius: 5px; font-weight: 700; font-size: 13px; text-decoration: none; }
.os-apply:hover { background: var(--color-poly-navy); color: #fff; }
.os-save-lg { display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; min-height: 40px; background: #fff; border: 1px solid var(--os-line); border-radius: 5px; font-weight: 700; font-size: 12px; cursor: pointer; color: inherit; }
/* Share (right of Sauvegarder): square icon button → small menu (phone share sheet / mailto). */
/* Phones: "Sauvegarder" becomes an icon-only square like Share, so Apply keeps the room (label kept for screen readers). */
@media (max-width: 640px) {
  .os-actions .os-save-lg.opp-save { width: 40px; padding: 0; justify-content: center; }
  .os-actions .os-save-lg.opp-save .os-save-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* Manage row on phones (full page too, not only the side panel): Extend / Statistiques / Archiver / Supprimer become icon squares, Modifier keeps its label. */
  .os-manage .os-save-lg { width: 40px; padding: 0; justify-content: center; }
  .os-manage .os-mlabel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.os-share { position: relative; display: inline-flex; }
.os-share-btn { width: 40px; padding: 0; justify-content: center; color: #475569; }
.os-share-btn[aria-expanded="true"] { border-color: var(--color-poly-blue); color: var(--color-poly-blue); }
.os-share-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 230px; padding: 5px; background: #fff; border: 1px solid var(--os-line); border-radius: 5px; box-shadow: 0 10px 28px rgba(11,31,51,.14); }
.os-share-menu[hidden], .os-share-item[hidden] { display: none; }
.os-share-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; background: none; border: 0; border-radius: 4px; text-align: left; font-size: 12.5px; font-weight: 600; color: var(--os-ink); text-decoration: none; cursor: pointer; white-space: nowrap; }
.os-share-item:hover, .os-share-item:focus-visible { background: #F0F7FC; color: var(--color-poly-navy); outline: none; }
.os-share-item svg { flex: none; color: var(--color-poly-blue); }

.os-h { margin: 18px 0 6px; font-size: 13px; font-weight: 700; }
.os-desc { font-size: 13px; line-height: 1.6; color: #334155; white-space: pre-line; overflow-wrap: anywhere; }
.os-contact { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #334155; }
.os-contact > span, .os-contact > a { display: flex; align-items: center; gap: 7px; min-width: 0; }
.os-c-ic { flex: none; color: #94a3b8; } /* contact icon stays grey even inside a blue link */
.os-contact a { color: var(--color-poly-blue); }
.os-break { overflow-wrap: anywhere; }
.os-muted { margin: 0; color: var(--os-muted); font-size: 12px; }
.os-doms { display: grid; gap: 6px; }
.os-dom { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid var(--os-line); border-radius: 5px; font-size: 12px; font-weight: 600; }
.os-dom img { width: 26px; height: 26px; object-fit: contain; border-radius: 999px; }
.os-dom small { margin-left: auto; color: var(--os-muted); font-weight: 600; white-space: nowrap; }
.os-srcline { margin: 18px 0 0; padding-top: 12px; border-top: 1px solid var(--os-line); font-size: 11px; color: var(--os-muted); }
.os-detail.is-openable { cursor: pointer; } /* side panel: click the body to open the full offer page */
.os-detail.is-openable a, .os-detail.is-openable button, .os-detail.is-openable label { cursor: auto; }
.os-detail.is-openable .os-apply, .os-detail.is-openable .os-save-lg, .os-detail.is-openable .os-save, .os-detail.is-openable .os-share-btn { cursor: pointer; }

.os-page { max-width: 52rem; margin: 0 auto; }
.os-back { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 10px; font-weight: 700; font-size: 13px; color: var(--color-poly-blue); text-decoration: none; }
.os-pane-page { display: block; }

/* ---- Map page: same shell as home, the map takes the list + panel space ---- */
.os-map-col { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.os-map-canvas { width: 100%; height: calc(100vh - 210px); min-height: 420px; border: 1px solid #E2E8F0; border-radius: 5px; }
.os-map-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.os-map-foot p { margin: 0; font-size: 10.8px; color: #94A3B8; text-align: right; }

/* ---- Company logo next to Website (partials/logo_upload.php): always shown, click = upload ---- */
.logo-row { display: flex; align-items: stretch; gap: 8px; }
.logo-row > input { flex: 1; min-width: 0; }
.logo-up-wrap { flex: none; display: flex; }
.logo-up { position: relative; width: 40px; min-height: 38px; aspect-ratio: 1; flex: none; display: grid; place-items: center; padding: 3px;
           background: #fff; border: 1px solid #CBD5E1; border-radius: 5px; cursor: pointer; color: #94A3B8; }
.logo-up:hover:not(:disabled), .logo-up:focus-visible { border-color: var(--color-poly-blue); color: var(--color-poly-blue); }
.logo-up:disabled { cursor: default; }
.logo-up img { width: 100%; height: 100%; object-fit: contain; border-radius: 3px; }
.logo-up.is-empty { border-style: dashed; }
.logo-up.is-empty img, .logo-up-ph { display: none; }
.logo-up.is-empty .logo-up-ph { display: block; }
.logo-up-badge { position: absolute; right: -5px; bottom: -5px; width: 16px; height: 16px; display: grid; place-items: center;
                 background: var(--color-poly-blue, #009CDD); color: #fff; border: 2px solid #fff; border-radius: 999px; }
.logo-up.is-busy { opacity: .55; pointer-events: none; }

/* ---- Toast ---- */
.os-toast { position: fixed; left: 50%; bottom: 20px; z-index: 60; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; max-width: calc(100vw - 32px); padding: 9px 14px; background: var(--color-poly-blue, #009CDD); color: #fff; border-radius: 5px; font-size: 12px; font-weight: 700; box-shadow: 0 10px 24px rgba(0,0,0,.2); }
.os-toast[hidden] { display: none; }

/* ---- Breakpoints (sidebar + panel scroll on their own, scrollbar hidden): tablet = list + panel, desktop = sidebar + list + panel ---- */
@media (min-width: 768px) {
  .os-shell { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
  .os-side.is-open { grid-column: 1 / -1; }
  .os-pane { display: block; position: sticky; top: var(--os-top); max-height: calc(100vh - var(--os-top) - 12px); overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior: contain; }
  .os-pane::-webkit-scrollbar { display: none; width: 0; height: 0; }
  .os-facts { grid-template-columns: repeat(3, 1fr); }
  .os-page .os-detail { padding: 26px; }
  .os-page .os-ph-title { font-size: 23px; }
}
@media (min-width: 1024px) {
  .os-filter-toggle { display: none; }
  /* Same 1128px content width as the other pages: filters 210px · list up to 400px · the offer panel takes the rest */
  .os-shell { grid-template-columns: 210px minmax(0, 400px) minmax(0, 1fr); }
  .os-side, .os-side.is-open { display: block; grid-column: auto; position: sticky; top: var(--os-top); max-height: calc(100vh - var(--os-top) - 12px); overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior: contain; }
  .os-side::-webkit-scrollbar { display: none; width: 0; height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .os-card, .os-save, .os-pane.is-loading { transition: none; }
}

/* Map page columns (after the home breakpoints so they take precedence): tablet = map only
   (filters behind the Filtres button), desktop = filters 210px + map. */
@media (min-width: 768px) { .os-shell-map { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 1024px) { .os-shell-map { grid-template-columns: 210px minmax(0, 1fr); } }

/* Sidebar: Domaine accepts several ticks; France opens its Régions sub-list, Stage its Niveau / Durée one. */
.os-grp-hint { margin-left: 4px; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--color-poly-blue); }
.os-sub { margin: 1px 0 6px 25px; padding: 1px 0 1px 10px; border-left: 2px solid var(--os-line); }
.os-sub[hidden] { display: none; }
.os-sub .os-ck { padding: 3px 0; font-size: 11px; }
.os-sub .os-ck-box { width: 14px; height: 14px; }
.os-sub-h { display: block; margin: 6px 0 1px; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--os-muted); }
.os-sub-h:first-child { margin-top: 2px; }
/* Country picker: regions indented under France. */
.country-filter-sub { padding-left: 34px; padding-right: 12px; font-size: 12px; color: #334155; }

/* Map pin window (design A): navy header (Settings colour), contract buttons, scrolling list. */
.os-mpop .leaflet-popup-content-wrapper { padding: 0; border-radius: 5px; overflow: hidden; box-shadow: 0 10px 30px rgba(15, 23, 42, .2), 0 1px 3px rgba(15, 23, 42, .15); }
.os-mpop .leaflet-popup-content { margin: 0; width: 350px !important; max-width: calc(100vw - 32px); font-size: 12px; line-height: 1.4; }
.os-mpop-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 10px 10px 10px 12px; background: var(--color-poly-navy); color: #fff; }
.os-mpop-head strong { display: block; font-size: 13.5px; }
.os-mpop-head span { font-size: 11px; color: rgba(255, 255, 255, .8); }
.os-mpop-x { flex: none; width: 24px; height: 24px; border: 0; border-radius: 5px; background: none; color: #fff; font-size: 18px; line-height: 1; cursor: pointer; }
.os-mpop-x:hover { background: rgba(255, 255, 255, .15); }
.os-mpop-chips { display: flex; flex-wrap: wrap; gap: 5px; padding: 8px 12px; border-bottom: 1px solid var(--os-line); }
.os-mpop-chips button { font-size: 11px; padding: 2px 8px; border: 1px solid var(--os-line); border-radius: 5px; background: #fff; color: #334155; cursor: pointer; }
.os-mpop-chips button.is-on { background: var(--color-poly-navy); border-color: var(--color-poly-navy); color: #fff; }
.os-mpop-list { list-style: none; margin: 0; padding: 4px 0; max-height: 240px; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; }
.os-mpop-list::-webkit-scrollbar { display: none; }
.os-mpop-list li[hidden] { display: none; }
.os-mpop-list a { display: flex; gap: 9px; align-items: flex-start; padding: 7px 12px; color: inherit; text-decoration: none; }
.os-mpop-list a:hover { background: #F0F9FF; }
.os-mpop-logo { flex: none; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--os-line); border-radius: 5px; background: #fff; overflow: hidden; }
.os-mpop-logo img { max-width: 80%; max-height: 80%; object-fit: contain; }
.os-mpop-logo.is-initial { background: #E0F2FE; color: var(--color-poly-navy); font-weight: 700; }
.os-mpop-txt { flex: 1; min-width: 0; }
.os-mpop-txt b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; line-height: 1.3; color: var(--color-poly-navy); }
.os-mpop-txt small { display: block; font-size: 10.8px; color: var(--os-muted); }
.os-mpop-txt em { display: block; font-style: normal; font-size: 10.8px; font-weight: 600; color: var(--color-poly-blue); }
.os-mpop-tags { flex: none; display: flex; }
.os-mpop-tags img { width: 20px; height: 20px; padding: 1px; border: 1px solid var(--os-line); border-radius: 50%; background: #fff; object-fit: contain; }
.os-mpop-tags img + img { margin-left: -6px; }
.leaflet-container .os-mpop-all { display: block; padding: 9px 12px; border-top: 1px solid var(--os-line); text-align: center; font-size: 11.7px; font-weight: 600; color: var(--color-poly-blue); text-decoration: none; }
.leaflet-container .os-mpop-all:hover { background: #F0F9FF; }
/* Phone: the same content as a full-width sheet at the bottom of the screen (app.js openPin). */
.os-msheet { position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 1100; background: #fff; border: 1px solid var(--os-line); border-radius: 5px; overflow: hidden; font-size: 12px; line-height: 1.4; box-shadow: 0 -6px 30px rgba(15, 23, 42, .25); }
.os-msheet .os-mpop-list { max-height: 45vh; }
.os-msheet .os-mpop-all { display: block; padding: 10px 12px; border-top: 1px solid var(--os-line); text-align: center; font-size: 12px; font-weight: 600; color: var(--color-poly-blue); text-decoration: none; }
/* Home: city picked from the map's pin window. */
.os-city-chip { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 2px 8px; border: 1px solid var(--color-poly-blue); border-radius: 5px; background: #F0F9FF; color: var(--color-poly-navy); font-size: 11px; font-weight: 600; cursor: pointer; }
.os-city-chip[hidden] { display: none; }
.os-city-chip:hover { background: #E0F2FE; }
/* Forum questions as on/off icon buttons: Settings user window (.su-qbtn buttons) and profile page (.pf-qbtn checkboxes) */
.su-qbtns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
.su-qbtn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-height: 62px; padding: 8px 6px; border: 1px solid #E2E8F0; border-radius: 5px; background: #F1F5F9; color: #94A3B8; font-size: 11.5px; font-weight: 600; line-height: 1.25; text-align: center; cursor: pointer; }
.su-qbtn:hover:not(:disabled):not(.is-on) { border-color: #CBD5E1; color: #64748B; }
.su-qbtn.is-on { background: var(--color-poly-blue); border-color: var(--color-poly-blue); color: #fff; }
.su-qbtn:disabled { cursor: default; opacity: .7; }
.su-qbtn:focus-visible { outline: 2px solid var(--color-poly-blue); outline-offset: 2px; }
/* Profile page: the forum questions as the same on/off icon buttons, built on checkboxes (no JS needed) */
.pf-qbtn { position: relative; display: block; }
.pf-qbtn input[type=checkbox] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pf-qbtn .su-qbtn { height: 100%; }
.pf-qbtn:hover input:not(:checked) + .su-qbtn { border-color: #CBD5E1; color: #64748B; }
.pf-qbtn input:checked + .su-qbtn { background: var(--color-poly-blue); border-color: var(--color-poly-blue); color: #fff; }
.pf-qbtn input:focus-visible + .su-qbtn { outline: 2px solid var(--color-poly-blue); outline-offset: 2px; }

/* In-page confirm / alert dialog (app.js uiConfirm / uiAlert): native confirm() is blocked by some browsers
   (Firefox Focus, in-app web views). Above every modal. */
.uid { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(11,31,51,.45); }
.uid[hidden] { display: none; }
.uid-box { width: 100%; max-width: 420px; padding: 20px; background: #fff; border-radius: 8px; box-shadow: 0 18px 50px rgba(11,31,51,.3); }
.uid-msg { margin: 0 0 18px; font-size: 14px; line-height: 1.5; color: #0B1F33; white-space: pre-line; overflow-wrap: anywhere; }
.uid-actions { display: flex; justify-content: flex-end; gap: 8px; }
.uid-actions button { min-height: 40px; padding: 0 16px; border-radius: 5px; font-size: 13px; font-weight: 700; cursor: pointer; }
.uid-actions button[hidden] { display: none; }
.uid-no { background: #fff; border: 1px solid #E1E7EE; color: #0B1F33; }
.uid-yes { background: var(--color-poly-blue); border: 1px solid var(--color-poly-blue); color: #fff; }
.uid-yes:hover { background: var(--color-poly-navy); }
/* Country flags for browsers that cannot draw flag emoji (Chrome / Edge on Windows: Segoe UI Emoji has no
   flags, so 🇫🇷 shows as "FR"). app.js tests the browser and adds html.flag-font only when needed; the font
   covers flag code points only (unicode-range) and is downloaded only when a flag is on the page.
   Font: "Twemoji Country Flags" (country-flag-emoji-polyfill, MIT) — flag artwork © Twitter, Inc. / Twemoji, CC-BY 4.0. */
@font-face {
  font-family: "Twemoji Country Flags";
  src: url("../fonts/TwemojiCountryFlags.woff2") format("woff2");
  unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F;
  font-display: swap;
}
html.flag-font {
  --font-sans: "Twemoji Country Flags", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --default-font-family: var(--font-sans);
  font-family: var(--font-sans);
}
/* Visually hidden (page title kept for screen readers; no Tailwind sr-only in the build). */
.os-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Phone input with country code (partials/phone_input.php): "🇫🇷 +33 | number", same box as the home search. */
.ph-box { position: relative; }
.ph-box .os-qbox-country { position: static; height: 100%; } /* the list opens under the whole box, at its width */
.ph-box .ph-btn, .ph-box .ph-num { height: 100%; }
.ph-box { box-sizing: border-box; }
.ph-box .country-filter-menu { left: 0; right: 0; width: auto; min-width: 240px; }
.ph-box .ph-btn { padding: 0 10px; }
.ph-box .ph-btn .country-filter-label { gap: 6px; font-variant-numeric: tabular-nums; }
.ph-num { flex: 1; min-width: 0; padding: 0 12px; border: 0; outline: 0; background: transparent; font: inherit; font-size: 13px; color: #0B1F33; }
.ph-opt em { margin-left: auto; padding-left: 8px; font-style: normal; font-size: 12px; color: #94A3B8; font-variant-numeric: tabular-nums; }
.ph-opt .ph-opt-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-box.ph-pf { margin-top: .25rem; background: #fff; border-color: #CBD5E1; }
.ph-box.ph-pf .ph-num { font-size: .875rem; }
.ph-box.ph-ob { height: 2.3rem; margin-bottom: .8rem; background: #fff; border-color: #CBD5E1; }
.ph-box.ph-ob .ph-num { font-size: .84rem; }
.ph-box:focus-within { border-color: var(--color-poly-blue); background: #fff; }
/* Company names and addresses are saved in capitals (company_caps()): typed in capitals too, so what you see is what is saved. */
#ob-company, #ob-address, #pf-company, #pf-address, #company-search, #company_address, #modal-company, #modal-address { text-transform: uppercase; }
#ob-company::placeholder, #ob-address::placeholder, #pf-company::placeholder, #pf-address::placeholder,
#company-search::placeholder, #company_address::placeholder, #modal-company::placeholder, #modal-address::placeholder { text-transform: none; }