/* Direction : outil civique sérieux, façon comparateur électoral de presse.
   Papier clair, encre bleu marine, titres en serif, un seul accent rouge
   réservé aux scores. Le sérieux de la forme sert la chute du résultat. */
:root {
  --fond: #f7f5f0;
  --carte: #ffffff;
  --encre: #142a4f;
  --texte: #1f2430;
  --gris: #6b7080;
  --filet: #dcd8ce;
  --rouge: #c8102e;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --titre: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
}

.bandeau {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(12px + env(safe-area-inset-top)) 20px 12px;
  background: var(--encre);
  color: #fff;
  font-size: 13px;
}
.marque { font-weight: 700; letter-spacing: .02em; display: flex; align-items: center; gap: 8px; font-size: 15px; }
.urne { width: 14px; height: 12px; border: 2px solid #fff; position: relative; }
.urne::before { content: ""; position: absolute; left: 3px; top: -7px; width: 4px; height: 7px; background: #fff; }
.bandeau-info { opacity: .7; }

#app {
  max-width: 580px;
  margin: 0 auto;
  padding: 26px 20px calc(32px + env(safe-area-inset-bottom));
}

.ecran { display: none; }
.ecran.actif { display: block; animation: entree .2s ease-out; }
@keyframes entree { from { opacity: .4; transform: translateY(4px); } }

.surtitre {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--rouge);
  margin: 0 0 10px;
}

h1 {
  font-family: var(--titre);
  font-weight: normal;
  color: var(--encre);
  font-size: clamp(32px, 9vw, 44px);
  line-height: 1.08;
  margin: 0 0 16px;
}

.accroche { color: var(--gris); margin: 0 0 24px; }

.etapes {
  list-style: none;
  padding: 0;
  margin: 0 0 26px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--filet);
  border-bottom: 1px solid var(--filet);
}
.etapes li { padding: 14px 0; text-align: center; }
.etapes li + li { border-left: 1px solid var(--filet); }
.etapes b { display: block; font-family: var(--titre); font-size: 28px; color: var(--encre); font-weight: normal; line-height: 1.1; }
.etapes span { font-size: 13px; color: var(--gris); }

.champ { display: block; margin-bottom: 18px; }
.champ span { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.champ input {
  width: 100%;
  font: inherit;
  padding: 13px 14px;
  border: 1px solid var(--filet);
  background: var(--carte);
  color: var(--texte);
  border-radius: 6px;
}
.champ input:focus { outline: 2px solid var(--encre); outline-offset: -1px; }

.bouton {
  display: block;
  width: 100%;
  font: inherit;
  font-weight: 600;
  padding: 15px;
  border: 1px solid var(--encre);
  background: var(--encre);
  color: #fff;
  border-radius: 6px;
  cursor: pointer;
}
.bouton:active { opacity: .85; }
.bouton.secondaire { background: transparent; color: var(--encre); }

.mention { font-size: 13px; color: var(--gris); text-align: center; margin-top: 16px; }

/* Questionnaire */
.barre { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: var(--gris); }
.lien { font: inherit; background: none; border: 0; color: var(--encre); padding: 4px 0; cursor: pointer; }
.lien[disabled] { visibility: hidden; }

.progression { height: 4px; background: var(--filet); border-radius: 2px; margin: 10px 0 30px; overflow: hidden; }
#jauge { height: 100%; width: 0; background: var(--encre); transition: width .25s; }

.enonce {
  font-family: var(--titre);
  color: var(--encre);
  font-size: clamp(22px, 6.2vw, 27px);
  line-height: 1.28;
  min-height: 4.2em;
  margin: 0 0 24px;
}

.reponses { display: grid; gap: 8px; }
.reponses button {
  font: inherit;
  text-align: left;
  padding: 14px 16px;
  background: var(--carte);
  border: 1px solid var(--filet);
  border-radius: 6px;
  color: var(--texte);
  cursor: pointer;
  display: flex;
  gap: 12px;
  align-items: center;
}
.reponses button .rond {
  width: 20px; height: 20px; flex: none;
  border: 2px solid var(--filet);
  border-radius: 50%;
}
.reponses button.choisi { border-color: var(--encre); box-shadow: inset 0 0 0 1px var(--encre); }
.reponses button.choisi .rond { border: 6px solid var(--encre); }

/* Calcul */
.calcul { text-align: center; padding: 90px 0; color: var(--gris); }
.anneau {
  width: 46px; height: 46px; margin: 0 auto 22px;
  border: 4px solid var(--filet);
  border-top-color: var(--encre);
  border-radius: 50%;
  animation: tourne .8s linear infinite;
}
@keyframes tourne { to { transform: rotate(360deg); } }

/* Résultat */
.verdict {
  background: var(--carte);
  border: 1px solid var(--filet);
  border-top: 5px solid var(--rouge);
  border-radius: 6px;
  padding: 22px 20px;
  margin-bottom: 34px;
}
.petit { font-size: 14px; color: var(--gris); margin: 0 0 6px; }
.parti { margin-bottom: 20px; }

.chef {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid var(--filet);
  border-bottom: 1px solid var(--filet);
  margin-bottom: 16px;
}
.chef-nom { margin: 0; font-weight: 700; color: var(--encre); }
.chef-dates { margin: 0; font-size: 14px; color: var(--gris); }
.score { margin: 0; font-family: var(--titre); font-size: 34px; color: var(--rouge); line-height: 1; }
.texte { margin: 0; }

.portrait {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--encre);
  color: #fff;
  display: grid; place-items: center;
  font-family: var(--titre);
  font-size: 19px;
}
.portrait.grand { width: 76px; height: 76px; font-size: 28px; margin: 0 auto 12px; }

h2 {
  font-family: var(--titre);
  font-weight: normal;
  color: var(--encre);
  font-size: 24px;
  margin: 0 0 10px;
}

.profil { margin: 0 0 20px; }
.axes { margin-bottom: 34px; }
.axe { margin-bottom: 16px; font-size: 13px; }
.axe .libelles { display: flex; justify-content: space-between; color: var(--gris); margin-bottom: 5px; }
.axe .piste { position: relative; height: 6px; background: var(--filet); border-radius: 3px; }
.axe .piste::before { content: ""; position: absolute; left: 50%; top: -4px; bottom: -4px; border-left: 1px solid var(--gris); }
.axe .curseur {
  position: absolute; top: 50%;
  width: 16px; height: 16px;
  background: var(--encre);
  border: 3px solid var(--fond);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.aide { font-size: 14px; color: var(--gris); margin: -4px 0 12px; }
.classement { list-style: none; padding: 0; margin: 0 0 30px; }
.classement button {
  width: 100%;
  font: inherit;
  color: inherit;
  text-align: left;
  background: var(--carte);
  border: 1px solid var(--filet);
  border-radius: 6px;
  margin-bottom: 6px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 1.8em 1fr auto;
  gap: 8px;
  align-items: center;
  cursor: pointer;
}
.classement .rang { color: var(--gris); font-size: 14px; }
.classement .nom { display: block; font-weight: 600; color: var(--encre); line-height: 1.25; }
.classement .sous { display: block; font-size: 13px; color: var(--gris); line-height: 1.3; }
.classement .pct { font-weight: 700; color: var(--rouge); font-variant-numeric: tabular-nums; }
.classement .barre-pct { grid-column: 2 / 4; height: 3px; background: var(--filet); border-radius: 2px; overflow: hidden; }
.classement .barre-pct i { display: block; height: 100%; background: var(--rouge); }

.actions { display: grid; gap: 10px; }

/* Modale */
.modale {
  width: min(92vw, 420px);
  border: 0;
  border-radius: 10px;
  padding: 28px 22px 22px;
  text-align: center;
  color: var(--texte);
  background: var(--carte);
}
.modale::backdrop { background: rgba(20, 42, 79, .55); }
.modale[open] { animation: entree .2s ease-out; }
.fermer { position: absolute; top: 8px; right: 10px; border: 0; background: none; font-size: 20px; color: var(--gris); cursor: pointer; padding: 6px; }
.modale h3 { font-family: var(--titre); font-weight: normal; color: var(--encre); font-size: 26px; margin: 0 0 2px; }
.fiche-parti { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--rouge); margin: 10px 0 14px; }
.fiche-texte { font-size: 18px; margin: 0 0 14px; }
.fiche-score { font-size: 14px; color: var(--gris); margin: 0; }

/* Pseudo modifiable */
.pseudo-modif { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.pseudo-modif .crayon { color: var(--gris); font-weight: 400; text-transform: none; letter-spacing: 0; margin-left: 4px; text-decoration: underline; }

/* Classement des joueurs */
.joueurs li { margin-bottom: 6px; }
.joueurs .ligne {
  background: var(--carte); border: 1px solid var(--filet); border-radius: 6px;
  padding: 10px 12px; display: grid; grid-template-columns: 1.8em 1fr auto; gap: 8px; align-items: center;
}
.joueurs .moi { border-color: var(--encre); box-shadow: inset 0 0 0 1px var(--encre); }
.joueurs .vide { color: var(--gris); font-size: 15px; }

.fiche-joueurs { margin-top: 18px; text-align: left; border-top: 1px solid var(--filet); padding-top: 12px; }
.fiche-joueurs p { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--gris); text-transform: uppercase; letter-spacing: .06em; }
.fiche-joueurs div { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px dotted var(--filet); font-size: 15px; }
.fiche-joueurs b { color: var(--rouge); }

/* Édition des réponses */
.liste-edition { list-style: none; padding: 0; margin: 0 0 120px; }
.liste-edition li { padding: 14px 0; border-bottom: 1px solid var(--filet); }
.liste-edition .q { margin: 0 0 10px; color: var(--encre); font-size: 16px; }
.liste-edition .q span { color: var(--gris); margin-right: 6px; }
.choix5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.choix5 button {
  font: inherit; font-size: 12px; line-height: 1.2; padding: 8px 2px; min-height: 44px;
  background: var(--carte); border: 1px solid var(--filet); border-radius: 5px; color: var(--texte); cursor: pointer;
}
.choix5 button.choisi { background: var(--encre); border-color: var(--encre); color: #fff; }
.barre-direct {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: var(--carte); border-top: 1px solid var(--filet);
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center;
}
.barre-direct .petit { display: block; margin: 0; font-size: 12px; }
.barre-direct b { color: var(--encre); font-size: 15px; line-height: 1.2; display: block; }
.barre-direct .bouton { width: auto; padding: 12px 16px; }
@media (min-width: 620px) { .barre-direct { padding-left: calc(50vw - 270px); padding-right: calc(50vw - 270px); } }
.rgpd { font-size: 11px; line-height: 1.45; text-align: left; margin-top: 20px; }

/* Révélation des sources */
.sources-bloc { margin-bottom: 34px; }
.sources-bloc summary { cursor: pointer; color: var(--encre); font-weight: 600; padding: 12px 14px; background: var(--carte); border: 1px solid var(--filet); border-radius: 6px; }
.sources { list-style: none; padding: 0; margin: 10px 0 0; }
.sources li { padding: 12px 0 12px 12px; border-left: 3px solid var(--filet); margin-bottom: 10px; }
.sources li.nazi { border-left-color: var(--rouge); }
.sources p { margin: 0 0 4px; }
.sources .q { font-family: var(--titre); color: var(--encre); }
.sources .votre { font-size: 13px; font-weight: 700; color: var(--gris); }
.sources .src { font-size: 14px; }

/* « Je ne sais pas » : à part, plus discret */
.reponses button.nsp { margin-top: 6px; background: transparent; border-style: dashed; color: var(--gris); }
.reponses button.nsp .rond { border-style: dashed; }
.reponses button.nsp.choisi { color: var(--encre); }
.choix5 { grid-template-columns: repeat(6, 1fr); }
.choix5 button.nsp { background: transparent; border-style: dashed; color: var(--gris); }
.choix5 button.nsp.choisi { background: var(--gris); border-color: var(--gris); color: #fff; }

/* Portrait avec photo (personnage caché) */
.portrait.photo { background-size: cover; background-position: center 30%; border: 2px solid var(--rouge); }

/* Texte mis en forme des personnages cachés */
.riche { text-align: left; }
.riche p { margin: 0 0 10px; }
.riche ul { margin: 0 0 10px; padding-left: 1.2em; }
.riche li { margin-bottom: 4px; }
.riche .nb { font-size: 14px; color: var(--gris); border-top: 1px dashed var(--filet); padding-top: 10px; margin: 14px 0 0; }
.fiche-texte.riche { font-size: 16px; }

/* Portraits des personnages */
.portrait.photo { background-color: var(--filet); }
.portrait.mini { width: 38px; height: 38px; font-size: 14px; border-width: 0; }
.portrait.mini.photo { border: 0; }
.classement button { grid-template-columns: 1.6em 38px 1fr auto; }
.classement .barre-pct { grid-column: 3 / 5; }
.portrait.photo:not(.mini) { border: 2px solid var(--encre); }
.fiche-credit { display: block; margin-top: 14px; font-size: 11px; color: var(--gris); text-decoration: none; }
.fiche-credit:hover { text-decoration: underline; }

/* Personnages cachés : photo plus grande */
.portrait.photo.secret { width: 84px; height: 84px; }
.portrait.grand.photo.secret { width: 160px; height: 160px; }
.portrait.mini.photo.secret { width: 38px; height: 38px; }
.portrait.photo { background-position: center; }