/* =========================================================
   ProxiTerroir — Design System (Light Theme)
   - Palette claire, lisible, accessible (AA/AAA)
   - Sans framework CSS, utilitaires inclus
   - Composants: header/nav, cards, buttons, forms, grid, table, alerts, badges, map, footer
   ========================================================= */

/* ---------- Variables ---------- */
:root{
  /* Couleurs principales */
  --bg: #f8fafc;               /* fond global */
  --surface: #ffffff;          /* cartes/blocs */
  --text: #0f172a;             /* texte principal */
  --muted: #475569;            /* texte secondaire */
  --border: #e5e7eb;           /* bordures claires */

  /* Accent / Brand */
  --primary: #16a34a;          /* vert action */
  --primary-600: #15803d;
  --primary-100: #dcfce7;

  /* Accent secondaire (bleu) */
  --accent: #2563eb;
  --accent-100: #dbeafe;

  /* États */
  --danger: #ef4444;
  --danger-100: #fee2e2;
  --warning: #f59e0b;
  --warning-100: #fef3c7;
  --success: #22c55e;
  --success-100: #dcfce7;

  /* Divers */
  --ring: rgba(37, 99, 235, .35);  /* halo focus */
  --shadow: 0 8px 30px rgba(2,6,23,.08);
  --radius: 16px;

  /* Typo & spacing */
  --font: Inter, system-ui, Segoe UI, Roboto, Arial, sans-serif;
  --leading: 1.6;
  --container: 1200px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
}

/* ---------- Reset léger ---------- */
*{ box-sizing: border-box }
html, body, #app{ height: 100% }
body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: var(--leading);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  padding-top: 110px; /* espace réservé sous le header fixe */
}
img{ max-width: 100%; height: auto; display: block }
a{ color: var(--accent); text-decoration: none }
a:hover{ text-decoration: underline }
button{ font: inherit }

/* ---------- Container / Layout ---------- */
.container{
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--space-6);
}
.section{ margin-block: var(--space-7) }

/* ---------- Header / Navigation ---------- */
.header{
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.nav{
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
}
.brand{
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-weight: 800; color: var(--text);
}
.brand img{ width: 36px; height: 36px; border-radius: 8px }
.nav .links{ display: flex; gap: var(--space-2); align-items: center }
.mobile-toggle{ display: none }

/* ---------- Cards ---------- */
.card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-6);
  box-shadow: var(--shadow);
}

/* ---------- Titres / Typo ---------- */
h1,h2,h3{ color: var(--text); margin: 0 0 var(--space-4) 0 }
h1{ font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.25rem); line-height: 1.25 }
h2{ font-size: clamp(1.25rem, 1rem + .8vw, 1.75rem); line-height: 1.3; margin-top: var(--space-4) }
h3{ font-size: clamp(1.1rem, .95rem + .5vw, 1.3rem) }
p{ margin: 0 0 var(--space-4) 0; color: var(--muted) }
small, .muted{ color: var(--muted); font-size: .92rem }

/* ---------- Buttons ---------- */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: 10px 14px; border-radius: 12px;
  background: var(--primary); color: #fff;
  border: 1px solid var(--primary);
  font-weight: 700; cursor: pointer; transition: .15s ease-in-out;
}
.btn:hover{ background: var(--primary-600); border-color: var(--primary-600) }
.btn:disabled{ opacity: .6; cursor: not-allowed }
.btn.ghost{
  background: #f8fafc; color: var(--text); border-color: var(--border);
}
.btn.ghost:hover{ background: var(--primary-100); border-color: var(--primary) }
.btn.icon{ padding: 8px 10px }
.btn.outline{
  background: transparent; color: var(--primary);
  border: 1px solid var(--primary);
}
.btn.outline:hover{ background: var(--primary-100) }

/* ---------- Focus visible (a11y) ---------- */
:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px var(--ring);
  border-radius: 10px;
}

/* ---------- Forms ---------- */
.input, .select, textarea{
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
}
.input:focus, .select:focus, textarea:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring);
}
.label{ display: block; margin: 6px 0 8px 2px; color: var(--muted); font-weight: 600 }

/* Champs groupés */
.form-row{ display: grid; gap: var(--space-4) }
.form-2{ grid-template-columns: repeat(2, minmax(0,1fr)) }
.form-3{ grid-template-columns: repeat(3, minmax(0,1fr)) }

/* ---------- Grid utilitaires ---------- */
.grid{ display: grid; gap: var(--space-4) }
.grid-2{ grid-template-columns: repeat(2, minmax(0,1fr)) }
.grid-3{ grid-template-columns: repeat(3, minmax(0,1fr)) }
.grid-4{ grid-template-columns: repeat(4, minmax(0,1fr)) }

/* ---------- Table ---------- */
.table{
  width: 100%; border-collapse: collapse; font-size: .98rem;
}
.table th, .table td{
  padding: 10px; text-align: left; border-bottom: 1px solid var(--border);
}
.table thead th{ color: var(--muted); font-weight: 700 }
.table tr:hover td{ background: #f9fafb }

/* ---------- Badges ---------- */
.badge{
  display: inline-block; padding: 6px 10px; border-radius: 999px;
  border: 1px solid var(--border); color: var(--muted); font-size: .85rem; background: #fff;
}
.badge.success{ color: var(--success); border-color: var(--success-100); background: var(--success-100) }
.badge.warning{ color: var(--warning); border-color: var(--warning-100); background: var(--warning-100) }
.badge.danger{ color: var(--danger); border-color: var(--danger-100); background: var(--danger-100) }

/* ---------- Alerts ---------- */
.alert{
  background: var(--danger-100);
  border: 1px solid #fecaca;
  color: #7f1d1d;
  padding: var(--space-4);
  border-radius: 12px;
}
.success{
  background: var(--success-100);
  border: 1px solid #bbf7d0;
  color: #065f46;
  padding: var(--space-4);
  border-radius: 12px;
}
.notice{
  background: var(--accent-100);
  border: 1px solid #bfdbfe;
  color: #1e3a8a;
  padding: var(--space-4);
  border-radius: 12px;
}

/* ---------- Map ---------- */
.map{
  height: 70vh; min-height: 360px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: #fff;
}

/* ---------- Hero / Sections éditoriales ---------- */
.hero{
  display: grid; gap: var(--space-4);
  background: linear-gradient(180deg, #fff, #f7faff);
  border: 1px solid var(--border);
}
.hero p{ font-size: 1.05rem }

/* ---------- Footer ---------- */
.footer{
  margin-top: var(--space-7);
  background: #ffffff;
  border-top: 1px solid var(--border);
  padding: var(--space-6) 0;
}
.footer a{ color: var(--accent) }

/* ---------- Utilitaires ---------- */
.m-0{ margin: 0 } .mt-1{ margin-top: var(--space-2) } .mt-2{ margin-top: var(--space-3) } .mt-3{ margin-top: var(--space-4) } .mt-4{ margin-top: var(--space-5) } .mt-5{ margin-top: var(--space-6) }
.mb-0{ margin-bottom:0 } .mb-1{ margin-bottom: var(--space-2) } .mb-2{ margin-bottom: var(--space-3) } .mb-3{ margin-bottom: var(--space-4) } .mb-4{ margin-bottom: var(--space-5) } .mb-5{ margin-bottom: var(--space-6) }
.p-0{ padding:0 } .p-1{ padding: var(--space-2) } .p-2{ padding: var(--space-3) } .p-3{ padding: var(--space-4) } .p-4{ padding: var(--space-5) } .p-5{ padding: var(--space-6) }
.center{ display:flex; align-items:center; justify-content:center }
.right{ text-align:right }
.hide{ display:none }

/* ---------- Responsive ---------- */
@media (max-width: 1024px){
  .grid-3, .grid-4{ grid-template-columns: repeat(2, minmax(0,1fr)) }
}
@media (max-width: 720px){
  .container{ padding: var(--space-5) }
  .nav .links{ display: none }
  .mobile-toggle{ display: inline-flex }
  .grid-2, .grid-3, .grid-4, .form-2, .form-3{ grid-template-columns: 1fr }
  .map{ height: 55vh }
}

/* ---------- Print ---------- */
@media print{
  .header, .footer, .map{ display: none !important }
  .card{ box-shadow: none; border-color: #ddd }
}