/* Afrijingle — Main stylesheet
   Objectifs :
   - Design propre, moderne et professionnel
   - Variables pour couleurs/typographie faciles à ajuster
   - Classes réutilisables pour les composants (header, hero, cards, grid, boutons, banner, footer)
   - Accessibilité : focus visible, contrastes raisonnables
*/

/* Reset léger */
* { box-sizing: border-box; }
html,body { height:100%; }
body {
  margin:0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  background:#f7f3ea;
  color:#222;
  line-height:1.45;
  font-size:16px;
}

/* Design tokens */
:root{
  --accent: #D97B00;
  --accent-strong: #FF9000;
  --muted: #5b4c23;
  --surface: #fff;
  --surface-2: #fff9f0;
  --bg: #f7f3ea;
  --shadow: 0 8px 30px rgba(18, 18, 18, 0.06);
  --radius-sm: 8px;
  --radius-md: 12px;
  --container: 1100px;
  --max-width: 1200px;
  --text-muted: #666;
  --link-color: var(--accent-strong);
  --focus-outline: 3px solid rgba(217,123,0,0.18);
}

/* Layout container */
.container {
  max-width: var(--container);
  margin: 20px auto;
  padding: 18px;
}

/* Header */
.header-row {
  background: #141212;
  color: #fff;
  padding: 10px 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  position: relative;
  z-index: 100;
}
.header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding: 6px;
}
.logo {
  color: var(--accent-strong);
  font-weight:800;
  font-size:1.05rem;
  text-decoration:none;
  letter-spacing:0.2px;
}
.nav {
  display:flex;
  gap:14px;
  align-items:center;
}
.nav a {
  color: #fff;
  text-decoration:none;
  font-weight:600;
  padding:8px 10px;
  border-radius:8px;
  transition: background .15s, color .15s;
}
.nav a:hover,
.nav a:focus{ color: #ffd7b0; outline: none; background: rgba(255,255,255,0.02); }
.nav a[aria-current="page"] { color: var(--accent-strong); }

/* CTA / auth */
.header-actions { display:flex; gap:10px; align-items:center; }
.btn {
  display:inline-block;
  padding:10px 14px;
  border-radius:10px;
  text-decoration:none;
  font-weight:800;
  cursor:pointer;
}
.btn-primary {
  background: var(--accent-strong);
  color: #fff;
  box-shadow: 0 8px 22px rgba(255,144,0,0.12);
}
.btn-ghost {
  background: transparent;
  color: var(--accent-strong);
  border: 2px solid rgba(255,211,138,0.6);
  padding:9px 12px;
}
.btn:focus { outline: none; box-shadow: var(--focus-outline); }

/* Banner / slider */
.banner-slider {
  width: 100%;
  aspect-ratio: 4.8/1;
  max-height: 420px;
  overflow: hidden;
  position: relative;
  background: linear-gradient(180deg,#0b0b0b, #111);
}
.banner-slider img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  opacity:0;
  transition: opacity .6s ease-in-out, transform .6s;
  transform: translateY(0);
}
.banner-slider img.active { opacity:1; z-index:2; transform: translateY(0); }
.slider-dots {
  position:absolute;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  display:flex;
  gap:10px;
  z-index:60;
}
.slider-dot {
  width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,0.7);border:2px solid var(--accent-strong);cursor:pointer;
}
.slider-dot.active { background: var(--accent-strong); transform: scale(1.05); }

/* Hero / intro */
.hero {
  background: var(--surface-2);
  border-radius: var(--radius-md);
  padding: 28px;
  box-shadow: var(--shadow);
  display:flex;
  gap:20px;
  align-items:center;
  flex-wrap:wrap;
}
.hero-left { flex:1; min-width:280px; }
.hero h1 {
  color: var(--accent);
  margin:0 0 8px;
  font-size: clamp(1.6rem, 2.2vw, 2.4rem);
  line-height:1.05;
  font-weight:800;
}
.hero p { margin:0 0 12px; color:var(--muted); font-size:1rem; }

/* Cards and grids */
.grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; margin-top:18px; }
.card {
  background: var(--surface);
  padding:16px;
  border-radius: var(--radius-sm);
  box-shadow: 0 6px 18px rgba(0,0,0,0.04);
}
.card h3 { margin:0 0 8px; color:var(--accent); font-size:1.05rem; }
.card p { margin:0; color:var(--muted); }

/* Steps / how it works */
.how { display:flex; gap:12px; flex-wrap:wrap; margin-top:18px; }
.step {
  background: linear-gradient(180deg,#fff8eb,#fff3e6);
  padding:14px;border-radius:10px;flex:1;min-width:200px;box-shadow:0 3px 12px rgba(255,210,150,0.05);
}
.step strong { display:block; color:#C96B00; margin-bottom:8px; }

/* Testimonials */
.testimonials { display:flex; gap:12px; flex-wrap:wrap; margin-top:18px; }
.testimonial { background:var(--surface); padding:12px; border-radius:8px; box-shadow:0 2px 10px rgba(0,0,0,0.04); min-width:220px; }
.testimonial strong { color:var(--accent); display:block; margin-bottom:8px; }

/* Footer */
.site-footer {
  background: #fff8eb;
  border-top: 1px solid #ffe7c5;
  padding: 18px 12px;
  margin-top:28px;
  color: #6b5632;
}
.site-footer a { color: var(--link-color); }

/* Utilities */
.text-muted { color: var(--text-muted); }
.center { text-align:center; }

/* Responsive */
@media (max-width:1000px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width:700px) {
  .grid { grid-template-columns: 1fr; }
  .hero { padding:18px; flex-direction:column; }
  .header-inner { padding: 8px; }
  .nav { display:none; }
  .mobile-toggle { display:inline-block; background:none; border:0; color:#fff; font-size:1.2rem; }
  .banner-slider { aspect-ratio: 2.2/1; max-height:240px; }
}

/* Small screens accessibility */
a:focus, button:focus { outline: none; box-shadow: var(--focus-outline); border-radius:8px; }

/* Form elements (basic) */
input, select, textarea {
  border:1px solid #e6e2da;
  padding:8px 10px;
  border-radius:8px;
  background:#fff;
  color:#222;
  font-size:1rem;
  width:100%;
}
label { display:block; margin-bottom:6px; color:var(--muted); font-weight:600; }

/* Minor helpers */
.kv { font-weight:800; color:var(--accent); }