/* ==========================================================================
   AFRICAPASS — reset, typographie, utilitaires
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}

/* L'attribut `hidden` doit primer sur tout `display:` d'auteur. Le navigateur
   ne l'applique que depuis sa propre feuille de style, qu'une simple règle de
   classe supplante : sans ceci, un élément marqué `hidden` reste visible. */
[hidden]{display:none!important}

html{-webkit-text-size-adjust:100%}
html,body{margin:0;padding:0}
body{
  min-height:100vh;
  background:
    radial-gradient(circle at 70% -5%,rgba(246,185,27,.07),transparent 34%),
    var(--bg);
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;           /* §13 : aucun scroll horizontal global */
}

h1,h2,h3,h4{margin:0;line-height:1.2;font-weight:800}
h1{font-size:26px}
h2{font-size:21px}
h3{font-size:17px}
p{margin:0}
img{max-width:100%;display:block}
button,input,select,textarea,a{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}

:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:6px}

/* --- scrollbars --- */
*::-webkit-scrollbar{width:10px;height:8px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:#222c34;border-radius:99px;border:3px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:#313d47;background-clip:content-box}

/* --- icônes (sprite SVG inline, cf. js/icons.js) --- */
.icon{width:1em;height:1em;flex:none;display:inline-block;vertical-align:-.125em}
.icon path,.icon circle,.icon rect,.icon line,.icon polyline,.icon polygon{
  vector-effect:non-scaling-stroke;
}

/* --- utilitaires --- */
.gold{color:var(--gold)}
.green{color:var(--green)}
.blue{color:var(--blue)}
.purple{color:var(--purple)}
.red{color:var(--red)}
.muted{color:var(--muted)}
.small{font-size:13px}
.tiny{font-size:12px}
.center{text-align:center}
.row{display:flex;align-items:center;gap:10px}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:12px}
.col{display:flex;flex-direction:column}
.wrap{flex-wrap:wrap}
.grow{flex:1;min-width:0}
.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}
.mb-8{margin-bottom:8px}.mb-12{margin-bottom:12px}.mb-16{margin-bottom:16px}
.nowrap{white-space:nowrap}
.hidden{display:none !important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Rangée à défilement horizontal — confinée, ne déborde jamais la page */
.hscroll{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:6px;-webkit-overflow-scrolling:touch}
.hscroll > *{scroll-snap-align:start;flex:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}