/* L'Hémicycle — aucune couleur de parti : encre, bulletin, gris, et laiton pour le joueur. */

@font-face { font-family: 'Bricolage Grotesque'; font-weight: 700; font-display: swap; src: url('/fonts/bricolage-grotesque-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Bricolage Grotesque'; font-weight: 800; font-display: swap; src: url('/fonts/bricolage-grotesque-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 400; font-display: swap; src: url('/fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-display: swap; src: url('/fonts/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-display: swap; src: url('/fonts/inter-latin-600-normal.woff2') format('woff2'); }

:root {
  --encre: #10131A;
  --pupitre: #1A1F2A;
  --filet: #2C3342;
  --gris: #A9B0BF;
  --texte-doux: #D5D8DF;
  --bulletin: #F3F0E8;
  --laiton: #D9B24C;
  --laiton-clair: #EBCB73;
  --titres: 'Bricolage Grotesque', system-ui, sans-serif;
  --courant: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { background: #0A0C11; }
body { margin: 0; color: var(--bulletin); font-family: var(--courant); font-size: 16px; line-height: 1.5; -webkit-text-size-adjust: 100%; }
[hidden] { display: none !important; }
a { color: var(--laiton); }
a:hover { color: var(--laiton-clair); }
:focus-visible { outline: 3px solid var(--laiton); outline-offset: 2px; }
h1, h2, h3, p, ul { margin: 0; }

.page { --hauteur-onglets: 68px; max-width: 430px; min-height: 100dvh; margin: 0 auto; padding: 20px 20px calc(var(--hauteur-onglets) + 16px + env(safe-area-inset-bottom)); background: var(--encre); display: flex; flex-direction: column; gap: 20px; }
.cote { display: contents; }
.pied { order: 3; }
.grille-cartes { display: flex; flex-direction: column; gap: 20px; }
main { flex: 1; display: flex; flex-direction: column; gap: 20px; min-width: 0; }

/* En-tête */
.entete { display: flex; justify-content: space-between; align-items: center; min-height: 44px; }
.marque { font-family: var(--titres); font-weight: 800; font-size: 24px; letter-spacing: -0.5px; color: var(--bulletin); text-decoration: none; padding: 6px 0; }
.marque:hover { color: var(--bulletin); }
.compte { text-align: right; }
.compte-j { font-family: var(--titres); font-weight: 700; font-size: 18px; line-height: 1.1; color: var(--laiton); }
.compte-l { font-size: 12px; color: var(--gris); }

/* Texte */
.surtitre { font-size: 13px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--gris); }
.titre { font-family: var(--titres); font-weight: 800; font-size: 30px; line-height: 1.1; letter-spacing: -0.5px; text-wrap: balance; }
.sous-titre { font-family: var(--titres); font-weight: 700; font-size: 18px; }
.intertitre { margin: 6px 0 0; font-size: 12px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--gris); }
.chapo { font-size: 15px; color: var(--gris); }
.discret { font-size: 13px; line-height: 1.45; color: var(--gris); }
.bloc { display: flex; flex-direction: column; gap: 6px; }
.ligne { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }

/* Progression de la séance */
.progression { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.progression span { height: 4px; border-radius: 2px; background: var(--filet); }
.progression .fait { background: var(--bulletin); }
.progression .encours { background: var(--laiton); }

/* Carte */
.carte { background: var(--pupitre); border: 1px solid var(--filet); border-radius: 20px; padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.carte-mesure { flex: 1; min-height: 240px; }
.etiquette { align-self: flex-start; font-size: 13px; font-weight: 500; padding: 5px 12px; border: 1px solid var(--gris); border-radius: 999px; }
.mesure { font-family: var(--titres); font-weight: 700; font-size: 24px; line-height: 1.22; letter-spacing: -0.3px; text-wrap: pretty; overflow-wrap: anywhere; }
.mesure-petite { font-size: 20px; line-height: 1.25; }
.pousse { flex: 1; }
.cadenas { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--gris); }

/* Boutons */
.bouton { min-height: 56px; width: 100%; border: 2px solid transparent; border-radius: 16px; padding: 0 20px; font-family: var(--titres); font-weight: 700; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 12px; text-decoration: none; color: inherit; background: none; }
.bouton-principal { background: var(--laiton); color: var(--encre); }
.bouton-principal:hover { background: var(--laiton-clair); color: var(--encre); }
.bouton-contour { border-color: var(--bulletin); color: var(--bulletin); }
.bouton-contour:hover { background: var(--pupitre); color: var(--bulletin); }
.bouton-petit { min-height: 44px; width: auto; font-size: 15px; border-width: 1px; }
.bouton:disabled { opacity: 0.45; cursor: default; }

.votes { display: flex; flex-direction: column; gap: 10px; }
.vote { min-height: 60px; justify-content: flex-start; gap: 14px; font-size: 19px; }
.vote-pour { background: var(--bulletin); border-color: var(--bulletin); color: var(--encre); }
.vote-contre { background: var(--encre); border-color: var(--bulletin); color: var(--bulletin); }
.vote-abstention { border: 2px dashed var(--gris); color: var(--bulletin); }
.vote:hover { filter: brightness(1.12); }

/* Boules de vote : forme et remplissage, sans dépendre de la couleur. */
.boule { flex: none; display: inline-block; width: 22px; height: 22px; border-radius: 50%; }
.boule-pour { background: var(--bulletin); border: 2px solid var(--encre); }
.boule-contre { background: #000; border: 2px solid var(--bulletin); }
.boule-abstention { border: 2px dashed var(--gris); }
.boule-vide { border: 2px solid var(--filet); }
.sur-clair .boule-pour { background: #fff; border-color: var(--encre); }
.sur-clair .boule-contre { background: var(--encre); border-color: var(--encre); }
.sur-clair .boule-abstention { border-color: #5E6678; }
.sur-clair .boule-vide { border-color: #C9C5B8; }
.boule-g { width: 64px; height: 64px; border-width: 3px; }
.boule-p { width: 18px; height: 18px; }

/* Révélation */
.auteur { display: flex; flex-direction: column; gap: 4px; padding-top: 14px; border-top: 1px solid var(--filet); }
.auteur-label { font-size: 12px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--laiton); }
.auteur-nom { font-family: var(--titres); font-weight: 700; font-size: 19px; overflow-wrap: anywhere; }
.liens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding-top: 8px; }
.lien-source { min-height: 44px; padding: 6px 12px; border: 1px solid var(--laiton); border-radius: 12px; font-size: 13px; font-weight: 600; text-decoration: none; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.barre { display: flex; gap: 3px; height: 26px; }
.barre > span { min-width: 6px; border-radius: 6px; }
.barre .b-pour { background: var(--bulletin); }
.barre .b-contre { background: #000; border: 2px solid var(--bulletin); }
.barre .b-abstention { border: 2px dashed var(--gris); }
.chiffres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.chiffre { font-family: var(--titres); font-weight: 800; font-size: 24px; line-height: 1.1; }
.mon-vote { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--laiton); border-radius: 14px; font-size: 15px; line-height: 1.35; }
.pagination { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

/* Texte original, à la révélation */
/* « En savoir plus » : contexte neutre de la mesure, replié par défaut. */
.en-savoir-plus { border: 1px solid var(--filet); border-radius: 12px; color: var(--gris); }
.en-savoir-plus summary { min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 14px; cursor: pointer; font-size: 14px; font-weight: 600; list-style: none; }
.en-savoir-plus summary::-webkit-details-marker { display: none; }
.en-savoir-plus summary::after { content: ''; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--gris); border-bottom: 2px solid var(--gris); transform: rotate(45deg); transition: transform 0.15s; }
.en-savoir-plus[open] summary::after { transform: rotate(-135deg); }
.en-savoir-plus summary:focus-visible { outline: 2px solid var(--laiton); outline-offset: 2px; border-radius: 12px; }
.icone-info { flex: none; width: 20px; height: 20px; border: 1.5px solid var(--gris); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; font-style: italic; font-family: Georgia, serif; }
.en-savoir-plus p { margin: 0; padding: 0 14px 14px; font-size: 15px; line-height: 1.5; color: var(--texte-doux); }
.original { margin: 0; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-left: 3px solid var(--gris); background: var(--encre); border-radius: 0 12px 12px 0; }
.original figcaption { font-size: 12px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--gris); }
.original blockquote { margin: 0; font-size: 15px; line-height: 1.45; color: var(--texte-doux); overflow-wrap: anywhere; }

/* Rattrapage */
.carte-aveugle { border-style: dashed; border-color: var(--gris); }
.carte-aveugle .badge { align-self: center; }
.votes-compacts .vote { min-height: 52px; font-size: 17px; }
.carte:focus { outline: none; }
.carte:focus-visible { outline: 3px solid var(--laiton); }
.encart-rattrapage { display: flex; align-items: center; gap: 14px; padding: 14px 16px; min-height: 44px; border: 1px solid var(--laiton); border-radius: 16px; color: var(--bulletin); text-decoration: none; line-height: 1.35; }
.encart-rattrapage:hover { background: var(--pupitre); color: var(--bulletin); }
.encart-chiffre { flex: none; min-width: 44px; height: 44px; padding: 0 8px; border-radius: 999px; background: var(--laiton); color: var(--encre); font-family: var(--titres); font-weight: 800; font-size: 20px; display: flex; align-items: center; justify-content: center; }

/* Hémicycle */
.hemicycle { padding: 16px 8px 14px; align-items: center; gap: 12px; }
.hemicycle svg { width: 100%; max-width: 350px; height: auto; display: block; overflow: visible; }
/* Hémicycle qui s'allume : couleurs de partis et opacités posées par attributs SVG
   (stroke, stroke-opacity, stop-color), autorisés par la CSP. */
.arc-fond { fill: none; stroke: var(--filet); stroke-width: 10; stroke-linecap: round; }
.arc-partis { fill: none; stroke-width: 10; stroke-linecap: round; opacity: 0.18; }
.trait line { stroke-width: 6; stroke-linecap: round; }
/* Sans couleur de parti seulement : sinon l'attribut stroke serait écrasé par la CSS. */
.trait line:not([stroke]) { stroke: var(--gris); }
.trait line.trait-lisere { stroke: rgba(243, 240, 232, 0.25); stroke-width: 8; }
.trait-podium line.trait-lisere { stroke: var(--laiton); stroke-width: 10; }
.trait-vide line { stroke: var(--filet); stroke-width: 4; }
.trait { cursor: help; }
.repere-joueurs circle { fill: var(--bulletin); stroke: var(--encre); stroke-width: 2; }
.jauge-bornes { width: 100%; max-width: 350px; display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 8px; }
.borne { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.borne span { font-size: 12px; color: var(--gris); }
.borne-droite { text-align: right; }
/* Plus proches de toi (jamais de score chiffré, qui passerait pour une note). */
.proche-de-toi { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.proche-de-toi strong { display: flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--titres); font-weight: 800; font-size: 28px; line-height: 1.15; color: var(--laiton); overflow-wrap: anywhere; }
.proche-de-toi strong .pastille-parti, .proche-de-toi strong .pastille { width: 16px; height: 16px; flex: none; }
.noms-proches { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.podium { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.podium li { display: flex; align-items: center; gap: 8px; font-family: var(--titres); font-weight: 700; font-size: 18px; color: var(--bulletin); }
/* Aucun nom mis en avant sur le podium : l'ordre seul le dit, et un ex aequo n'est jamais séparé. */
.podium-egalite { flex-direction: column; gap: 4px; }
.noms-egaux { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; font-size: 16px; }
.nom-egal { display: inline-flex; align-items: center; gap: 6px; }
/* Les pastilles sont des SVG : sans ça, la règle .hemicycle svg (largeur 100 %) les agrandirait. */
.hemicycle svg.pastille-parti { width: 12px; height: 12px; max-width: none; }
.hemicycle .proche-de-toi strong svg.pastille-parti { width: 16px; height: 16px; }
.centre { text-align: center; }
.pastille.pastille-repere { width: 10px; height: 10px; background: var(--bulletin); vertical-align: middle; }
.pastille { flex: none; width: 12px; height: 12px; border-radius: 50%; display: inline-block; background: var(--filet); }
.pastille.ton-0 { background: #F3F0E8; } .pastille.ton-1 { background: #737B8E; } .pastille.ton-2 { background: #C9CDD6; }
.pastille.ton-3 { background: #555D70; } .pastille.ton-4 { background: #E0DCCF; } .pastille.ton-5 { background: #8E96A8; }
/* Couleur du parti : fixée par l'attribut fill du SVG (data/candidats.json, champ couleur). */
.pastille-parti { flex: none; display: block; overflow: visible; }
/* Liseré clair : les couleurs sombres (bleu nuit…) restent visibles sur le fond encre. */
.pastille-parti circle { stroke: rgba(243, 240, 232, 0.45); stroke-width: 1; }
.groupes { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.groupes li { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.groupes .nom { flex: 1; font-weight: 600; overflow-wrap: anywhere; }

/* Carte à partager */
.partage { background: var(--bulletin); color: var(--encre); border: 0; padding: 24px; gap: 20px; }
.partage .marque-p { font-family: var(--titres); font-weight: 800; font-size: 18px; }
.partage .doux { color: #3A4152; }
/* Miniature de « Ton assemblée » sur la carte de partage (fond clair). */
.assemblee-partage { padding-top: 16px; border-top: 1px solid #C9C5B8; }
.assemblee-partage svg { width: 100%; max-width: 320px; height: auto; display: block; margin: 0 auto; }
.partage .siege-parti { stroke: rgba(16, 19, 26, 0.25); }
.partage .siege-moi { stroke: var(--encre); stroke-width: 1.5; }
.case-partage { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: 15px; cursor: pointer; }
.case-partage input { width: 22px; height: 22px; flex: none; accent-color: var(--laiton); }
.boules-jour { display: flex; gap: 14px; }
.serie { font-family: var(--titres); font-weight: 800; font-size: 34px; line-height: 1; letter-spacing: -0.5px; }
.semaine { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; padding-top: 16px; border-top: 1px solid #C9C5B8; }
.semaine .jour { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; color: #3A4152; }

/* Avertissements */
.essentiel { border: 1px solid var(--laiton); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.essentiel h2 { font-family: var(--titres); font-weight: 700; font-size: 18px; }
.essentiel ul { padding-left: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 1.45; }
.articles { display: flex; flex-direction: column; gap: 20px; }
.articles section { display: flex; flex-direction: column; gap: 6px; padding-top: 18px; border-top: 1px solid var(--filet); }
.articles h2 { font-family: var(--titres); font-weight: 700; font-size: 17px; }
.articles h2 span { color: var(--laiton); }
.articles p { font-size: 14px; line-height: 1.5; color: var(--texte-doux); }
.mentions { display: flex; flex-direction: column; gap: 8px; padding-top: 18px; border-top: 1px solid var(--filet); font-size: 13px; color: var(--gris); }
.mentions strong { color: var(--bulletin); }

/* Navigation : barre d'onglets fixée en bas sur téléphone, colonne latérale sur ordinateur. */
.onglets { position: fixed; z-index: 10; left: 50%; bottom: 0; transform: translateX(-50%); width: 100%; max-width: 430px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: rgba(16, 19, 26, 0.94); border-top: 1px solid var(--filet); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.onglets a { position: relative; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 4px 0; font-size: 12px; font-weight: 600; letter-spacing: 0.1px; text-decoration: none; color: var(--gris); border-radius: 14px; -webkit-tap-highlight-color: transparent; }
.onglet-icone { width: 44px; height: 28px; padding: 3px 11px; border-radius: 999px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: background-color 0.15s ease; }
.onglets a:hover { color: var(--bulletin); }
.onglets a:hover .onglet-icone { background: var(--pupitre); }
.onglets a[aria-current="page"] { color: var(--laiton); }
.onglets a[aria-current="page"] .onglet-icone { background: var(--laiton); color: var(--encre); stroke: var(--encre); }
.pied { text-align: center; font-size: 13px; }
.pied a { display: inline-block; padding: 10px; color: var(--gris); }
.bandeau { position: sticky; z-index: 11; bottom: calc(var(--hauteur-onglets) + 12px + env(safe-area-inset-bottom)); align-self: center; padding: 10px 16px; border-radius: 12px; background: var(--bulletin); color: var(--encre); font-size: 14px; font-weight: 600; text-align: center; }
.noscript { max-width: 430px; margin: 0 auto; padding: 20px; background: var(--encre); }

/* Groupes d'amis */
.formulaire { display: flex; flex-direction: column; gap: 14px; }
.champ { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; }
.champ input, .champ textarea { font: inherit; font-weight: 400; font-size: 16px; color: var(--bulletin); background: var(--encre); border: 1px solid var(--gris); border-radius: 12px; padding: 12px 14px; min-height: 48px; width: 100%; }
.champ textarea { resize: vertical; min-height: 96px; line-height: 1.45; }
.champ input:focus, .champ textarea:focus { border-color: var(--laiton); outline: none; }
.case { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.45; color: var(--texte-doux); }
.case input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--laiton); }
.liste-groupes, .membres, .liste-mesures, .votes-groupe, .fil { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.liste-groupes { gap: 10px; }
.carte-lien { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; min-height: 44px; border: 1px solid var(--filet); border-radius: 16px; background: var(--pupitre); color: var(--bulletin); text-decoration: none; }
.carte-lien:hover { border-color: var(--laiton); color: var(--bulletin); }
.membres { gap: 0; }
.membres li { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 0; border-bottom: 1px solid var(--filet); font-size: 15px; }
.membres .pseudo { flex: 1; font-weight: 600; overflow-wrap: anywhere; }
.badge { font-size: 11px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: var(--laiton); border: 1px solid var(--laiton); border-radius: 6px; padding: 1px 6px; }
.lien-action { background: none; border: 0; padding: 10px 4px; min-height: 44px; font: inherit; font-size: 13px; font-weight: 600; color: var(--laiton); cursor: pointer; text-decoration: underline; }
.lien-action:hover { color: var(--laiton-clair); }
.liste-mesures { gap: 12px; }
.carte-compacte { padding: 18px; gap: 12px; }
.mesure-courte { font-family: var(--titres); font-weight: 700; font-size: 17px; line-height: 1.3; overflow-wrap: anywhere; }
.votes-groupe { gap: 8px; }
.votes-groupe li { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.votes-groupe .pseudo { flex: 1; overflow-wrap: anywhere; }
.votes-groupe .boule { width: 18px; height: 18px; }
.fil { gap: 10px; }
.commentaire { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; background: var(--pupitre); border: 1px solid var(--filet); border-radius: 14px; }
.commentaire p { font-size: 15px; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; }
.commentaire.masque p { color: var(--gris); }
.commentaire .actions { display: flex; gap: 12px; justify-content: flex-end; margin: -6px -4px -10px; }
.surtitre a { color: var(--gris); }

/* Ordinateur : colonne latérale à gauche, contenu plus large, cartes en grille. */
@media (min-width: 960px) {
  .page { --hauteur-onglets: 0px; max-width: 1180px; display: grid; grid-template-columns: 248px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 56px; row-gap: 0; padding: 0 40px; background: none; }
  html { background: var(--encre); }
  .page { grid-template-rows: auto; }
  .cote { display: flex; flex-direction: column; gap: 32px; grid-column: 1; grid-row: 1; position: sticky; top: 0; align-self: start; height: 100vh; height: 100dvh; overflow-y: auto; padding: 32px 0 16px; }
  .entete { flex-direction: column; align-items: flex-start; gap: 18px; }
  .marque { font-size: 28px; }
  .compte { text-align: left; padding: 14px 16px; width: 100%; border: 1px solid var(--filet); border-radius: 16px; background: var(--pupitre); }
  .compte-j { font-size: 30px; }
  .compte-l { font-size: 13px; }
  .onglets { position: static; transform: none; width: auto; max-width: none; display: flex; flex-direction: column; gap: 4px; padding: 0; background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .onglets a { flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 52px; padding: 0 14px 0 6px; font-family: var(--titres); font-size: 17px; font-weight: 700; color: var(--texte-doux); border-radius: 999px; }
  .onglet-icone { width: 40px; height: 40px; padding: 9px; }
  .onglets a:hover { background: var(--pupitre); }
  .onglets a:hover .onglet-icone { background: none; }
  .onglets a[aria-current="page"] { background: var(--pupitre); color: var(--laiton); box-shadow: inset 0 0 0 1px var(--filet); }
  main { grid-column: 2; grid-row: 1; max-width: 860px; padding: 44px 0 56px; gap: 24px; }
  .pied { margin-top: auto; text-align: left; }
  .pied a { padding: 10px 0; }
  .bandeau { grid-column: 2; position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); }

  .titre { font-size: 40px; }
  .carte { padding: 28px; }
  .carte-mesure { flex: none; min-height: 320px; padding: 36px; }
  .mesure { font-size: 32px; line-height: 1.18; }
  .mesure-petite { font-size: 21px; }
  .votes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .vote { justify-content: center; min-height: 64px; }
  .votes-compacts { grid-template-columns: 1fr; gap: 8px; }
  .votes-compacts .vote { justify-content: flex-start; min-height: 52px; }
  .grille-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 20px; align-items: start; }
  .pagination { max-width: 520px; }
  main > .bouton:not(.bouton-petit) { max-width: 420px; }
  .hemicycle svg, .jauge-bornes { max-width: 520px; }
  .articles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 40px; }
  .formulaire, .partage { max-width: 560px; }
}

@media (prefers-reduced-motion: no-preference) {
  .carte-mesure { animation: entree 0.25s ease-out; }
  @keyframes entree { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}

/* Ton assemblée : sièges en rangées concentriques. Couleur de parti par l'attribut fill. */
.siege-parti { stroke: rgba(243, 240, 232, 0.45); stroke-width: 1; }
.siege-parti:not([fill]) { fill: var(--gris); }
.siege-vide { fill: var(--filet); }
.siege-moi { fill: var(--laiton); stroke: var(--encre); stroke-width: 1.5; }
.halo { fill: var(--laiton); opacity: 0.35; }
.assemblee-vide { fill: var(--gris); font-size: 14px; }

/* Onglets de l'écran Hémicycle : « Ton assemblée » / « Les joueurs ». */
.sous-onglets { display: flex; gap: 6px; padding: 4px; border: 1px solid var(--filet); border-radius: 999px; }
.sous-onglet { flex: 1; min-height: 44px; border: 0; border-radius: 999px; background: transparent; color: var(--gris); font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; }
.sous-onglet[aria-selected="true"] { background: var(--laiton); color: var(--encre); }
.sous-onglet:focus-visible { outline: 2px solid var(--bulletin); outline-offset: 2px; }
#panneau-hemicycle { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
/* Assemblée des joueurs : le groupe du siège du joueur, liseré doré. */
.siege-parti.siege-mien { stroke: var(--laiton); stroke-width: 1.4; }
.groupes li.mon-groupe .nom { color: var(--laiton); }