/* pro.biznc.nc — shell de l'app connectée (onglets). Couleurs, rayons et
   gabarits (--header-h, --search-h, --sector-rail-h, --max-w : 600 px, 860 px
   dès 1024 px) viennent des tokens de biznc.nc, extraits dans app-shared.css.
   Les dimensions de l'en-tête, de la recherche, des filtres et des onglets
   reprennent celles de l'app biznc.nc (style.css, app.html). */
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-v20-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --tab-rail: var(--gray-700);
  --badge-bg: #ffffff;
  --badge-fg: #0a0a0a;
  --focus: var(--color-gold);
  color-scheme: dark;
}

:root[data-theme="light"] {
  --badge-bg: var(--ink-900);
  --badge-fg: #ffffff;
  --focus: var(--color-gold-dark);
  color-scheme: light;
}

* { box-sizing: border-box; }

/* Même base que biznc.nc : les tailles en rem des cartes extraites en dépendent. */
html {
  font-size: 17px;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg-app);
  color: var(--text-primary);
  font-family: "Inter", Arial, sans-serif;
}

button { font: inherit; color: inherit; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- En-tête collant : marque, recherche, filtres, onglets ---------- */

/* Fond pleine largeur, contenu dans la colonne, comme #header-wrapper. */
.pro-head {
  position: sticky;
  top: 0;
  z-index: 110;
  background: var(--bg-surface);
}
.pro-brand,
.pro-search,
.pro-filters,
.pro-tabs {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  border-bottom: 1px solid var(--border-subtle);
}

.pro-brand {
  display: flex;
  align-items: center;
  height: var(--header-h);
  padding: 0 16px;
}
.pro-brand-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-strong);
  text-decoration: none;
  border-radius: var(--radius-sm);
}
.pro-logo { display: block; height: 32px; width: auto; }
.pro-logo--light { display: none; }
:root[data-theme="light"] .pro-logo--dark { display: none; }
:root[data-theme="light"] .pro-logo--light { display: block; }
.pro-badge {
  padding: 3px 8px 2px;
  border-radius: 999px;
  background: var(--badge-bg);
  color: var(--badge-fg);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

/* .search-bar de biznc.nc : rangée de 48 px, champ de 40 px. */
.pro-search {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--search-h);
  padding: 0 12px;
}
.pro-search input {
  width: 100%;
  height: 40px;
  padding: 0 48px 0 16px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--gray-750);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.87rem;
  outline: none;
  transition: background-color 0.2s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.pro-search input:hover,
.pro-search input:focus {
  background: var(--gray-700);
  border-color: var(--gray-400);
}
.pro-search input::placeholder { color: var(--text-tertiary); opacity: 1; }
.pro-search input::-webkit-search-cancel-button { display: none; }
.pro-search-btn {
  position: absolute;
  top: 4px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-tertiary);
  cursor: pointer;
}
.pro-search-btn svg { width: 18px; height: 18px; }
.pro-search-btn:hover { color: var(--text-strong); }

/* .sector-quick-filter / .sector-filter-btn de biznc.nc. */
.pro-filters {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  height: var(--sector-rail-h);
  padding: 6px 12px;
}
.pro-filter {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-tertiary);
  font-size: 0.76rem;
  font-weight: 500;
  cursor: pointer;
}
.pro-filter:hover { color: var(--text-secondary); background: var(--bg-app); }
.pro-filter svg { width: 12px; height: 12px; }
/* Filtre actif : point d'attention, comme .sector-filter-dot. */
.pro-filter-dot {
  position: absolute;
  top: 0;
  right: 0;
  display: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--attention-dot);
  box-shadow: 0 1px 4px var(--attention-dot-shadow);
}
.pro-filter.is-active .pro-filter-dot { display: block; }

/* #category-tabs / .tab de biznc.nc, en cinq colonnes égales (maquette). */
.pro-tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
  padding: 4px;
}
.pro-tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 40px;
  padding: 4px 2px;
  border: 0;
  background: none;
  color: var(--text-ghost);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1px;
  line-height: 1.15;
  text-align: center;
  cursor: pointer;
  transition: color var(--duration) var(--ease);
}
.pro-tab svg { flex: none; width: 20px; height: 20px; }
.pro-tab:hover { color: var(--text-secondary); }
.pro-tab[aria-selected="true"] { color: var(--text-strong); font-weight: 600; }
/* Trait sous chaque onglet (maquette), au gabarit de .tab.active::after. */
.pro-tab::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 14px;
  right: 14px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--tab-rail);
}
.pro-tab[aria-selected="true"]::after { background: var(--text-strong); }
.pro-tab:focus:not(:focus-visible) { outline: none; }
.pro-tab:focus-visible {
  outline: 2px solid var(--text-strong);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}

/* Tablette et desktop : onglets alignés à gauche à leur largeur naturelle,
   comme .tab de biznc.nc ; les cinq colonnes égales restent pour le mobile. */
@media (min-width: 768px) {
  .pro-tabs { display: flex; }
  .pro-tab {
    flex: 0 0 auto;
    min-width: 88px;
    padding: 4px 9px;
    white-space: nowrap;
  }
}

/* Smartphone : mêmes réglages que les onglets de biznc.nc. */
@media (max-width: 600px) and (hover: none) and (pointer: coarse) {
  .pro-tab { font-size: 0.7rem; }
  .pro-tab svg { width: 18px; height: 18px; }
}

/* ---------- Contenu des onglets ---------- */

.pro-main {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 0 100px;
}
/* #feed de biznc.nc sur desktop. */
@media (min-width: 1024px) {
  .pro-main { padding: 10px 16px 100px; }
}
.pro-panel:focus-visible { outline-offset: 4px; }

.visually-hidden-frame {
  position: absolute;
  width: 0;
  height: 0;
  border: 0;
}

/* ---------- Flux ---------- */

.flux-message,
.flux-intro {
  margin: 0;
  padding: 14px 16px;
  color: var(--text-tertiary);
  font-size: 0.88rem;
  line-height: 1.5;
}
.flux-message[data-tone="error"] { color: #e05c5c; }
:root[data-theme="light"] .flux-message[data-tone="error"] { color: #a12a2a; }

.flux-list { display: flex; flex-direction: column; }
/* Titre des cartes : lien pour le clavier, rendu identique à biznc.nc. */
.article-title-link {
  color: inherit;
  text-decoration: none;
}
.article-title-link:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}
.flux-more {
  display: flex;
  width: calc(100% - 32px);
  margin: 16px auto 0;
}

.pro-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 20;
  max-width: calc(100% - 32px);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  background: var(--text-strong);
  color: var(--bg-app);
  font-size: 0.9rem;
  font-weight: 700;
  opacity: 0;
  transform: translate(-50%, 8px);
  pointer-events: none;
  transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.pro-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.pro-account { padding: 16px 14px; }
.pro-account-email {
  margin: 0 0 16px;
  color: var(--text-strong);
  font-weight: 700;
  word-break: break-all;
}
.pro-account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.pro-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-strong);
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.pro-btn:hover { background: var(--bg-hover); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ---------- Filtres et cartes (compléments aux styles extraits de biznc.nc) ---------- */

/* Les modales de filtre (.filter-panel, extraite) sont en display:flex : sans
   cette règle, l'attribut hidden ne les masquerait pas. */
.filter-panel[hidden] { display: none; }