/* =====================================================================
   AFRIK'LEARN Consulting — Design System v1
   Réf. cahier des charges v2, §5 — charte graphique extraite du logo.
   À ne PAS modifier sans validation. Composants spécifiques : voir site.css
   ===================================================================== */

:root{
  /* Couleurs de marque */
  --al-navy:#13164D;
  --al-navy-700:#1E2266;
  --al-navy-900:#0A0D46;
  --al-gold:#D8AB5A;
  --al-gold-600:#B98A3E;
  --al-gold-200:#EAD3A3;
  --al-green:#ACB43D;
  --al-green-600:#8C9430;
  --al-ink:#0A0D46;
  --al-paper:#FFFFFF;
  --al-mist:#F3F2F6;
  --al-mist-2:#E6E5EE;
  --al-muted:#6C6E90;

  /* Typographie */
  --font-display:"Bricolage Grotesque",Georgia,serif;
  --font-body:"Plus Jakarta Sans",system-ui,sans-serif;

  /* Rayons / ombres / espacements */
  --r-sm:8px;
  --r-md:14px;
  --r-lg:22px;
  --shadow-soft:0 10px 30px -12px rgba(10,13,70,.45);
  --shadow-gold:0 8px 24px -10px rgba(216,171,90,.55);
  --hairline:1px solid rgba(216,171,90,.32);
  --maxw:1100px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  color:#EDEDF5;
  line-height:1.6;
  background:var(--al-navy);
  background-image:
    radial-gradient(circle at 18% 6%, rgba(172,180,61,.10), transparent 40%),
    radial-gradient(circle at 92% 0%, rgba(216,171,90,.16), transparent 44%),
    radial-gradient(rgba(216,171,90,.09) 1px, transparent 1px);
  background-size:auto,auto,26px 26px;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  line-height:1.08;
  letter-spacing:-.02em;
  color:#fff;
  font-weight:700;
}

/* Layout */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.section{padding:64px 0; border-top:var(--hairline)}
.eyebrow{
  font-family:var(--font-body);
  font-weight:700;
  font-size:.74rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--al-gold);
}
.lead{color:#C7C8DC; max-width:62ch}

/* Boutons */
.btn{
  font-family:var(--font-body);
  font-weight:700;
  font-size:.95rem;
  border:none;
  padding:13px 26px;
  border-radius:999px;
  cursor:pointer;
  display:inline-flex;
  gap:9px;
  align-items:center;
  text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease, background .18s;
}
.btn-primary{background:var(--al-gold); color:var(--al-navy-900); box-shadow:var(--shadow-gold)}
.btn-primary:hover{background:var(--al-gold-200); transform:translateY(-2px)}
.btn-secondary{background:transparent; color:var(--al-gold); border:1.5px solid var(--al-gold)}
.btn-secondary:hover{background:rgba(216,171,90,.12); transform:translateY(-2px)}
.btn-ghost{background:rgba(255,255,255,.06); color:#EDEDF5}
.btn-ghost:hover{background:rgba(255,255,255,.12)}
.btn-green{background:var(--al-green); color:var(--al-navy-900)}
.btn-green:hover{background:var(--al-green-600); transform:translateY(-2px)}
.btn:disabled{opacity:.45; cursor:not-allowed; transform:none; box-shadow:none}

/* Cartes */
.card{
  background:var(--al-paper);
  color:var(--al-ink);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-soft);
  overflow:hidden;
  border:1px solid var(--al-mist-2);
}
.card-body{padding:24px}
.card h3{color:var(--al-navy)}

/* Badges / états */
.badge{
  display:inline-block;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.04em;
  padding:5px 11px;
  border-radius:999px;
}
.badge-pole{background:rgba(19,22,77,.08); color:var(--al-navy)}
.badge-green{background:rgba(172,180,61,.18); color:var(--al-green-600)}
.badge-gold{background:rgba(216,171,90,.2); color:var(--al-gold-600)}
.badge-wait{background:#FBEFD6; color:#9A6A12}

/* Barre de progression */
.progress{height:10px; background:var(--al-mist-2); border-radius:999px; overflow:hidden}
.progress>span{
  display:block; height:100%;
  background:linear-gradient(90deg,var(--al-green),var(--al-gold));
}

/* Formulaire */
.field{margin-bottom:16px}
.field label{
  display:block; font-size:.82rem; font-weight:600;
  color:var(--al-navy); margin-bottom:6px;
}
.field input,.field select,.field textarea{
  width:100%;
  font-family:var(--font-body);
  font-size:.95rem;
  padding:12px 14px;
  border:1.5px solid var(--al-mist-2);
  border-radius:var(--r-sm);
  background:#fff;
  color:var(--al-ink);
  transition:border-color .15s, box-shadow .15s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;
  border-color:var(--al-gold);
  box-shadow:0 0 0 3px rgba(216,171,90,.25);
}
.field .hint{font-size:.78rem; color:var(--al-muted); margin-top:4px}
.field.error input,.field.error select,.field.error textarea{border-color:#C0392B}
.field.error .hint{color:#C0392B}

/* Nuancier */
.swatch{
  border-radius:var(--r-md);
  padding:18px;
  min-height:108px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  border:1px solid rgba(255,255,255,.08);
}
.swatch b{font-family:var(--font-display); font-size:1rem}
.swatch small{opacity:.85; font-size:.78rem}

/* Reveal au scroll */
.reveal{opacity:0; transform:translateY(18px); animation:rise .7s ease forwards}
@keyframes rise{to{opacity:1; transform:none}}

/* Accessibilité focus */
a:focus-visible, button:focus-visible, .btn:focus-visible{
  outline:2px solid var(--al-gold);
  outline-offset:3px;
  border-radius:999px;
}