/* Soirée électorale — tableau de résultats.
   Self-hosted fonts: the house wifi dropping must not change how this looks.
   Design tokens first: Gab, everything visual hangs off these. */

@font-face {
  font-family: 'Archivo';
  src: url('/static/fonts/archivo.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Antonio';
  src: url('/static/fonts/antonio.woff2') format('woff2');
  font-weight: 100 700; font-style: normal; font-display: swap;
}

:root {
  /* Ground is a true blue-black, not a tinted neutral: the party hues are the
     only saturated things on screen and everything else gets out of their way. */
  --fond: #0a1422;
  --surface: #131f33;
  --relief: #1b2b44;
  --encre: #edf2f9;
  --doux: #8ca0ba;
  --ligne: #26394f;

  /* Amber is structural, never decorative: it marks the majority threshold and
     the current leader. It is never set adjacent to a QS swatch. */
  --accent: #ffc24a;
  --sur-accent: #0a1422;
  --ok: #36d39a;
  --ko: #ff5f6d;

  /* Party colours, relit for a dark ground. The print values go muddy on navy:
     PQ #0a4fa3 and PCQ #5a3b9a in particular read as holes in the bar. */
  --CAQ: #2cb6ee;
  --PLQ: #f23b46;
  --PQ: #4a8fe7;
  --QS: #ff8534;
  --PCQ: #9b6fe8;
  --AUT: #8a9aae;
  --vide: #1b2b44;

  /* Radius encodes role: data is hard-edged, panels are soft, controls are round. */
  --h-entete: 46px;
  --rayon: 10px;
  --rayon-donnee: 3px;
  --police: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --chiffres: 'Antonio', 'Archivo Narrow', 'Arial Narrow', var(--police);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fond); color: var(--encre);
  font: 16px/1.5 var(--police);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0 0 8px; line-height: 1.15; font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: 1.35rem; }
h2 { font-size: 1.1rem; }
h3 { font-size: .98rem; }
h4 { font-size: .8rem; margin-top: 14px; color: var(--doux); font-weight: 600; }
p { margin: 0 0 10px; }

button, input, select { font: inherit; color: inherit; font-variant-numeric: tabular-nums; }
button {
  cursor: pointer; border: 1px solid var(--ligne); background: var(--relief);
  border-radius: 8px; padding: 10px 14px; min-height: 44px; font-weight: 500;
}
button:disabled { cursor: default; opacity: .45; }
button.principal {
  background: var(--accent); color: var(--sur-accent); border-color: var(--accent);
  font-weight: 700; width: 100%; letter-spacing: .01em;
}
button.lien { border: 0; background: none; padding: 6px 0; min-height: 0; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
input, select {
  border: 1px solid var(--ligne); background: var(--fond); border-radius: 8px;
  padding: 10px 12px; min-height: 44px; width: 100%;
}
input::placeholder { color: var(--doux); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.doux { color: var(--doux); }
.petit { font-size: .82rem; }
.ok { color: var(--ok); font-weight: 700; }
.ko { color: var(--ko); font-weight: 700; }
.erreur { color: var(--ko); }
.carte { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 14px; margin: 0 0 12px; }
.rangee { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.rangee > button { flex: 1; }

#app { max-width: 660px; margin: 0 auto; padding: 0 12px calc(78px + env(safe-area-inset-bottom)); }

/* The header and the seat bar ride together at the top of every tab: the state
   of the night should never be more than a glance away. */
.entete {
  position: sticky; top: 0; z-index: 4;
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 11px 2px 9px;
  background: linear-gradient(var(--fond) 78%, rgba(10, 20, 34, 0));
}
.entete strong { font-weight: 700; letter-spacing: -.01em; }
.entete #indicateur { margin-left: 8px; font-size: .78rem; }
.entete #compte { font-size: .82rem; text-align: right; font-variant-numeric: tabular-nums; }
.entree { margin-top: 10vh; }
.entree h1 { font-size: 1.7rem; }
.entree label { display: block; margin: 14px 0 5px; font-weight: 600; font-size: .88rem; }
.entree button { margin-top: 18px; }

.onglets {
  position: fixed; left: 0; right: 0; bottom: 0; display: flex;
  background: var(--surface); border-top: 1px solid var(--ligne);
  padding-bottom: env(safe-area-inset-bottom); z-index: 5;
}
.onglets button {
  flex: 1; min-width: 0; border: 0; border-radius: 0; background: none;
  padding: 9px 1px 7px; font-size: .68rem; min-height: 54px; color: var(--doux); font-weight: 500;
}
.onglets button.actif { color: var(--encre); font-weight: 700; box-shadow: inset 0 2px 0 var(--accent); background: var(--relief); }

/* party colours */
.pastille { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .78rem; font-weight: 700; color: var(--fond); background: var(--AUT); white-space: nowrap; }
.p-CAQ { background: var(--CAQ); } .p-PLQ { background: var(--PLQ); } .p-PQ { background: var(--PQ); }
.p-QS { background: var(--QS); } .p-PCQ { background: var(--PCQ); } .p-AUT { background: var(--AUT); }
.p-vide { background: var(--vide); color: var(--doux); }
.p-CAQ-bord { border-left: 4px solid var(--CAQ); } .p-PLQ-bord { border-left: 4px solid var(--PLQ); } .p-PQ-bord { border-left: 4px solid var(--PQ); }
.p-QS-bord { border-left: 4px solid var(--QS); } .p-PCQ-bord { border-left: 4px solid var(--PCQ); } .p-AUT-bord { border-left: 4px solid var(--AUT); }
.p-CAQ-texte { color: var(--CAQ); } .p-PLQ-texte { color: var(--PLQ); } .p-PQ-texte { color: var(--PQ); }
.p-QS-texte { color: var(--QS); } .p-PCQ-texte { color: var(--PCQ); } .p-AUT-texte { color: var(--AUT); }

/* ---- the seat bar: the one loud thing on the page ---- */
.sieges-wrap { position: relative; padding-top: 19px; margin-bottom: 12px; }
.barre-sieges {
  display: flex; height: 36px; border-radius: var(--rayon-donnee); overflow: hidden;
  background: var(--vide); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
}
.barre-sieges .seg {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--chiffres); font-size: 1rem; font-weight: 700; color: var(--fond);
  min-width: 0; letter-spacing: .02em;
  transition: flex-grow .55s cubic-bezier(.4, 0, .2, 1);
}
.barre-sieges .seg + .seg { box-shadow: inset 1px 0 0 rgba(10, 20, 34, .45); }
/* 64 is the only number that decides the night, so it gets a real marker. */
.majorite { position: absolute; top: 13px; bottom: 0; width: 2px; background: var(--accent); z-index: 2; }
.majorite span {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  font: 700 .68rem/1.45 var(--chiffres); color: var(--sur-accent); background: var(--accent);
  padding: 0 5px; border-radius: 2px; white-space: nowrap;
}
.legende { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 8px; font-size: .88rem; }

/* seats tab */
.ligne-sieges { display: grid; grid-template-columns: 64px 1fr auto auto; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid var(--ligne); }
.pas { display: flex; align-items: center; gap: 4px; }
.pas button { width: 44px; padding: 0; font-size: 1.2rem; font-weight: 600; }
.pas input { width: 64px; text-align: center; padding: 10px 4px; font-family: var(--chiffres); font-size: 1.1rem; font-weight: 700; }
.reel { min-width: 2ch; text-align: right; font-family: var(--chiffres); font-size: 1.05rem; }
.total { font-weight: 700; margin-top: 10px; }

/* chips */
.puces { display: flex; flex-wrap: wrap; gap: 6px; }
.puce { padding: 8px 12px; border-radius: 999px; display: inline-flex; flex-direction: column; align-items: center; line-height: 1.15; }
.puce .petit { font-size: .7rem; color: var(--doux); }
.puce.choisi, button.choisi { background: var(--accent); color: var(--sur-accent); border-color: var(--accent); font-weight: 700; }
.puce.choisi .petit { color: inherit; opacity: .8; }
.puce.choisi.p-CAQ { background: var(--CAQ); border-color: var(--CAQ); } .puce.choisi.p-PLQ { background: var(--PLQ); border-color: var(--PLQ); }
.puce.choisi.p-PQ { background: var(--PQ); border-color: var(--PQ); } .puce.choisi.p-QS { background: var(--QS); border-color: var(--QS); }
.puce.choisi.p-PCQ { background: var(--PCQ); border-color: var(--PCQ); } .puce.choisi.p-AUT { background: var(--AUT); border-color: var(--AUT); }

/* ridings */
.collant { position: sticky; top: var(--h-entete); z-index: 3; background: var(--fond); padding-bottom: 6px; }
.filtres { margin-bottom: 8px; }
.liste-circ { list-style: none; margin: 0; padding: 0; }
.circ { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--rayon); margin-bottom: 6px; overflow: hidden; }
.circ-tete { width: 100%; border: 0; border-radius: 0; background: none; display: flex; justify-content: space-between; align-items: center; gap: 10px; text-align: left; padding: 11px 12px; }
.circ-nom { display: flex; flex-direction: column; min-width: 0; }
.circ-nom > span:first-child { font-weight: 600; }
.circ-nom .cote { font-size: .76rem; font-weight: 500; color: var(--doux); }
.etiquette { align-self: flex-start; font-size: .68rem; font-weight: 700; border: 1px solid currentColor; border-radius: 4px; padding: 0 5px; margin-top: 3px; }
.circ-droite { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.circ-detail { padding: 4px 12px 14px; border-top: 1px solid var(--ligne); }
.choix-partis { display: grid; gap: 6px; margin-top: 10px; }
.choix { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--ligne); border-radius: 8px; background: var(--relief); }
.choix.gagnant { box-shadow: inset 0 0 0 2px var(--accent); }
.choix-nom { display: flex; flex-direction: column; min-width: 0; }
.places { display: flex; flex-shrink: 0; }
.place { width: 38px; min-height: 44px; padding: 0; border-radius: 0; font-weight: 600; }
.place + .place { border-left: 0; } .place:first-child { border-radius: 8px 0 0 8px; } .place:last-child { border-radius: 0 8px 8px 0; }
.place.choisi.p-CAQ { background: var(--CAQ); border-color: var(--CAQ); } .place.choisi.p-PLQ { background: var(--PLQ); border-color: var(--PLQ); } .place.choisi.p-PQ { background: var(--PQ); border-color: var(--PQ); } .place.choisi.p-QS { background: var(--QS); border-color: var(--QS); } .place.choisi.p-PCQ { background: var(--PCQ); border-color: var(--PCQ); } .place.choisi.p-AUT { background: var(--AUT); border-color: var(--AUT); }
.choix.choisi, .place.choisi { color: var(--fond); }
.choix.choisi.p-CAQ { background: var(--CAQ); border-color: var(--CAQ); } .choix.choisi.p-PLQ { background: var(--PLQ); border-color: var(--PLQ); } .choix.choisi.p-PQ { background: var(--PQ); border-color: var(--PQ); } .choix.choisi.p-QS { background: var(--QS); border-color: var(--QS); } .choix.choisi.p-PCQ { background: var(--PCQ); border-color: var(--PCQ); } .choix.choisi.p-AUT { background: var(--AUT); border-color: var(--AUT); }
.resultat { margin-top: 10px; }
.ligne-resultat { display: grid; grid-template-columns: 64px 1fr auto; gap: 8px; align-items: center; padding: 3px 0; }
.ligne-resultat > :last-child { font-family: var(--chiffres); font-size: 1.02rem; font-weight: 700; }

/* map */
.bascule { display: flex; gap: 0; margin-bottom: 8px; }
.bascule button { flex: 1; border-radius: 0; min-height: 40px; padding: 6px; }
.bascule button + button { border-left: 0; }
.bascule button:first-child { border-radius: 8px 0 0 8px; } .bascule button:last-child { border-radius: 0 8px 8px 0; }
.carte-bloc { padding: 10px; }
.carte-fil { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 44px; margin-bottom: 6px; }
.carte-svg { display: block; width: 100%; height: min(62vh, 110vw); background: var(--fond); border-radius: 8px; touch-action: manipulation; }
.carte-svg path { stroke: var(--fond); stroke-width: .7px; vector-effect: non-scaling-stroke; stroke-linejoin: round; cursor: pointer; }
.carte-svg path.choisie { stroke: var(--accent); stroke-width: 2.5px; }

/* party view */
.ligne-parti { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; }
.ligne-parti .puce { min-width: 48px; padding: 8px 10px; }
.entete-liste { padding: 4px 4px 8px; }
.entete-liste.separateur { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--ligne); font-weight: 700; }

/* bets */
.titre-section { margin: 24px 2px 10px; }
.pari h3 { display: flex; justify-content: space-between; gap: 10px; }
.points { font-size: .78rem; font-weight: 600; color: var(--doux); white-space: nowrap; font-family: var(--chiffres); }
.ligne-chef { padding: 9px 0; border-top: 1px solid var(--ligne); display: grid; gap: 6px; }
.grille-vote { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.grille-vote label { display: grid; grid-template-columns: auto 1fr; gap: 6px; align-items: center; }
.grille-vote label .doux { grid-column: 1 / -1; }

/* leaderboard */
.classement, .participants, .fil, .contre { list-style: none; margin: 0; padding: 0; }
.rang { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--rayon); margin-bottom: 6px; }
.rang.moi, .participants .moi { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.rang.bot { border-style: dashed; }
.rang-tete { width: 100%; border: 0; background: none; display: grid; grid-template-columns: 34px 1fr auto; gap: 8px; align-items: center; text-align: left; }
.rang-tete .position { font-family: var(--chiffres); font-size: 1.15rem; font-weight: 700; color: var(--doux); }
.rang-tete .total { font-family: var(--chiffres); font-size: 1.45rem; font-weight: 700; margin: 0; }
/* The leader is the only row that gets the amber. */
.classement > .rang:first-child .rang-tete .total { color: var(--accent); }
.detail-joueur:not(:empty) { padding: 0 14px 12px; }
.ligne-detail { display: flex; justify-content: space-between; padding: 3px 0; font-size: .88rem; }
.participants li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 10px; border-top: 1px solid var(--ligne); }
.contre li { padding: 2px 0; font-size: .88rem; }
.un-prix { display: grid; padding: 9px 0; border-top: 1px solid var(--ligne); }
.un-prix .gagnants { font-size: 1.05rem; font-weight: 700; color: var(--accent); }

/* bingo */
.grille-bingo { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-bottom: 12px; }
.case { position: relative; aspect-ratio: 1; padding: 3px; min-height: 0; font-size: clamp(.5rem, 2.3vw, .75rem); line-height: 1.12; border-radius: 6px; overflow: hidden; overflow-wrap: break-word; hyphens: auto; background: var(--surface); }
.case.marquee { background: var(--accent); color: var(--sur-accent); border-color: var(--accent); font-weight: 700; }
.case.contestee { outline: 2px dashed var(--ko); outline-offset: -3px; }
.case.centre { font-style: italic; }
.compte-objections { position: absolute; top: 1px; right: 3px; font-size: .6rem; }
.bingo-bouton { font-size: 1.1rem; margin-bottom: 12px; }
.fil li { padding: 5px 0; border-top: 1px solid var(--ligne); font-size: .88rem; }

#toast { position: fixed; left: 50%; bottom: calc(72px + env(safe-area-inset-bottom)); transform: translateX(-50%) translateY(20px); background: var(--encre); color: var(--fond); padding: 10px 16px; border-radius: 8px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; max-width: 90vw; z-index: 10; font-weight: 600; }
#toast.visible { opacity: 1; transform: translateX(-50%); }
#toast.erreur { background: var(--ko); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  #toast { transition: none; }
  .barre-sieges .seg { transition: none; }
}