/* =========================================================
   SACRIFICE & DIGNITE — Design System
   Palette : Vert sauge + Beige crème + Playfair Display
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap');

:root {
  --primary:           #334537;
  --primary-light:     #4a5d4e;
  --surface:           #fbf9f4;
  --surface-container: #f0eee9;
  --surface-high:      #eae8e3;
  --outline:           #737872;
  --outline-variant:   #c3c8c1;
  --on-surface:        #1b1c19;
  --on-surface-var:    #434843;
  --secondary-cont:    #d7e5bb;
  --on-secondary:      #5a6745;
  --tertiary:          #513f18;
  --error:             #ba1a1a;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--surface);
  color: var(--on-surface);
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
}

.font-serif { font-family: 'Playfair Display', serif; }

/* ---- Boutons ---- */
.btn-primary {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--primary); color: #fff;
  padding: .9rem 2rem; border-radius: .5rem;
  font-weight: 700; font-size: .9rem; letter-spacing: .03em;
  border: none; cursor: pointer;
  transition: opacity .2s, transform .1s;
  text-decoration: none;
}
.btn-primary:hover  { opacity: .9; }
.btn-primary:active { transform: scale(.97); }

.btn-outline {
  display: inline-flex; align-items: center; gap: .5rem;
  background: transparent; color: var(--primary);
  border: 1.5px solid var(--primary);
  padding: .85rem 2rem; border-radius: .5rem;
  font-weight: 700; font-size: .9rem;
  cursor: pointer; transition: background .2s;
  text-decoration: none;
}
.btn-outline:hover { background: var(--surface-container); }

/* ---- Cards ---- */
.card {
  background: var(--surface);
  border: 1px solid var(--outline-variant);
  border-radius: .75rem;
  padding: 2rem;
  box-shadow: 0 4px 20px rgba(74,93,78,.06);
}

/* ---- Inputs ---- */
.input-field {
  width: 100%;
  background: transparent;
  border: 0; border-bottom: 1.5px solid var(--outline);
  padding: .75rem 0;
  font-size: 1rem; color: var(--on-surface);
  transition: border-color .2s;
  outline: none;
}
.input-field:focus { border-color: var(--primary); }

.input-boxed {
  width: 100%;
  background: var(--surface);
  border: 1.5px solid var(--outline-variant);
  border-radius: .5rem;
  padding: .85rem 1rem;
  font-size: 1rem; color: var(--on-surface);
  transition: border-color .2s;
  outline: none;
}
.input-boxed:focus { border-color: var(--primary); }

.label {
  display: block;
  font-size: .75rem; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--primary); margin-bottom: .4rem;
}

/* ---- Badge statut ---- */
.badge {
  display: inline-block; padding: .2rem .75rem;
  border-radius: 99px; font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
}
.badge-paye   { background:#d7e5bb; color:#2d4a2d; }
.badge-acompte{ background:#fdf0d5; color:#7a5a00; }
.badge-attente{ background:#f5f3ee; color:#737872; }
.badge-annule { background:#ffdad6; color:#ba1a1a; }

/* ---- Stepper ---- */
.stepper { display:flex; align-items:center; gap:.5rem; margin-bottom:2.5rem; }
.step-circle {
  width:2rem; height:2rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.8rem; flex-shrink:0;
}
.step-active   { background:var(--primary); color:#fff; }
.step-inactive { background:var(--surface); border:2px solid var(--outline-variant); color:var(--outline); }
.step-done     { background:var(--secondary-cont); color:var(--primary); }
.step-line     { flex:1; height:1px; background:var(--outline-variant); }
.step-label    { font-size:.7rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }

/* ---- Navbar ---- */
.navbar {
  position:fixed; top:0; width:100%; z-index:50;
  background:var(--surface); border-bottom:1px solid var(--outline-variant);
  height:4rem; display:flex; align-items:center;
  padding:0 1.5rem;
}
.navbar-inner {
  max-width:1120px; width:100%; margin:0 auto;
  display:flex; justify-content:space-between; align-items:center;
}
.navbar-brand {
  font-family:'Playfair Display',serif;
  font-size:1.25rem; font-weight:700;
  color:var(--primary); text-decoration:none;
}

/* ---- Bottom nav mobile ---- */
.bottom-nav {
  position:fixed; bottom:0; width:100%; z-index:50;
  background:var(--surface); border-top:1px solid var(--outline-variant);
  display:flex; justify-content:center; align-items:center; gap:200px;
  height:4.5rem; padding-bottom:env(safe-area-inset-bottom,.5rem);
}
.bottom-nav a {
  display:flex; flex-direction:column; align-items:center; gap:.2rem;
  color:var(--on-surface-var); text-decoration:none; font-size:.7rem;
  font-weight:600; letter-spacing:.03em; padding:.3rem .8rem;
  border-radius:99px; transition:color .2s, background .2s;
}
.bottom-nav a.active, .bottom-nav a:hover {
  color:var(--primary); background:var(--secondary-cont);
}

/* ---- Utilitaires ---- */
.main-content { padding-top:5rem; padding-bottom:6rem; max-width:1120px; margin:0 auto; padding-left:1.5rem; padding-right:1.5rem; }
@media(min-width:768px){ .main-content { padding-bottom:2rem; } }

.material-symbols-outlined { font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24; }

/* ---- Alertes ---- */
.alert-error   { background:#ffdad6; color:#ba1a1a; padding:1rem; border-radius:.5rem; margin-bottom:1rem; }
.alert-success { background:#d7e5bb; color:#2d4a2d; padding:1rem; border-radius:.5rem; margin-bottom:1rem; }

/* ---- Tables ---- */
table { width:100%; border-collapse:collapse; }
th, td { padding:.9rem 1.25rem; text-align:left; }
thead tr { background:var(--surface-high); border-bottom:1px solid var(--outline-variant); }
th { font-size:.7rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--on-surface-var); }
tbody tr { border-bottom:1px solid var(--outline-variant); transition:background .15s; }
tbody tr:hover { background:var(--surface-container); }
td { font-size:.9rem; }