/* Terres rares data - feuille de style principale
   Design inspiré de Pappers Entreprises / Pappers Immobilier.
   Code autonome, sans dépendance externe. */
:root {
  --pp-blue: #111111;
  --pp-blue-dark: #000000;
  --pp-blue-soft: #f0f0f0;
  --pp-band: #111111;
  --pp-amber: #f0f0f0;
  --pp-amber-ink: #444444;
  --ink: #1a1d26;
  --ink-2: #5b6172;
  --hairline: #e3e6ef;
  --page: #fafafa;
  --font: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-display: Georgia, 'Times New Roman', serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--page); color: var(--ink); font-family: var(--font); font-size: 15px; line-height: 1.5; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px 60px; }
a { color: var(--pp-blue); }
h1, h2, h3 { font-weight: 600; }

/* Navigation */
.nav { background: #fff; border-bottom: 1px solid var(--hairline); }
.nav-inner { max-width: 1080px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.nav-brand { display: flex; align-items: baseline; gap: 8px; padding: 12px 0; text-decoration: none; }
.nav-brand .b { font-family: var(--font-display); font-size: 20px; color: var(--pp-blue); letter-spacing: -0.02em; }
.nav-brand .t { background: var(--pp-blue); color: #fff; font-size: 11px; border-radius: 4px; padding: 2px 7px; font-weight: 600; }
.nav-links { display: flex; flex-wrap: wrap; gap: 18px; }
.nav-links a { padding: 14px 0; color: var(--ink-2); text-decoration: none; font-size: 14px; }
.nav-links a[aria-current="page"] { color: var(--pp-blue); font-weight: 600; box-shadow: inset 0 -2px 0 var(--pp-blue); }
@media (max-width: 600px) { .nav-links a { display: inline-flex; align-items: center; min-height: 44px; } }

.demo-ribbon { background: var(--pp-amber); color: var(--pp-amber-ink); border-radius: 8px; padding: 10px 14px; font-size: 13px; line-height: 18px; margin: 16px 0 8px; }
.page-head { margin: 26px 0 18px; }
.page-head h1 { font-family: var(--font-display); font-weight: 400; font-size: 30px; letter-spacing: -0.02em; margin: 0 0 6px; }
.page-head p { color: var(--ink-2); margin: 0; font-size: 14px; }

/* Boutons */
.pp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--pp-blue); color: #fff; border: 1px solid var(--pp-blue); border-radius: 6px; padding: 13px 20px; font-size: 15px; font-weight: 600; font-family: inherit; cursor: pointer; text-decoration: none; min-height: 44px; }
.pp-btn.secondary { background: #fff; color: var(--pp-blue); }
.pp-btn.compact { padding: 9px 14px; font-size: 14px; min-height: 40px; }
.pp-btn.inert { opacity: .55; cursor: not-allowed; }

/* Accueil */
.hero { text-align: center; padding: 40px 8px 8px; }
.hero h1 { font-family: var(--font-display); font-weight: 400; font-size: 34px; line-height: 1.15; letter-spacing: -0.025em; margin: 0 0 10px; }
.hero .hero-sub { color: var(--pp-blue); font-size: 19px; margin: 0 0 26px; font-weight: 500; }
.hero p.hero-text { max-width: 620px; margin: 22px auto 0; color: var(--ink-2); font-size: 14px; line-height: 22px; }
@media (min-width: 768px) { .hero h1 { font-size: 44px; } .hero .hero-sub { font-size: 22px; } }
.searchrow { display: flex; max-width: 640px; margin: 0 auto; }
.searchrow input { flex: 1; min-width: 0; border: 1px solid #d0d0d0; border-right: none; border-radius: 6px 0 0 6px; padding: 14px 16px; font-size: 15px; font-family: inherit; color: var(--ink); background: #fff; }
.searchrow input:focus { outline: 2px solid var(--pp-blue); outline-offset: -1px; }
.searchrow .pp-btn { border-radius: 0 6px 6px 0; }
.hero .adv { display: inline-block; margin-top: 14px; font-size: 14px; }
.section-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); margin: 38px 0 12px; }
.catgrid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 640px) { .catgrid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .catgrid { grid-template-columns: repeat(3, 1fr); } }
.catcard { display: block; border: 1px solid var(--hairline); border-radius: 10px; padding: 16px; text-decoration: none; color: var(--ink); background: #fff; }
.catcard:hover { border-color: #d0d0d0; background: var(--pp-blue-soft); }
.catcard .cat-ic { width: 34px; height: 34px; border-radius: 8px; background: var(--pp-blue-soft); color: var(--pp-blue); display: flex; align-items: center; justify-content: center; font-size: 17px; margin-bottom: 10px; }
.catcard .cat-name { font-weight: 600; font-size: 15px; margin-bottom: 4px; }
.catcard .cat-detail { color: var(--ink-2); font-size: 13px; line-height: 19px; }
.modelgrid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 720px) { .modelgrid { grid-template-columns: repeat(3, 1fr); } }
.modelcard { border: 1px solid var(--hairline); border-radius: 10px; padding: 16px; background: #fff; }
.modelcard .mc-title { font-weight: 600; font-size: 15px; margin-bottom: 4px; }
.modelcard .mc-price { color: var(--pp-blue); font-weight: 600; font-size: 13px; margin-bottom: 6px; }
.modelcard .mc-text { color: var(--ink-2); font-size: 13px; line-height: 19px; }
.callout { border: 1px solid #cccccc; background: var(--pp-amber); color: var(--pp-amber-ink); border-radius: 10px; padding: 14px 16px; margin: 26px 0; font-size: 13px; }
.callout.note { border-color: #d0d0d0; background: var(--pp-blue-soft); color: var(--pp-blue-dark); }
.callout .co-title { font-weight: 700; margin-bottom: 4px; }
.footer-note { color: var(--ink-2); font-size: 12px; margin-top: 30px; border-top: 1px solid var(--hairline); padding-top: 14px; }

/* Recherche */
.searchrow.wide { max-width: none; width: 100%; margin: 0 0 4px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.chip { border: 1px solid #d7d7d7; background: #fff; border-radius: 6px; padding: 8px 12px; font-size: 13px; color: var(--ink); font-family: inherit; display: inline-flex; align-items: center; gap: 6px; }
.chip .chip-caret { color: var(--ink-2); font-size: 10px; }
.chip.strong { border-color: var(--pp-blue); color: var(--pp-blue); font-weight: 600; }
.restabs { display: flex; gap: 18px; border-bottom: 1px solid var(--hairline); margin: 6px 0 18px; flex-wrap: wrap; }
.restabs button { background: none; border: none; padding: 10px 0; font-size: 14px; font-family: inherit; color: var(--ink-2); cursor: pointer; min-height: 40px; }
.restabs button[aria-current="true"] { color: var(--pp-blue); font-weight: 600; box-shadow: inset 0 -2px 0 var(--pp-blue); }
.rescard { border: 1px solid var(--hairline); border-radius: 10px; padding: 16px; margin-bottom: 12px; background: #fff; }
.rescard .res-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rescard .res-ic { width: 30px; height: 30px; border-radius: 6px; background: var(--pp-blue-soft); color: var(--pp-blue); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; flex: none; }
.rescard .res-name { color: var(--pp-blue); font-weight: 600; font-size: 16px; }
.rescard .res-id { color: var(--ink-2); font-size: 13px; }
.resfacts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin: 12px 0; }
@media (min-width: 768px) { .resfacts { grid-template-columns: repeat(4, 1fr); } }
.resfacts .rf-label { color: var(--ink-2); font-size: 12px; margin-bottom: 2px; }
.resfacts .rf-value { font-size: 14px; }
.resfacts .rf-sub { color: var(--ink-2); font-size: 12px; }
.res-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.res-empty { color: var(--ink-2); font-size: 14px; padding: 22px; text-align: center; border: 1px dashed var(--hairline); border-radius: 10px; background: #fff; }

/* Fiche */
.fiche-band { background: var(--pp-band); color: #fff; border-radius: 10px 10px 0 0; padding: 10px 18px; font-size: 12px; display: flex; justify-content: flex-end; gap: 22px; flex-wrap: wrap; }
.fiche-card { border: 1px solid var(--hairline); border-top: none; border-radius: 0 0 10px 10px; padding: 20px 18px; background: #fff; }
.fiche-top { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 900px) { .fiche-top { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) 230px; } }
.fiche-name { font-family: var(--font-display); font-size: 26px; letter-spacing: -0.02em; margin: 0 0 8px; }
.fiche-meta { color: var(--ink-2); font-size: 13px; display: flex; flex-direction: column; gap: 6px; }
.fiche-meta .ok { color: #111111; font-weight: 600; }
.fiche-meta .alert { color: var(--pp-amber-ink); }
.fiche-actions { display: flex; flex-direction: column; gap: 8px; }
.fiche-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.fiche-table th { text-align: left; color: var(--ink-2); font-weight: 400; font-size: 13px; padding: 8px 12px 8px 0; vertical-align: top; width: 34%; }
.fiche-table td { padding: 8px 0; vertical-align: top; }
.fiche-table tr { border-bottom: 1px solid var(--hairline); }
.fiche-table tr:last-child { border-bottom: none; }
.src-tag { display: inline-block; background: var(--pp-blue-soft); color: var(--pp-blue-dark); border-radius: 4px; font-size: 11px; padding: 2px 7px; margin-left: 6px; }
.relchips { display: flex; flex-wrap: wrap; gap: 8px; }
.relchip { border: 1px solid #d0d0d0; color: var(--pp-blue); background: #fff; border-radius: 999px; padding: 8px 14px; font-size: 13px; text-decoration: none; }
.relchip:hover { background: var(--pp-blue-soft); }
.rows { background: #fff; border: 1px solid var(--hairline); border-radius: 10px; overflow: hidden; }
.row { display: flex; align-items: baseline; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--hairline); }
.row:last-child { border-bottom: none; }
.row .r-name { font-weight: 600; font-size: 14px; }
.row .r-detail { color: var(--ink-2); font-size: 12px; flex: 1; }
.row .r-value { font-size: 14px; font-variant-numeric: tabular-nums; }
.caption { color: var(--ink-2); font-size: 12px; margin-top: 8px; }

/* Explorer */
.explorer { display: grid; grid-template-columns: 1fr; border: 1px solid var(--hairline); border-radius: 10px; overflow: hidden; background: #fff; }
@media (min-width: 860px) { .explorer { grid-template-columns: 270px minmax(0, 1fr); } }
.explorer-side { border-bottom: 1px solid var(--hairline); padding: 12px; display: flex; flex-direction: column; gap: 4px; }
@media (min-width: 860px) { .explorer-side { border-bottom: none; border-right: 1px solid var(--hairline); } }
.layer { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 8px; cursor: pointer; border: none; background: none; font-family: inherit; font-size: 14px; color: var(--ink); text-align: left; width: 100%; min-height: 40px; }
.layer:hover { background: var(--pp-blue-soft); }
.layer .dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.layer .layer-name { flex: 1; }
.layer .eye { width: 18px; height: 18px; border-radius: 50%; border: 1px solid #b9b9b9; flex: none; position: relative; }
.layer.on .eye { border-color: var(--pp-blue); background: var(--pp-blue); }
.layer.on .eye::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: #fff; }
.side-reset { margin-top: 10px; width: 100%; }
.explorer-map { position: relative; background: #ececec; min-height: 380px; }
.explorer-map img.map { display: block; width: 100%; height: auto; }
.map-search { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: min(560px, calc(100% - 24px)); z-index: 3; }
.map-search input { width: 100%; box-sizing: border-box; border: 1px solid #d0d0d0; border-radius: 6px; padding: 11px 14px; font-size: 14px; font-family: inherit; box-shadow: 0 2px 10px rgba(0,0,0,0.08); }
.map-dot { position: absolute; width: 13px; height: 13px; border-radius: 50%; border: 2px solid #fff; transform: translate(-50%, -50%); cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.35); z-index: 2; padding: 0; }
.map-dot.sel { outline: 3px solid rgba(0,0,0,0.4); width: 15px; height: 15px; }
.map-card { position: absolute; left: 12px; bottom: 12px; background: #fff; border-radius: 10px; box-shadow: 0 4px 18px rgba(0,0,0,0.18); padding: 14px 16px; max-width: min(320px, calc(100% - 24px)); z-index: 4; }
.map-card .mc-layer { font-size: 11px; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.04em; }
.map-card .mc-name { font-weight: 600; font-size: 15px; margin: 2px 0; }
.map-card .mc-place { color: var(--ink-2); font-size: 13px; margin-bottom: 8px; }
.map-legend { position: absolute; right: 12px; top: 62px; background: rgba(255,255,255,0.94); border-radius: 8px; padding: 10px 12px; font-size: 12px; z-index: 3; display: flex; flex-direction: column; gap: 5px; }
.map-legend .lg { display: flex; align-items: center; gap: 7px; }
.map-legend .dot { width: 9px; height: 9px; border-radius: 50%; }
@media (max-width: 859px) { .map-legend { display: none; } .explorer-map { min-height: 300px; } }

/* Prix */
.price-table { width: 100%; border-collapse: collapse; font-size: 14px; background: #fff; border: 1px solid var(--hairline); border-radius: 10px; overflow: hidden; }
.price-table th, .price-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--hairline); }
.price-table thead th { background: var(--pp-blue-soft); color: var(--pp-blue-dark); font-size: 12px; font-weight: 600; }
.price-table tbody tr:last-child td { border-bottom: none; }
.price-table .el { font-weight: 600; }
.price-table .num { font-variant-numeric: tabular-nums; }
.sparkgrid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 720px) { .sparkgrid { grid-template-columns: repeat(3, 1fr); } }
.sparkcard { border: 1px solid var(--hairline); border-radius: 10px; background: #fff; padding: 14px 16px; }
.sparkcard .s-name { font-weight: 600; font-size: 14px; }
.sparkcard .s-delta { color: #111111; font-size: 12px; font-weight: 600; }
.sparkcard svg { display: block; width: 100%; height: 44px; margin-top: 8px; }
.chartbox { border: 1px solid var(--hairline); border-radius: 10px; background: #fff; padding: 16px; }
.chartbox .c-label { font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.chartbox svg { display: block; width: 100%; height: 180px; }
.chart-x { display: flex; justify-content: space-between; color: var(--ink-2); font-size: 11px; margin-top: 6px; }

/* Layers: each has its own shape in addition to its grey (B/W chart) */
.lyr-mines { border-radius: 3px !important; }
.lyr-separation { border-radius: 3px !important; transform: translate(-50%, -50%) rotate(45deg); }
.lg .dot.lyr-separation, .layer .dot.lyr-separation { transform: rotate(45deg); }
.lyr-aimants { background: #ffffff !important; border: 3px solid #555555 !important; }
.lyr-investissements { border-radius: 3px !important; border-style: dashed !important; border-color: #111111 !important; }
.lyr-goulots { background: #ffffff !important; border: 3px solid #000000 !important; border-radius: 3px !important; transform: translate(-50%, -50%) rotate(45deg); }
.lg .dot.lyr-goulots, .layer .dot.lyr-goulots { transform: rotate(45deg); }
.lyr-permis { background: #c9c9c9 !important; border: 2px solid #111111 !important; }
.lg .dot, .layer .dot { box-shadow: 0 0 0 1px rgba(0,0,0,0.15); }