/* Charleroi.IRL — direction artistique reprise du prototype « ULTIME ».
   Relevee au pixel dans proto/charleroi_2026-08-16.html : cartes tres
   arrondies sur fond translucide, sans bordure, boutons d'action colores,
   titres Montserrat en capitales. Les emojis font partie du ton. */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,800;0,900;1,900&family=Inter:wght@300;400;600;700;800;900&display=swap');

:root{
  --noir:#080808; --fond:#0B0B0C;
  --carte:rgba(255,255,255,.04); --carte-forte:rgba(255,255,255,.07);
  --or:#FFD700; --ambre:#FBBF24; --or-sourd:#D97706;
  --vert:#22C55E; --vert-sombre:#166534;
  --rouge:#EF4444; --bleu:#3B82F6;
  --craie:#FFFFFF; --fumee:#9CA3AF; --fumee2:#6B7280;
  --display:'Montserrat','Helvetica Neue',Arial,sans-serif;
  --corps:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --rayon:24px; --rayon-s:12px;

  /* Surfaces opaques et filets : le Comptoir est un tableau de bord dense,
     ou les cartes translucides de l'app grand public ne conviennent pas.
     Alignes sur la meme palette pour que les deux restent d'une seule famille. */
  --surf:#131316; --surf2:#1A1A1D; --surf3:#232328;
  --filet:rgba(255,255,255,.08); --filet2:rgba(255,255,255,.15);
  --cuivre:#FB923C;                 /* alerte, distincte de l'accent or */
  --ouvert:var(--vert);             /* etat « ouvert » et validation reussie */
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* Toute classe posant un `display` bat le [hidden] du navigateur, dont la
   specificite est nulle. Sans cette regle, `hidden` reste sans effet. */
[hidden]{display:none !important}
html,body{height:100%}
body{margin:0;background:var(--noir);color:var(--craie);font-family:var(--corps);
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;overscroll-behavior-y:none}

.ecran{max-width:480px;margin:0 auto;min-height:100%;display:flex;flex-direction:column;
  padding-bottom:env(safe-area-inset-bottom)}
.corps{flex:1;padding:0 20px 24px;min-width:0}

/* ---------- en-tete ---------- */
.statut{display:flex;justify-content:space-between;align-items:center;
  padding:calc(10px + env(safe-area-inset-top)) 20px 4px;
  font-family:var(--mono);font-size:11px;color:var(--fumee2);flex:none}
.tete{padding:14px 20px 18px;flex:none}
.tete h1{font-family:var(--display);font-weight:900;font-style:italic;font-size:30px;
  letter-spacing:-.02em;margin:0 0 4px;text-transform:uppercase;line-height:1}
.tete p{margin:0;color:var(--fumee);font-size:14px;font-style:italic}

/* ---------- onglets en pilules ---------- */
.onglets{display:flex;gap:10px;justify-content:center;margin-bottom:16px;flex-wrap:wrap}
.onglet{display:inline-flex;align-items:center;gap:8px;padding:11px 24px;border-radius:999px;
  border:2px solid rgba(255,255,255,.15);background:transparent;color:var(--fumee);
  font-family:var(--corps);font-weight:800;font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;cursor:pointer}
/* L'emoji vit dans son propre span : sans cela le letter-spacing colle la
   lettre suivante contre lui et le mot semble commencer dans l'image. */
.onglet .e,.cat .e,.code-titre .e,.badge .e,.btn-scan .e,.scan-tete .e
{letter-spacing:0;font-size:15px;line-height:1}
.onglet.on{background:var(--or);border-color:var(--or);color:#000}

/* ---------- cartes ---------- */
.carte{background:var(--carte);border-radius:var(--rayon);padding:20px;margin-bottom:14px}
.carte.or{background:linear-gradient(160deg,rgba(255,215,0,.14),rgba(255,255,255,.04));
  box-shadow:0 0 0 2px rgba(255,215,0,.25)}
.cat{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:800;color:var(--ambre);
  letter-spacing:.08em;text-transform:uppercase;margin:0 0 6px}
.nom{font-family:var(--display);font-weight:900;font-size:20px;letter-spacing:-.01em;
  text-transform:uppercase;margin:0 0 6px;line-height:1.08;overflow-wrap:anywhere}
.punch{font-style:italic;color:var(--fumee);font-size:14px;margin:0 0 12px}
.offre{color:var(--vert);font-weight:700;font-size:14px;margin:0 0 14px;line-height:1.4}

.badges{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;
  padding:5px 12px;border-radius:999px}
.badge.freebie{background:rgba(34,197,94,.18);color:#4ADE80}
.badge.fid{background:rgba(251,191,36,.18);color:var(--ambre)}

.coeur{display:flex;flex-direction:column;align-items:center;gap:2px;flex:none}
.coeur .n{font-size:12px;color:var(--fumee);font-weight:700}

/* ---------- actions ---------- */
.actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 22px}
.actions.seule{grid-template-columns:1fr}
.bouton{padding:15px 18px;border:none;border-radius:var(--rayon-s);font-family:var(--corps);
  font-weight:900;font-size:13px;cursor:pointer;color:#000;letter-spacing:.01em}
.bouton.vert{background:var(--vert)}
.bouton.or{background:var(--ambre)}
.bouton.fant{background:transparent;color:var(--craie);box-shadow:inset 0 0 0 2px rgba(255,255,255,.15)}
.bouton:focus-visible{outline:3px solid var(--or);outline-offset:2px}

/* ---------- fidelite en pastilles ---------- */
.fid-tete{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.fid-tete .l{font-size:11px;font-weight:800;color:var(--ambre);letter-spacing:.08em;text-transform:uppercase}
.fid-tete .v{font-family:var(--display);font-weight:900;font-size:17px;color:var(--or)}
.pastilles{display:flex;gap:6px;flex-wrap:wrap}
.pastille{width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,.12);flex:none}
.pastille.on{background:var(--or-sourd)}

/* ---------- le code ---------- */
.code-bloc{text-align:center;padding:24px 20px}
.code-titre{display:flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--display);font-weight:900;font-style:italic;font-size:13px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ambre);margin:0 0 14px}
.qr-cadre{width:200px;height:200px;margin:0 auto 16px;background:#fff;border-radius:var(--rayon-s);
  padding:10px;display:grid;place-items:center}
.qr-cadre svg{display:block;width:100%;height:100%}
.code-chiffres{font-family:var(--display);font-weight:900;font-size:36px;letter-spacing:.14em;
  margin:0 0 6px;font-variant-numeric:tabular-nums}
.jauge{height:4px;background:rgba(255,255,255,.1);border-radius:999px;overflow:hidden;
  max-width:220px;margin:12px auto 8px}
.jauge i{display:block;height:100%;background:var(--or);transform-origin:left;border-radius:999px}
.validite{color:var(--fumee);font-size:13px;margin:0}
.validite .court{color:var(--rouge);font-weight:700}

/* ---------- messages ---------- */
.avis{border-radius:var(--rayon);padding:18px 20px;margin-bottom:14px;font-size:14px}
.avis.ok{background:rgba(34,197,94,.12);color:#86EFAC}
.avis.ko{background:rgba(239,68,68,.12);color:#FCA5A5}
.avis.note{background:rgba(251,191,36,.1);color:var(--ambre);font-size:13px}
.avis b{display:block;font-family:var(--display);font-weight:900;font-size:17px;
  margin-bottom:4px;color:var(--craie)}
.vide{text-align:center;color:var(--fumee2);padding:30px 0;font-size:14px}

/* ---------- titres de section ---------- */
.h-sec{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:24px 0 12px}
.h-sec h2{font-family:var(--display);font-weight:900;font-size:15px;margin:0;
  text-transform:uppercase;letter-spacing:.02em}
.h-sec span{font-size:12px;color:var(--fumee2)}

/* ---------- navigation ---------- */
.nav{display:grid;grid-template-columns:repeat(5,1fr);background:rgba(255,255,255,.03);
  flex:none;position:sticky;bottom:0;backdrop-filter:blur(12px)}
.nav a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:11px 2px 13px;
  color:var(--fumee2);text-decoration:none;font-size:10px;font-weight:800;
  letter-spacing:.05em;text-transform:uppercase}
.nav a .e{font-size:19px;line-height:1}
.nav a.on{color:var(--or)}
.mini{font-size:12px;color:var(--fumee)}
.mono{font-family:var(--mono)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}