/* Tenderly · Moroccan Public Procurement Intelligence */

/* ── Reset & Base ────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #fafafa;
  --surface: #ffffff;
  --text: #1a1a1a;
  --text-muted: #6b7280;
  --border: #e5e7eb;
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  /* Was WhatsApp green (#25d366), a leftover from the retired WhatsApp CTA.
     White text on it scored 1.98:1 and failed the Lighthouse contrast audit
     (WCAG AA needs 4.5:1). These pass at 5.35:1 and 7.0:1. */
  --green: #0e7a52;
  --green-hover: #0b6644;
  --red: #dc2626;
  --orange: #f59e0b;
  --radius: 6px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --shadow: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
  --max-w: 1200px;
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111111;
    --surface: #1a1a1a;
    --text: #e5e5e5;
    --text-muted: #9ca3af;
    --border: #2d2d2d;
    /* #2563eb on #1a1a1a is about 3.4:1 and failed the Lighthouse contrast
       audit in dark mode; these lighter blues pass at about 7:1. */
    --accent: #60a5fa;
    --accent-hover: #93c5fd;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.2);
    --shadow: 0 1px 3px rgba(0,0,0,.3);
  }
}

html { font-size: 15px; line-height: 1.6; }
body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
/* Links inside running text must not rely on colour alone (WCAG 1.4.1,
   Lighthouse link-in-text-block). Buttons, nav and card titles keep their style. */
main p a:not(.btn), main li a:not(.btn):not(.nav-link), main td a, .text-muted a {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px;
}

img { max-width: 100%; height: auto; }

/* ── Typography ──────────────────────────────── */
h1 { font-size: 2rem; font-weight: 700; line-height: 1.2; margin-bottom: .5rem; }
h2 { font-size: 1.5rem; font-weight: 600; line-height: 1.3; margin-bottom: .4rem; }
h3 { font-size: 1.15rem; font-weight: 600; margin-bottom: .3rem; }
p { margin-bottom: .75rem; }
small, .text-muted { color: var(--text-muted); font-size: .87rem; }

/* ── Layout ──────────────────────────────────── */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 1.25rem; }
.section { padding: 2.5rem 0; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }

@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* ── Nav ─────────────────────────────────────── */
.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}
.nav-bar {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 1.25rem;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.nav-logo {
  color: var(--text);
  font-size: 1.25rem;
  letter-spacing: -.02em;
  flex-shrink: 0;
}
.nav-logo:hover { text-decoration: none; }
.nav-links {
  display: flex;
  align-items: center;
  gap: .1rem;
  flex: 1;
  overflow-x: auto;
}
.nav-links a {
  color: var(--text-muted);
  font-size: .85rem;
  padding: .4rem .6rem;
  border-radius: var(--radius);
  white-space: nowrap;
  transition: color .15s, background .15s;
}
.nav-links a:hover {
  color: var(--text);
  background: var(--bg);
  text-decoration: none;
}
/* Bouton « Nous contacter » de la barre de navigation. */
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--green);
  color: #fff !important;
  padding: .45rem 1rem;
  border-radius: var(--radius);
  font-size: .85rem;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .15s;
}
.nav-cta:hover {
  background: var(--green-hover);
  text-decoration: none;
}
.nav-cta svg { flex-shrink: 0; }

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--text);
  border-radius: 1px;
}

@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  .nav-links {
    display: none;
    position: absolute;
    top: 56px;
    left: 0;
    right: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    padding: .75rem 1.25rem;
    gap: 0;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: .6rem 0; }

  /* Le bouton de contact reste visible sur mobile : c'est l'action
     principale du site. Le sélecteur de langue qui l'en chassait a disparu
     avec les arbres /en/ et /ar/, la place existe donc de nouveau. Il est
     poussé à droite, le menu déroulant venant en dernier. */
  .nav-bar { gap: .75rem; }
  .nav-bar .nav-cta { order: 2; margin-left: auto; padding: .4rem .7rem; }
  .nav-toggle { order: 3; }
}

@media (max-width: 380px) {
  /* Sous 380px le libellé seul tient, l'icône non. */
  .nav-bar .nav-cta svg { display: none; }
}

/* ── Cards ───────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
}
.card:hover { box-shadow: var(--shadow); }
.card h3 a { color: var(--text); }
.card h3 a:hover { color: var(--accent); }

/* ── Stats ───────────────────────────────────── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  text-align: center;
}
.stat-card .stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}
.stat-card .stat-label {
  font-size: .8rem;
  color: var(--text-muted);
  margin-top: .3rem;
}

/* ── Hero ────────────────────────────────────── */
.hero {
  padding: 4rem 0 3rem;
  text-align: center;
}
.hero h1 { font-size: 2.5rem; margin-bottom: .75rem; }
.hero p { font-size: 1.1rem; color: var(--text-muted); max-width: 600px; margin: 0 auto 1.5rem; }

.hero-search {
  max-width: 600px;
  margin: 0 auto 1rem;
  position: relative;
}
.hero-search input {
  width: 100%;
  padding: .75rem 1rem;
  font-size: 1rem;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font);
  transition: border-color .15s;
}
.hero-search input:focus {
  outline: none;
  border-color: var(--accent);
}
.hero-search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-top: 4px;
  max-height: 400px;
  overflow-y: auto;
  z-index: 50;
}
.hero-search-results:empty { display: none; }

.hero-cta {
  margin-top: 2rem;
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--green);
  border-radius: var(--radius);
  display: inline-block;
}
.hero-cta p { margin-bottom: .5rem; font-weight: 500; }

/* ── Forms & Inputs ──────────────────────────── */
input, select, textarea {
  font-family: var(--font);
  font-size: .9rem;
}
.form-group { margin-bottom: 1rem; }
.form-group label {
  display: block;
  font-size: .8rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: .25rem;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: .5rem .75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
}
.form-group textarea { min-height: 9rem; resize: vertical; line-height: 1.5; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--accent);
}

/* ── Buttons ─────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem 1rem;
  font-size: .9rem;
  font-weight: 500;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: all .15s;
  font-family: var(--font);
}
.btn:hover { background: var(--bg); text-decoration: none; }
.btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-green {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
}
.btn-green:hover { background: var(--green-hover); }

/* ── Tables ──────────────────────────────────── */
.data-table {
  width: 100%;
  border-collapse: collapse;
}
.data-table th,
.data-table td {
  padding: .6rem .75rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
  font-size: .9rem;
}
.data-table th {
  font-weight: 600;
  font-size: .8rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .03em;
}
.data-table tbody tr:hover { background: var(--bg); }

@media (max-width: 768px) {
  .data-table { font-size: .85rem; }
  .data-table th, .data-table td { padding: .4rem .5rem; }
}

/* ── Badges & Tags ───────────────────────────── */
.badge {
  display: inline-block;
  padding: .15rem .5rem;
  font-size: .75rem;
  font-weight: 500;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--border);
}
.badge-open { color: #15803d; border-color: #bbf7d0; background: #f0fdf4; }
.badge-closed { color: var(--text-muted); border-color: var(--border); }
.badge-region { color: var(--accent); border-color: #dbeafe; background: #eff6ff; }
.badge-urgent { color: var(--red); border-color: #fecaca; background: #fef2f2; }
.badge-soon { color: var(--orange); border-color: #fde68a; background: #fffbeb; }
/* Domaine (migration 032): a distinct purple so it reads as a different
   classification axis from Nature (plain text) and from the urgency badges
   (red/orange/green above), on BC cards and detail pages alike. */
a.badge-domain, .badge-domain {
  color: #7c3aed; border-color: #ddd6fe; background: #f5f3ff;
  text-decoration: none;
}
a.badge-domain:hover { background: #ede9fe; text-decoration: none; }

/* ── Pagination ──────────────────────────────── */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 1.5rem 0;
}
.pagination a, .pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 .5rem;
  font-size: .85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
}
.pagination a:hover {
  background: var(--bg);
  color: var(--text);
  text-decoration: none;
}
.pagination .active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* ── Filter sidebar ──────────────────────────── */
.page-with-filters {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 1.5rem;
  align-items: start;
}
.filter-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  position: sticky;
  top: 72px;
}
.filter-panel h2,
.filter-panel h3 {
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--text-muted);
  margin-bottom: .75rem;
}

/* ── Advanced search disclosure ─────────────────── */
.filter-advanced {
  margin-top: .5rem;
  border-top: 1px solid var(--border);
  padding-top: .75rem;
}
/* The summary must read as a real control, not as body text: it is the only
   way to reach six of the eight filters, and a bare text line was missed. */
.filter-advanced summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  font-weight: 600;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .6rem .9rem;
  list-style: none;
  transition: background .15s, border-color .15s;
}
.filter-advanced summary::-webkit-details-marker { display: none; }
.filter-advanced summary:hover { background: var(--surface); border-color: var(--accent); }
.filter-advanced summary .chev {
  margin-left: auto;
  transition: transform .15s;
  flex-shrink: 0;
}
.filter-advanced[open] summary { border-color: var(--accent); }
.filter-advanced[open] summary .chev { transform: rotate(180deg); }
.filter-advanced summary .badge-count {
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  padding: .05rem .5rem;
  font-size: .75rem;
  font-weight: 700;
}
/* Badge always exists in the DOM (empty when no advanced filter is active)
   so the hx-swap-oob target in bdc_list.html always has something to match;
   :empty hides it visually rather than the server ever omitting the tag. */
.filter-advanced summary .badge-count:empty { display: none; }
.filter-advanced summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Long option lists (81 natures, 106 lieux) must scroll rather than overflow. */
.form-group select { max-height: 15rem; }
.form-group select[size], .form-group select[multiple] { overflow-y: auto; }
.filter-advanced .form-group { margin-top: 1rem; }
.filter-hint {
  display: block;
  font-size: .75rem;
  color: var(--text-muted);
  margin-top: .25rem;
}
.filter-orientation {
  font-size: .85rem;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .75rem 1rem;
  margin-bottom: 1rem;
}

/* ── Active filter chips ─────────────────────────── */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: 1rem;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .2rem .6rem;
  font-size: .78rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  max-width: 100%;
  overflow-wrap: anywhere;
}
.chip:hover { background: var(--bg); text-decoration: none; border-color: var(--accent); }
.chip-clear {
  color: var(--red);
  border-color: var(--red);
  font-weight: 500;
}

@media (max-width: 768px) {
  .page-with-filters { grid-template-columns: 1fr; }
  .filter-panel { position: static; }
}

/* ── Detail page ─────────────────────────────── */
.detail-header {
  padding: 2rem 0 1.5rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.5rem;
}
.detail-header h1 { font-size: 1.5rem; }
.detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: .5rem;
  font-size: .85rem;
  color: var(--text-muted);
}
.detail-body { line-height: 1.7; }
.detail-sidebar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
}

/* ── CTA inline ──────────────────────────────── */
.cta-inline {
  margin: 2rem 0;
  padding: 1.25rem;
  border: 1px solid var(--green);
  border-radius: var(--radius);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.cta-inline p { margin: 0; font-weight: 500; }

/* ── Loading indicator (HTMX) ────────────────── */
.htmx-indicator {
  display: none;
  color: var(--text-muted);
  font-size: .85rem;
}
.htmx-request .htmx-indicator { display: inline-block; }
.htmx-request.htmx-indicator { display: inline-block; }

/* ── Footer ──────────────────────────────────── */
.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  margin-top: 3rem;
  padding: 2.5rem 0 1.5rem;
}
.footer-grid {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 1.25rem;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 2rem;
}
.footer-col { display: flex; flex-direction: column; gap: .4rem; }
.footer-col strong { margin-bottom: .3rem; }
.footer-col a { color: var(--text-muted); font-size: .85rem; }
.footer-col a:hover { color: var(--text); }
.footer-col p { color: var(--text-muted); font-size: .85rem; }
.footer-contact {
  color: var(--green) !important;
  font-weight: 600;
}
.footer-bottom {
  max-width: var(--max-w);
  margin: 1.5rem auto 0;
  padding: 1rem 1.25rem 0;
  border-top: 1px solid var(--border);
  font-size: .8rem;
  color: var(--text-muted);
}

@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ── Utility ─────────────────────────────────── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: .5rem; }
.mb-2 { margin-bottom: 1rem; }
.gap-1 { gap: .5rem; }
.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-wrap { flex-wrap: wrap; }
.mono { font-family: var(--mono); }

/* ── Report catalogue ────────────────────────── */
.report-card { display: flex; flex-direction: column; height: 100%; }
.report-card .report-sector {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--text-muted);
  margin-bottom: .3rem;
}
.report-card p.report-subtitle { flex: 1; }
.report-card.is-soon {
  opacity: .55;
  filter: grayscale(.4);
}
.report-card.is-soon:hover { box-shadow: none; text-decoration: none; }
.badge-soon-report {
  color: var(--text-muted);
  border-color: var(--border);
  background: var(--bg);
}

/* ── Stat tiles (report teaser statistics) ──────── */
.stat-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin: 1.25rem 0;
}
.stat-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
}
.stat-tile p { margin: 0; font-size: .9rem; color: var(--text); }

/* ── Forms: checkbox row + inline errors ─────────── */
.form-check {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  margin: 1rem 0;
  font-size: .85rem;
  color: var(--text-muted);
}
.form-check input[type="checkbox"] {
  margin-top: .2rem;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
}
.form-check label { font-weight: 400; }
.alert-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: var(--red);
  padding: .75rem 1rem;
  border-radius: var(--radius);
  margin-bottom: 1rem;
  font-size: .88rem;
}
.alert-error ul { margin: 0; padding-left: 1.1rem; }
.notice-box {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  font-size: .82rem;
  color: var(--text-muted);
  margin: 1.5rem 0;
}
.notice-box a { color: var(--text-muted); text-decoration: underline; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Bucket bar chart ─────────────────────────
   Replaces an SVG version whose labels were <text> at a fixed x and whose
   bars started at a fixed x=110: any label longer than that column was
   overprinted by its own bar. SVG text does not wrap, and the labels here
   are nature names averaging 64 characters, so the layout had to move to
   HTML. Grid + percentage widths reflow at every viewport for free. */
.chart-block { margin: .6rem 0; }
.bucket-chart { list-style: none; display: grid; gap: .55rem; margin: .2rem 0; }
.bucket-row {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) auto;
  align-items: center;
  gap: .7rem;
}
.bucket-label {
  font-size: .82rem;
  line-height: 1.35;
  min-width: 0;
  overflow-wrap: anywhere;
}
.bucket-track {
  height: .85rem;
  min-width: 0;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.bucket-fill {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
}
.bucket-num {
  font-size: .8rem;
  color: var(--text-muted);
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* The highlighted row carries three redundant signals (weight, hatch fill,
   printed chip) so it survives greyscale and colour-blind viewing. */
.bucket-row.is-hl .bucket-label { font-weight: 700; }
.bucket-row.is-hl .bucket-num { color: var(--text); font-weight: 600; }
.bucket-row.is-hl .bucket-fill {
  background: repeating-linear-gradient(45deg, var(--accent) 0 4px, var(--surface) 4px 7px);
}
.bucket-tag {
  display: inline-block;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 0 .4rem;
  margin-left: .25rem;
  white-space: nowrap;
  vertical-align: 1px;
}
@media (max-width: 560px) {
  /* Label takes its own full-width line so the bar keeps a usable length
     instead of being crushed into a 3rem stub next to wrapped text. */
  .bucket-row { grid-template-columns: minmax(0, 1fr) auto; gap: .3rem .6rem; }
  .bucket-label { grid-column: 1 / -1; }
}

/* Range (p25-median-p75) dumbbell. Label is HTML above the plot for the
   same wrapping reason as .bucket-label. */
.range-group { margin: .7rem 0; }
.range-group + .range-group { border-top: 1px solid var(--border); padding-top: .7rem; }
.range-label { font-size: .82rem; line-height: 1.35; overflow-wrap: anywhere; margin-bottom: .15rem; }
.range-note { font-size: .8rem; font-style: italic; color: var(--text-muted); }

/* ── Téléchargement de modèle : aperçu + icônes ──
   Icône de document dessinée (page à coin corné + extension) plutôt que les
   logos Microsoft : leur usage est encadré et ils n'apporteraient aucune
   information de plus que l'extension elle-même. */
.dl-layout {
  display: grid;
  grid-template-columns: minmax(200px, 300px) minmax(0, 1fr);
  gap: 1.4rem;
  align-items: start;
}
.dl-preview { margin: 0; }
.dl-preview img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: #fff;   /* le document est blanc, y compris en thème sombre */
}
.dl-preview figcaption { font-size: .78rem; text-align: center; margin-top: .4rem; }
.format-choices { display: grid; gap: .6rem; margin-top: .9rem; }
.format-btn {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .6rem .85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: border-color .12s, box-shadow .12s;
}
.format-btn:hover, .format-btn:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
  outline: none;
}
.doc-icon { flex: none; width: 34px; height: 41px; }
.doc-icon .doc-page { fill: #fff; stroke: var(--border); stroke-width: 1.5; }
.doc-icon .doc-fold { fill: #e8edf5; }
.doc-icon .doc-ext {
  fill: #fff; font-family: var(--font); font-size: 9.5px;
  font-weight: 800; letter-spacing: .02em;
}
.doc-xlsx .doc-tag { fill: #1d6f42; }
.doc-docx .doc-tag { fill: #1b5ebe; }
.format-text { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.format-text .text-muted { font-size: .78rem; }
@media (max-width: 620px) {
  /* Le formulaire passe avant l'aperçu : sur mobile, l'action compte plus
     que l'illustration. */
  .dl-layout { grid-template-columns: 1fr; }
  .dl-preview { order: 2; max-width: 320px; margin: 0 auto; }
  .dl-form { order: 1; }
}

/* ── Annuaire des prestataires ────────────────── */
.provider-list { list-style: none; display: grid; gap: .8rem; margin: 1rem 0; }
.provider {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .85rem 1rem;
  background: var(--surface);
}
.provider-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: .8rem; flex-wrap: wrap;
}
.provider-name { font-size: 1rem; margin: 0; }
.provider-rating { font-size: .85rem; white-space: nowrap; }
.provider-rating strong { color: var(--accent); }
.provider-meta { font-size: .82rem; margin: .25rem 0 0; }
/* Cibles tactiles: l'audit du 15 aout 2026 a mesure ces liens a environ
   20px de haut, alors que c'est l'action de conversion principale de
   l'annuaire pour une TPE sur mobile. 44px est le minimum recommande. */
.provider-actions { margin-top: .45rem; font-size: .85rem; display: flex; gap: .5rem 1.1rem; flex-wrap: wrap; }
.provider-actions a { display: inline-flex; align-items: center; min-height: 44px; }
/* blockquote nu: pas de barre verticale, elle passe en aplat noir dans
   certains clients et lecteurs. */
.provider-review { margin: .5rem 0 0; font-size: .84rem; font-style: italic; }
.city-links { display: flex; flex-wrap: wrap; gap: .45rem .85rem; margin-top: .5rem; font-size: .9rem; }

/* ── Annuaire : navigation par ville et cartes ──
   Une liste plate de 129 villes donnait le meme poids visuel a Casablanca
   (596 fiches) et a une commune qui en compte deux. Deux niveaux: les dix
   plus fournies en pilules, le reste dans un tiroir a colonnes CSS, qui
   tient aussi bien a 10 villes qu'a 200. */
.city-pill-grid { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0 1rem; }
.city-pill {
  display: inline-flex; align-items: center; gap: .35rem;
  min-height: 44px; padding: 0 .9rem;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); font-size: .9rem; color: var(--text);
}
.city-pill:hover { border-color: var(--accent); background: var(--bg); text-decoration: none; }
.city-pill-count {
  font-size: .75rem; color: var(--text-muted); background: var(--bg);
  border-radius: 999px; padding: .1rem .5rem;
}
.city-more { margin: .5rem 0 1.25rem; }
.city-more summary {
  cursor: pointer; display: flex; align-items: center; gap: .5rem;
  font-size: .85rem; font-weight: 600; color: var(--text);
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  padding: .6rem .9rem; list-style: none;
}
.city-more summary::-webkit-details-marker { display: none; }
.city-more summary:hover { border-color: var(--accent); }
.city-more .chev { transition: transform .15s; }
.city-more[open] summary .chev { transform: rotate(180deg); }
.city-more-list { columns: 3 160px; column-gap: 1.5rem; margin-top: .75rem; font-size: .85rem; }
.city-more-list a { display: block; padding: .35rem 0; break-inside: avoid; }

/* auto-fit plutot qu'une grille a 2 colonnes: 5 cartes donnaient 2+2+1 et
   une carte orpheline en bas. */
.provider-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
}
.provider-cat-card { display: flex; gap: .9rem; align-items: flex-start; }
.provider-cat-icon {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; font-weight: 700; color: var(--accent);
}
.provider-cat-body { min-width: 0; }
.provider-cat-stats { font-size: .8rem; color: var(--text-muted); margin-top: .5rem; }

@media (max-width: 560px) {
  .city-more-list { columns: 2 130px; }
}

/* ── Paire d'actions (bouton principal + lien secondaire) ──
   Le motif précédent posait un margin-left sur le lien secondaire. Dès que
   celui-ci passait à la ligne, son cadre en ligne chevauchait celui du
   bouton et la seconde ligne se collait dessous sans rythme vertical
   (mesuré : bouton 381-420px, lien 390-442px sur un écran de 390). Un
   conteneur flex qui se replie règle les deux cas d'un coup. */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1rem;
  margin-top: .8rem;
}
.cta-row .btn { flex: none; }

/* ── Filtres de l'annuaire ─────────────────────
   Formulaire GET : chaque combinaison a son URL. Peu de filtres,
   volontairement : sur un annuaire, une liste vide décourage plus qu'une
   liste imparfaite. */
.dir-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .75rem 1rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.dir-filter { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.dir-filter label { font-size: .78rem; font-weight: 600; color: var(--text-muted); }
.dir-filter select {
  min-height: 44px;
  max-width: 15rem;
  padding: .4rem .6rem;
  font-size: .9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
}
.dir-checks { display: flex; flex-direction: column; gap: .3rem; font-size: .85rem; }
.dir-checks label { display: flex; align-items: center; gap: .4rem; min-height: 22px; }
.dir-filter-actions { display: flex; align-items: center; gap: .8rem; }
@media (max-width: 620px) {
  .dir-filters { flex-direction: column; align-items: stretch; }
  .dir-filter select { max-width: none; }
}

/* ── Bon de commande : remplissage en ligne ─────────────────────────────────
   Le document est rendu en taille reelle et non en vignette. La version
   precedente affichait une page A4 dans une colonne de 300 px, ce qui donnait
   un corps de texte de trois pixels: illisible par construction. */

.bc-form fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: .9rem 1rem; }
.bc-form legend { font-weight: 700; font-size: .9rem; padding: 0 .4rem; }
.bc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.bc-fieldset label { display: block; font-size: .82rem; margin-top: .55rem; color: var(--text-muted); }
.bc-fieldset input {
  display: block; width: 100%; margin-top: .2rem;
  padding: .45rem .6rem; font-size: .95rem; color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
}

.bc-lines-head, .bc-line {
  display: grid;
  grid-template-columns: minmax(0, 3fr) 70px 100px 130px 90px;
  gap: .5rem;
}
.bc-lines-head { font-size: .78rem; color: var(--text-muted); padding: 0 .2rem .3rem; }
.bc-line { margin-bottom: .4rem; }
.bc-line input, .bc-line select {
  width: 100%; padding: .45rem .55rem; font-size: .93rem; color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
}
@media (max-width: 720px) {
  /* En colonne unique les entetes ne veulent plus rien dire: chaque champ
     porte deja son aria-label, on masque la ligne d'entete plutot que de la
     laisser flotter au-dessus de champs qu'elle ne surmonte plus. */
  .bc-lines-head { display: none; }
  .bc-line { grid-template-columns: 1fr 1fr; }
  .bc-line input:first-child { grid-column: 1 / -1; }
}

/* Le document lui-meme: fond blanc en toute circonstance, y compris en theme
   sombre, parce qu'il represente une feuille imprimee. */
.bc-doc {
  background: #fff; color: #111;
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 2.2rem 2.4rem;
  box-shadow: var(--shadow);
  font-size: .95rem; line-height: 1.5;
}
.bc-doc-head { border-bottom: 2px solid #111; padding-bottom: .7rem; margin-bottom: 1.2rem; }
.bc-doc-title { font-size: 1.5rem; font-weight: 800; letter-spacing: .04em; }
.bc-doc-num, .bc-doc-date { font-size: .9rem; color: #444; }
.bc-doc-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 1.4rem; }
.bc-doc-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: #666; margin-bottom: .25rem; }
.bc-doc-name { font-weight: 700; }
.bc-doc-table { width: 100%; border-collapse: collapse; margin-bottom: 1.2rem; }
.bc-doc-table th, .bc-doc-table td { padding: .5rem .6rem; border-bottom: 1px solid #ddd; text-align: left; }
.bc-doc-table th { font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: #555; border-bottom: 1px solid #111; }
.bc-doc-table .num { text-align: right; white-space: nowrap; }
.bc-doc-totals { display: flex; justify-content: flex-end; }
.bc-doc-totals table { border-collapse: collapse; min-width: 300px; }
.bc-doc-totals td { padding: .35rem .6rem; }
.bc-doc-totals td.num { text-align: right; white-space: nowrap; }
.bc-doc-grand td { border-top: 2px solid #111; font-weight: 800; font-size: 1.05rem; padding-top: .5rem; }
.bc-doc-words { margin-top: 1.3rem; padding: .8rem 1rem; background: #f6f6f6; border-left: 3px solid #111; }
.bc-doc-signs { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 2rem; }
.bc-doc-box { height: 80px; border: 1px dashed #bbb; border-radius: 4px; margin-top: .3rem; }
.doc-actions { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem; justify-content: space-between; }

@media (max-width: 640px) {
  .bc-doc { padding: 1.2rem 1rem; font-size: .9rem; }
  .bc-doc-parties, .bc-doc-signs { grid-template-columns: 1fr; gap: 1rem; }
  .bc-doc-totals table { min-width: 0; width: 100%; }
}

/* Impression: seul le document sort, sans la navigation ni le formulaire.
   C'est ce qui remplace le telechargement d'un PDF: le navigateur sait
   deja enregistrer en PDF, et le rendu est fidele a l'ecran. */
@media print {
  body * { visibility: hidden; }
  .bc-doc, .bc-doc * { visibility: visible; }
  .bc-doc { position: absolute; left: 0; top: 0; width: 100%; border: 0; box-shadow: none; padding: 0; }
}

/* Le tableau des lignes defile dans son conteneur sur petit ecran: six
   colonnes ne tiennent pas dans 390 px, et laisser deborder pousserait toute
   la page. A l'impression le conteneur ne doit rien couper. */
.bc-doc-scroll { overflow-x: auto; margin-bottom: 1.2rem; }
.bc-doc-scroll .bc-doc-table { margin-bottom: 0; min-width: 430px; }
@media print { .bc-doc-scroll { overflow: visible; } .bc-doc-scroll .bc-doc-table { min-width: 0; } }
.doc-dl { display: flex; gap: .5rem; flex-wrap: wrap; }
@media print { .doc-actions, .doc-dl { display: none; } }

/* ── Hubs alphabetiques ─────────────────────────────────────────────────────
   Rendent atteignables les 3 978 acheteurs et 17 287 entreprises que les index
   n'exposaient que 50 par 50. Mesure du 17/08/2026 avant correction : 411 et
   54 fiches reellement atteintes par les liens. */
.alpha-bar { display:flex; flex-wrap:wrap; gap:.3rem; align-items:center; }
.alpha-label { font-size:.82rem; color:var(--text-muted); margin-right:.2rem; }
.alpha-item {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:2rem; padding:.28rem .5rem; font-size:.86rem; font-weight:600;
  border:1px solid var(--border); border-radius:var(--radius);
  background:var(--surface); color:var(--text); text-decoration:none;
}
.alpha-item:hover { border-color:var(--accent); color:var(--accent); }
.alpha-item.active { background:var(--accent); border-color:var(--accent); color:#fff; }
.alpha-list { columns:3; column-gap:2rem; margin:0; padding-left:1.4rem; }
.alpha-list li { break-inside:avoid; margin:.28rem 0; }
.alpha-list li .text-muted { font-size:.8rem; margin-left:.35rem; }
@media (max-width:860px){ .alpha-list { columns:2; } }
@media (max-width:560px){ .alpha-list { columns:1; } }
.pager { display:flex; flex-wrap:wrap; gap:.35rem; align-items:center; }
.pager a, .pager span {
  padding:.3rem .55rem; font-size:.86rem; border:1px solid var(--border);
  border-radius:var(--radius); text-decoration:none; color:var(--text);
}
.pager span.active { background:var(--accent); border-color:var(--accent); color:#fff; }
/* Blocs de liens vers les marches, poses sur les fiches acheteur, les hubs de
   nature et les pages d'attribution. Bornes a 24 liens: chaque lien dilue le
   PageRank transmis, donc on choisit les plus recents plutot que de tout
   deverser. */
.award-links { list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.award-links li { padding-bottom:.5rem; border-bottom:1px solid var(--border); }
.award-links li:last-child { border-bottom:0; padding-bottom:0; }
.award-links a { font-weight:600; }
.award-links .text-muted { display:block; font-size:.8rem; margin-top:.15rem; }

/* ── Appel à contacter (partials/cta_contact.html) ─────────────────────────
   Un bloc par page, en fin de contenu. Bordure verte : c'est la seule action
   commerciale du site, elle doit se distinguer des cartes de données sans
   crier. Le bouton passe sous le texte dès que la largeur manque. */
.cta-box {
  margin: 2.5rem 0 0;
  padding: 1.5rem 1.6rem;
  background: var(--surface);
  border: 1px solid var(--green);
  border-left-width: 4px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  flex-wrap: wrap;
}
.cta-box-body { flex: 1 1 26rem; min-width: 0; }
.cta-box h2 { font-size: 1.2rem; margin-bottom: .35rem; }
.cta-box p { margin: 0; color: var(--text-muted); font-size: .93rem; max-width: 62ch; }
.cta-box-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .45rem;
  flex: 0 0 auto;
}
.cta-box-actions .btn { font-size: .95rem; padding: .6rem 1.2rem; font-weight: 600; }
.cta-box-mail, .cta-box-secondary { font-size: .85rem; }

/* Version compacte, une ligne en haut des longues pages de données. */
.cta-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem .8rem;
  margin: .9rem 0 1.2rem;
  padding: .55rem .9rem;
  font-size: .88rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--green);
  border-radius: var(--radius);
}
.cta-line span { color: var(--text-muted); }
.cta-line a { font-weight: 600; white-space: nowrap; }

/* ── Page contact ─────────────────────────────────────────────────────────── */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.form-group .req { color: var(--red); }
.field-error { color: var(--red); font-size: .8rem; margin: .25rem 0 0; }
.form-group .has-error { border-color: var(--red); }
.form-note { font-size: .8rem; color: var(--text-muted); margin: .25rem 0 0; }
.alert-success {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #14532d;
  padding: 1.25rem 1.4rem;
  border-radius: var(--radius);
}
.alert-success h2 { font-size: 1.2rem; color: #14532d; }
.alert-success p { margin-bottom: .5rem; }
/* Champ piège : invisible pour une personne, présent pour un robot qui
   remplit tout ce qu'il trouve. Sorti de l'écran plutôt que display:none,
   que certains robots savent ignorer. */
.hp-field {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
@media (max-width: 820px) {
  .contact-layout { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .form-row { grid-template-columns: 1fr; }
}

/* ── Pages services ───────────────────────────────────────────────────────── */
.lede { font-size: 1.06rem; max-width: 70ch; }
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .6rem 1rem;
}
.hero-actions .btn { font-size: 1rem; padding: .6rem 1.3rem; }
.offer-card h3 { font-size: 1.02rem; }
.offer-card p { font-size: .9rem; color: var(--text-muted); margin: .3rem 0 0; }
.steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; counter-reset: step; }
.steps li {
  counter-increment: step;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
}
.steps li::before {
  content: counter(step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  margin-bottom: .5rem;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: .85rem;
  font-weight: 700;
}
.steps h3 { font-size: 1rem; }
.steps p { font-size: .9rem; color: var(--text-muted); margin: .25rem 0 0; }
.sector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: .75rem;
}
.sector-link {
  display: block;
  padding: .75rem .95rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
}
.sector-link:hover { border-color: var(--accent); text-decoration: none; box-shadow: var(--shadow-sm); }
.sector-link strong { display: block; font-size: .93rem; }
.sector-link span { font-size: .8rem; color: var(--text-muted); }
.link-list { list-style: none; display: grid; gap: .4rem; margin: .5rem 0 0; }
.link-list li { font-size: .92rem; }
.link-list .text-muted { font-size: .8rem; margin-left: .3rem; }
@media (max-width: 768px) {
  .steps { grid-template-columns: 1fr; }
}

/* ── Rapports : les trois niveaux ─────────────────────────────────────────── */
.levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1.25rem 0; }
.level {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
}
.level-tag {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .25rem;
}
.level h3 { font-size: 1rem; }
.level p { font-size: .88rem; color: var(--text-muted); margin: .25rem 0 0; }
.level.is-custom { border-color: var(--green); }
.level.is-custom .level-tag { color: var(--green); }
@media (max-width: 768px) {
  .levels { grid-template-columns: 1fr; }
}
@media (prefers-color-scheme: dark) {
  .alert-success { background: #0f2a1c; border-color: #1f5137; color: #c9f0d8; }
  .alert-success h2 { color: #c9f0d8; }
}

/* Titre d'accueil sur petit ecran: 2.5rem donnait cinq lignes a 390px. */
@media (max-width: 560px) {
  .hero { padding: 2.5rem 0 2rem; }
  .hero h1 { font-size: 1.8rem; }
  .hero p { font-size: 1rem; }
}

/* Listes du corps de texte: la remise a zero globale leur retirait tout retrait,
   les numeros et les puces sortaient du bloc par la gauche. */
.detail-body ol, .detail-body ul { padding-left: 1.4rem; margin-bottom: .75rem; }
/* Rapport: l etiquette du niveau 3 reste collee au bloc de contact qu elle annonce. */
.level-tag + .cta-box { margin-top: .5rem; }
main section > ul:not([class]), main section > ol:not([class]) { padding-left: 1.4rem; margin-bottom: .75rem; }

/* .section (padding: 2.5rem 0) est declaree apres .container et annulait son
   retrait lateral des que les deux classes etaient posees sur le meme element,
   ce qui est le cas de presque toutes les pages: sur mobile le texte touchait
   le bord de l ecran, et sur grand ecran le contenu ne s alignait pas sur le
   logo. On retablit le retrait lateral du conteneur. */
.container.section { padding-left: 1.25rem; padding-right: 1.25rem; }

/* ══ Couche de marque (03/10/2026) ═══════════════════════════════════
   Charte Tenderly appliquee au site: cadre bleu nuit (en-tete, bandeaux,
   pied de page), contenu clair, liens #2563eb. Bloc ajoute en fin de
   fichier: il surcharge les regles ci-dessus sans les modifier, les
   anciennes classes restent valables pour les pages encore en cache. */
@font-face {
  font-family: 'Inter';
  src: url('/static/fonts/inter-var-latin.woff2?v=1') format('woff2');
  font-weight: 400 750;
  font-style: normal;
  font-display: swap;
}
/* Police de repli aux metriques d'Inter: pas de saut de texte au chargement. */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  size-adjust: 107.06%;
  ascent-override: 90.49%;
  descent-override: 22.56%;
  line-gap-override: 0%;
}
:root {
  --navy: #123055;
  --navy-2: #0b2038;
  --mint: #7fd4ae;
  --sky: #8dbbef;
  --on-navy: #c5d5ea;
  --on-navy-muted: #9db4d1;
  --hairline: rgba(255,255,255,.16);
  --navy-grad: linear-gradient(135deg, var(--navy), var(--navy-2));
  --font: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --khatam: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-24 -24 147 147'%3E%3Cpath d='M49.5 0 64 14.5h20.5V35L99 49.5 84.5 64v20.5H64L49.5 99 35 84.5H14.5V64L0 49.5 14.5 35V14.5H35Z' fill='none' stroke='%23fff' stroke-opacity='.07' stroke-width='1.5'/%3E%3C/svg%3E");
  --khatam-xl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -2 103 103'%3E%3Cpath d='M49.5 0 64 14.5h20.5V35L99 49.5 84.5 64v20.5H64L49.5 99 35 84.5H14.5V64L0 49.5 14.5 35V14.5H35Z' fill='none' stroke='%238dbbef' stroke-opacity='.22' stroke-width='.6'/%3E%3C/svg%3E");
}

h1, h2, h3 { letter-spacing: -.015em; }
h1 { letter-spacing: -.022em; }
h2, h3 { font-weight: 700; }
.stat-value, .data-table td, .data-table th { font-variant-numeric: tabular-nums; }

/* En-tete */
.site-header { background: var(--navy-grad); border-bottom: 1px solid var(--hairline); }
.nav-logo { display: inline-flex; align-items: center; color: #fff; }
.nav-logo img { display: block; height: 28px; width: auto; }
.nav-links a { color: var(--on-navy); }
.nav-links a:hover { color: #fff; background: rgba(255,255,255,.1); }
.nav-cta { background: var(--mint); color: var(--navy-2) !important; }
.nav-cta:hover { background: #9be0c1; }
.nav-toggle span { background: #fff; }
@media (max-width: 900px) {
  .nav-links { background: var(--navy-2); border-bottom: 1px solid var(--hairline); }
}

/* Bandeau bleu nuit */
.hero-navy {
  background: var(--khatam-xl) right -90px center / 460px no-repeat, var(--khatam) 0 0 / 120px, var(--navy-grad);
  color: #fff;
  padding: 3.5rem 0 2.5rem;
  text-align: left;
}
.hero-navy h1 { color: #fff; max-width: 820px; font-size: 2.6rem; }
.hero-navy p { color: var(--on-navy); margin-left: 0; max-width: 720px; }
.hero-navy a:not(.btn) { color: var(--sky); }
.hero-navy .btn { background: transparent; color: #fff; border-color: var(--hairline); }
.hero-navy .btn:hover { background: rgba(255,255,255,.1); }
.hero-navy .btn-green { background: var(--mint); color: var(--navy-2); border-color: var(--mint); font-weight: 600; }
.hero-navy .btn-green:hover { background: #9be0c1; }
.hero-navy .hero-actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: flex-start; }
.hero-navy .stat-grid { margin-top: 2.25rem; border-top: 1px solid var(--hairline); padding-top: 1.5rem; gap: 1.5rem; }
.hero-navy .stat-card { background: none; border: 0; padding: 0; text-align: left; }
.hero-navy .stat-card .stat-value { color: var(--mint); font-size: 2.3rem; letter-spacing: -.03em; }
.hero-navy .stat-card .stat-label { color: var(--on-navy); font-size: .88rem; margin-top: .45rem; }
.hero-navy .hero-source { color: var(--on-navy-muted); font-size: .82rem; margin: 1.5rem 0 0; max-width: none; }
@media (max-width: 560px) {
  .hero-navy { padding: 2.25rem 0 1.75rem; background: var(--khatam) 0 0 / 96px, var(--navy-grad); }
  .hero-navy h1 { font-size: 1.8rem; }
  .hero-navy .stat-grid { grid-template-columns: 1fr 1fr; }
  .hero-navy .stat-card .stat-value { font-size: 1.7rem; }
}

/* Pied de page */
.site-footer { background: var(--navy-grad); border-top: 0; color: var(--on-navy); }
.footer-logo img { display: block; height: 32px; width: auto; margin-bottom: .5rem; }
.footer-col strong { color: #fff; }
.footer-col a, .footer-col p { color: var(--on-navy); }
.footer-col a:hover { color: #fff; }
.footer-contact { color: var(--mint) !important; }
.footer-bottom { border-top: 1px solid var(--hairline); color: var(--on-navy-muted); }
.footer-bottom a { color: var(--sky); }

/* ── Types d'objet: une icone et une couleur par type (memoire visuelle) ──
   Le gabarit declare son type dans {% block page_type %}; base.html le pose
   sur <body data-type>. Aucune classe par categorie: 7 types seulement. */
body[data-type="ao"], .type-ao { --t-solid: #2563eb; --t: #1d4ed8; --t-bar: #60a5fa; --t-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h9l4 4v14H6z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M9 13h7M9 17h5'/%3E%3C/svg%3E"); }
body[data-type="bc"], .type-bc { --t-solid: #0e7a52; --t: #0b6644; --t-bar: #7fd4ae; --t-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18l-3-2-3 2-3-2-3 2z'/%3E%3Cpath d='M9 8h6M9 12h6'/%3E%3C/svg%3E"); }
body[data-type="attribue"], .type-attribue { --t-solid: #0f766e; --t: #0f766e; --t-bar: #5eead4; --t-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.4 1.9 3-.3.9 2.9 2.6 1.6-1 2.9 1 2.9-2.6 1.6-.9 2.9-3-.3L12 21l-2.4-1.9-3 .3-.9-2.9-2.6-1.6 1-2.9-1-2.9 2.6-1.6.9-2.9 3 .3z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E"); }
body[data-type="acheteur"], .type-acheteur { --t-solid: #123055; --t: #123055; --t-bar: #8dbbef; --t-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M5 21V9l7-5 7 5v12'/%3E%3Cpath d='M10 21v-5h4v5'/%3E%3Cpath d='M9 11h.01M15 11h.01'/%3E%3C/svg%3E"); }
body[data-type="entreprise"], .type-entreprise { --t-solid: #7c3aed; --t: #6d28d9; --t-bar: #c4b5fd; --t-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h16v11H4z'/%3E%3Cpath d='M9 8V5h6v3'/%3E%3Cpath d='M4 13h16'/%3E%3C/svg%3E"); }
body[data-type="contenu"], .type-contenu { --t-solid: #b45309; --t: #b45309; --t-bar: #fdba74; --t-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h9a4 4 0 0 1 4 4v12H8a3 3 0 0 1-3-3z'/%3E%3Cpath d='M5 17a3 3 0 0 1 3-3h10'/%3E%3C/svg%3E"); }
body[data-type="conseil"], .type-conseil { --t-solid: #0b2038; --t: #123055; --t-bar: #7fd4ae; --t-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5l2.8 2.8h3.9v3.9L21.5 12l-2.8 2.8v3.9h-3.9L12 21.5l-2.8-2.8H5.3v-3.9L2.5 12l2.8-2.8V5.3h3.9z'/%3E%3C/svg%3E"); }
@media (prefers-color-scheme: dark) {
  body[data-type="ao"], .type-ao { --t: #93c5fd; }
  body[data-type="bc"], .type-bc { --t: #7fd4ae; }
  body[data-type="attribue"], .type-attribue { --t: #5eead4; }
  body[data-type="acheteur"], .type-acheteur { --t: #8dbbef; }
  body[data-type="entreprise"], .type-entreprise { --t: #c4b5fd; }
  body[data-type="contenu"], .type-contenu { --t: #fdba74; }
  body[data-type="conseil"], .type-conseil { --t: #7fd4ae; }
}
body[data-type]:not([data-type=""]) .site-header { box-shadow: inset 0 -3px 0 var(--t-bar); border-bottom-color: transparent; }
body[data-type]:not([data-type=""]) main h1::before, .type-tile {
  content: ""; display: block; width: 2.6rem; height: 2.6rem; border-radius: .7rem; margin-bottom: .7rem;
  background: var(--t-solid) var(--t-icon) center / 1.45rem no-repeat;
  box-shadow: 0 0 0 1px rgba(255,255,255,.14) inset;
}
body[data-type]:not([data-type=""]) main nav[aria-label="Fil d'Ariane"] { margin-bottom: .9rem; }
body[data-type]:not([data-type=""]) main h2 { position: relative; padding-left: .85rem; }
body[data-type]:not([data-type=""]) main h2::before {
  content: ""; position: absolute; left: 0; top: .18em; bottom: .18em; width: 4px; border-radius: 2px; background: var(--t-solid);
}
@media (prefers-color-scheme: dark) { body[data-type]:not([data-type=""]) main h2::before { background: var(--t); } }
.card h2, .cta-box h2, .alert-success h2, .filter-panel h2, .detail-sidebar h2 { padding-left: 0 !important; }
.card h2::before, .cta-box h2::before, .alert-success h2::before, .filter-panel h2::before, .detail-sidebar h2::before { display: none; }
body[data-type="ao"] .nav-links a[href="/appels-d-offres"] { color: #fff; background: rgba(255,255,255,.1); }
body[data-type="bc"] .nav-links a[href="/bons-de-commande"] { color: #fff; background: rgba(255,255,255,.1); }
body[data-type="acheteur"] .nav-links a[href="/acheteurs"] { color: #fff; background: rgba(255,255,255,.1); }
body[data-type="entreprise"] .nav-links a[href="/entreprises"] { color: #fff; background: rgba(255,255,255,.1); }
body[data-type="conseil"] .nav-links a[href="/services"] { color: #fff; background: rgba(255,255,255,.1); }
/* Cartes: lisere a la couleur du type */
.card-ao { border-left: 3px solid #2563eb; }
.card-bc { border-left: 3px solid #0e7a52; }
.card-attribue { border-left: 3px solid #0f766e; }
/* Statuts: un point devant le mot, la couleur ne porte jamais seule l'information */
.badge-open::before, .badge-urgent::before, .badge-soon::before, .badge-closed::before {
  content: ""; display: inline-block; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; margin-right: .35rem; vertical-align: .08em;
}
.badge-urgent::before { border-radius: 1px; transform: rotate(45deg); }
.badge-closed::before { background: none; box-shadow: 0 0 0 1.5px currentColor inset; }
/* Chiffres cles a la couleur du type de la page */
.stat-card .stat-value { color: var(--t, var(--accent)); }
.hero-navy .stat-card .stat-value { color: var(--mint); }
.hero-navy h1::before { display: none !important; }
/* Fiches: le tableau des faits cles devient une grille de tuiles (libelle au-dessus,
   valeur dessous). Meme HTML, meme texte: seul l'affichage change. */
table.facts, table.facts tbody { display: block; }
table.facts tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .1rem 1.5rem; }
table.facts tr { display: flex; flex-direction: column; padding: .55rem 0; border-bottom: 1px solid var(--border); }
table.facts td { padding: 0; width: auto !important; }
table.facts td.text-muted { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; margin-bottom: .15rem; }
table.facts td + td { font-size: .98rem; overflow-wrap: anywhere; }
table.facts td strong { color: var(--t, var(--text)); font-size: 1.05rem; }

/* ── Secteurs: une icone par secteur, posee par CSS sur les liens /services/<slug> ── */
.sector-link { display: grid; grid-template-columns: 2.2rem 1fr; column-gap: .75rem; align-items: center; }
.sector-link::before { content: ""; grid-row: span 2; width: 2.2rem; height: 2.2rem; border-radius: .6rem;
  background: var(--navy) var(--s-icon, none) center / 1.25rem no-repeat; }
.sector-link:hover::before { background-color: var(--green); }
.sector-link strong, .sector-link span { grid-column: 2; }
.sector-link[href$="/services/alimentaire-restauration"], h1.s-alimentaire-restauration { --s-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3v8M5 3v4a2 2 0 0 0 4 0V3M7 11v10'/%3E%3Cpath d='M17 3c-2 2-2 6 0 8v10'/%3E%3C/svg%3E"); }
.sector-link[href$="/services/btp-materiaux"], h1.s-btp-materiaux { --s-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18v12H3z'/%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M9 6v6M15 12v6'/%3E%3C/svg%3E"); }
.sector-link[href$="/services/carburants"], h1.s-carburants { --s-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3c4 5 6 8 6 11a6 6 0 0 1-12 0c0-3 2-6 6-11z'/%3E%3C/svg%3E"); }
.sector-link[href$="/services/climatisation-froid"], h1.s-climatisation-froid { --s-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18M4.2 7.5l15.6 9M19.8 7.5l-15.6 9'/%3E%3C/svg%3E"); }
.sector-link[href$="/services/electricite"], h1.s-electricite { --s-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2L5 13h6l-1 9 8-11h-6z'/%3E%3C/svg%3E"); }
.sector-link[href$="/services/entretien-hygiene"], h1.s-entretien-hygiene { --s-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z'/%3E%3Cpath d='M18 16l.8 2.2L21 19l-2.2.8L18 22l-.8-2.2L15 19l2.2-.8z'/%3E%3C/svg%3E"); }
.sector-link[href$="/services/espaces-verts"], h1.s-espaces-verts { --s-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21v-7'/%3E%3Cpath d='M12 14c-4 0-6-3-6-6 0-3 3-5 6-5s6 2 6 5c0 3-2 6-6 6z'/%3E%3C/svg%3E"); }
.sector-link[href$="/services/etudes-conseil"], h1.s-etudes-conseil { --s-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V10M10 20V4M16 20v-7M21 20H3'/%3E%3C/svg%3E"); }
.sector-link[href$="/services/evenementiel"], h1.s-evenementiel { --s-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16v15H4z'/%3E%3Cpath d='M4 10h16M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
.sector-link[href$="/services/formation"], h1.s-formation { --s-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9l10-5 10 5-10 5z'/%3E%3Cpath d='M6 11.5V16c2 2 10 2 12 0v-4.5'/%3E%3C/svg%3E"); }
.sector-link[href$="/services/fournitures-bureau"], h1.s-fournitures-bureau { --s-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20l1-5L16 4l4 4L9 19z'/%3E%3Cpath d='M14 6l4 4'/%3E%3C/svg%3E"); }
.sector-link[href$="/services/imprimerie-communication"], h1.s-imprimerie-communication { --s-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 8V3h10v5'/%3E%3Cpath d='M5 8h14v9H5z'/%3E%3Cpath d='M8 14h8v7H8z'/%3E%3C/svg%3E"); }
.sector-link[href$="/services/informatique-bureautique"], h1.s-informatique-bureautique { --s-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h18v12H3z'/%3E%3Cpath d='M8 21h8M12 16v5'/%3E%3C/svg%3E"); }
.sector-link[href$="/services/laboratoire"], h1.s-laboratoire { --s-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6M10 3v6l-5 10a1.5 1.5 0 0 0 1.4 2h11.2A1.5 1.5 0 0 0 19 19L14 9V3'/%3E%3Cpath d='M7.5 15h9'/%3E%3C/svg%3E"); }
.sector-link[href$="/services/mobilier"], h1.s-mobilier { --s-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 11V5a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v6'/%3E%3Cpath d='M5 11h14v5H5z'/%3E%3Cpath d='M7 16v5M17 16v5'/%3E%3C/svg%3E"); }
.sector-link[href$="/services/sante-medical"], h1.s-sante-medical { --s-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6v6h6v6h-6v6H9v-6H3V9h6z'/%3E%3C/svg%3E"); }
.sector-link[href$="/services/securite-gardiennage"], h1.s-securite-gardiennage { --s-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E"); }
.sector-link[href$="/services/telecoms"], h1.s-telecoms { --s-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h.01'/%3E%3Cpath d='M8.5 16.5a5 5 0 0 1 7 0'/%3E%3Cpath d='M5 13a10 10 0 0 1 14 0'/%3E%3Cpath d='M2 9.5a15 15 0 0 1 20 0'/%3E%3C/svg%3E"); }
.sector-link[href$="/services/textile-habillement"], h1.s-textile-habillement { --s-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3l-5 3 2 4 2-1v12h10V9l2 1 2-4-5-3a4 4 0 0 1-8 0z'/%3E%3C/svg%3E"); }
.sector-link[href$="/services/transport-logistique"], h1.s-transport-logistique { --s-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6h11v10H2z'/%3E%3Cpath d='M13 9h5l3 3v4h-8z'/%3E%3Cpath d='M5 19a1.5 1.5 0 1 0 3 0 1.5 1.5 0 1 0-3 0M16 19a1.5 1.5 0 1 0 3 0 1.5 1.5 0 1 0-3 0'/%3E%3C/svg%3E"); }
.sector-link[href$="/services/vehicules-pieces"], h1.s-vehicules-pieces { --s-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 16v-4l2-5h12l2 5v4z'/%3E%3Cpath d='M4 12h16'/%3E%3Cpath d='M7 16v2M17 16v2'/%3E%3C/svg%3E"); }
.sector-link { align-content: center; row-gap: .1rem; }
/* Mobile: la colonne de filtres debordait de 64px (un enfant de grille ne
   retrecit pas sous sa largeur minimale sans min-width: 0). */
.page-with-filters > * { min-width: 0; }
@media (max-width: 768px) { .page-with-filters { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 768px) { main .card, main .card a, .filter-panel a { overflow-wrap: anywhere; min-width: 0; } }
.pagination { flex-wrap: wrap; }

/* ── Rapports: couverture bleu nuit en tete de carte, icone par rapport (CSS seul) ── */
.report-card::before { content: ""; display: block; height: 5.5rem; margin: -1.25rem -1.25rem 1rem; border-radius: var(--radius) var(--radius) 0 0;
  background: var(--r-icon, none) 1.25rem center / 2.4rem no-repeat, var(--khatam-xl) right -1.5rem center / 9rem no-repeat, var(--khatam) 0 0 / 64px, var(--navy-grad); }
.report-card.is-soon::before { filter: grayscale(.6) opacity(.75); }
.report-card .report-sector { color: var(--t, var(--accent)); }
.report-card[href$="/rapports/acheteurs-publics"] { --r-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237fd4ae' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M5 21V9l7-5 7 5v12'/%3E%3Cpath d='M10 21v-5h4v5'/%3E%3Cpath d='M9 11h.01M15 11h.01'/%3E%3C/svg%3E"); }
.report-card[href$="/rapports/alimentaire-restauration"] { --r-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237fd4ae' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3v8M5 3v4a2 2 0 0 0 4 0V3M7 11v10'/%3E%3Cpath d='M17 3c-2 2-2 6 0 8v10'/%3E%3C/svg%3E"); }
.report-card[href$="/rapports/classement-entreprises"] { --r-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237fd4ae' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21h16M7 21V9m5 12V3m5 18v-6'/%3E%3C/svg%3E"); }
.report-card[href$="/rapports/etudes-conseil-formation"] { --r-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237fd4ae' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9l10-5 10 5-10 5z'/%3E%3Cpath d='M6 11.5V16c2 2 10 2 12 0v-4.5'/%3E%3C/svg%3E"); }
.report-card[href$="/rapports/fournitures-bureau-papeterie"] { --r-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237fd4ae' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20l1-5L16 4l4 4L9 19z'/%3E%3Cpath d='M14 6l4 4'/%3E%3C/svg%3E"); }
.report-card[href$="/rapports/informatique-bureautique"] { --r-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237fd4ae' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h18v12H3z'/%3E%3Cpath d='M8 21h8M12 16v5'/%3E%3C/svg%3E"); }
.report-card[href$="/rapports/maintenance-technique"] { --r-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237fd4ae' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 5.5a4 4 0 0 0-5.2 5.2L3 17v4h4l6.3-6.3a4 4 0 0 0 5.2-5.2L16 12l-3-1-1-3z'/%3E%3C/svg%3E"); }
.report-card[href$="/rapports/panorama-national"] { --r-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237fd4ae' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5l2.8 2.8h3.9v3.9L21.5 12l-2.8 2.8v3.9h-3.9L12 21.5l-2.8-2.8H5.3v-3.9L2.5 12l2.8-2.8V5.3h3.9z'/%3E%3C/svg%3E"); }
.report-card[href$="/rapports/sante-medicaments"] { --r-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237fd4ae' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6v6h6v6h-6v6H9v-6H3V9h6z'/%3E%3C/svg%3E"); }
.report-card[href$="/rapports/travaux-batiment-voirie"] { --r-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237fd4ae' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18v12H3z'/%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M9 6v6M15 12v6'/%3E%3C/svg%3E"); }

body[data-type="conseil"] main h1[class^="s-"]::before { background: var(--navy) var(--s-icon) center / 1.45rem no-repeat; }

/* ── Bandeau de hub (region, secteur, acheteur, nature): variante compacte du bandeau bleu nuit ── */
.hero-hub { padding: 1.75rem 0 1.75rem; }
.hero-hub h1 { font-size: 2rem; max-width: 60ch; }
.hero-hub .hero-crumbs { font-size: .85rem; color: var(--on-navy-muted); margin-bottom: 1rem; }
.hero-hub .hero-crumbs a { color: var(--sky); }
.hero-hub .hero-crumbs span { color: var(--on-navy); }
.hero-hub-title { display: flex; align-items: center; gap: 1rem; }
.hero-hub-icon { flex: none; width: 4rem; height: 4rem; border-radius: 14px; box-shadow: 0 0 0 1px var(--hairline); }
.hero-hub .hero-intro { font-size: 1.02rem; margin: .75rem 0 0; max-width: 72ch; }
.hero-hub .stat-grid { margin-top: 1.5rem; padding-top: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.hero-hub .stat-card .stat-value { font-size: 1.8rem; }
@media (max-width: 640px) {
  .hero-hub { padding: 1.5rem 0 1.25rem; }
  .hero-hub h1 { font-size: 1.5rem; }
  .hero-hub-icon { width: 3rem; height: 3rem; border-radius: 11px; }
  .hero-hub .stat-grid { grid-template-columns: 1fr 1fr; }
  .hero-hub .stat-card .stat-value { font-size: 1.45rem; }
}

/* ── Icones de secteur (img) dans les listes et cartes ── */
.sector-ico { display: inline-block; width: 2.2rem; height: 2.2rem; border-radius: .6rem; vertical-align: middle; margin-right: .6rem; flex: none; }
.sector-cell { display: flex; align-items: center; }

/* ── Guides: sommaire et encadres ── */
[data-toc] h2 { scroll-margin-top: 1rem; }
.toc { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--navy); border-radius: var(--radius); padding: 1rem 1.25rem; margin: 1.5rem 0; }
.toc-title { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--text-muted); margin: 0 0 .5rem; }
.toc ol { margin: 0; padding-left: 1.3rem; display: grid; gap: .3rem; font-size: .95rem; }
.toc a { color: var(--text); }
.toc a:hover { color: var(--accent); }
.callout { border: 1px solid #bfdbfe; border-left: 4px solid #1d4ed8; background: #eff6ff; color: #1a1a1a; border-radius: var(--radius); padding: .9rem 1.1rem; margin: 1.25rem 0; font-size: .96rem; line-height: 1.6; }
.callout > strong:first-child { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: #1e3a8a; margin-bottom: .25rem; }
.callout p { margin: 0; }
.callout a { color: #1e40af; text-decoration: underline; }
.callout-warning { border-color: #fde68a; border-left-color: #b45309; background: #fffbeb; }
.callout-warning > strong:first-child { color: #92400e; }
.callout-warning a { color: #92400e; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .callout { background: #12233d; border-color: #24426b; border-left-color: var(--sky); color: var(--text); }
  :root:not([data-theme="light"]) .callout > strong:first-child { color: var(--sky); }
  :root:not([data-theme="light"]) .callout a { color: var(--sky); }
  :root:not([data-theme="light"]) .callout-warning { background: #2d2310; border-color: #5c4510; border-left-color: #f59e0b; }
  :root:not([data-theme="light"]) .callout-warning > strong:first-child { color: #fbbf24; }
  :root:not([data-theme="light"]) .callout-warning a { color: #fbbf24; }
}

/* ── Piliers en anglais et en arabe (/en/public-tenders-morocco, /ar/safaqat-omomia-maghrib) ── */
/* La page arabe est en dir="rtl"; l'en-tete et le pied de page, en francais, restent de gauche a droite. */
html[dir="rtl"] .site-header, html[dir="rtl"] .site-footer { direction: ltr; }
.intl-ar { direction: rtl; text-align: right; font-family: "Noto Naskh Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif; font-size: 1.05rem; line-height: 1.95; }
.intl-ar h1, .intl-ar h2 { line-height: 1.5; letter-spacing: 0; }
.intl-ar .lede { font-size: 1.12rem; }
.intl-ar ul { padding-right: 1.3rem; padding-left: 0; }
.intl-ar .stat-label { line-height: 1.6; }
.intl-ar summary { line-height: 1.7; }

/* CLS: la liste de /bons-de-commande arrive par HTMX apres le chargement et
   repoussait le bloc de contact final (CLS 0.14 releve sur le terrain). Tant
   que le conteneur ne porte que le texte Chargement, il reserve une hauteur
   d ecran: le bloc de contact reste sous la ligne de flottaison avant et apres
   l insertion, aucun deplacement visible. */
#results:has(> .htmx-indicator:only-child) { min-height: 100vh; min-height: 100svh; }