/* ============================================================
   Terrain — thème visuel (repris de terrain-app-apercu (2).html)
   ============================================================ */

:root{
  --bg: #17130F; --panel: #211A15; --card: #2A2119; --card2: #332820; --line: #3B2E24;
  --terracotta: #C1613F; --terracotta-soft: #8C4530; --terracotta-dim: #5C3626;
  --cream: #F4EDE4; --muted: #A69686; --muted-dim: #7A6C60;
  --sage: #8FA07F; --sage-bg: #2A3226; --red: #C1543F; --red-bg: #33241F;
  --gold: #C9A24B;
}
*{box-sizing:border-box;}
html,body{ margin:0; padding:0; background:var(--bg); color:var(--cream);
  font-family: Calibri, "Segoe UI", Arial, sans-serif; height:100%; }
h1,h2,h3,h4{ font-family: Cambria, Georgia, serif; margin:0; }

.app{ display:flex; height:100vh; overflow:hidden; }

.sidebar{ width:238px; background:var(--panel); flex-shrink:0; display:flex; flex-direction:column;
  padding:26px 18px; border-right:1px solid var(--line); }
.logo{ display:flex; align-items:center; gap:10px; padding:0 6px 26px 6px; }
.logo .mark{ width:30px; height:30px; border-radius:8px; background:var(--terracotta);
  display:flex; align-items:center; justify-content:center; font-weight:bold; color:var(--cream); font-size:14px; font-family:Cambria,serif; }
.logo .word{ font-size:19px; font-weight:bold; letter-spacing:0.5px; }
.navgroup{ display:flex; flex-direction:column; gap:4px; margin-top:6px; }
.navlabel{ color:var(--muted-dim); font-size:10.5px; letter-spacing:2px; padding:14px 10px 8px 10px; }
.navitem{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:9px;
  color:var(--muted); cursor:pointer; font-size:14px; transition:.15s; }
.navitem svg{ width:18px; height:18px; stroke:var(--muted); fill:none; stroke-width:2; flex-shrink:0; }
.navitem:hover{ background:var(--card); color:var(--cream); }
.navitem:hover svg{ stroke:var(--cream); }
.navitem.active{ background:var(--terracotta); color:var(--cream); }
.navitem.active svg{ stroke:var(--cream); }
.sidebar-foot{ margin-top:auto; padding:14px 12px; background:var(--card); border-radius:10px; }
.sidebar-foot .co{ font-size:12.5px; font-weight:bold; color:var(--cream); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sidebar-foot .role{ font-size:11px; color:var(--muted-dim); margin-top:2px; }

.main{ flex:1; overflow-y:auto; padding:32px 40px 60px 40px; }
.topbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:26px; }
.topbar h1{ font-size:25px; }
.topbar .sub{ color:var(--muted); font-size:13.5px; margin-top:4px; font-family:Calibri; }
.pill{ display:flex; align-items:center; gap:8px; background:var(--card); border:1px solid var(--line);
  border-radius:20px; padding:8px 14px; font-size:12.5px; color:var(--muted); }
.pill .dot{ width:7px; height:7px; border-radius:50%; background:var(--sage); }
.pill .dot.muted{ background:var(--muted-dim); }

.page{ display:none; } .page.active{ display:block; }
.section-title{ font-size:15px; margin:34px 0 4px 0; }
.section-title:first-of-type{ margin-top:0; }
.section-desc{ font-size:12.5px; color:var(--muted-dim); margin-bottom:14px; }

.collapsible{ margin-top:34px; }
.collapsible:first-of-type{ margin-top:0; }
.collapsible-header{ display:flex; align-items:center; gap:8px; cursor:pointer; margin-bottom:8px; }
.collapsible-header .section-title{ margin:0; }
.collapsible-caret{ width:14px; height:14px; stroke:var(--muted); flex-shrink:0; transition:transform .15s ease; }
.collapsible.open .collapsible-caret{ transform:rotate(90deg); }
.collapsible-body{ display:none; }
.collapsible.open .collapsible-body{ display:block; }

.stat-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-bottom:8px; }
.stat-card{ background:var(--card); border-radius:12px; padding:18px 20px; }
.stat-grid .stat-card{ cursor:pointer; transition:.15s; }
.stat-grid .stat-card:hover{ background:var(--card2); }
.stat-card .lbl{ font-size:11.5px; color:var(--muted-dim); letter-spacing:1px; text-transform:uppercase; }
.stat-card .val{ font-size:26px; font-weight:bold; color:var(--cream); margin-top:8px; font-family:Cambria,serif; }
.stat-card .delta{ font-size:11.5px; margin-top:6px; }
.delta.up{ color:var(--red); } .delta.down{ color:var(--sage); } .delta.flat{ color:var(--muted); }
#stat-dealer-actif .val{ font-size:17px; line-height:1.3; }

.panel{ background:var(--card); border-radius:12px; padding:22px; }

.table-scroll{ overflow-x:auto; }
table.matrix{ width:100%; border-collapse:collapse; font-size:12px; min-width:1050px; }
table.matrix th, table.matrix td{ padding:8px 9px; text-align:right; white-space:nowrap; }
table.matrix th{ color:var(--muted-dim); font-weight:normal; font-size:10.5px; text-transform:uppercase; letter-spacing:0.3px;
  border-bottom:1px solid var(--line); }
table.matrix td.cat, table.matrix th.cat{ text-align:left; }
table.matrix td.cat{ color:var(--cream); font-weight:bold; position:sticky; left:0; background:var(--card); }
table.matrix th.cat{ position:sticky; left:0; background:var(--card); }
table.matrix tbody tr{ border-bottom:1px solid var(--line); }
table.matrix tbody tr:last-child{ border-bottom:none; }
table.matrix td{ color:var(--muted); }
table.matrix tfoot td{ color:var(--cream); font-weight:bold; border-top:1px solid var(--line); padding-top:11px; }
table.matrix td.you, table.matrix th.you{ color:var(--terracotta); font-weight:bold; }
table.matrix .grp-sep{ border-left:2px solid var(--terracotta-dim); }

.dealer-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.dealer-card{ background:var(--card); border-radius:12px; padding:16px 18px; }
.dealer-card.you{ border:1px solid var(--terracotta-soft); }
.dealer-card.geant{ border:1px solid var(--gold); }
.dealer-card .top{ display:flex; justify-content:space-between; align-items:flex-start; }
.dealer-card .n{ font-size:14px; font-weight:bold; color:var(--cream); }
.dealer-card .u{ font-size:11px; color:var(--muted-dim); margin-top:2px; }
.dealer-card .count{ font-size:20px; font-weight:bold; color:var(--terracotta); font-family:Cambria,serif; }
.dealer-card.geant .count{ color:var(--gold); }
.dealer-card .brands{ font-size:10.5px; color:var(--muted); margin-top:9px; line-height:1.4; }
.dealer-card .role-tag{ display:inline-block; font-size:9.5px; letter-spacing:0.5px; text-transform:uppercase;
  padding:2px 8px; border-radius:9px; margin-top:9px; }
.role-tag.competitor{ background:var(--card2); color:var(--muted); }
.role-tag.ref{ background:var(--terracotta-dim); color:var(--cream); }
.role-tag.refg{ background:#4A3A1E; color:var(--gold); }
.group-label{ font-size:11px; color:var(--muted-dim); letter-spacing:1.5px; text-transform:uppercase; margin:22px 0 12px 0; }

.filters{ display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.filter-chip{ padding:7px 14px; border-radius:18px; font-size:12.5px; cursor:pointer;
  background:var(--card2); color:var(--muted); border:1px solid var(--line); transition:.15s; }
.filter-chip:hover{ color:var(--cream); }
.filter-chip.active{ background:var(--terracotta); color:var(--cream); border-color:var(--terracotta); }

table.pricetable{ width:100%; border-collapse:collapse; font-size:12.5px; min-width:960px; }
table.pricetable th{ text-align:left; color:var(--muted-dim); font-weight:normal; font-size:11px; text-transform:uppercase;
  letter-spacing:0.5px; border-bottom:1px solid var(--line); padding:9px 10px; }
table.pricetable td{ padding:12px 10px; border-bottom:1px solid var(--line); color:var(--muted); vertical-align:top; }
table.pricetable tr:last-child td{ border-bottom:none; }
table.pricetable td.model{ color:var(--cream); font-weight:bold; }
table.pricetable .yourmatch{ color:var(--cream); }
table.pricetable .yourstore{ font-size:11px; color:var(--terracotta); margin-top:2px; }
td.diffdown{ color:var(--sage); font-weight:bold; }
td.diffup{ color:var(--red); font-weight:bold; }
.diffdown{ color:var(--sage); font-weight:bold; }
.diffup{ color:var(--red); font-weight:bold; }
.cat-badge{ font-size:10px; background:var(--card2); color:var(--muted); padding:2px 8px; border-radius:9px; display:inline-block; margin-bottom:4px; }
.match-badge{ font-size:9.5px; letter-spacing:0.4px; text-transform:uppercase; padding:2px 7px; border-radius:8px; }
.match-exact{ background:var(--sage-bg); color:var(--sage); }

.noequiv-note{ font-size:12px; color:var(--muted-dim); font-style:italic; margin-top:14px; }
.noequiv-list{ display:flex; flex-direction:column; gap:8px; margin-top:6px; }
.noequiv-item{ display:flex; justify-content:space-between; align-items:center; background:var(--card2); border-radius:9px; padding:11px 14px; }
.noequiv-item .m{ font-size:12.5px; color:var(--cream); }
.noequiv-item .m span{ color:var(--muted-dim); font-size:11px; }
.noequiv-item .p{ font-size:12.5px; color:var(--muted); }

.compare-list{ display:flex; flex-direction:column; gap:10px; }
.compare-list .collapsible{ margin-top:0; }
.compare-row{ background:var(--card2); border-radius:10px; }
.compare-row .collapsible-header{ padding:14px 16px; margin-bottom:0; }
.compare-row .collapsible-body{ padding:0 16px 14px; }
.compare-row-body{ flex:1; min-width:0; }
.compare-row-title{ font-size:13.5px; font-weight:bold; color:var(--cream); }
.compare-row-summary{ font-size:12px; color:var(--muted); margin-top:3px; }
.compare-row-count{ font-size:10.5px; color:var(--muted-dim); white-space:nowrap; }
.compare-noequiv-group{ margin-bottom:16px; }
.compare-noequiv-group:last-child{ margin-bottom:0; }
.compare-noequiv-group .compare-row-title{ margin-bottom:8px; }
.compare-modele-raw{ color:var(--muted-dim); font-size:11px; }
.compare-mine-badge{ font-size:9.5px; letter-spacing:0.4px; text-transform:uppercase; padding:2px 7px; border-radius:8px; background:var(--terracotta-dim); color:var(--terracotta); margin-right:4px; }

.feed{ display:flex; flex-direction:column; gap:10px; }
.feed-item{ display:flex; align-items:center; gap:16px; background:var(--card); border-radius:12px; padding:16px 18px; }
.feed-icon{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.feed-icon svg{ width:18px; height:18px; stroke:var(--cream); fill:none; stroke-width:2; }
.feed-icon.sold{ background:var(--red-bg); } .feed-icon.sold svg{ stroke:var(--red); }
.feed-icon.price{ background:var(--terracotta-dim); } .feed-icon.price svg{ stroke:var(--terracotta); }
.feed-icon.new{ background:var(--sage-bg); } .feed-icon.new svg{ stroke:var(--sage); }
.feed-main{ flex:1; min-width:0; }
.feed-title{ font-size:14px; color:var(--cream); font-weight:bold; }
.feed-sub{ font-size:12.5px; color:var(--muted-dim); margin-top:2px; }
.feed-price{ text-align:right; flex-shrink:0; }
.feed-price .now{ font-size:14.5px; font-weight:bold; color:var(--cream); font-family:Cambria,serif; }
.feed-price .was{ font-size:11.5px; color:var(--muted-dim); text-decoration:line-through; }
.feed-tag{ font-size:10.5px; background:var(--card2); color:var(--muted); padding:3px 9px; border-radius:12px; margin-left:14px; flex-shrink:0; white-space:nowrap; }
.feed-time{ font-size:11px; color:var(--muted-dim); width:60px; text-align:right; flex-shrink:0; }

.dealer-groups{ display:flex; flex-direction:column; gap:10px; }
.dealer-group{ background:var(--card2); border-radius:12px; overflow:hidden; }
.dealer-group-header{ display:flex; align-items:center; gap:10px; width:100%; padding:14px 18px; background:none; border:none; cursor:pointer; text-align:left; font:inherit; }
.dealer-group-caret{ width:14px; height:14px; stroke:var(--muted); flex-shrink:0; transition:transform .15s ease; }
.dealer-group.open .dealer-group-caret{ transform:rotate(90deg); }
.dealer-group-name{ flex:1; font-size:14px; color:var(--cream); font-weight:bold; }
.dealer-group-count{ font-size:10.5px; background:var(--card); color:var(--muted); padding:3px 9px; border-radius:12px; flex-shrink:0; }
.dealer-group-body{ display:none; padding:0 18px 14px; }
.dealer-group.open .dealer-group-body{ display:block; }

.detail-brands{ margin-top:14px; font-size:11.5px; color:var(--muted); line-height:1.5; }
.detail-brands strong{ color:var(--cream); }

.trend-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px; }
.chart-box{ background:var(--card); border-radius:12px; padding:22px; }
.chart-box h3{ font-size:15px; margin-bottom:2px; }
.chart-box .desc{ font-size:12px; color:var(--muted-dim); margin-bottom:16px; }
.velo-row{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.velo-row .name{ width:150px; font-size:12.5px; color:var(--muted); flex-shrink:0; }
.velo-row .name .since{ font-size:10px; color:var(--muted-dim); margin-top:2px; }
.velo-track{ flex:1; height:8px; background:var(--card2); border-radius:5px; }
.velo-fill{ height:100%; border-radius:5px; background:var(--terracotta); }
.velo-days{ width:60px; text-align:right; font-size:12px; color:var(--cream); }
.legend{ display:flex; gap:18px; margin-top:4px; flex-wrap:wrap; }
.legend .item{ display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--muted); }
.legend .sw{ width:10px; height:10px; border-radius:3px; }

::-webkit-scrollbar{ height:9px; width:9px; }
::-webkit-scrollbar-thumb{ background:var(--line); border-radius:5px; }
::-webkit-scrollbar-track{ background:transparent; }

.mobile-tabbar{ display:none; position:fixed; bottom:0; left:0; right:0; background:var(--panel);
  border-top:1px solid var(--line); padding:10px 6px; justify-content:space-around; z-index:40; }
.mobile-tabbar .navitem{ flex-direction:column; gap:4px; font-size:10px; padding:6px 10px; }

@media (max-width: 980px){
  .sidebar{ display:none; }
  .stat-grid{ grid-template-columns:repeat(2,1fr); }
  .dealer-grid{ grid-template-columns:1fr; }
  .trend-grid{ grid-template-columns:1fr; }
  .main{ padding:22px; padding-bottom:90px; }
  .mobile-tabbar{ display:flex; }
}

/* ============================================================
   États vides — utilisés partout où une table Supabase est vide
   ============================================================ */

.empty-state{ display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:6px; padding:38px 20px; color:var(--muted-dim); }
.empty-state .title{ color:var(--muted); font-size:13.5px; font-weight:bold; }
.empty-state .desc{ font-size:12px; max-width:360px; }

/* ============================================================
   Bouton déconnexion
   ============================================================ */

.btn-logout{ margin-top:10px; width:100%; background:transparent; border:1px solid var(--line);
  color:var(--muted); border-radius:9px; padding:8px 10px; font-size:12px; cursor:pointer;
  font-family:Calibri, "Segoe UI", Arial, sans-serif; transition:.15s; }
.btn-logout:hover{ border-color:var(--red); color:var(--red); }

.mobile-tabbar .navitem.logout{ background:none; border:none; }
.mobile-tabbar .navitem.logout:hover{ color:var(--red); }
.mobile-tabbar .navitem.logout:hover svg{ stroke:var(--red); }

/* ============================================================
   Écran de connexion (index.html) — adapté à la palette Terrain
   ============================================================ */

.login-body{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:1.5rem; }

.login-card{ width:100%; max-width:360px; background:var(--panel); border:1px solid var(--line);
  border-radius:14px; padding:2rem; }

.login-title{ margin:0 0 0.25rem; font-size:1.6rem; font-weight:bold; }

.login-subtitle{ margin:0 0 1.5rem; color:var(--muted); font-size:0.9rem; }

.login-form{ display:flex; flex-direction:column; gap:0.4rem; }

.login-form label{ font-size:0.85rem; color:var(--muted-dim); margin-top:0.6rem; }

.login-form input{ background:var(--card); border:1px solid var(--line); border-radius:9px;
  padding:0.65rem 0.75rem; color:var(--cream); font-size:0.95rem; font-family:Calibri, "Segoe UI", Arial, sans-serif; }

.login-form input:focus{ outline:none; border-color:var(--terracotta); }

.login-form button{ margin-top:1.25rem; background:var(--terracotta); color:var(--cream); border:none;
  border-radius:9px; padding:0.7rem; font-size:0.95rem; font-weight:bold; cursor:pointer; }

.login-form button:hover{ background:var(--terracotta-soft); }

.login-form button:disabled{ opacity:0.6; cursor:default; }

/* ============================================================
   Modale des cartes stat (Tableau de bord)
   ============================================================ */

.modal-overlay{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:200;
  align-items:center; justify-content:center; padding:20px; }
.modal-overlay.open{ display:flex; }
.modal{ background:var(--panel); border:1px solid var(--line); border-radius:14px; max-width:640px;
  width:100%; max-height:80vh; display:flex; flex-direction:column; overflow:hidden; }
.modal-header{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px;
  border-bottom:1px solid var(--line); flex-shrink:0; }
.modal-header h3{ font-size:16px; }
.modal-close{ background:none; border:none; color:var(--muted); font-size:22px; line-height:1;
  cursor:pointer; padding:2px 8px; border-radius:6px; font-family:inherit; }
.modal-close:hover{ color:var(--cream); background:var(--card2); }
.modal-body{ padding:16px 20px; overflow-y:auto; }

.login-error{ color:var(--red); font-size:0.85rem; margin:0.75rem 0 0; }
.login-message{ color:var(--green); font-size:0.85rem; margin:0.75rem 0 0; }

/* ============================================================
   Page Recherche
   ============================================================ */

.search-controls{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:18px; align-items:center; }
.search-input{ background:var(--card); border:1px solid var(--line); border-radius:9px; padding:9px 14px;
  color:var(--cream); font-size:13px; font-family:Calibri, "Segoe UI", Arial, sans-serif; flex:1; min-width:200px; }
.search-input:focus{ outline:none; border-color:var(--terracotta); }
.search-select{ background:var(--card); border:1px solid var(--line); border-radius:9px; padding:9px 12px;
  color:var(--cream); font-size:13px; font-family:Calibri, "Segoe UI", Arial, sans-serif; cursor:pointer; }
.search-select:focus{ outline:none; border-color:var(--terracotta); }
.search-reset{ background:transparent; border:1px solid var(--line); color:var(--muted); border-radius:9px;
  padding:9px 16px; font-size:13px; cursor:pointer; font-family:inherit; transition:.15s; }
.search-reset:hover{ border-color:var(--red); color:var(--red); }
.search-summary{ font-size:12.5px; color:var(--muted-dim); margin-bottom:14px; }

.search-group-list{ display:flex; flex-direction:column; gap:12px; }
.search-group{ background:var(--card2); border-radius:10px; padding:16px 18px; }
.search-group-header{ display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:8px;
  margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid var(--line); cursor:pointer; }
.search-group-title-wrap{ display:flex; align-items:center; gap:8px; }
.search-group-caret{ width:12px; height:12px; stroke:var(--muted); flex-shrink:0; transition:transform .15s ease; }
.search-group.open .search-group-caret{ transform:rotate(90deg); }
.search-group-title{ font-size:14.5px; font-weight:bold; color:var(--cream); font-family:Cambria,serif; }
.search-group-stats{ font-size:11px; color:var(--muted-dim); }
.search-group-stats .spread{ color:var(--terracotta); font-weight:bold; }
.search-unit-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 0;
  border-bottom:1px solid var(--line); }
.search-unit-row:last-child{ border-bottom:none; }
.search-unit-main{ flex:1; min-width:0; }
.search-unit-dealer{ font-size:13px; color:var(--cream); font-weight:bold; }
.search-unit-meta{ font-size:11px; color:var(--muted-dim); margin-top:2px; }
.search-unit-price{ font-size:14px; font-weight:bold; color:var(--cream); font-family:Cambria,serif; white-space:nowrap; }
.search-unit-link{ color:var(--terracotta); font-size:11px; text-decoration:none; flex-shrink:0; margin-left:14px; }
.search-unit-link:hover{ text-decoration:underline; }

.search-movement{ display:none; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.search-group.open .search-movement{ display:block; }
.search-movement-window{ display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.search-movement-window-label{ font-size:11px; color:var(--muted-dim); text-transform:uppercase; letter-spacing:.5px; }
.search-movement-select{ background:var(--card); border:1px solid var(--line); color:var(--cream); border-radius:8px; padding:5px 10px; font-size:12px; font-family:inherit; cursor:pointer; }