/* Charte partagée WASCAL Cape Coast 2026 — tokens + composants « stickers ».
   Reprise des variables des affiches. Toute page du projet charge ce fichier. */
:root{
  --ink:#231a10; --paper:#fffaf0; --cream:#fbf1dc; --cream2:#f6e6c4; --muted:#8a7960;
  --gold:#f2a900; --amber:#e85d1b; --red:#c5302b; --green:#1c7a45;
  --teal:#0e8c7a; --blue:#1e3f8f; --prune:#8a2d5d;
  --kente:repeating-linear-gradient(90deg,#f2a900 0 26px,#c5302b 26px 50px,#1c7a45 50px 76px,#1e3f8f 76px 100px,#231a10 100px 112px,#e85d1b 112px 142px);
  --shadow:5px 5px 0 var(--ink);
  --radius:18px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; font-family:'Hanken Grotesk',system-ui,sans-serif; color:var(--ink);
  background:var(--paper);
  background-image:radial-gradient(circle at 8% 6%,#0e8c7a18,transparent 42%),
                   radial-gradient(circle at 94% 92%,#1e3f8f18,transparent 45%);
  line-height:1.55; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.fr{font-family:'Fraunces',Georgia,serif; line-height:1.05; letter-spacing:-.01em;}
h1{font-weight:900;} h2{font-weight:800;} h3{font-weight:700;}
a{color:var(--blue);}

.kente{height:12px;background:var(--kente);}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px;}
.muted{color:var(--muted);}
.center{text-align:center;}

/* Barre de navigation */
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px;
  max-width:1040px;margin:0 auto;flex-wrap:wrap;}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;text-decoration:none;color:var(--ink);}
.brand b{font-family:'Fraunces',serif;font-weight:900;font-size:20px;}
.brand .tag{font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);}
.nav-links{display:flex;gap:8px;flex-wrap:wrap;}

/* Boutons */
.btn{display:inline-flex;align-items:center;gap:8px;cursor:pointer;border:3px solid var(--ink);
  background:#fff;color:var(--ink);font:inherit;font-weight:800;padding:11px 20px;border-radius:40px;
  box-shadow:3px 3px 0 var(--ink);transition:transform .08s ease,box-shadow .08s ease;text-decoration:none;}
.btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink);}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink);}
.btn[disabled]{opacity:.5;cursor:not-allowed;box-shadow:3px 3px 0 var(--ink);transform:none;}
.btn-primary{background:var(--gold);}
.btn-ink{background:var(--ink);color:#fff;}
.btn-ghost{background:transparent;box-shadow:none;border-color:transparent;}
.btn-ghost:hover{box-shadow:none;background:var(--cream);}

/* Cartes / stickers */
.card{background:#fff;border:3px solid var(--ink);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);}
.sticker{border:3px solid var(--ink);border-radius:14px;box-shadow:4px 4px 0 var(--ink);}

/* Chips (choix) — rendus en <button> pour clavier + lecteur d'écran natifs */
.chip{display:inline-flex;align-items:center;gap:8px;border:2.5px solid var(--ink);background:#fff;
  color:var(--ink);font:inherit;font-weight:700;text-align:left;border-radius:40px;padding:10px 16px;
  min-height:44px;cursor:pointer;user-select:none;transition:transform .07s ease,box-shadow .07s ease;}
.chip:hover{transform:translateY(-1px);}
.chip input{position:absolute;opacity:0;width:0;height:0;}
.chip.on{background:var(--gold);box-shadow:3px 3px 0 var(--ink);}
.chip .dot{width:14px;height:14px;border-radius:50%;border:2px solid var(--ink);flex:0 0 auto;}
.chips{display:flex;flex-wrap:wrap;gap:10px;}

/* Accessibilité : focus visible net au clavier */
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:4px;}
.chip:focus-visible,.btn:focus-visible{outline:3px solid var(--blue);outline-offset:2px;}
/* Réservé aux lecteurs d'écran */
.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;}

/* Champs */
label.fld{display:block;font-weight:800;margin:0 0 6px;}
input[type=text],input[type=password],textarea,select{
  width:100%;font:inherit;font-size:16px;padding:13px 14px;border:2.5px solid var(--ink);border-radius:12px;
  background:#fff;color:var(--ink);min-height:48px;}
textarea{min-height:88px;resize:vertical;}
input:focus,textarea:focus,select:focus{outline:3px solid var(--gold);outline-offset:1px;}

/* Drapeaux */
.flag{border-radius:2px;box-shadow:0 1px 2px rgba(0,0,0,.35);vertical-align:middle;}

/* Bandeaux d'état */
.alert{border:2.5px solid var(--ink);border-radius:12px;padding:12px 16px;font-weight:700;}
.alert-ok{background:#e7f6ec;} .alert-err{background:#fce9e7;}

/* Progression (sondage) */
.steps{display:flex;gap:8px;margin:18px 0 24px;}
.steps .s{flex:1;height:8px;border-radius:6px;background:var(--cream2);border:2px solid var(--ink);}
.steps .s.on{background:var(--gold);}

.grid{display:grid;gap:16px;}
@media(min-width:720px){.cols-2{grid-template-columns:1fr 1fr;}.cols-3{grid-template-columns:repeat(3,1fr);}.cols-4{grid-template-columns:repeat(4,1fr);}}
.hide{display:none !important;}
.badge{display:inline-block;padding:3px 10px;border-radius:30px;font-size:12px;font-weight:800;border:2px solid var(--ink);}
footer{padding:28px 20px;color:var(--muted);font-size:14px;}

/* ===== Mobile-first : ajustements petits écrans ===== */
@media(max-width:560px){
  .wrap{padding:0 16px;}
  .nav{padding:12px 16px;gap:10px;}
  .nav-links{width:100%;}
  .nav-links .btn{flex:1 1 auto;justify-content:center;}
  .card{padding:18px;}
  .btn{padding:13px 18px;}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important;}
}