/* ═══════════════════════════════════════════════════════════════════════════
   ecotri237 — Feuille de style principale
   Palette : Vert forêt #2d7a2d · Ambre #f4a21e · Fond clair #f8f9fa
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Variables ─────────────────────────────────────────────────────────── */
:root {
  --eco-green:        #2d7a2d;
  --eco-green-dark:   #1e5a1e;
  --eco-green-light:  #e8f5e8;
  --eco-amber:        #f4a21e;
  --eco-amber-dark:   #d4880c;
  --eco-dark:         #1c2b1c;
  --eco-text:         #212529;
  --eco-muted:        #6c757d;
  --eco-bg:           #f8faf8;
  --eco-border:       #e0ece0;
  --radius-md:        12px;
  --radius-lg:        20px;
  --shadow-sm:        0 2px 8px rgba(45,122,45,.08);
  --shadow-md:        0 4px 20px rgba(45,122,45,.12);
  --shadow-lg:        0 8px 40px rgba(45,122,45,.18);
}

/* ─── Base ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Poppins', 'Inter', system-ui, sans-serif;
  background: var(--eco-bg);
  color: var(--eco-text);
  line-height: 1.6;
}

.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }

/* ─── Navbar ────────────────────────────────────────────────────────────── */
.eco-navbar {
  background: linear-gradient(135deg, var(--eco-dark) 0%, var(--eco-green-dark) 100%);
  box-shadow: 0 2px 20px rgba(0,0,0,.25);
  padding: .75rem 0;
}

.eco-navbar .nav-link {
  color: rgba(255,255,255,.85) !important;
  font-weight: 500;
  font-size: .88rem;
  padding: .4rem .85rem !important;
  border-radius: 8px;
  transition: all .2s;
}
.eco-navbar .nav-link:hover,
.eco-navbar .nav-link.active {
  color: #fff !important;
  background: rgba(255,255,255,.12);
}

/* ─── Logo icon ──────────────────────────────────────────────────────────── */
.eco-logo-icon {
  width: 60px; height: 60px;
  border-radius: 10px;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.2rem;
  flex-shrink: 0;
}
.eco-logo-icon--sm  { width: 28px; height: 28px; font-size: .9rem; border-radius: 7px; }
.eco-logo-icon--lg  { width: 56px; height: 56px; font-size: 1.8rem; border-radius: 14px; }

/* ─── Hero ───────────────────────────────────────────────────────────────── */
.eco-hero {
  min-height: 90vh;
  background: linear-gradient(135deg, var(--eco-dark) 0%, var(--eco-green-dark) 50%, #1a4a1a 100%);
  padding: 5rem 0 4rem;
  position: relative;
  overflow: hidden;
}
.eco-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Ccircle cx='30' cy='30' r='4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
}
.eco-hero h1, .eco-hero p { color: #fff; position: relative; }
.eco-hero p { color: rgba(255,255,255,.7) !important; }

.eco-text-gradient {
  background: linear-gradient(135deg, #7bdf7b 0%, var(--eco-amber) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.eco-badge {
  display: inline-flex; align-items: center;
  background: rgba(45,122,45,.12);
  border: 1px solid rgba(45,122,45,.25);
  color: var(--eco-green);
  padding: .35rem .9rem;
  border-radius: 50px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.eco-badge--light {
  background: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.3);
  color: #fff;
}

.eco-stat-mini {
  padding: .75rem;
  background: rgba(255,255,255,.08);
  border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,.12);
  text-align: center;
}

/* ─── Hero visual ────────────────────────────────────────────────────────── */
.eco-hero-visual {
  position: relative; width: 360px; height: 360px; margin: auto;
}
.eco-circle {
  position: absolute;
  width: 80px; height: 80px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 2rem;
  animation: floatCircle 4s ease-in-out infinite;
}
.eco-circle--1 { top: 10%; left: 10%; animation-delay: 0s; }
.eco-circle--2 { top: 10%; right: 10%; animation-delay: .5s; background: rgba(244,162,30,.2); }
.eco-circle--3 { bottom: 20%; left: 5%; animation-delay: 1s; }
.eco-circle--4 { bottom: 20%; right: 5%; animation-delay: 1.5s; background: rgba(76,175,80,.2); }
.eco-hero-center {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  text-align: center;
}
@keyframes floatCircle {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

/* ─── Page hero ─────────────────────────────────────────────────────────── */
.eco-page-hero {
  background: linear-gradient(135deg, var(--eco-dark) 0%, var(--eco-green-dark) 100%);
}

/* ─── Buttons ────────────────────────────────────────────────────────────── */
.btn-eco-primary {
  background: linear-gradient(135deg, var(--eco-green) 0%, #3d9e3d 100%);
  border: none; color: #fff;
  border-radius: var(--radius-md);
  font-weight: 600;
  transition: all .25s;
  box-shadow: 0 4px 12px rgba(45,122,45,.3);
}
.btn-eco-primary:hover {
  background: linear-gradient(135deg, var(--eco-green-dark) 0%, var(--eco-green) 100%);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(45,122,45,.4);
}

/* ─── Cards ──────────────────────────────────────────────────────────────── */
.eco-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--eco-border);
  transition: box-shadow .25s, transform .25s;
}
.eco-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

/* ─── Forfait cards ──────────────────────────────────────────────────────── */
.eco-forfait-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
  border: 2px solid var(--eco-border);
  position: relative;
  transition: all .3s;
}
.eco-forfait-card:hover {
  border-color: var(--eco-green);
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}
.eco-forfait-card--popular {
  border-color: var(--eco-green);
  background: linear-gradient(135deg, #fff 80%, var(--eco-green-light) 100%);
  box-shadow: var(--shadow-lg);
}
.eco-popular-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, var(--eco-green) 0%, #4caf50 100%);
  color: #fff; padding: .25rem 1rem; border-radius: 50px;
  font-size: .75rem; font-weight: 700; white-space: nowrap;
}
.eco-forfait-icon {
  width: 64px; height: 64px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; margin: 0 auto;
}
.eco-price {
  font-size: 2.2rem; font-weight: 800; color: var(--eco-green); line-height: 1;
}
.eco-price-unit {
  font-size: 1rem; font-weight: 600; color: var(--eco-muted);
}

/* ─── Icon box ───────────────────────────────────────────────────────────── */
.eco-icon-box {
  width: 52px; height: 52px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; flex-shrink: 0;
}
.eco-icon-box--sm { width: 36px; height: 36px; border-radius: 9px; font-size: 1rem; }

/* ─── Steps ──────────────────────────────────────────────────────────────── */
.eco-step { position: relative; padding: 1.5rem 1rem; }
.eco-step-num {
  font-size: 3rem; font-weight: 800; color: var(--eco-green); opacity: .15;
  line-height: 1; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
}
.eco-step-icon {
  position: relative; z-index: 1;
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--eco-green-light); border: 2px solid var(--eco-green);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; color: var(--eco-green); margin: 1.5rem auto 0;
}
.eco-step-arrow { position: absolute; top: 40%; right: -10px; }

/* ─── CTA section ────────────────────────────────────────────────────────── */
.eco-cta {
  background: linear-gradient(135deg, var(--eco-green-dark) 0%, var(--eco-dark) 100%);
}

/* ─── Footer ─────────────────────────────────────────────────────────────── */
.eco-footer {
  background: linear-gradient(135deg, var(--eco-dark) 0%, #0f1a0f 100%);
}
.eco-social { transition: color .2s; }
.eco-social:hover { color: var(--eco-green) !important; }
.eco-foot-link:hover { color: var(--eco-green) !important; }

/* ─── Auth cards ─────────────────────────────────────────────────────────── */
.eco-auth-section { min-height: calc(100vh - 70px); background: var(--eco-bg); }
.eco-auth-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--eco-border);
}

/* ─── Avatar ─────────────────────────────────────────────────────────────── */
.eco-avatar {
  width: 72px; height: 72px; border-radius: 50%;
  background: linear-gradient(135deg, var(--eco-green) 0%, #4caf50 100%);
  color: #fff; font-size: 1.4rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.eco-avatar--xs {
  width: 32px; height: 32px; font-size: .7rem; font-weight: 700;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--eco-green) 0%, #4caf50 100%);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* ─── Forfait radio selector ─────────────────────────────────────────────── */
.eco-forfait-radio {
  display: block; padding: .75rem 1rem; border-radius: var(--radius-md);
  border: 2px solid var(--eco-border); cursor: pointer;
  transition: all .2s;
}
.eco-forfait-radio input[type="radio"] { display: none; }
.eco-forfait-radio:hover { border-color: var(--eco-green); background: var(--eco-green-light); }
.eco-forfait-radio.checked {
  border-color: var(--eco-green);
  background: var(--eco-green-light);
  box-shadow: 0 0 0 3px rgba(45,122,45,.15);
}
.eco-price-badge {
  background: var(--eco-green); color: #fff;
  font-size: .7rem; font-weight: 700;
  padding: .2rem .5rem; border-radius: 6px; white-space: nowrap;
}

/* ─── Dashboard souscription card ────────────────────────────────────────── */
.eco-souscription-card {
  background: #fff; border-radius: var(--radius-md);
  padding: 1.25rem; border: 2px solid;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s;
}
.eco-souscription-card:hover { box-shadow: var(--shadow-md); }

/* ─── Admin stat cards ───────────────────────────────────────────────────── */
.eco-stat-card {
  background: #fff; border-radius: var(--radius-lg);
  padding: 1.5rem; border-left: 4px solid;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: .5rem;
}
.eco-stat-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.eco-stat-value { font-size: 2rem; font-weight: 800; line-height: 1; }
.eco-stat-label { font-size: .78rem; color: var(--eco-muted); font-weight: 500; }

/* ─── Form controls ──────────────────────────────────────────────────────── */
.form-control:focus, .form-select:focus {
  border-color: var(--eco-green);
  box-shadow: 0 0 0 .2rem rgba(45,122,45,.2);
}

/* ─── Alerts ─────────────────────────────────────────────────────────────── */
.alert { border: none; font-size: .88rem; }

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .eco-hero { min-height: auto; padding: 3rem 0 2rem; }
  .eco-hero-visual { display: none; }
  .eco-price { font-size: 1.8rem; }
  .eco-auth-card { padding: 1.5rem; }
}