/* ============================================================
   c2.css — Système visuel BatiCarre v4
   Port de app/static/mockups/dashboard-v4.html (palette plaquette C²)
   Toutes les classes sont préfixées .c2- pour coexister avec Bootstrap.
   ============================================================ */

:root {
  /* Palette extraite de la plaquette C² (pixel-sampled) */
  --c2-navy:          #06264D;
  --c2-navy-hover:    #0B3C75;
  --c2-navy-soft:     #0A3260;
  --c2-cream:         #EEF5FE;
  --c2-bg:            #FFFFFF;
  --c2-bg-soft:       #F7F5F0;
  --c2-ink:           #17170B;
  --c2-text:          #2A2A1F;
  --c2-muted:         #6B6E75;
  --c2-border:        #E5E2DD;
  --c2-border-strong: #D4D0C8;

  --c2-danger:        #B91C1C;
  --c2-warning:       #B45309;
  --c2-success:       #15803D;

  --c2-radius:        8px;
  --c2-radius-lg:     12px;
}

/* — Body v4 : désactive le filigrane logo de style.css et force Inter — */
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background-color: var(--c2-bg);
  background-image: none;
  color: var(--c2-text);
}
body::before { display: none; }

/* ============================================================
   SECTION-BAR (barre navy du haut, onglets horizontaux)
   ============================================================ */
.c2-section-bar {
  background: var(--c2-navy);
  color: var(--c2-cream);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.c2-section-bar__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  gap: 2rem;
  min-height: 88px;
}
.c2-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  text-decoration: none;
}
.c2-brand-logo {
  height: 68px;
  width: auto;
  display: block;
}
.c2-brand-sub {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c2-cream);
  opacity: 0.7;
  padding-left: 0.7rem;
  border-left: 1px solid rgba(238, 245, 254, 0.25);
}

.c2-tabs {
  display: flex;
  gap: 0.25rem;
  list-style: none;
  margin: 0 0 0 1rem;
  padding: 0;
}
.c2-tabs a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.2rem;
  color: rgba(238, 245, 254, 0.65);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.93rem;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.c2-tabs a:hover { color: var(--c2-cream); }
.c2-tabs a.active {
  color: #fff;
  border-bottom-color: #fff;
  font-weight: 600;
}

.c2-user-block {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.85rem;
  color: rgba(238,245,254,0.75);
}
.c2-user-block .c2-logout {
  color: rgba(238,245,254,0.75);
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.2);
  transition: background-color .15s;
}
.c2-user-block .c2-logout:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
}

/* ============================================================
   SOUS-NAV contextuelle (sous barre navy, fond blanc)
   ============================================================ */
.c2-subnav {
  background: var(--c2-bg);
  border-bottom: 1px solid var(--c2-border);
  padding: 0.5rem 0;
}
.c2-subnav__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.c2-subnav a,
.c2-subnav button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.9rem;
  color: var(--c2-muted);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.88rem;
  border-radius: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.c2-subnav a:hover,
.c2-subnav button:hover {
  background: rgba(6, 38, 77, 0.05);
  color: var(--c2-navy);
}
.c2-subnav a.active {
  color: var(--c2-navy);
  font-weight: 600;
}
.c2-subnav .c2-cta {
  margin-left: auto;
  background: var(--c2-navy);
  color: #fff;
  padding: 0.55rem 1.1rem;
  font-weight: 600;
  font-size: 0.88rem;
  border-radius: 6px;
  text-decoration: none;
  transition: background .15s;
}
.c2-subnav .c2-cta:hover {
  background: var(--c2-navy-hover);
  color: #fff;
}

/* ============================================================
   MAIN container v4
   ============================================================ */
.c2-main {
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}

/* ============================================================
   HERO (tag uppercase + titre Inter uppercase + lead)
   ============================================================ */
.c2-hero {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--c2-border);
}
.c2-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c2-navy);
  margin-bottom: 0.6rem;
}
.c2-hero h1 {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.6rem, 2.8vw, 2.1rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--c2-ink);
  margin: 0 0 0.6rem 0;
}
.c2-hero-lead {
  font-size: 1rem;
  color: var(--c2-muted);
  max-width: 640px;
  margin: 0;
}

/* ============================================================
   KPI cards (chiffres en Inter 700, bandeau coloré 6px)
   ============================================================ */
.c2-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}
.c2-kpi-card {
  background: var(--c2-bg);
  border: 1px solid var(--c2-border);
  border-radius: var(--c2-radius-lg);
  padding: 1.25rem;
  transition: border-color .2s, box-shadow .2s, transform .15s;
  position: relative;
  overflow: hidden;
}
.c2-kpi-card:hover {
  border-color: var(--c2-border-strong);
  box-shadow: 0 4px 24px rgba(23, 23, 11, 0.04);
  transform: translateY(-1px);
}
.c2-kpi-card.c2-kpi-navy::before,
.c2-kpi-card.c2-kpi-danger::before,
.c2-kpi-card.c2-kpi-warning::before,
.c2-kpi-card.c2-kpi-success::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
}
.c2-kpi-card.c2-kpi-navy::before    { background: var(--c2-navy); }
.c2-kpi-card.c2-kpi-danger::before  { background: var(--c2-danger); }
.c2-kpi-card.c2-kpi-warning::before { background: var(--c2-warning); }
.c2-kpi-card.c2-kpi-success::before { background: var(--c2-success); }

.c2-kpi-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.8rem;
  gap: 0.5rem;
}
.c2-kpi-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c2-muted);
}
.c2-kpi-icon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 38, 77, 0.06);
  color: var(--c2-navy);
  border-radius: 8px;
  font-size: 1.05rem;
}
.c2-kpi-icon.c2-kpi-icon-danger  { background: rgba(185, 28, 28, 0.08); color: var(--c2-danger); }
.c2-kpi-icon.c2-kpi-icon-warning { background: rgba(180, 83, 9, 0.08);  color: var(--c2-warning); }
.c2-kpi-icon.c2-kpi-icon-success { background: rgba(21, 128, 61, 0.08); color: var(--c2-success); }

.c2-kpi-number {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1rem, 1.55vw, 2.4rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--c2-ink);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.c2-kpi-number.c2-kpi-number-danger  { color: var(--c2-danger); }
.c2-kpi-number.c2-kpi-number-warning { color: var(--c2-warning); }
.c2-kpi-number.c2-kpi-number-success { color: var(--c2-success); }

.c2-kpi-footer {
  font-size: 0.8rem;
  color: var(--c2-muted);
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.c2-kpi-footer a {
  color: var(--c2-navy);
  text-decoration: none;
  font-weight: 500;
}
.c2-kpi-footer a:hover { text-decoration: underline; }

/* ============================================================
   2-col grid (tableau + side panel)
   ============================================================ */
.c2-two-col {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1rem;
  margin-bottom: 2rem;
}

.c2-panel {
  background: var(--c2-bg);
  border: 1px solid var(--c2-border);
  border-radius: var(--c2-radius-lg);
  overflow: hidden;
}
.c2-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--c2-border);
}
.c2-panel-header h2 {
  font-family: 'Fraunces', serif;
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--c2-ink);
  letter-spacing: -0.01em;
  margin: 0;
}
.c2-panel-body { padding: 0.5rem 0; }

/* ============================================================
   Tables (densité éditoriale)
   ============================================================ */
.c2-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.c2-tbl thead th {
  text-align: left;
  padding: 0.75rem 1.25rem;
  background: var(--c2-bg-soft);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c2-muted);
  border-bottom: 1px solid var(--c2-border);
}
.c2-tbl tbody td {
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--c2-border);
}
.c2-tbl tbody tr:hover { background: rgba(6, 38, 77, 0.02); }
.c2-tbl tbody tr:last-child td { border-bottom: none; }
.c2-tbl th.num, .c2-tbl td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

.c2-chantier-name {
  font-weight: 600;
  color: var(--c2-ink);
  text-decoration: none;
}
.c2-chantier-name:hover { color: var(--c2-navy); }
.c2-chantier-ref {
  display: block;
  font-size: 0.75rem;
  color: var(--c2-muted);
  margin-top: 0.1rem;
}

/* ============================================================
   Badges (pastel warm)
   ============================================================ */
.c2-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.22rem 0.55rem;
  border-radius: 5px;
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.3;
  border: 1px solid transparent;
  white-space: nowrap;
}
.c2-badge-navy {
  background: rgba(6, 38, 77, 0.08);
  color: var(--c2-navy);
  border-color: rgba(6, 38, 77, 0.16);
}
.c2-badge-success {
  background: rgba(21, 128, 61, 0.08);
  color: var(--c2-success);
  border-color: rgba(21, 128, 61, 0.18);
}
.c2-badge-danger {
  background: rgba(185, 28, 28, 0.08);
  color: var(--c2-danger);
  border-color: rgba(185, 28, 28, 0.18);
}
.c2-badge-warning {
  background: rgba(180, 83, 9, 0.08);
  color: var(--c2-warning);
  border-color: rgba(180, 83, 9, 0.18);
}
.c2-badge-muted {
  background: #F3F2EE;
  color: var(--c2-muted);
  border-color: var(--c2-border);
}

/* ============================================================
   Liste "Attention requise"
   ============================================================ */
.c2-alert-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.c2-alert-item {
  display: flex;
  gap: 0.8rem;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--c2-border);
  align-items: flex-start;
}
.c2-alert-item:last-child { border-bottom: none; }
.c2-alert-item .c2-alert-icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 0.85rem;
  flex-shrink: 0;
  margin-top: 2px;
}
.c2-alert-item.c2-alert-danger .c2-alert-icon {
  background: rgba(185, 28, 28, 0.08);
  color: var(--c2-danger);
}
.c2-alert-item.c2-alert-warning .c2-alert-icon {
  background: rgba(180, 83, 9, 0.08);
  color: var(--c2-warning);
}
.c2-alert-item .c2-alert-content { flex: 1; min-width: 0; }
.c2-alert-item .c2-alert-title {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--c2-ink);
}
.c2-alert-item .c2-alert-desc {
  font-size: 0.82rem;
  color: var(--c2-muted);
  margin-top: 0.1rem;
}

/* ============================================================
   Bandeau "Ressources" navy
   ============================================================ */
.c2-resources {
  background: var(--c2-navy);
  color: var(--c2-cream);
  border-radius: var(--c2-radius-lg);
  padding: 2rem 2.5rem;
  margin-top: 1rem;
  position: relative;
  overflow: hidden;
}
.c2-resources-tag {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(238,245,254, 0.7);
  margin-bottom: 0.6rem;
  display: block;
}
.c2-resources h2 {
  font-family: 'Fraunces', serif;
  font-size: 1.6rem;
  font-weight: 400;
  color: #fff;
  margin: 0 0 0.4rem 0;
}
.c2-resources p {
  color: rgba(238,245,254, 0.85);
  max-width: 500px;
  margin: 0 0 1rem 0;
}
.c2-resources .c2-resources-cta {
  background: #fff;
  color: var(--c2-navy);
  padding: 0.7rem 1.4rem;
  font-weight: 600;
  border-radius: 6px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* ============================================================
   Responsive — Tablet / Mobile / iPhone SE
   ============================================================ */

/* ─── TABLETTE (≤ 992px) ─── */
@media (max-width: 992px) {
  .c2-two-col  { grid-template-columns: 1fr; }
  .c2-kpi-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ─── MOBILE (≤ 768px) ─── */
@media (max-width: 768px) {
  /* Shell : compression + tabs scrollables */
  .c2-section-bar__inner {
    min-height: 60px;
    padding: 0 0.9rem;
    gap: 0.6rem;
    flex-wrap: wrap;
  }
  .c2-brand-logo { height: 42px; }
  .c2-brand-sub { display: none; }
  .c2-tabs {
    order: 3;
    flex: 1 1 100%;
    margin: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-top: 1px solid rgba(255,255,255,0.08);
  }
  .c2-tabs::-webkit-scrollbar { display: none; }
  .c2-tabs a {
    padding: 0.65rem 0.8rem;
    font-size: 0.82rem;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .c2-user-block {
    margin-left: auto;
    font-size: 0.78rem;
    gap: 0.6rem;
  }
  .c2-user-block span:first-child { display: none; }
  .c2-user-block .c2-logout { padding: 0.3rem 0.55rem; font-size: 0.78rem; }

  /* Sous-nav : scroll horizontal */
  .c2-subnav__inner {
    padding: 0 0.9rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }
  .c2-subnav__inner::-webkit-scrollbar { display: none; }
  .c2-subnav a, .c2-subnav button, .c2-subnav span {
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 0.82rem;
    padding: 0.5rem 0.75rem;
  }
  .c2-subnav .c2-cta { margin-left: 0.5rem; }

  /* Main : padding réduit */
  .c2-main { padding: 1.2rem 0.9rem 2.5rem; }

  /* Hero : titre plus petit */
  .c2-hero h1 { font-size: clamp(1.3rem, 5vw, 1.6rem); line-height: 1.2; }
  .c2-hero-lead { font-size: 0.9rem; }
  .c2-tag { font-size: 0.68rem; }

  /* KPI cards : plus compact */
  .c2-kpi-grid { gap: 0.7rem; }
  .c2-kpi-card { padding: 1rem 1rem; }
  .c2-kpi-number { font-size: 1.8rem; }
  .c2-kpi-label { font-size: 0.68rem; }

  /* Utilitaire : masquer colonnes sur mobile */
  .hide-mobile { display: none !important; }

  /* Bootstrap nav-tabs (modules financiers) : scroll horizontal au lieu de wrap */
  .nav-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }
  .nav-tabs::-webkit-scrollbar { display: none; }
  .nav-tabs .nav-item { flex-shrink: 0; }
  .nav-tabs .nav-link {
    white-space: nowrap;
    font-size: 0.82rem;
    padding: 0.5rem 0.75rem;
  }

  /* Tab Financier de chantier_detail : cartes KPI compactes */
  #financier-tab .card-body { padding: 0.85rem; }
  #financier-tab h3 { font-size: 1.4rem; }
  #financier-tab h5 { font-size: 0.82rem; }
  #financier-tab .d-flex.justify-content-between { flex-wrap: wrap; gap: 0.5rem; }
  #financier-tab .d-flex.justify-content-between > .d-flex { flex-wrap: wrap; width: 100%; }

  /* Tables : scroll horizontal dans le panel */
  .c2-panel { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .c2-tbl { font-size: 0.82rem; min-width: auto; }
  .c2-tbl thead th { padding: 0.55rem 0.75rem; font-size: 0.68rem; }
  .c2-tbl tbody td { padding: 0.6rem 0.75rem; }

  /* Panel headers */
  .c2-panel-header { padding: 0.85rem 1rem; }
  .c2-panel-header h2 { font-size: 1.05rem; }

  /* Forms : 1 colonne, padding réduit, boutons pleine largeur */
  .c2-form__section { padding: 1.3rem 1.1rem; }
  .c2-form__section-title { font-size: 1.05rem; margin-bottom: 1rem; }
  .c2-form__actions {
    padding: 1rem 1.1rem;
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 0.7rem;
  }
  .c2-form__actions-left { text-align: center; font-size: 0.78rem; }
  .c2-form__actions-right {
    flex-direction: column-reverse;
    gap: 0.4rem;
    width: 100%;
  }
  .c2-form__actions-right > * { width: 100%; justify-content: center; }

  /* Breadcrumb : wrap + taille réduite */
  .c2-breadcrumb { font-size: 0.78rem; flex-wrap: wrap; }

  /* Stat strip : 2 colonnes avec bordures correctes */
  .c2-stat-strip { grid-template-columns: repeat(2, 1fr) !important; }
  .c2-stat-strip__item {
    border-right: 1px solid var(--c2-border);
    border-bottom: 1px solid var(--c2-border);
  }
  .c2-stat-strip__item:nth-child(2n) { border-right: none; }
  .c2-stat-strip__item:nth-last-child(-n+2) { border-bottom: none; }
  .c2-stat-strip__value { font-size: 1.35rem; }

  /* Detail header : titre + actions empilés */
  .c2-detail-title-row { flex-direction: column; align-items: flex-start; gap: 0.8rem; }
  .c2-detail-actions, .c2-detail-header .c2-btn, .c2-detail-header .c2-btn-primary { flex: 1; justify-content: center; }
  .c2-detail-header .c2-detail-actions { width: 100%; display: flex; gap: 0.4rem; }
  .c2-detail-meta { font-size: 0.82rem; gap: 0.3rem 0.9rem; }

  /* Grilles 2/3 col → 1 col */
  .c2-grid.cols-2, .c2-grid.cols-3, .c2-grid.cols-1-2 { grid-template-columns: 1fr !important; }

  /* Chantier tabs (10 onglets) : scroll horizontal */
  .c2-tabs-bar { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 4px; }
  .c2-tabs-bar::-webkit-scrollbar { display: none; }
  .c2-chantier-tab { min-width: 86px !important; padding: 0.55rem 0.55rem; font-size: 0.74rem; flex: 0 0 auto !important; }
  .c2-chantier-tab i { font-size: 0.95rem; }
  .c2-chantier-tab .count { top: 4px; right: 4px; min-width: 14px; height: 14px; font-size: 0.6rem; padding: 0 3px; }

  /* Bandeau resources navy */
  .c2-resources { padding: 1.3rem 1.2rem; }
  .c2-resources h2 { font-size: 1.3rem; }

  /* Alerts stripe */
  .c2-alert-stripe { padding: 0.75rem 0.9rem; font-size: 0.85rem; }
}

/* ─── SMALL MOBILE (≤ 480px) — iPhone SE, petits Androids ─── */
@media (max-width: 480px) {
  .c2-section-bar__inner { min-height: 56px; padding: 0 0.7rem; }
  .c2-brand-logo { height: 36px; }
  .c2-tabs a { padding: 0.6rem 0.65rem; font-size: 0.78rem; }
  .c2-tabs a i { margin-right: 0; }

  .c2-main { padding: 1rem 0.6rem 2rem; }
  .c2-hero { margin-bottom: 1.2rem; padding-bottom: 1rem; }
  .c2-hero h1 { font-size: 1.25rem; }
  .c2-hero-lead { font-size: 0.85rem; }

  /* KPI : 1 colonne */
  .c2-kpi-grid { grid-template-columns: 1fr !important; }
  .c2-kpi-card { padding: 0.9rem 1rem; }
  .c2-kpi-number { font-size: 1.6rem; }

  /* Stat strip : 1 colonne */
  .c2-stat-strip { grid-template-columns: 1fr !important; }
  .c2-stat-strip__item {
    border-right: none !important;
    border-bottom: 1px solid var(--c2-border) !important;
    padding: 0.8rem 1rem;
  }
  .c2-stat-strip__item:last-child { border-bottom: none !important; }
  .c2-stat-strip__value { font-size: 1.3rem; }

  /* Form section padding encore réduit */
  .c2-form__section { padding: 1.1rem 0.9rem; }
  .c2-form__actions { padding: 0.85rem 0.9rem; }
}