/* Passerelle CGU – serveur de présentation et d'essai : charte commune (mêmes verts que la console)
   Démonstration privée FCapital Sénégal SAS : aucun emblème officiel. Illustrations originales : dakar.svg, commercante-quittance.svg */
:root {
  --vert: #0f5132; --vert-moyen: #1f7a52; --vert-clair: #e8f3ee; --or: #c99a2e; --or-clair: #fbf1dc;
  --texte: #17211c; --doux: #55625c; --trait: #dde3e0; --fond: #f6f5f0; --carte: #ffffff;
  --rouge: #a4232c; --bleu-clair: #e7eef9; --sable: #fbf3e4;
  --ombre: 0 1px 2px rgba(15, 40, 28, .05), 0 6px 22px rgba(15, 40, 28, .06);
  --bande: linear-gradient(90deg, #00853F 0 33.34%, #FDEF42 33.34% 66.67%, #E31B23 66.67% 100%);
  --police: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --chiffres: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --texte: #e6eee9; --doux: #a3b3aa; --trait: #2b3631; --fond: #0f1512; --carte: #17201b; --vert-clair: #15302a;
          --bleu-clair: #1b2638; --vert-moyen: #5cbd90; --sable: #1d231c; --or-clair: #2a2414;
          --ombre: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 22px rgba(0, 0, 0, .25); }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--fond); color: var(--texte); font: 16px/1.55 var(--police); padding-top: 4px; }
/* Fine bande vert-jaune-rouge, sans étoile */
body::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 4px; background: var(--bande); z-index: 50; }
a { color: var(--vert-moyen); text-underline-offset: 2px; }
:focus-visible { outline: 3px solid var(--or); outline-offset: 2px; }

/* En-tête */
.haut { background: var(--vert); color: #fff; }
.haut .dedans { max-width: 1120px; margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.haut .marque { display: flex; align-items: center; gap: 10px; line-height: 1.2; }
.haut .marque small { display: block; font-size: 12.5px; opacity: .85; }
.haut span { opacity: .85; }
.haut .espace { flex: 1; }
.haut svg { flex: none; }

main { max-width: 1120px; margin: 0 auto; padding: 32px 20px 48px; }
h1 { font-size: clamp(26px, 4.2vw, 40px); line-height: 1.15; margin: 0 0 10px; letter-spacing: -.015em; }
h2 { font-size: clamp(19px, 2.4vw, 23px); line-height: 1.25; margin: 0 0 14px; letter-spacing: -.01em; }
.sous { color: var(--doux); margin: 0 0 24px; max-width: 760px; }
.surtitre { display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--vert-moyen); margin: 0 0 6px; }
.carte { background: var(--carte); border: 1px solid var(--trait); border-radius: 16px; padding: 20px 22px; box-shadow: var(--ombre); }
.bouton { display: inline-flex; align-items: center; gap: 8px; background: var(--or); color: #1c1606; text-decoration: none;
  border-radius: 10px; padding: 10px 16px; border: 0; font: 600 15px/1.2 var(--police); cursor: pointer; }
.bouton:hover { background: #d8aa3d; }
.bouton.discret { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.5); }
.bouton.discret:hover { background: rgba(255,255,255,.1); }
main .bouton.discret { color: var(--texte); border-color: var(--trait); }
main .bouton.discret:hover { background: var(--vert-clair); }
.avis { color: var(--doux); font-size: 14px; }
.grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.pastille { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; padding: 2px 8px; border-radius: 99px;
  background: var(--or-clair); color: #6b4e0c; border: 1px solid rgba(201,154,46,.45); white-space: nowrap; vertical-align: 1px; }
@media (prefers-color-scheme: dark) { .pastille { color: #f0cf82; } }

/* Bande d'illustration (Dakar) réutilisable */
.illustration-dakar { background: #f7d9a0 url(/dakar.svg) center bottom / cover no-repeat; }

footer { color: var(--doux); font-size: 13px; text-align: center; padding: 22px 16px 32px; border-top: 1px solid var(--trait); }
footer .bande-pied { display: block; width: 54px; height: 3px; margin: 0 auto 12px; background: var(--bande); border-radius: 2px; }

@media (max-width: 480px) {
  .haut .dedans { padding: 10px 16px; gap: 8px 10px; }
  main { padding: 24px 16px 40px; }
  .carte { padding: 16px; border-radius: 14px; }
  .bouton { padding: 9px 13px; font-size: 14.5px; }
}