/* ============================================================
   Kavipay – page d'accueil publique
   ============================================================ */
.accueil { background: var(--beige-50); color: var(--encre); }
.acc-conteneur { width: min(1120px, 100% - 2.5rem); margin-inline: auto; }

/* Boutons */
.acc-btn {
  display: inline-flex; align-items: center; gap: .55rem; padding: .85rem 1.4rem;
  border-radius: 999px; font-weight: 650; text-decoration: none; transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.acc-btn:hover { transform: translateY(-1px); text-decoration: none; }
.acc-btn--beige { background: var(--beige-500); color: var(--bleu-950); box-shadow: 0 8px 24px rgba(184, 155, 106, .35); }
.acc-btn--beige:hover { background: #c7ad7f; color: var(--bleu-950); }
.acc-btn--clair { background: rgba(255, 255, 255, .1); color: #fff; border: 1px solid rgba(255, 255, 255, .22); }
.acc-btn--clair:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.acc-btn--petit { padding: .5rem 1.05rem; font-size: .875rem; }
.acc-lien { color: var(--beige-200); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(233, 222, 198, .4); padding-bottom: 2px; }
.acc-lien:hover { color: #fff; text-decoration: none; border-color: #fff; }

/* En-tête */
.acc-entete { position: absolute; inset: 0 0 auto; z-index: 3; padding: 1.1rem 0; }
.acc-entete__ligne { display: flex; align-items: center; justify-content: space-between; }
.acc-marque { display: flex; align-items: center; gap: .7rem; color: #fff; text-decoration: none; }
.acc-marque:hover { text-decoration: none; color: #fff; }
.acc-marque img { border-radius: 10px; }
.acc-marque span { display: flex; flex-direction: column; line-height: 1.1; }
.acc-marque strong { letter-spacing: .18em; font-size: 1rem; }
.acc-marque em { font-style: normal; font-size: .72rem; color: var(--beige-300); letter-spacing: .04em; }

/* Bandeau principal */
.acc-hero {
  position: relative; overflow: hidden; color: #fff;
  background: radial-gradient(1200px 600px at 85% 10%, #1b4475 0%, transparent 60%), linear-gradient(160deg, var(--bleu-950), var(--bleu-900) 60%, #10294a);
  padding: 7.5rem 0 5.5rem;
}
.acc-hero__decor span { position: absolute; border: 1px solid rgba(184, 155, 106, .18); border-radius: 50%; }
.acc-hero__decor span:nth-child(1) { width: 720px; height: 720px; right: -260px; top: -200px; }
.acc-hero__decor span:nth-child(2) { width: 480px; height: 480px; right: -140px; top: -80px; border-style: dashed; }
.acc-hero__decor span:nth-child(3) { width: 300px; height: 300px; left: -120px; bottom: -160px; border-color: rgba(255, 255, 255, .07); }
.acc-hero__grille { position: relative; z-index: 1; display: grid; gap: 3rem; align-items: center; }
.acc-surtitre { color: var(--beige-500); font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 1rem; }
.acc-hero h1 { color: #fff; font-size: clamp(2.1rem, 5.2vw, 3.6rem); line-height: 1.08; letter-spacing: -.025em; font-weight: 700; margin: 0 0 1.25rem; }
.acc-hero h1 span { color: var(--beige-300); }
.acc-hero__intro { color: #c9d4e3; font-size: 1.075rem; line-height: 1.65; max-width: 34rem; margin: 0 0 2rem; }
.acc-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; }

/* Aperçu d'un dossier */
.acc-apercu { position: relative; justify-self: center; width: min(380px, 100%); }
.acc-carte {
  background: #fff; color: var(--encre); border-radius: 20px; padding: 1.5rem 1.5rem 2.1rem;
  box-shadow: 0 30px 70px rgba(3, 10, 20, .45); transform: rotate(-1.5deg);
}
.acc-carte__haut { display: flex; justify-content: space-between; align-items: center; }
.acc-carte__num { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .75rem; color: var(--encre-pale); }
.acc-pastille { font-size: .7rem; font-weight: 700; color: var(--info); background: var(--info-bg); border-radius: 999px; padding: .2rem .6rem; }
.acc-carte__moto { font-size: 1.25rem; font-weight: 700; color: var(--bleu-950); margin: .7rem 0 1rem; }
.acc-carte__montants { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.acc-carte__montants div { background: var(--beige-50); border: 1px solid var(--beige-200); border-radius: 12px; padding: .65rem .8rem; }
.acc-carte__montants small { display: block; font-size: .7rem; color: var(--encre-pale); }
.acc-carte__montants strong { font-size: 1.05rem; color: var(--bleu-900); font-variant-numeric: tabular-nums; }
.acc-carte__montants strong::after { content: " FCFA"; font-size: .65rem; font-weight: 600; color: var(--encre-pale); }
.acc-jauge { height: 8px; background: var(--bleu-50); border-radius: 999px; margin-top: 1.1rem; overflow: hidden; }
.acc-jauge__barre { height: 100%; width: 65%; border-radius: inherit; background: linear-gradient(90deg, var(--bleu-900), var(--beige-500)); animation: acc-remplir 1.6s cubic-bezier(.2, .8, .2, 1) both .3s; }
@keyframes acc-remplir { from { width: 0; } }
.acc-carte__pct { font-size: .78rem; font-weight: 600; color: var(--encre-douce); margin: .45rem 0 1rem; text-align: right; }
.acc-versements { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--trait); }
.acc-versements li { display: grid; grid-template-columns: 1fr auto auto; gap: .8rem; align-items: center; padding: .6rem 0; border-bottom: 1px solid var(--trait); font-size: .85rem; }
.acc-versements li:last-child { border-bottom: 0; padding-bottom: 0; }
.acc-versements b { font-variant-numeric: tabular-nums; color: var(--bleu-950); }
.acc-versements i { font-style: normal; font-size: .68rem; font-weight: 700; color: var(--succes); background: var(--succes-bg); border-radius: 999px; padding: .15rem .5rem; }
.acc-badge-flottant {
  position: absolute; left: 1.4rem; bottom: -1.3rem; display: flex; align-items: center; gap: .5rem;
  background: var(--beige-100); color: var(--bleu-950); font-size: .82rem; font-weight: 650;
  border-radius: 12px; padding: .6rem .9rem; box-shadow: 0 12px 30px rgba(3, 10, 20, .3);
  animation: acc-flotter 4s ease-in-out infinite;
}
.acc-coche { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--succes); color: #fff; font-size: .75rem; }
@keyframes acc-flotter { 50% { transform: translateY(-6px); } }

/* Atouts */
.acc-atouts { padding: 5rem 0 3rem; }
.acc-atouts__grille { display: grid; gap: 1.25rem; }
.acc-atouts article { background: #fff; border: 1px solid var(--trait); border-radius: 18px; padding: 1.6rem; transition: transform .2s ease, box-shadow .2s ease; }
.acc-atouts article:hover { transform: translateY(-3px); box-shadow: var(--ombre); }
.acc-icone { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--bleu-900); margin-bottom: 1.1rem; }
.acc-icone svg { width: 22px; height: 22px; fill: none; stroke: var(--beige-300); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.acc-atouts h2 { font-size: 1.08rem; color: var(--bleu-950); margin-bottom: .45rem; }
.acc-atouts p { margin: 0; color: var(--encre-douce); line-height: 1.6; font-size: .93rem; }

/* Parcours */
.acc-parcours { padding: 2rem 0 5.5rem; }
.acc-titre-section { text-align: center; font-size: clamp(1.4rem, 3vw, 1.85rem); color: var(--bleu-950); letter-spacing: -.015em; margin-bottom: 2.5rem; }
.acc-etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; counter-reset: none; }
.acc-etapes li { position: relative; text-align: center; padding: 0 .5rem; }
.acc-etapes span {
  display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto .9rem; border-radius: 50%;
  background: #fff; border: 2px solid var(--beige-500); color: var(--bleu-900); font-weight: 750; font-size: 1.1rem; position: relative; z-index: 1;
}
.acc-etapes li:last-child span { background: var(--bleu-900); border-color: var(--bleu-900); color: var(--beige-300); }
.acc-etapes strong { display: block; color: var(--bleu-950); margin-bottom: .3rem; }
.acc-etapes p { margin: 0; color: var(--encre-douce); font-size: .9rem; line-height: 1.5; }

/* Pied de page */
.acc-pied { background: var(--bleu-950); color: #9fb0c6; padding: 1.6rem 0; font-size: .85rem; }
.acc-pied__ligne { display: flex; flex-direction: column; gap: .4rem; align-items: center; text-align: center; }
.acc-pied p { margin: 0; }
.acc-pied strong { color: var(--beige-300); font-weight: 650; }

/* Grands écrans */
@media (min-width: 760px) {
  .acc-atouts__grille { grid-template-columns: repeat(3, 1fr); }
  .acc-etapes { grid-template-columns: repeat(4, 1fr); }
  .acc-etapes li:not(:last-child)::after {
    content: ""; position: absolute; top: 26px; left: calc(50% + 34px); right: calc(-50% + 34px);
    border-top: 2px dashed var(--beige-300);
  }
  .acc-pied__ligne { flex-direction: row; justify-content: space-between; text-align: left; }
}
@media (min-width: 960px) {
  .acc-hero { padding: 9rem 0 7rem; }
  .acc-hero__grille { grid-template-columns: 1.15fr .85fr; }
}
@media (prefers-reduced-motion: reduce) {
  .acc-jauge__barre, .acc-badge-flottant { animation: none; }
}