/* ============================================================
   TABLER-HMV.CSS — Design system HMV Data (dark theme)
   Basé sur Tabler 1.2 dark + tokens preview.tabler.io
   ============================================================ */
body { touch-action: auto !important; }

/* --- Tokens --- */
:root {
  --tb-body-bg: #111827;
  --tb-card-bg: #1f2937;
  --tb-text: #e5e7eb;
  --tb-text-muted: #9ca3af;
  --tb-border: rgba(255,255,255,.08);
  --tb-primary: #206bc4;
  --tb-blue: #4dabf7;
  --tb-green: #2fb344;
  --tb-red: #d63939;
  --tb-yellow: #f59f00;
  --tb-orange: #ffa94d;

  /* Palette graphiques (hors stations) — niveaux de gris contrastés */
  --chart-1: #e5e7eb;
  --chart-2: #9ca3af;
  --chart-3: #6b7280;
  --chart-4: #374151;
  --chart-5: #4b5563;
  --chart-6: #6b7280;

  /* Couleurs stations */
  --st-aussois: #f8912b;
  --st-bessans: #dd2947;
  --st-bonneval: #f2d07b;
  --st-lanorma: #e59eb9;
  --st-valcenis: #7bcfef;
  --st-valfrejus: #0f5cd4;
}

/* --- Base --- */
body {
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  font-size: 14px;
  background: var(--tb-body-bg);
  color: var(--tb-text);
}

/* --- Cards --- */
.card {
  background: var(--tb-card-bg);
  border: 1px solid var(--tb-border);
  border-radius: 8px;
}
.stat-card { transition: transform .2s, box-shadow .2s; }
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,.25); }

/* --- Typography --- */
.h2 { font-size: 24px; font-weight: 600; color: var(--tb-text); }
.subheader { font-size: 12px; letter-spacing: .48px; text-transform: uppercase; color: var(--tb-text-muted); }
.section-label { font-size: 12px; letter-spacing: .48px; text-transform: uppercase; color: var(--tb-text-muted); font-weight: 600; margin-bottom: .75rem; margin-top: 1.5rem; }
.chart-title { font-size: 14px; font-weight: 600; color: var(--tb-text); margin-bottom: .75rem; }

/* --- Navbar --- */
.navbar-hmv { background: var(--tb-card-bg); border-bottom: 1px solid var(--tb-border); }
.navbar-brand-hmv { font-family: 'Playfair Display', serif; font-size: 23px; font-weight: 900; }
.navbar-brand-hmv .brand-hmv { color: #fff; }
.navbar-brand-hmv .brand-data { color: #4dabf7; }

/* --- Page header --- */
.page-header-hmv {
  background: var(--tb-card-bg);
  border-bottom: 1px solid var(--tb-border);
  padding: 1.5rem 0;
}
.page-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.page-header-content { flex: 1; }

/* --- Logo mobile bandeau --- */
.logo-mobile-banner {
  display: none;
  background: var(--tb-card-bg);
  border-bottom: 1px solid var(--tb-border);
  padding: 1rem 0;
  text-align: center;
}
.logo-mobile-banner img { height: 131px; width: auto; opacity: .92; }

/* --- Logo desktop --- */
.logo-desktop { flex-shrink: 0; margin-left: 32px; }
.logo-desktop img { height: 114px; width: auto; opacity: .92; }

/* --- Live text --- */
.live-text { color: #fff; font-size: 12px; font-weight: 500; }

/* --- Filtres --- */
.filter-bar { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.filter-bar .form-select {
  font-size: 12px;
  color: var(--tb-text-muted);
  padding: .45rem .75rem;
}

/* --- Live indicator --- */
.live-indicator {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: 12px;
  color: var(--tb-green);
  font-weight: 500;
}
.live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--tb-green);
  animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

/* --- Catégories hébergement --- */
.cat-card { border-left: 3px solid; padding: .75rem 1rem; }
.cat-card.cat-pro { border-color: var(--tb-primary); }
.cat-card.cat-pap { border-color: var(--tb-green); }
.cat-card.cat-nc { border-color: var(--tb-yellow); }
.cat-label { font-size: 12px; letter-spacing: .48px; text-transform: uppercase; color: var(--tb-text-muted); margin-bottom: .25rem; }
.cat-value { font-size: 24px; font-weight: 600; }
.cat-sub { font-size: 14px; color: var(--tb-text-muted); margin-top: .15rem; }

/* --- TCAM grille --- */
.tcam-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: .75rem; }
.tcam-card { text-align: center; }
.tcam-station { font-size: 12px; color: var(--tb-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .4rem; }
.tcam-row { display: flex; align-items: baseline; justify-content: center; gap: .3rem; margin-top: .15rem; }
.tcam-tag { font-size: 11px; color: var(--tb-text-muted); min-width: 2em; }
.tcam-val { font-size: 16px; font-weight: 600; }
.tcam-val.up { color: var(--tb-green); }
.tcam-val.down { color: var(--tb-red); }

/* --- Boutons filtre --- */
.btn-filter { font-size: 14px; padding: .25rem .75rem; }
.btn-filter.active { background: rgba(32,107,196,.2); border-color: var(--tb-primary); color: var(--tb-blue); }

/* --- Station dots & badges --- */
.st-dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  margin-right: .35rem;
  vertical-align: middle;
}
.st-dot-aussois { background: var(--st-aussois); }
.st-dot-bessans { background: var(--st-bessans); }
.st-dot-bonneval { background: var(--st-bonneval); }
.st-dot-lanorma { background: var(--st-lanorma); }
.st-dot-valcenis { background: var(--st-valcenis); }
.st-dot-valfrejus { background: var(--st-valfrejus); }

.st-bar-aussois { background: var(--st-aussois) !important; }
.st-bar-bessans { background: var(--st-bessans) !important; }
.st-bar-bonneval { background: var(--st-bonneval) !important; }
.st-bar-lanorma { background: var(--st-lanorma) !important; }
.st-bar-valcenis { background: var(--st-valcenis) !important; }
.st-bar-valfrejus { background: var(--st-valfrejus) !important; }

/* --- Navbar brand --- */
.navbar-brand-hmv span { font-family: 'Playfair Display', serif; font-weight: 900; font-size: 23px; }

/* --- Page title (Playfair) --- */
.page-title-hmv {
  font-family: 'Playfair Display', serif;
  font-size: clamp(28px, 5vw, 48px);
  font-weight: 900;
  line-height: .95;
  letter-spacing: -.025em;
  color: var(--tb-text-muted);
  margin: 0 0 8px;
}
.page-title-hmv .highlight { color: #fff; }

/* --- Textes utilitaires --- */
.text-xs { font-size: 11px; }
.text-sm { font-size: 12px; }
.text-md { font-size: 13px; }
.text-base { font-size: 14px; }
.text-muted { color: var(--tb-text-muted) !important; }
.text-green { color: var(--tb-green) !important; }
.text-red { color: var(--tb-red) !important; }
.text-orange { color: var(--tb-orange) !important; }
.text-blue { color: var(--tb-blue) !important; }
.fw-600 { font-weight: 600; }
.font-mono { font-family: 'DM Mono', monospace; }

/* --- KPI valeur --- */
.kpi-value { font-size: 24px; font-weight: 600; }
.kpi-value-sm { font-size: 20px; font-weight: 600; }
.kpi-value-lg { font-size: clamp(16px, 2vw, 24px); font-weight: 600; white-space: normal; }
.kpi-sub { font-size: 11px; color: var(--tb-text-muted); margin-top: 2px; }
.kpi-delta { font-size: 12px; font-weight: 600; }
.kpi-delta.up { color: var(--tb-green); }
.kpi-delta.down { color: var(--tb-red); }

/* --- Formules / badges --- */
.badge-score {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  font-weight: 700; font-size: 13px;
}

/* --- Selects filtres --- */
.filter-select-hmv {
  width: 180px;
  font-size: 12px;
  color: var(--tb-text-muted);
  padding: .45rem .75rem;
}

/* --- Inline replacements --- */
.icon-align { vertical-align: -2px; }
.icon-align-sm { vertical-align: -1px; }
.text-xs-muted { font-size: 11px; color: var(--tb-text-muted); }
.text-sm-muted { font-size: 12px; color: var(--tb-text-muted); }
.text-sm-green { font-size: 12px; color: var(--tb-green); font-weight: 600; }
.text-sm-red { font-size: 12px; color: var(--tb-red); font-weight: 600; }
.chart-canvas { min-height: 200px; }

/* Vacation calendar dots */
.vac-dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.vac-dot-on { background: rgba(248,145,43,.7); }
.vac-dot-off { background: rgba(255,255,255,.06); }

/* Dashboard cards (index) */
.dash-card-icon { font-size: 28px; margin-bottom: 12px; }
.dash-card-title { font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 8px; }
.dash-card-desc { font-size: 12px; color: var(--tb-text-muted); line-height: 1.5; margin-bottom: 16px; }
.dash-card-eyebrow { font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--tb-text-muted); opacity: .6; }

/* --- Footer --- */
.footer-hmv {
  font-size: 12px;
  color: var(--tb-text-muted);
  border-top: 1px solid var(--tb-border);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
  /* Filtres : 2 par ligne */
  .filter-bar { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
  .filter-bar .form-select { width: 100% !important; }

  /* TCAM : 3 colonnes */
  .tcam-grid { grid-template-columns: repeat(3, 1fr); }

  /* Header : logo desktop masqué, logo mobile affiché */
  .logo-desktop { display: none !important; }
  .logo-mobile-banner { display: block !important; }

  /* Header : contenu centré */
  .page-header-content { text-align: center !important; }

  /* Texte live : réduit */
  .live-text { font-size: 10px !important; }
}

@media (max-width: 520px) {
  /* TCAM : 2 colonnes */
  .tcam-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Grille saisons (txremp, nuitees) ── */
.saison-heberg-grid { display: grid; gap: .5rem; }
.sh-row {
  display: grid; grid-template-columns: 130px 1fr 1fr 1fr;
  gap: .5rem; align-items: center; padding: .6rem 1rem;
  border-radius: 8px; background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06); transition: background .15s;
}
.sh-row:hover { background: rgba(255,255,255,.06); }
.sh-row.header {
  background: transparent; border: none; font-size: .65rem;
  letter-spacing: .1em; text-transform: uppercase; opacity: .45; padding-bottom: .2rem;
}
.sh-saison { font-size: .75rem; font-weight: 500; }
.sh-bar-wrap { display: flex; align-items: center; gap: .5rem; }
.sh-bar { height: 8px; border-radius: 4px; transition: width .6s ease; min-width: 2px; }
.sh-val { font-size: .7rem; opacity: .7; white-space: nowrap; }
.bar-pro { background: var(--tb-blue); }
.bar-pap { background: var(--tb-green); }
.bar-nc  { background: var(--tb-orange); }

.badge-saison {
  display: inline-block; font-size: .6rem; letter-spacing: .08em;
  padding: .15rem .5rem; border-radius: 4px; text-transform: uppercase;
  font-weight: 500; margin-right: .3rem;
}
.badge-hiver     { background: rgba(45,106,159,.4);  color: #8bc4e8; }
.badge-ete       { background: rgba(224,123,60,.35); color: #f0a870; }
.badge-printemps { background: rgba(74,158,107,.35); color: #7dcfa0; }
.badge-automne   { background: rgba(184,92,56,.35);  color: #d4845c; }

@media (max-width: 700px) {
  .sh-row { grid-template-columns: 100px 1fr; }
  .sh-row .sh-bar-wrap:nth-child(3),
  .sh-row .sh-bar-wrap:nth-child(4) { display: none; }
}

/* ── KPI grid (V1 pdm_va, pdm_nuitees, etc.) ── */
.kpi-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px; margin-bottom: 2rem;
}
.kpi-card {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  border-radius: 4px; padding: 20px; position: relative; overflow: hidden;
  transition: border-color .3s;
}
.kpi-card:hover { border-color: rgba(77,171,247,.35); }
.kpi-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--tb-blue), var(--tb-cyan, #4dabf7));
}
.kpi-label { font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 8px; }
.kpi-value { font-size: 28px; font-weight: 700; color: #fff; line-height: 1; }
.kpi-sub { font-size: 10px; color: rgba(255,255,255,.3); margin-top: 6px; }
.kpi-delta { font-size: 11px; margin-top: 6px; font-weight: 500; }

/* ── Saison grid (V1 pdm_va détail par saison) ── */
.saison-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 2rem;
}
@media (max-width: 900px) { .saison-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .saison-grid { grid-template-columns: 1fr; } }

.saison-col-header {
  font-size: 10px; letter-spacing: .15em; text-transform: uppercase;
  color: rgba(255,255,255,.35); margin-bottom: 8px; padding-left: 4px;
}
.saison-item {
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06);
  border-radius: 3px; padding: 14px; position: relative; transition: all .2s;
}
.saison-item:hover { background: rgba(255,255,255,.055); border-color: rgba(77,171,247,.25); }
.saison-item .year   { font-size: 10px; color: rgba(255,255,255,.4); letter-spacing: .1em; margin-bottom: 4px; }
.saison-item .amount { font-size: 17px; font-weight: 700; }
.saison-item .txn    { font-size: 10px; color: rgba(255,255,255,.3); margin-top: 4px; }
.saison-item .bar    { position: absolute; bottom: 0; left: 0; height: 2px; border-radius: 0 0 3px 3px; transition: width .8s ease; }

.hiver .bar      { background: var(--hiver, #5ba3d4); }
.ete .bar        { background: var(--ete, #e0963c); }
.printemps .bar  { background: var(--printemps, #4a9e6b); }
.automne .bar    { background: var(--automne, #b85c38); }
.hiver .amount   { color: #8bc4e8; }
.ete .amount     { color: #f0b882; }
.printemps .amount { color: #8fd4a8; }
.automne .amount { color: #e09070; }

/* ── Legend (V1) ── */
.legend { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 1.5rem; }
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.45); }
.legend-dot { width: 10px; height: 10px; border-radius: 2px; }

/* ── Animations KPI ── */
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.kpi-card { animation: fadeUp .4s ease both; }
.kpi-card:nth-child(1) { animation-delay: .05s; }
.kpi-card:nth-child(2) { animation-delay: .10s; }
.kpi-card:nth-child(3) { animation-delay: .15s; }
.kpi-card:nth-child(4) { animation-delay: .20s; }

/* ── Saison variables (hiver/ete/printemps/automne) ── */
:root {
  --hiver: #5ba3d4;
  --ete: #e0963c;
  --printemps: #4a9e6b;
  --automne: #b85c38;
}

/* ── Pie row (V1) ── */
.pie-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.pie-title { font-size: .75rem; color: rgba(255,255,255,.5); margin-bottom: .5rem; }

/* ── Charts row (V1) ── */
.charts-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 2rem; }
@media (max-width: 700px) { .charts-row { grid-template-columns: 1fr; } }
.chart-wrap { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); border-radius: 8px; padding: 1rem; }

/* ── Filter badge (V1) ── */
.filter-badge { font-size: .65rem; color: rgba(255,255,255,.4); padding: .5rem 0; }

/* ── Error box ── */
.error-box { background: rgba(231,76,60,.15); border: 1px solid rgba(231,76,60,.3); border-radius: 8px; padding: .75rem 1rem; color: #ff8787; font-size: .8rem; margin-bottom: 1rem; }

/* --- Section labels accueil --- */
.section-label-home { color: #fff; font-size: .84rem; text-transform: none; margin-top: 2.5rem !important; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,.06); }

/* --- Footer --- */
.footer-hmv { font-size: .75rem; color: var(--tb-text-muted); }
@media (max-width: 768px) {
  .footer-hmv { font-size: .6rem; flex-direction: column; gap: .25rem; text-align: center; }
}

/* ── Carte tooltip (V1 pdm_va) ── */
.carte-tooltip { position: absolute; background: rgba(0,0,0,.85); color: #fff; padding: 6px 10px; border-radius: 4px; font-size: .7rem; pointer-events: none; z-index: 10; display: none; }

/* --- Bucket bars (pdm_delais distribution) --- */
.bucket-bars { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.bucket-row { display: grid; grid-template-columns: 100px 1fr 48px; align-items: center; gap: 10px; }
.bucket-label { font-size: 10px; letter-spacing: .08em; color: rgba(255,255,255,.45); text-align: right; }
.bucket-track { height: 8px; background: rgba(255,255,255,.06); border-radius: 4px; overflow: hidden; }
.bucket-fill { height: 100%; border-radius: 4px; transition: width 1s ease; }
.bucket-pct { font-size: 10px; color: rgba(255,255,255,.5); text-align: right; }

/* --- Aussois prédictif --- */
.season-section { margin-bottom: 3rem; }
.season-title { font-family:'Playfair Display',serif; font-size:1.4rem; font-weight:700; margin-bottom:1.2rem; color:#f4f1ec; border-left:3px solid #f8912b; padding-left:12px; }
.vac-table { width:100%; border-collapse:collapse; font-family:'DM Mono',monospace; font-size:.72rem; margin-bottom:1.5rem; }
.vac-table th { text-align:center; padding:6px 4px; font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; opacity:.5; border-bottom:1px solid rgba(255,255,255,.1); }
.vac-table th:first-child { text-align:left; min-width:100px; }
.vac-table td { text-align:center; padding:5px 4px; border-bottom:1px solid rgba(255,255,255,.04); }
.vac-table td:first-child { text-align:left; white-space:nowrap; }
.vac-table tr:nth-child(even) { background:rgba(255,255,255,.02); }
.vac-table tr:hover { background:rgba(255,255,255,.05); }
.vac-dot { display:inline-block; width:10px; height:10px; border-radius:2px; }
.vac-dot.on { background:rgba(248,145,43,.7); }
.vac-dot.off { background:rgba(255,255,255,.06); }
.js-val { font-weight:500; color:#f8912b; }
.kpi-row { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:1.5rem; }
.cal-note { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; font-weight:700; font-size:.75rem; margin-left:10px; vertical-align:middle; }
.season-analysis { font-family:'DM Mono',monospace; font-size:.75rem; color:rgba(244,241,236,.7); margin:-.6rem 0 1.2rem 15px; line-height:1.6; }
.season-analysis .tag { display:inline-block; padding:1px 7px; border-radius:3px; font-size:.65rem; font-weight:500; margin-right:4px; }
.season-analysis .tag-pos { background:rgba(76,175,80,.2); color:#81c784; }
.season-analysis .tag-neg { background:rgba(244,67,54,.2); color:#ef9a9a; }
.season-analysis .tag-neutral { background:rgba(255,255,255,.08); color:rgba(255,255,255,.5); }
@media (max-width:768px) { .kpi-row { grid-template-columns:1fr; } .vac-table { font-size:.6rem; } .vac-table th,.vac-table td { padding:3px 2px; } }