/* =========================================================
   PlaceAffaires — Demo stylesheet
   See /design/*.md for the full graphical chart this implements.
   ========================================================= */

:root {
  --navy: #14315C;
  --navy-dark: #0F2748;
  --navy-darker: #0A1B33;
  --gold: #D8A230;
  --gold-dark: #BE8A1E;
  --gold-light: #F3D98B;

  --white: #FFFFFF;
  --bg-soft: #F5F6F8;
  --bg-muted: #EEF1F4;
  --border: #E3E6EA;
  --text-dark: #1B2733;
  --text-muted: #5B6472;
  --text-on-gold: #1B2733;

  --status-active: #2E9E5B;
  --status-active-bg: #E4F5EA;
  --status-expired: #9AA1AB;
  --status-expired-bg: #EEF0F2;
  --status-pending: #C97A1C;
  --status-pending-bg: #FBEEDD;
  --error: #C4372B;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 3px rgba(20,49,92,0.08);
  --shadow-md: 0 8px 20px rgba(20,49,92,0.08);
  --shadow-lg: 0 16px 40px rgba(15,39,72,0.16);

  --container: 1280px;
  --font-heading: 'Montserrat', Arial, sans-serif;
  --font-body: 'Source Sans 3', Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text-dark);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--navy); margin: 0; line-height: 1.2; }
p { margin: 0; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
@media (min-width: 1024px) {
  .container { padding: 0 48px; }
}

.section { padding: 64px 0; }
.section--soft { background: var(--bg-soft); }
@media (max-width: 640px) {
  .section { padding: 40px 0; }
}

.section-title {
  font-size: 26px;
  text-align: center;
  margin-bottom: 32px;
}
@media (min-width: 1024px) {
  .section-title { font-size: 32px; }
}

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

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  padding: 12px 22px;
  border-radius: var(--radius-sm);
  border: none;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.btn:hover { transform: translateY(-1px); }

.btn--navy { background: var(--navy); color: var(--white); }
.btn--navy:hover { background: var(--navy-dark); box-shadow: var(--shadow-md); }

.btn--gold { background: var(--gold); color: var(--text-on-gold); }
.btn--gold:hover { background: var(--gold-dark); box-shadow: var(--shadow-md); }

.btn--outline { background: transparent; color: var(--navy); border: 1.5px solid var(--navy); }
.btn--outline:hover { background: var(--bg-soft); }

.btn--white { background: var(--white); color: var(--navy); }
.btn--white:hover { background: var(--bg-soft); }

.btn--white-gold { background: var(--white); color: var(--gold-dark); }
.btn--white-gold:hover { background: var(--bg-soft); }

.btn--block { width: 100%; justify-content: center; }
.btn--sm { padding: 8px 14px; font-size: 13px; }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
  gap: 16px;
}
.logo { flex-shrink: 0; }
.logo img { height: 32px; width: auto; }
@media (min-width: 640px) {
  .logo img { height: 38px; }
}

.nav-primary {
  display: none;
}
@media (min-width: 1200px) {
  .nav-primary {
    display: flex;
    gap: 16px;
    align-items: center;
  }
}
@media (min-width: 1400px) {
  .nav-primary { gap: 24px; }
}
.nav-primary a {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-dark);
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.nav-primary a:hover,
.nav-primary a.is-active {
  color: var(--navy);
  border-bottom-color: var(--gold);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav-actions .btn { white-space: nowrap; }
.nav-actions .post-dropdown,
.nav-actions > .btn--outline {
  display: none;
}
@media (min-width: 640px) {
  .nav-actions .post-dropdown,
  .nav-actions > .btn--outline {
    display: inline-flex;
  }
}

/* ---------- Language switcher ---------- */
.lang-switcher {
  display: inline-flex;
  align-items: center;
  background: var(--bg-muted);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
  flex-shrink: 0;
}
.lang-switcher__item {
  display: inline-block;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  line-height: 1;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.lang-switcher__item:hover { color: var(--navy); }
.lang-switcher__item.is-active {
  background: var(--navy);
  color: var(--white);
  box-shadow: var(--shadow-sm);
}
.lang-switcher__item.is-active:hover { color: var(--white); }

.nav-mobile .lang-switcher {
  margin: 4px 0 10px;
}

.post-dropdown { position: relative; }
.post-dropdown summary {
  list-style: none;
  cursor: pointer;
}
.post-dropdown summary::-webkit-details-marker { display: none; }
.post-dropdown[open] summary { background: var(--gold-dark); }
.post-dropdown .dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  min-width: 200px;
  padding: 8px;
  z-index: 50;
}
.post-dropdown .dropdown-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
}
.post-dropdown .dropdown-menu a:hover { background: var(--bg-soft); }
.post-dropdown .dropdown-menu .dot { width: 8px; height: 8px; border-radius: 50%; }
.post-dropdown .dropdown-menu .dot--navy { background: var(--navy); }
.post-dropdown .dropdown-menu .dot--gold { background: var(--gold); }

.nav-toggle {
  display: inline-flex;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
}
@media (min-width: 1200px) {
  .nav-toggle { display: none; }
}
.nav-mobile {
  display: none;
  flex-direction: column;
  padding: 12px 24px 20px;
  border-top: 1px solid var(--border);
  gap: 4px;
}
.nav-mobile.is-open { display: flex; }
.nav-mobile a {
  padding: 10px 0;
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}
@media (min-width: 1200px) {
  .nav-mobile { display: none !important; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background-image: url('../img/hero-skyline.svg');
  background-size: cover;
  background-position: center bottom;
  padding: 72px 0 96px;
  color: var(--white);
}
.hero-content {
  max-width: 760px;
  margin: 0 auto 48px;
  text-align: center;
}
.hero h1 {
  color: var(--white);
  font-size: 32px;
  margin-bottom: 16px;
}
.hero p {
  color: #DCE3EE;
  font-size: 17px;
  max-width: 620px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .hero h1 { font-size: 48px; }
  .hero p { font-size: 18px; }
}

.dual-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  max-width: 980px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .dual-cards { gap: 24px; }
}
.dual-card {
  border-radius: var(--radius-md);
  padding: 20px 14px;
  text-align: center;
  box-shadow: var(--shadow-lg);
}
@media (min-width: 768px) {
  .dual-card { border-radius: var(--radius-lg); padding: 40px 32px; }
}
.dual-card--navy { background: var(--navy); }
.dual-card--gold { background: var(--gold); }
.dual-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
}
@media (min-width: 768px) {
  .dual-card-icon { width: 64px; height: 64px; margin-bottom: 20px; }
}
.dual-card-icon svg { width: 20px; height: 20px; }
@media (min-width: 768px) {
  .dual-card-icon svg { width: 28px; height: 28px; }
}
.dual-card--navy .dual-card-icon svg { stroke: var(--white); }
.dual-card--gold .dual-card-icon svg { stroke: var(--navy); }
.dual-card h3 { font-size: 17px; margin-bottom: 8px; }
@media (min-width: 768px) {
  .dual-card h3 { font-size: 24px; margin-bottom: 12px; }
}
.dual-card--navy h3 { color: var(--white); }
.dual-card--gold h3 { color: var(--navy); }
.dual-card p {
  font-size: 13px;
  margin-bottom: 16px;
  line-height: 1.55;
}
@media (min-width: 768px) {
  .dual-card p { font-size: 15.5px; line-height: 1.6; margin-bottom: 24px; }
}
.dual-card--navy p { color: #C9D3E3; }
.dual-card--gold p { color: #4A3B15; }
.dual-card .btn { width: 100%; justify-content: center; padding: 10px 8px; font-size: 13px; }
@media (min-width: 768px) {
  .dual-card .btn { width: auto; padding: 12px 22px; font-size: 15px; }
}

@media (min-width: 768px) {
}

/* ---------- Stats bar ---------- */
.stats-bar {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  margin-top: -48px;
  position: relative;
  z-index: 2;
  padding: 28px 24px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  text-align: center;
}
@media (min-width: 768px) {
  .stats-bar { grid-template-columns: repeat(4, 1fr); text-align: left; }
}
.stat-item {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
}
@media (min-width: 768px) { .stat-item { justify-content: flex-start; } }
.stat-item svg { flex: none; stroke: var(--navy); }
.stat-number { font-family: var(--font-heading); font-weight: 800; font-size: 24px; color: var(--navy); }
/* The fourth stat is a place name, not a figure. At the numeric size it set its
   own two lines and broke the rhythm of the row, so it steps down and leans on
   weight instead of size to stay part of the set. */
.stat-number--text { font-size: 17px; line-height: 1.25; }
.stat-label { font-size: 13px; color: var(--text-muted); }

/* ---------- Categories ---------- */
.category-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (min-width: 640px) {
  .category-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1024px) {
  .category-grid { grid-template-columns: repeat(7, 1fr); }
}
.category-tile {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 24px 12px;
  text-align: center;
  transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}
.category-tile:hover {
  border-color: var(--navy);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.category-tile .icon-circle {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--bg-soft);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 12px;
}
.category-tile .icon-circle svg { stroke: var(--navy); }
.category-tile span { font-size: 14px; font-weight: 600; }

/* ---------- How it works ---------- */
.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(4, 1fr); position: relative; }
  .steps::before {
    content: "";
    position: absolute;
    top: 28px; left: 12%; right: 12%;
    border-top: 2px dashed var(--border);
    z-index: 0;
  }
}
.step {
  text-align: center;
  position: relative;
  z-index: 1;
}
.step-number {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--bg-soft);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
  position: relative;
}
.step-number svg { stroke: var(--navy); }
.step-badge {
  position: absolute;
  top: -6px; right: -6px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 12px;
  display: flex; align-items: center; justify-content: center;
}
.step h4 { font-size: 17px; margin-bottom: 8px; }
.step p { font-size: 14px; color: var(--text-muted); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--navy-dark);
  color: #C9D3E3;
  padding: 56px 0 24px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
@media (min-width: 900px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; }
}
.footer-grid h4 {
  color: var(--white);
  font-size: 15px;
  margin-bottom: 16px;
}
.footer-grid ul li { margin-bottom: 10px; }
.footer-grid ul a { font-size: 14px; color: #B7C1D1; }
.footer-grid ul a:hover { color: var(--gold); }
.footer-brand img { height: 34px; margin-bottom: 16px; }
.footer-brand p { font-size: 14px; color: #96A3B8; max-width: 280px; }

.newsletter-form {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.newsletter-form input {
  flex: 1;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.06);
  color: var(--white);
  font-size: 14px;
}
.newsletter-form input::placeholder { color: #8493AA; }

.social-icons {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.social-icons a {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
  display: flex; align-items: center; justify-content: center;
}
.social-icons a:hover { border-color: var(--gold); color: var(--gold); }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 20px;
  text-align: center;
  font-size: 13px;
  color: #8493AA;
}

/* ---------- Page header (inner pages) ---------- */
.page-header {
  background: var(--navy);
  color: var(--white);
  padding: 40px 0;
}
.page-header h1 { color: var(--white); font-size: 28px; }
.page-header p { color: #C9D3E3; margin-top: 8px; font-size: 15px; }
.breadcrumb { font-size: 13px; color: #B7C1D1; margin-bottom: 10px; }
.breadcrumb a:hover { color: var(--gold); }

/* ---------- Catalog layout ---------- */
.catalog-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 960px) {
  .catalog-layout { grid-template-columns: 260px 1fr; }
}

.filter-panel {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
  align-self: start;
}
.filter-panel h4 { font-size: 15px; margin-bottom: 14px; }
.filter-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 24px; }
.filter-list label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  padding: 8px 6px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.filter-list label:hover { background: var(--bg-soft); }
.filter-list .count { margin-left: auto; color: var(--text-muted); font-size: 12px; }

.catalog-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}
.catalog-toolbar .result-count { color: var(--text-muted); font-size: 14px; }
.catalog-toolbar select {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  font-size: 14px;
  background: var(--white);
}

.side-switch {
  display: inline-flex;
  background: var(--bg-muted);
  border-radius: var(--radius-pill);
  padding: 4px;
  gap: 4px;
}
.side-switch a {
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 14px;
  color: var(--text-muted);
}
.side-switch a.is-active { background: var(--white); color: var(--navy); box-shadow: var(--shadow-sm); }

.listing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 640px) {
  .listing-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 960px) {
  .listing-grid { grid-template-columns: 1fr 1fr 1fr; }
}

.listing-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: box-shadow .15s ease, transform .15s ease;
}
.listing-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.listing-card-media {
  display: block;
  margin: -20px -20px 4px;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: var(--bg-soft);
}
.listing-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.listing-card:hover .listing-card-media img { transform: scale(1.05); }
.listing-card-media-ph {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--navy), var(--navy-dark));
  color: var(--gold-light); font-family: var(--font-heading); font-weight: 700;
  font-size: 15px; letter-spacing: .04em; text-transform: uppercase; text-align: center; padding: 12px;
}
.listing-card-top { display: flex; align-items: center; justify-content: space-between; }
.tag-category {
  font-size: 12px;
  font-weight: 600;
  color: var(--navy);
  background: var(--bg-soft);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}
.badge {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
}
.badge--recherche { background: var(--navy); color: var(--white); }
.badge--offre { background: var(--gold); color: var(--text-on-gold); }
.badge--active { background: var(--status-active-bg); color: var(--status-active); }
.badge--expired { background: var(--status-expired-bg); color: var(--status-expired); }
.badge--pending { background: var(--status-pending-bg); color: var(--status-pending); }

.listing-card h3 { font-size: 17px; }
.listing-card .excerpt { font-size: 14px; color: var(--text-muted); flex: 1; }
.listing-card .meta { font-size: 13px; color: var(--text-muted); display: flex; gap: 6px; align-items: center; }
/* Stacked, and pinned to the bottom with margin-top:auto. Side by side, the row
   wrapped or not depending on how long the budget string happened to be, so two
   cards in the same grid put their action at different heights. */
.listing-card .listing-card-footer {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 4px; margin-top: auto; padding-top: 6px;
}
/* A listing with no budget or rate leaves this span empty; without the rule it
   still claims a line and re-introduces the misalignment. */
.listing-card .listing-card-footer .meta:empty { display: none; }
.listing-card .listing-card-footer a { font-weight: 600; font-size: 14px; color: var(--navy); white-space: nowrap; }
.listing-card .listing-card-footer a:hover { color: var(--gold-dark); }

.pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 32px;
}
.pagination a, .pagination span {
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  border: 1px solid var(--border);
}
.pagination a:hover { border-color: var(--navy); color: var(--navy); }
.pagination .is-active { background: var(--navy); color: var(--white); border-color: var(--navy); }

/* ---------- Ad detail page ---------- */
.listing-detail-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 960px) {
  .listing-detail-layout { grid-template-columns: 1fr 360px; }
}

.listing-detail-main {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
}
.listing-detail-main h1 { font-size: 26px; margin: 12px 0 16px; }
.listing-detail-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.listing-detail-meta {
  display: flex; flex-wrap: wrap; gap: 20px;
  padding: 16px 0; margin: 16px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  font-size: 14px; color: var(--text-muted);
}
.listing-detail-meta strong { color: var(--text-dark); display: block; font-size: 13px; }
.listing-detail-main h2 { font-size: 18px; margin: 24px 0 12px; }
.listing-detail-main p.body-text { color: var(--text-dark); font-size: 15px; margin-bottom: 12px; }

.spec-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 12px;
}
.spec-list div { background: var(--bg-soft); border-radius: var(--radius-sm); padding: 12px 14px; }
.spec-list strong { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 4px; font-weight: 600; }
.spec-list span { font-size: 14px; font-weight: 600; }

.listing-sidebar > * + * { margin-top: 20px; }
.poster-card, .contact-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
}
.poster-card { text-align: center; }
.avatar-circle {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--bg-muted);
  color: var(--navy);
  font-family: var(--font-heading);
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 12px;
  font-size: 20px;
}
.poster-card h4 { font-size: 16px; }
.poster-card .role { font-size: 13px; color: var(--text-muted); margin: 4px 0 16px; }
.poster-meta { text-align: left; font-size: 13px; color: var(--text-muted); border-top: 1px solid var(--border); padding-top: 14px; margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }

.contact-card h4 { font-size: 16px; margin-bottom: 14px; }
.messaging-safety-notice { margin: 8px 0; font-size: 12px; }

/* ---------- Forms ---------- */
.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.form-hint { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 640px) {
  .form-row--2 { grid-template-columns: 1fr 1fr; }
}
input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
input[type="number"], input[type="url"], select, textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-family: inherit;
  background: var(--white);
  color: var(--text-dark);
}
textarea { resize: vertical; min-height: 120px; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(20,49,92,0.12);
}
.checkbox-row { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-muted); }

.form-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  max-width: 720px;
  margin: 0 auto;
}
.form-card h2 { font-size: 20px; margin-bottom: 4px; }
.form-card .form-subtitle { color: var(--text-muted); font-size: 14px; margin-bottom: 24px; }

/* Two-option toggle (context switch, account yes/no) */
.pill-toggle {
  display: inline-flex;
  background: var(--bg-muted);
  border-radius: var(--radius-pill);
  padding: 4px;
  gap: 4px;
  margin-bottom: 24px;
}
.pill-toggle button {
  border: none;
  background: transparent;
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 14px;
  color: var(--text-muted);
  transition: background .15s ease, color .15s ease;
}
.pill-toggle button.is-active {
  background: var(--white);
  color: var(--navy);
  box-shadow: var(--shadow-sm);
}

.account-gate { margin-bottom: 28px; }
.account-gate-panel {
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-top: 16px;
  background: var(--bg-soft);
}
.account-gate-panel[hidden] { display: none; }

hr.divider { border: none; border-top: 1px solid var(--border); margin: 28px 0; }

/* ---------- Tabs (Mon compte) ---------- */
.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 28px;
  overflow-x: auto;
}
.tab-btn {
  background: none;
  border: none;
  padding: 12px 20px;
  font-weight: 600;
  font-size: 15px;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.tab-btn.is-active { color: var(--navy); border-bottom-color: var(--gold); }
.tab-panel { display: none; }
.tab-panel.is-active { display: block; }

/* Account workspace: account panel (left) + persistent chat (right) */
.account-workspace { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: start; }
@media (min-width: 1080px) {
  .account-workspace { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 32px; }
}
.account-panel { min-width: 0; }
.account-panel .tabs { margin-bottom: 24px; }
.account-identity {
  display: flex; align-items: center; gap: 14px;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 16px 18px; margin-bottom: 22px;
}
.account-identity-info { flex: 1; min-width: 0; }
.account-identity-info h3 { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account-identity-info .role { font-size: 13px; color: var(--text-muted); }
.account-identity .account-logout { margin: 0; flex-shrink: 0; }
.account-chat { min-width: 0; }
.account-chat-title { margin-bottom: 14px; }

.account-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 900px) {
  .account-layout { grid-template-columns: 280px 1fr; }
}
.account-profile-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  text-align: center;
  align-self: start;
}
.account-profile-card .avatar-circle { width: 84px; height: 84px; font-size: 26px; }
.account-profile-card h3 { margin: 8px 0 2px; font-size: 18px; }
.account-profile-card .role { color: var(--text-muted); font-size: 13px; margin-bottom: 16px; }
.account-stats { display: flex; justify-content: center; gap: 20px; margin-top: 16px; border-top: 1px solid var(--border); padding-top: 16px; }
.account-stats div { text-align: center; }
.account-stats strong { display: block; font-family: var(--font-heading); font-size: 18px; color: var(--navy); }
.account-stats span { font-size: 12px; color: var(--text-muted); }

.my-listing-row {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.my-listing-row .my-listing-main { flex: 1; min-width: 220px; }
.my-listing-row h4 { font-size: 15px; margin-bottom: 4px; }
.my-listing-row .meta { font-size: 13px; color: var(--text-muted); }
.my-listing-row .my-listing-actions { display: flex; gap: 8px; align-items: center; }

.settings-block { margin-bottom: 28px; }
.settings-block h4 { font-size: 16px; margin-bottom: 12px; }
.toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0; border-bottom: 1px solid var(--border);
}
.toggle-row:last-child { border-bottom: none; }
.toggle-row .toggle-label { font-size: 14px; }
.toggle-row .toggle-desc { font-size: 12px; color: var(--text-muted); }

.switch {
  position: relative; display: inline-block; width: 44px; height: 24px; flex: none;
}
.switch input { opacity: 0; width: 0; height: 0; }
.switch .track {
  position: absolute; inset: 0; background: var(--border); border-radius: var(--radius-pill);
  transition: background .15s ease;
}
.switch .track::before {
  content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px;
  background: var(--white); border-radius: 50%; transition: transform .15s ease;
  box-shadow: var(--shadow-sm);
}
.switch input:checked + .track { background: var(--navy); }
.switch input:checked + .track::before { transform: translateX(20px); }

/* ---------- Simple content page ---------- */
.simple-page { max-width: 720px; margin: 0 auto; }
.simple-page h2 { margin: 28px 0 10px; font-size: 20px; }
.simple-page p { margin-bottom: 12px; color: var(--text-dark); }

/* ---------- Toast (demo confirmation) ---------- */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(120%);
  background: var(--navy);
  color: var(--white);
  padding: 14px 22px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  font-size: 14px;
  font-weight: 600;
  z-index: 999;
  transition: transform .25s ease;
}
.toast.is-visible { transform: translateX(-50%) translateY(0); }

/* ---------- Messenger (Mon compte › Messages) ---------- */
.avatar-circle--sm { width: 42px; height: 42px; font-size: 15px; margin: 0; flex-shrink: 0; }

.messenger {
  display: grid;
  /* minmax(0, 1fr), not 1fr: a plain fr track floors at min-content, so inside the
     account page's narrower right column the thread refused to shrink, overflowed
     the grid, and got clipped by the overflow:hidden below (cut-off bubbles). */
  grid-template-columns: 240px minmax(0, 1fr);
  height: 640px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--white);
}
@media (max-width: 760px) { .messenger { grid-template-columns: 1fr; height: auto; } }

/* Conversation list */
.messenger-list { border-right: 1px solid var(--border); overflow-y: auto; background: var(--white); }
@media (max-width: 760px) { .messenger-list { border-right: none; border-bottom: 1px solid var(--border); max-height: 320px; } }
.message-row {
  display: flex; align-items: flex-start; gap: 12px; width: 100%;
  padding: 14px 16px; border: none; border-bottom: 1px solid var(--border);
  background: none; text-align: left; cursor: pointer; position: relative;
  transition: background-color .12s ease;
}
.message-row:hover { background: var(--bg-soft); }
.message-row.is-active { background: var(--bg-muted); }
.message-row.is-active::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--gold); }
.message-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.message-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.message-row-name { font-family: var(--font-heading); font-weight: 600; font-size: 14.5px; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.message-row-time { font-size: 11px; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }
.message-row-subject { font-size: 12px; color: var(--gold-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.message-row-excerpt { font-size: 13px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.message-row.is-unread .message-row-name { font-weight: 800; }
.message-row.is-unread .message-row-excerpt { color: var(--text-dark); font-weight: 600; }
.message-row-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); flex-shrink: 0; margin-top: 6px; }

/* Active thread pane */
.messenger-thread { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--bg-soft); }
.messenger-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--text-muted); padding: 40px; text-align: center; }
@media (max-width: 760px) { .messenger-empty { min-height: 200px; } }
.messenger-empty-icon { color: var(--border); }
.thread { display: flex; flex-direction: column; height: 100%; min-height: 0; min-width: 0; }

.thread-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; background: var(--white); border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.thread-peer { display: flex; align-items: center; gap: 12px; min-width: 0; }
.thread-peer-info { min-width: 0; }
.thread-peer-info h4 { font-size: 15px; }
.thread-subject { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.thread-menu { position: relative; flex-shrink: 0; }
.thread-menu-btn { list-style: none; cursor: pointer; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1; color: var(--text-muted); }
.thread-menu-btn::-webkit-details-marker { display: none; }
.thread-menu-btn:hover { background: var(--bg-soft); color: var(--navy); }
.thread-menu-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); min-width: 220px; padding: 6px; }
.thread-menu-item { display: block; width: 100%; text-align: left; background: none; border: none; padding: 9px 12px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; color: var(--navy); cursor: pointer; }
.thread-menu-item:hover { background: var(--bg-soft); }
.thread-report[open] .thread-report-form { padding: 8px 12px; display: flex; flex-direction: column; gap: 8px; }
.thread-report-form textarea { min-height: 70px; font-size: 13px; }

/* Messages scroll area + chat bubbles */
.message-thread { flex: 1; overflow-y: auto; scroll-behavior: smooth; padding: 20px; display: flex; flex-direction: column; gap: 4px; min-height: 0; min-width: 0; }
.message-bubble { max-width: 78%; padding: 9px 13px; border-radius: 14px 14px 14px 4px; background: var(--white); border: 1px solid var(--border); align-self: flex-start; box-shadow: var(--shadow-sm); }
.message-bubble.is-own { align-self: flex-end; background: var(--navy); color: var(--white); border-color: var(--navy); border-radius: 14px 14px 4px 14px; }
.message-bubble + .message-bubble { margin-top: 2px; }
.message-bubble-body { font-size: 14.5px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.message-bubble-time { display: block; font-size: 10.5px; opacity: .6; margin-top: 4px; text-align: right; }
.message-bubble.is-own .message-bubble-time { color: var(--gold-light); opacity: .85; }
.message-bubble-images { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 2px; }
.message-bubble-images img { width: 120px; height: 90px; object-fit: cover; border-radius: 8px; }

/* Composer */
.message-reply-form { flex-shrink: 0; background: var(--white); border-top: 1px solid var(--border); padding: 12px 16px; }
.composer-row { display: flex; align-items: flex-end; gap: 8px; }
.message-reply-form textarea { flex: 1; min-width: 0; resize: none; min-height: 42px; max-height: 140px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 22px; font-size: 14.5px; line-height: 1.4; }
.composer-attach { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; color: var(--text-muted); cursor: pointer; flex-shrink: 0; }
.composer-attach:hover { background: var(--bg-soft); color: var(--navy); }
.composer-attach input[type="file"] { display: none; }
.composer-send { width: 42px; height: 42px; padding: 0; border-radius: 50%; justify-content: center; flex-shrink: 0; }
.messaging-safety-notice { margin: 8px 2px 0; font-size: 11.5px; }

/* Law 25 cookie / external-content consent banner */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; background: var(--navy); color: #fff; box-shadow: 0 -2px 12px rgba(0,0,0,.25); }
.cookie-banner__inner { max-width: 1100px; margin: 0 auto; padding: 16px 20px; display: flex; gap: 16px 24px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.cookie-banner__text { margin: 0; font-size: 14px; line-height: 1.5; flex: 1 1 320px; }
.cookie-banner__text a { color: var(--gold-light); text-decoration: underline; }
.cookie-banner__actions { display: flex; gap: 10px; flex-shrink: 0; margin: 0; }
.cookie-banner__actions .btn { padding: 9px 16px; font-size: 14px; }
.cookie-accept { background: var(--gold); color: var(--navy); border: none; }
.cookie-accept:hover { background: var(--gold-dark); }
.cookie-essential { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.55); }
.cookie-essential:hover { border-color: #fff; }
@media (max-width: 600px) {
  .cookie-banner__actions { width: 100%; }
  .cookie-banner__actions .btn { flex: 1; }
}

/* Messaging thread — unread divider, reply spinner (UI#4) */
.message-unread-divider { text-align: center; font-size: 12px; font-weight: 700; color: var(--gold-dark); text-transform: uppercase; letter-spacing: .04em; margin: 12px 0; position: relative; }
.message-unread-divider::before, .message-unread-divider::after { content: ""; position: absolute; top: 50%; width: calc(50% - 70px); height: 1px; background: var(--gold-light); }
.message-unread-divider::before { left: 0; }
.message-unread-divider::after { right: 0; }
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after { content: ""; position: absolute; top: 50%; left: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: pa-spin .6s linear infinite; color: #fff; }
@keyframes pa-spin { to { transform: rotate(360deg); } }

/* Confirmation modal (UI#5) */
.modal-overlay { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(10,27,51,.55); }
.modal-overlay[hidden] { display: none; }
.modal-box { background: #fff; border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,.3); max-width: 420px; width: 100%; padding: 24px; }
.modal-message { margin: 0 0 20px; font-size: 16px; line-height: 1.5; color: var(--navy); }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; }

/* Empty / loading / error states (UI#6) */
.empty-state { text-align: center; padding: 40px 24px; color: var(--navy); }
.empty-state__title { font-size: 18px; margin-bottom: 8px; }
.empty-state__message { color: #5a6b82; max-width: 42ch; margin: 0 auto 16px; line-height: 1.5; }
.empty-state__action { margin-top: 4px; }
.loading-state { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 40px 24px; color: #5a6b82; }
.inline-spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid var(--gold-light); border-top-color: var(--gold); border-radius: 50%; animation: pa-spin .6s linear infinite; }

/* Image previews + client-side field errors (UI#8) */
.image-previews { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.image-preview { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; border: 1px solid var(--gold-light); }
.field-error { color: var(--error); margin-top: 4px; }

/* Accessibility baseline (UI#10): skip link + keyboard focus ring */
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 2000; background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 8px; font-weight: 600; transition: top .15s ease; }
.skip-link:focus { top: 0; }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 2px; }

/* Listing detail gallery (demo images) */
.listing-gallery { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 16px 0; }
.listing-gallery:has(.listing-gallery-img:nth-child(2)) { grid-template-columns: 1fr 1fr; }
.listing-gallery-img { width: 100%; height: 280px; object-fit: cover; border-radius: var(--radius-md); border: 1px solid var(--border); }
.listing-gallery-img:first-child:nth-last-child(1) { grid-column: 1 / -1; }

/* Catalogue keyword search (P7.2) */
.filter-search { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.filter-search input[type="search"] { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 14px; }
.filter-search .btn { justify-content: center; }
.search-term-note { font-size: 13px; color: var(--text-muted); margin-top: 2px; }

/* Global search entry — hero + mobile nav (P7.3) */
.hero-search {
  display: flex; align-items: center; gap: 10px;
  margin: 30px auto 0; max-width: 600px;
  background: var(--white);
  border-radius: var(--radius-pill);
  padding: 6px 6px 6px 20px;
  box-shadow: var(--shadow-lg);
}
.hero-search-icon { color: var(--text-muted); flex-shrink: 0; }
.hero-search input[type="search"] { flex: 1; min-width: 0; padding: 13px 0; border: none; background: none; font-size: 16px; color: var(--text-dark); outline: none; }
.hero-search .btn { flex-shrink: 0; border-radius: var(--radius-pill); padding: 12px 26px; }
.nav-mobile-search { display: flex; gap: 8px; padding: 8px 0 12px; border-bottom: 1px solid var(--border); }
.nav-mobile-search input[type="search"] { flex: 1; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 14px; }
@media (max-width: 480px) { .hero-search { border-radius: var(--radius-md); padding: 10px; flex-direction: column; align-items: stretch; } .hero-search-icon { display: none; } .hero-search input[type="search"] { padding: 12px; } .hero-search .btn { justify-content: center; } }

/* Saved searches (P7.4) */
.save-search-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.save-search-form input[type="text"] { flex: 1 1 220px; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 14px; }
.form-flash { background: var(--status-active-bg); color: var(--status-active); padding: 10px 14px; border-radius: var(--radius-sm); font-size: 14px; margin-bottom: 16px; }
.saved-search-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.saved-search-row:last-child { border-bottom: 0; }
.saved-search-name { font-family: var(--font-heading); font-weight: 600; color: var(--navy); }
.saved-search-name:hover { color: var(--gold-dark); }
.saved-search-actions { display: flex; gap: 8px; align-items: center; }

/* Account sidebar logout */
.account-logout { margin-top: 12px; }

/* Guest content gate on listing detail (privacy) */
.locked-content { position: relative; }
.locked-content .body-text { -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent); mask-image: linear-gradient(to bottom, #000 45%, transparent); }
.locked-gate { margin-top: 8px; text-align: center; padding: 20px 16px; background: var(--bg-soft); border: 1px dashed var(--border); border-radius: var(--radius-md); }
.locked-gate p { margin-bottom: 12px; color: var(--text-muted); font-size: 14px; }

/* Cookie banner dismiss animation (no reload) */
.cookie-banner { transition: transform .25s ease, opacity .25s ease; }
.cookie-banner.is-dismissed { transform: translateY(100%); opacity: 0; }

/* Image loading shimmer — avoids blank white rectangles on slow connections */
@keyframes img-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.listing-card-media, .listing-gallery-img, .message-bubble-images img, .image-preview {
  background-image: linear-gradient(90deg, var(--bg-muted) 25%, var(--bg-soft) 37%, var(--bg-muted) 63%);
  background-size: 400% 100%;
  animation: img-shimmer 1.5s ease-in-out infinite;
}

/* Account panel tabs: tighter so all fit without an overflow scrollbar */
.account-panel .tabs { overflow-x: visible; flex-wrap: wrap; }
.account-panel .tab-btn { padding: 12px 14px; font-size: 14px; }

/* Admin entry point in the member tab bar */
.tab-btn--link { display: inline-flex; align-items: center; color: var(--gold-dark); }
.tab-btn--link:hover { color: var(--navy); }

/* Lightbox — photos in conversations and on ads */
.lightbox {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(10, 27, 51, .92);
  animation: lightbox-in .15s ease;
  touch-action: pan-y;
}
.lightbox[hidden] { display: none; }
@keyframes lightbox-in { from { opacity: 0; } to { opacity: 1; } }
.lightbox-image {
  max-width: min(100%, 1100px); max-height: 88vh;
  width: auto; height: auto; object-fit: contain;
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  cursor: default;
}
.lightbox-close {
  position: absolute; top: 16px; right: 20px;
  width: 44px; height: 44px; border: none; border-radius: 50%;
  background: rgba(255,255,255,.12); color: #fff;
  font-size: 28px; line-height: 1; cursor: pointer;
}
.lightbox-close:hover { background: rgba(255,255,255,.24); }
body.has-lightbox { overflow: hidden; }

/* Photos that open in the lightbox advertise it on hover */
img[data-lightbox] { cursor: zoom-in; }

/* Incontournables CTA */
.feature-cta {
  margin-top: 40px; padding: 36px 28px; text-align: center;
  background: var(--navy); color: #fff; border-radius: var(--radius-lg);
}
.feature-cta h2 { color: #fff; font-size: 22px; margin-bottom: 10px; }
.feature-cta p { color: #C9D3E3; margin: 0 auto 20px; max-width: 52ch; }

/* Footer inline form (cookie preferences) — looks like the sibling links */
.footer-inline-form { display: inline; }
.footer-inline-form button {
  background: none; border: none; padding: 0; font: inherit;
  color: inherit; cursor: pointer; text-align: left;
}
.footer-inline-form button:hover { color: var(--gold-light); }

/* ── Share buttons ────────────────────────────────────────────────────────── */
/* Plain links, no third-party widget script — see partials/share-buttons. */

.share-buttons {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border);
}
.share-buttons__label { font-size: 14px; font-weight: 600; color: var(--text-muted); }
.share-buttons__list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.share-button {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--white);
  font-size: 13px; font-weight: 600; color: var(--navy);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
/* currentColor, so the mark inverts with the label on hover instead of needing
   a second rule per network. */
.share-button__icon { flex: none; }
.share-button:hover { background: var(--navy); border-color: var(--navy); color: var(--white); }
.share-button--linkedin:hover { background: #0A66C2; border-color: #0A66C2; }
.share-button--facebook:hover { background: #1877F2; border-color: #1877F2; }
.share-button--x:hover        { background: #000000; border-color: #000000; }
.share-button--reddit:hover   { background: #FF4500; border-color: #FF4500; }
.share-button--telegram:hover { background: #229ED9; border-color: #229ED9; }

/* ── Sector × region hubs ─────────────────────────────────────────────────── */

.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.hub-tile {
  display: flex; flex-direction: column; gap: 2px;
  padding: 16px 18px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--white); transition: border-color .15s ease, transform .15s ease;
}
.hub-tile:hover { border-color: var(--gold); transform: translateY(-2px); }
.hub-tile__category { font-weight: 700; color: var(--navy); }
.hub-tile__region { font-size: 14px; color: var(--text-dark); }
.hub-tile__count { font-size: 12px; color: var(--text-muted); }

.hub-links { margin-top: 36px; }
.hub-links h2 { font-size: 18px; margin-bottom: 12px; }
.hub-links__list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.hub-links__list a {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--white);
  font-size: 14px; font-weight: 600; color: var(--navy);
}
.hub-links__list a:hover { border-color: var(--navy); background: var(--bg-soft); }
.hub-links__list span { font-size: 12px; font-weight: 400; color: var(--text-muted); }

/* ── Ratings ──────────────────────────────────────────────────────────────── */

.rating-score { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.rating-score--compact { gap: 4px; font-size: 12px; }
.rating-stars { display: inline-flex; gap: 1px; line-height: 1; }
.rating-star { color: var(--bg-muted); }
.rating-star.is-filled { color: var(--gold); }
.rating-value { font-weight: 700; color: var(--text-dark); }
.rating-count { color: var(--text-muted); font-size: 12px; }

/* Star input: five radios in reverse DOM order, highlighted with CSS sibling
   selectors. No JavaScript — the enforcing CSP forbids inline script, and a
   star widget does not justify a JS file. row-reverse restores 1→5 visually. */
.rating-input { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; border: 0; padding: 0; margin: 0 0 10px; }
.rating-input__radio { position: absolute; opacity: 0; width: 0; height: 0; }
.rating-input__star { cursor: pointer; font-size: 26px; line-height: 1; color: var(--bg-muted); transition: color .12s ease; }
/* The hovered/checked star, plus every star after it in the DOM (= before it
   visually), which is exactly "this many stars". */
.rating-input__star:hover,
.rating-input__star:hover ~ .rating-input__star,
.rating-input__radio:checked ~ .rating-input__star { color: var(--gold); }
.rating-input__radio:checked + .rating-input__star { color: var(--gold); }
/* Keyboard focus must be visible: the real input is off-screen. */
.rating-input__radio:focus-visible + .rating-input__star { outline: 2px solid var(--navy); outline-offset: 2px; border-radius: 3px; }

.rating-invite {
  background: #FDF8EC; border: 1px solid var(--gold-light); border-radius: 10px;
  padding: 14px 16px; margin: 0 0 12px;
}
.rating-invite--done { background: var(--bg-soft); border-color: var(--border); }
.rating-invite__lead { font-size: 14px; font-weight: 600; margin: 0 0 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rating-invite__received { font-size: 14px; margin: 6px 0 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rating-invite__comment { width: 100%; font-size: 14px; resize: vertical; }
.rating-invite__comment-text { font-style: italic; color: var(--text-muted); margin: 6px 0 0; font-size: 14px; }
.rating-invite__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.rating-invite__note { font-size: 12px; color: var(--text-muted); margin: 6px 0 0; }

/* Reviews under the poster card on a listing page */
.poster-reviews { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); text-align: left; }
.poster-reviews h5 { font-size: 13px; margin-bottom: 8px; }
.poster-review { margin-bottom: 10px; }
.poster-review:last-child { margin-bottom: 0; }
.poster-review__stars { display: block; line-height: 1; margin-bottom: 2px; }
.poster-review__text { font-size: 13px; color: var(--text-dark); margin: 0; }
.poster-review__meta { font-size: 11px; color: var(--text-muted); }

/* Score in the conversation list, next to the peer's name */
.message-row-name .rating-score { margin-left: 6px; }

/* ── Unread / pending count badge ─────────────────────────────────────────── */
/* Used by the "Mon compte" unread-message count and the admin sidebar's
   pending-ratings count. It had no styling at all and rendered as bare text
   beside the label, reading as part of the wording rather than as a count. */

.unread-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px;
  border-radius: 999px;
  background: var(--gold); color: var(--navy-darker);
  font-size: 11px; font-weight: 700; line-height: 1;
  vertical-align: middle;
}

/* ── About page ───────────────────────────────────────────────────────────── */
/* Navy carries structure and authority, gold marks opportunity and action, and
   the two never sit at equal weight in one block (design/01-couleurs.md). */

.about-hero {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-darker) 100%);
  color: var(--white);
  padding: 72px 0 80px;
  text-align: center;
}
.about-hero__eyebrow {
  text-transform: uppercase; letter-spacing: .14em;
  font-size: 12px; font-weight: 700; color: var(--gold);
  margin-bottom: 14px;
}
.about-hero h1 {
  color: var(--white); font-size: 32px; line-height: 1.2;
  /* Wide enough that the headline lands on two lines rather than three ragged
     ones; balance keeps those two lines close in length. */
  max-width: 22ch; margin: 0 auto 18px;
  text-wrap: balance;
}
@media (min-width: 900px) { .about-hero h1 { font-size: 44px; } }
.about-hero__lead {
  color: #DCE3EE; font-size: 17px; line-height: 1.65;
  max-width: 660px; margin: 0 auto;
}

/* Figures sit on a band that straddles the hero edge, so they read as evidence
   for the claim above rather than as a separate section. */
.about-stats { background: var(--navy-darker); padding: 0 0 40px; }
.about-stats__grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  margin: 0; padding: 0;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-lg); overflow: hidden;
}
@media (min-width: 800px) { .about-stats__grid { grid-template-columns: repeat(4, 1fr); } }
.about-stat { background: var(--navy-darker); padding: 22px 16px; text-align: center; }
.about-stat__value {
  font-family: var(--font-heading); font-weight: 800;
  font-size: 30px; color: var(--gold); line-height: 1;
}
.about-stat__label {
  margin: 6px 0 0; font-size: 13px; color: #B9C4D6;
}

/* Mission + the recherche/offre duality */
.about-split { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; }
@media (min-width: 940px) { .about-split { grid-template-columns: 1fr 1fr; gap: 56px; } }
.about-split h2 { font-size: 26px; margin-bottom: 14px; }
.about-split .body-text + .body-text { margin-top: 12px; }

.about-duo { display: grid; gap: 14px; }
@media (min-width: 520px) { .about-duo { grid-template-columns: 1fr 1fr; } }
.about-duo__card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 24px 22px; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transition: transform .18s ease, box-shadow .18s ease;
}
.about-duo__card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.about-duo__card--navy { background: var(--navy); color: var(--white); }
.about-duo__card--gold { background: var(--gold); color: var(--text-on-gold); }
.about-duo__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%; margin-bottom: 4px;
}
.about-duo__card--navy .about-duo__icon { background: rgba(255,255,255,.14); }
.about-duo__card--gold .about-duo__icon { background: rgba(27,39,51,.12); }
.about-duo__title { font-family: var(--font-heading); font-weight: 700; font-size: 18px; }
.about-duo__copy { font-size: 14px; line-height: 1.5; }
.about-duo__card--navy .about-duo__copy { color: #DCE3EE; }

/* Steps */
.about-steps {
  display: grid; grid-template-columns: 1fr; gap: 18px;
  list-style: none; margin: 0; padding: 0; counter-reset: none;
}
@media (min-width: 860px) { .about-steps { grid-template-columns: repeat(3, 1fr); } }
.about-step {
  position: relative; background: var(--white);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 28px 24px 24px; box-shadow: var(--shadow-sm);
}
.about-step__num {
  position: absolute; top: -14px; left: 24px;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--navy); color: var(--white);
  font-family: var(--font-heading); font-weight: 700; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.about-step__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--radius-md);
  background: var(--bg-muted); color: var(--navy); margin-bottom: 14px;
}
.about-step__title { font-size: 17px; margin-bottom: 6px; }
.about-step__copy { font-size: 15px; color: var(--text-muted); line-height: 1.6; margin: 0; }

/* Moderation */
.about-moderation { display: grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 940px) { .about-moderation { grid-template-columns: 1fr 1.15fr; gap: 48px; } }
.about-moderation h2 { font-size: 26px; margin-bottom: 12px; }
.about-rules { list-style: none; margin: 0; padding: 0; }
.about-rule {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 0; border-bottom: 1px solid var(--border);
  font-size: 15px; line-height: 1.6;
}
.about-rule:last-child { border-bottom: 0; }
.about-rule__check {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; margin-top: 1px;
  background: var(--status-active-bg); color: var(--status-active);
}
.about-disclaimer {
  display: flex; gap: 12px; align-items: flex-start;
  margin-top: 32px; padding: 18px 20px;
  background: var(--status-pending-bg); border-left: 3px solid var(--status-pending);
  border-radius: var(--radius-sm);
  font-size: 15px; line-height: 1.6; color: var(--text-dark);
}
.about-disclaimer__icon { flex: 0 0 auto; color: var(--status-pending); margin-top: 1px; }

/* Operator — the E-E-A-T block, given a band of its own */
.about-operator { background: var(--navy); color: var(--white); padding: 56px 0; }
.about-operator h2 { color: var(--white); font-size: 26px; text-align: center; margin-bottom: 32px; }
.about-operator__grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 860px) { .about-operator__grid { grid-template-columns: repeat(3, 1fr); } }
.about-operator__item {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-lg); padding: 22px;
}
.about-operator__item h3 { color: var(--gold); font-size: 15px; margin-bottom: 8px; }
.about-operator__item p { color: #DCE3EE; font-size: 15px; line-height: 1.6; margin: 0; }
.about-operator__item a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.about-operator__item a:hover { color: var(--gold-light); }

/* Closing CTA — gold, because it asks for the action */
.about-cta { background: var(--gold); color: var(--text-on-gold); padding: 56px 0; text-align: center; }
.about-cta h2 { font-size: 26px; margin-bottom: 10px; }
.about-cta p { max-width: 560px; margin: 0 auto 22px; font-size: 16px; line-height: 1.6; }
.about-cta__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.about-cta .btn--outline { border-color: var(--navy); color: var(--navy); }
.about-cta .btn--outline:hover { background: var(--navy); color: var(--white); }

/* Category pills inside each hero card. The old version was a comma-separated
   sentence floating below both cards, belonging to neither and reading as an
   afterthought; these are a set of categories, so they are marked up and shown
   as one. */
.dual-card-tags {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
  list-style: none; margin: 0 0 18px; padding: 0;
}
.dual-card-tags li {
  padding: 4px 10px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 600; line-height: 1.4;
  white-space: nowrap;
}
.dual-card--navy .dual-card-tags li { background: rgba(255,255,255,.14); color: #E6ECF6; }
.dual-card--gold .dual-card-tags li { background: rgba(20,49,92,.12); color: var(--navy); }
@media (min-width: 768px) { .dual-card-tags { gap: 8px; margin-bottom: 24px; } .dual-card-tags li { font-size: 13px; } }

/* Footer publish block — replaces the newsletter form, which posted nowhere. */
.footer-publish p { font-size: 14px; color: #B7C1D1; margin-bottom: 14px; }
.footer-publish__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.btn--outline-light {
  background: transparent; border: 1px solid rgba(255,255,255,.4); color: var(--white);
}
.btn--outline-light:hover { background: rgba(255,255,255,.12); border-color: var(--white); }

/* The catalogue's page header already provides the visual break, so a full 64px
   of section padding on top of it left the type toggle stranded in an empty band. */
.section--tight-top { padding-top: 28px; }
.side-switch { margin-bottom: 24px; }

/* Poster card: label left, value right on one line. The <dl> inherits the
   card's centring otherwise, which stacked each pair into two ragged lines. */
.poster-meta > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.poster-meta dt { margin: 0; }
.poster-meta dd { margin: 0; color: var(--text-dark); font-weight: 600; text-align: right; }
.poster-card__action { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); text-align: left; }
.poster-card__action h4 { font-size: 16px; margin-bottom: 14px; }

/* A listing inside its warning window, in Mes annonces. */
.listing-expiry-soon { color: var(--status-pending); font-weight: 600; }

/* ── Styled file inputs ───────────────────────────────────────────────────── */

/* See partials/file-input.blade.php: the native control is hidden because its
   button text comes from the browser locale and cannot be translated or styled.
   Clipped rather than display:none so it stays focusable by keyboard. */
.file-field { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.file-field__input {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.file-field__button {
  display: inline-block; padding: 9px 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--navy); background: var(--white);
  font-size: 14px; font-weight: 600; color: var(--navy); cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
  margin-bottom: 0;
}
.file-field__button:hover { background: var(--navy); color: var(--white); }
/* The input carries the focus, so the label has to show it. */
.file-field__input:focus-visible + .file-field__button {
  outline: 2px solid var(--gold); outline-offset: 2px;
}
.file-field__status { font-size: 13px; color: var(--text-muted); min-width: 0; word-break: break-word; }

/* Closing call to action under a section's grid — the point where interest is
   highest was previously a dead end into the next section. */
.section-cta { display: flex; justify-content: center; margin-top: 28px; }

/* ── Verified member badge ────────────────────────────────────────────────── */

.verified-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  background: var(--gold-light); color: var(--navy);
  border: 1px solid var(--gold);
  font-size: 12px; font-weight: 700; white-space: nowrap;
  /* help, not default: the cursor is what tells someone the title is worth
     hovering for. */
  cursor: help;
}
.verified-badge svg { flex: none; }

/* ── Listing page: what comes after the description ───────────────────────── */

/* The sidebar follows the description down. On a long listing the poster card
   and its contact form used to scroll away, leaving the reader at the bottom of
   the page with no way to act on what they had just read — and, on a short
   listing viewed by its own owner, several hundred pixels of empty column. */
@media (min-width: 960px) {
  .listing-sidebar { position: sticky; top: 24px; align-self: start; }
}

.listing-related { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--border); }
.listing-related h2 { font-size: 20px; margin-bottom: 18px; }
.listing-related__more { display: inline-block; margin-top: 16px; font-weight: 600; font-size: 14px; color: var(--navy); }
.listing-related__more:hover { color: var(--gold-dark); }

/* Three across in the narrower main column, where the catalogue's own
   min-width would drop them to one. */
.listing-grid--compact { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.listing-grid--compact .listing-card { padding: 14px; }
.listing-grid--compact .listing-card h3 { font-size: 15px; }
/* The media's negative margin has to match the card's padding exactly or it
   bleeds past the rounded corner. Its aspect-ratio is left alone: pinning a
   fixed height instead cropped the caption baked into the cover images. */
.listing-grid--compact .listing-card-media { margin: -14px -14px 4px; }

/* ── Member profile page ──────────────────────────────────────────────────── */

.profile-header {
  display: flex; flex-wrap: wrap; gap: 24px; align-items: center;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 28px; margin-bottom: 32px;
}
.profile-header .avatar-circle { margin: 0; }
.avatar-circle--lg { width: 88px; height: 88px; font-size: 28px; }
.profile-header__body { flex: 1 1 260px; }
.profile-header__body h2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 24px; }
.profile-header__body .role { color: var(--text-muted); margin-top: 4px; }
.profile-header .poster-meta { margin-top: 14px; }
.profile-reviews { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 32px; }
@media (min-width: 760px) { .profile-reviews { grid-template-columns: 1fr 1fr; } }
.profile-reviews .poster-review {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 16px; text-align: left;
}

/* Left-aligned variant of the centred section heading, for pages that are a
   sequence of blocks rather than a centred marketing layout. */
.section-title--left { text-align: left; margin-bottom: 18px; }

/* Said in words rather than shown as five empty stars, which reads as a score
   of zero — see partials/rating-score.blade.php. */
.rating-score--none { color: var(--text-muted); font-size: 13px; }

/* ── Saved listings ───────────────────────────────────────────────────────── */

.favourite-form { display: inline-flex; }
.favourite-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--white);
  font-size: 13px; font-weight: 600; color: var(--navy);
  font-family: inherit; cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.favourite-btn:hover { border-color: var(--error); color: var(--error); }
/* Saved state is carried by the filled heart, not by a colour change on the
   chrome: the button still has to read as a button you can press again. */
.favourite-btn.is-saved { color: var(--error); border-color: var(--error); }
.favourite-btn svg { flex: none; }

/* Icon-only, floated over the card's cover image. */
.listing-card-save { position: absolute; top: 10px; right: 10px; z-index: 1; }
.favourite-btn--compact {
  padding: 0; width: 34px; height: 34px; justify-content: center;
  border-radius: 50%;
  /* Semi-opaque white: the covers are dark at the top on some categories and
     fully transparent chrome would lose the icon against them. */
  background: rgba(255, 255, 255, .92);
  box-shadow: var(--shadow-sm);
}
/* The card is the positioning context for the button above. */
.listing-card { position: relative; }

.listing-detail-actions { margin-top: 24px; }

/* ── Reporting a listing ──────────────────────────────────────────────────── */

/* A disclosure rather than a standing button: reporting is rare, and a red
   control beside "Enregistrer" on every listing misrepresents how often it is
   the right one. */
.listing-report { margin-top: 12px; }
.listing-report__toggle {
  display: inline-block; cursor: pointer; list-style: none;
  font-size: 13px; color: var(--text-muted); text-decoration: underline;
}
.listing-report__toggle::-webkit-details-marker { display: none; }
.listing-report__toggle:hover { color: var(--error); }
.listing-report__form {
  margin-top: 14px; padding: 16px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg-soft); max-width: 460px;
}
.listing-report__form .form-group { margin-bottom: 12px; }

/* ── Per-listing statistics ───────────────────────────────────────────────── */

.listing-stats-head {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
  justify-content: space-between; margin-bottom: 24px;
}
.listing-stats-head h2 { font-size: 22px; }
.stats-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px; margin-bottom: 24px;
}
.stat-card {
  background: var(--white); border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-md); padding: 18px 20px;
  display: flex; flex-direction: column; gap: 4px;
}
.stat-card strong { font-family: var(--font-heading); font-size: 28px; color: var(--navy); }
.stat-card span { font-size: 13px; color: var(--text-muted); }

/* ── Bar chart (admin statistics + per-listing statistics) ────────────────── */

/* Server-rendered bar chart. No JS and no charting library: the site has no
   Node build step and the CSP is script-src 'self', so the chart is plain SVG
   scaled by the browser. */
.stat-chart {
  background: var(--white); border: 1px solid var(--border);
  border-radius: 10px; padding: 20px; margin-top: 18px;
}
.stat-chart__title { font-size: 16px; margin-bottom: 14px; }
.stat-chart__svg { display: block; width: 100%; height: 180px; }
.stat-chart__bar--views { fill: var(--gold-light); }
.stat-chart__bar--visitors { fill: var(--navy); }
.stat-chart__axis {
  display: flex; list-style: none; margin: 6px 0 0; padding: 0;
  font-size: 11px; color: var(--text-muted);
}
.stat-chart__axis li { flex: 1 1 0; min-width: 0; text-align: center; white-space: nowrap; }
/* Thinned rather than removed: the bars stay aligned with their labels. */
.stat-chart__axis li.is-hidden { visibility: hidden; }
.stat-chart__legend {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 12px 0 0; font-size: 13px; color: var(--text-muted);
}
.stat-chart__key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.stat-chart__key--views { background: var(--gold-light); }
.stat-chart__key--visitors { background: var(--navy); margin-left: 10px; }
.stat-chart__data { margin-top: 14px; }
.stat-chart__data summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--navy); }
.stat-chart__data table { margin-top: 12px; }

/* ── Browser notifications toggle ─────────────────────────────────────────── */

.push-settings h4 { margin-bottom: 6px; }
.push-settings .checkbox-inline { margin-top: 12px; }
.push-settings [data-push-status]:empty { display: none; }

/* ── Listing translation ──────────────────────────────────────────────────── */

/* Above the description, in the flow rather than floating: it changes what the
   next paragraph means, so it has to be read before it. */
.translation-notice {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  background: var(--bg-soft); border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-sm); padding: 10px 14px;
  margin: 20px 0 8px; font-size: 13px; color: var(--text-muted);
}
.translation-notice a { font-weight: 600; color: var(--navy); text-decoration: underline; }
.translation-notice a:hover { color: var(--gold-dark); }

/* Original beside the form: correcting a translation means comparing it to
   something, and scrolling between the two is how mistakes survive. */
.translation-layout { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 900px) { .translation-layout { grid-template-columns: 1fr 1fr; align-items: start; } }
.translation-source {
  background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 20px;
}
@media (min-width: 900px) { .translation-source { position: sticky; top: 24px; } }
.translation-source h2 { font-size: 17px; margin-bottom: 16px; }
.translation-source__field + .translation-source__field { margin-top: 18px; }
.translation-source__field h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-bottom: 4px; }
.translation-source__field p { white-space: pre-line; font-size: 14px; }
.translation-form .admin-form { max-width: none; margin-top: 0; }
/* The state note sits above the form and describes the whole thing, not the
   first field — without the gap it reads as that field's help text. */
.translation-form > .form-hint,
.translation-form > .tracking-warning { margin-bottom: 18px; }
.translation-refresh { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); }
.translation-refresh .form-hint { margin-top: 8px; }

/* Character counter on length-capped textareas. */
.char-counter { display: inline-block; margin-left: 8px; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.char-counter.is-near-limit { color: var(--error); font-weight: 600; }