/* =========================================================================
   JE DIS — feuille de style
   Direction : le carnet de vote / l'avis officiel affiché sur un panneau —
   pas l'application-startup. Papier kraft, encre, un seul accent (rouge
   tampon), bordures franches plutôt que des ombres, aucune police externe
   (polices système uniquement : zéro appel réseau, chargement instantané
   même sur une connexion faible). Signature visuelle : les codes sont
   présentés comme un talon de billet (bordure pointillée, monospace).
   ========================================================================= */

:root {
  --papier:        #EFEEE3;
  --carte:         #FFFDF8;
  --encre:         #1C1B18;
  --encre-att:     #55524A;
  --tampon:        #A8322D;
  --tampon-fonce:  #7A211D;
  --ligne:         #DEDACB;

  --pour:          #2E6E5E;
  --contre:        #8C4A2F;
  --sursois:       #5B6B7A;
  --fiche:         #9B9689;

  --alerte-fond:   #F6E9C9;
  --alerte-bord:   #B08A2E;

  --police:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --police-mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Consolas, monospace;

  --bordure: 1.5px;
  --rayon:   16px;
  --rayon-petit: 10px;
  --ombre:   0 2px 10px rgba(28, 27, 24, 0.08);
  --espace:  1.15rem;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--police);
  font-size: 18px;
  line-height: 1.55;
}

.entete {
  padding: 1rem var(--espace);
  border-bottom: var(--bordure) solid var(--ligne);
  background: var(--papier);
}
.logo {
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--encre);
  text-decoration: none;
}

.conteneur {
  max-width: 40rem;
  margin: 0 auto;
  padding: var(--espace);
}

.carte {
  background: var(--carte);
  border: var(--bordure) solid var(--ligne);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 1.5rem;
  margin-bottom: 1.25rem;
}
.carte-neutre { text-align: center; }

h1, .question {
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 0.9rem;
  padding-bottom: 0.6rem;
  border-bottom: 3px solid var(--tampon);
}

/* Un lien collé dans le texte de la question ne doit pas hériter de la
   taille du titre — sinon il l'écrase visuellement et casse la mise en
   page. Plus petit, poids normal, mais toujours reconnaissable comme lien
   (couleur + soulignement). */
.question a {
  display: inline-block;
  font-size: 1rem;
  font-weight: 400;
  text-decoration: underline;
  word-break: break-all;
}

.organisateur {
  font-size: 0.95rem;
  color: var(--encre-att);
  margin: -0.4rem 0 1.1rem;
}
.organisateur strong { color: var(--encre); }

/* ---------- Formulaires ---------- */

.champ-groupe { margin-bottom: 1.4rem; }

.etiquette {
  display: block;
  font-weight: 700;
  margin-bottom: 0.4rem;
}
.facultatif { font-weight: 400; color: var(--encre-att); }

textarea, input[type="text"], select {
  width: 100%;
  font: inherit;
  color: var(--encre);
  background: #fff;
  border: 1.5px solid var(--ligne);
  border-radius: var(--rayon-petit);
  padding: 0.7rem 0.8rem;
}
textarea { resize: vertical; }

.aide {
  color: var(--encre-att);
  font-size: 0.92rem;
  margin: 0.4rem 0 0;
}

/* ---------- Boutons génériques ---------- */

.bouton {
  display: inline-block;
  font: inherit;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid var(--ligne);
  border-radius: var(--rayon-petit);
  padding: 0.85rem 1.1rem;
  min-height: 48px;
  background: #fff;
  color: var(--encre);
  margin: 0.3rem 0.4rem 0.3rem 0;
}
.bouton-primaire {
  background: var(--tampon);
  border-color: var(--tampon-fonce);
  color: #fff;
  width: 100%;
  font-size: 1.05rem;
}
.bouton-primaire:hover { background: var(--tampon-fonce); }
.bouton-secondaire { background: var(--papier); }
.bouton-danger { border-color: var(--tampon); color: var(--tampon-fonce); background: #fff; }

button:disabled { opacity: 0.5; cursor: not-allowed; }

.bouton-lien {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: var(--tampon-fonce);
  text-decoration: underline;
  cursor: pointer;
  min-height: 0;
}

.bloc-changer-vote { margin: 0.6rem 0 1.2rem; }
.options-changer-vote { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.form-changer-vote { margin: 0; }
.form-changer-vote .bouton { margin: 0; padding: 0.5rem 0.9rem; min-height: 0; font-size: 0.92rem; }

/* ---------- Boutons de vote ---------- */

#formulaire-vote { display: flex; flex-direction: column; gap: 0.6rem; margin: 1rem 0; }
/* `display: flex` ci-dessus est une règle d'auteur : elle l'emporte sur la
   règle par défaut du navigateur [hidden]{display:none}, même quand le JS
   pose l'attribut hidden sur ce formulaire (déjà voté → on masque les
   boutons). Sans cette ligne, le formulaire reste visible malgré hidden. */
#formulaire-vote[hidden] { display: none; }

.bouton-vote {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  cursor: pointer;
  background: #fff;
  border: var(--bordure) solid var(--ligne);
  border-radius: var(--rayon-petit);
  padding: 0.7rem 1rem;
  min-height: 0;
  box-shadow: var(--ombre);
  transition: transform 0.1s ease;
}
.bouton-vote:active { transform: scale(0.97) rotate(-0.5deg); }
.bouton-vote-nom { display: block; font-weight: 800; font-size: 1.08rem; }
.bouton-vote-legende { display: block; font-weight: 400; font-size: 0.9rem; color: var(--encre-att); margin-top: 0.3rem; }

.bouton-pour    { border-left: 10px solid var(--pour); }
.bouton-contre  { border-left: 10px solid var(--contre); }
.bouton-sursois { border-left: 10px solid var(--sursois); }
.bouton-fiche   { border-left: 10px solid var(--fiche); }

/* Pour / Contre : pas de légende, donc pas besoin d'une grande carte pleine
   largeur chacun — côte à côte, texte centré, hauteur réduite au minimum. */
.ligne-vote-principal { display: flex; gap: 0.8rem; }
.bouton-vote-court {
  flex: 1;
  text-align: center;
  padding: 0.75rem 0.6rem;
  min-height: 0;
}
.bouton-vote-court .bouton-vote-nom { font-size: 1.15rem; }

@media (prefers-reduced-motion: reduce) {
  .bouton-vote { transition: none; }
  .bouton-vote:active { transform: none; }
}

.deja-vote { font-size: 1.15rem; }
#deja-vote-message strong { color: var(--tampon-fonce); }

/* ---------- Résultats ---------- */

.carte-resultats { padding: 1.2rem 1.5rem; }
.carte-resultats summary { cursor: pointer; font-weight: 700; }
.carte-resultats[open] summary { margin-bottom: 0.7rem; }
.resultats { margin: 0.6rem 0; }
.barre-ligne { margin-bottom: 0.45rem; }
.barre-tete { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.9rem; margin-bottom: 0.15rem; }
.barre-nom { font-weight: 700; }
.barre-chiffre { color: var(--encre-att); white-space: nowrap; }
.barre-piste { background: var(--papier); border: 1px solid var(--ligne); border-radius: var(--rayon-petit); height: 0.85rem; overflow: hidden; }
.barre-remplie { height: 100%; }
.barre-pour    { background: var(--pour); }
.barre-contre  { background: var(--contre); }
.barre-sursois { background: var(--sursois); }
.barre-fiche   { background: var(--fiche); }
.resultats-total { font-weight: 700; font-size: 0.9rem; margin-top: 0.5rem; }

#avertissement-echantillon { color: var(--alerte-bord); }

.cloturee {
  font-size: 0.88rem;
  color: var(--encre-att);
  margin-top: 0.9rem;
}

.compte-a-rebours { font-weight: 700; margin: 0.8rem 0; }

/* ---------- Codes façon talon de billet — élément signature ---------- */

.bloc-code {
  border: 2px dashed var(--ligne);
  border-radius: var(--rayon);
  padding: 0.9rem 1rem;
  margin: 1rem 0;
  background: var(--papier);
}
.bloc-code-gestion { border-color: var(--tampon); background: #FBEFEA; }
.code-affiche {
  font-family: var(--police-mono);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin: 0.3rem 0;
  word-break: break-all;
}
.code-gestion { color: var(--tampon-fonce); }

.lien-partage {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0.3rem 0;
  word-break: break-all;
}

/* ---------- Partage / QR ---------- */

#zone-qr { margin: 0.8rem 0; }
#zone-qr img, #zone-qr canvas { border: 1.5px solid var(--ligne); border-radius: var(--rayon-petit); }
.telechargement { margin: 1rem 0; }
.partage-repli summary { cursor: pointer; font-weight: 700; }

.options-repli { margin: 0 0 1.4rem; }
.options-repli summary { cursor: pointer; font-weight: 700; margin-bottom: 0.8rem; }

/* ---------- Messages ---------- */

.message-erreur { color: var(--tampon-fonce); font-weight: 700; }
.message-succes { color: var(--pour); font-weight: 700; }

/* ---------- Pied de page ---------- */

.pied {
  font-size: 0.85rem;
  color: var(--encre-att);
  border-top: var(--bordure) solid var(--ligne);
  padding: 1rem var(--espace) 2rem;
  max-width: 40rem;
  margin: 0 auto;
}
.pied-promesse { margin-top: 0.4rem; }

.lien-discret { text-align: center; }
.lien-discret a, a { color: var(--tampon-fonce); }

/* ---------- Espace gestion ---------- */

.gestion-carte {
  border: 2px solid var(--ligne);
  border-radius: var(--rayon);
  padding: 1rem;
  margin-bottom: 1.2rem;
}
.question-gestion { font-weight: 700; margin: 0.4rem 0; }
.ligne-boutons { display: flex; flex-wrap: wrap; }
.gestion-carte details { margin-top: 0.7rem; }
.gestion-carte summary { cursor: pointer; font-weight: 700; }
.gestion-carte form { margin-top: 0.5rem; }

/* ---------- Accessibilité : focus clavier toujours visible ---------- */

a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--tampon);
  outline-offset: 2px;
}

/* ---------- Écrans plus larges ---------- */

@media (min-width: 640px) {
  body { font-size: 19px; }
  .bouton-primaire { width: auto; }
  .entete { text-align: center; }
}