/*
 * Habillage « élection » : papier, encre, bandeau tricolore.
 * Neutralité : le bleu et le rouge du drapeau ne servent qu'au décor.
 * L'échelle d'accord et les scores n'utilisent qu'une seule encre
 * (plein = accord, hachuré = désaccord), sans couleur associée à un parti.
 */
:root {
  --papier: #f6f2e9;
  --papier-fonce: #ece5d6;
  --surface: #fffdf8;
  --encre: #1f2a4d;
  --encre-douce: #5a6079;
  --encre-pale: #c9c6bb;
  --bordure: #ddd5c4;
  --bleu: #1f3a93;
  --blanc: #ffffff;
  --rouge: #c8102e;
  --accent-texte: #fffdf8;
  --ombre: 0 1px 1px rgba(31, 42, 77, .05), 0 6px 22px rgba(31, 42, 77, .08);
  --ombre-bulletin: 0 1px 0 rgba(31, 42, 77, .06), 0 14px 34px -10px rgba(31, 42, 77, .28);
  --rayon: 10px;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papier: #14172a;
    --papier-fonce: #1b1f36;
    --surface: #1f2440;
    --encre: #ece8dc;
    --encre-douce: #a9abbd;
    --encre-pale: #4a4f6c;
    --bordure: #33395a;
    --accent-texte: #14172a;
    --ombre: none;
    --ombre-bulletin: 0 14px 34px -12px rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font: 17px/1.6 var(--sans);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

[hidden] { display: none !important; }
a { color: var(--encre); text-underline-offset: 2px; }
:focus-visible { outline: 3px solid var(--bleu); outline-offset: 2px; }
@media (prefers-color-scheme: dark) { :focus-visible { outline-color: var(--encre); } }

.wrap { width: 100%; max-width: 820px; margin: 0 auto; padding-inline: 20px; }
main { flex: 1; padding-bottom: 56px; }
main > .ecran.wrap { padding-top: 32px; }

h1, h2, .brand-texte, .bulletin .texte, .resultats .nom, .surtitre, .devise {
  font-family: var(--serif);
}
h1 { font-size: clamp(2rem, 5.5vw, 3.1rem); line-height: 1.08; margin: 0 0 18px; font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: 1.25rem; margin: 0 0 6px; font-weight: 700; }

.surtitre {
  margin: 0 0 10px; font-size: .95rem; font-style: italic; color: var(--encre-douce);
  display: flex; align-items: center; gap: 10px;
}
.surtitre::before { content: ""; width: 28px; height: 2px; background: var(--rouge); flex: none; }

/* Bandeau tricolore */
.tricolore { display: flex; height: 5px; }
.tricolore span { flex: 1; }
.tricolore span:nth-child(1) { background: var(--bleu); }
.tricolore span:nth-child(2) { background: var(--blanc); }
.tricolore span:nth-child(3) { background: var(--rouge); }

/* En-tête */
.site-header { background: var(--surface); border-bottom: 1px solid var(--bordure); }
.site-header .wrap { padding-block: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--encre); }
.brand-icone { width: 30px; height: 30px; color: var(--encre); flex: none; }
.brand-icone .fente { fill: var(--surface); }
.brand-icone .bulletin { fill: var(--surface); stroke: currentColor; stroke-width: 1.5; }
.brand-texte { font-size: 1.2rem; font-weight: 700; }
.brand-texte em { font-style: italic; font-weight: 400; color: var(--encre-douce); margin-left: 4px; }
.brand-mention { font-size: .8rem; color: var(--encre-douce); letter-spacing: .02em; }
@media (max-width: 560px) { .brand-mention { display: none; } }

.bandeau-demo { background: #fff3cd; color: #5a4300; font-size: .9rem; }
.bandeau-demo .wrap { padding-block: 8px; }
@media (prefers-color-scheme: dark) { .bandeau-demo { background: #3d3214; color: #f3dc9a; } }

/* Accueil */
.hero {
  background:
    radial-gradient(1200px 400px at 85% -10%, color-mix(in srgb, var(--bleu) 10%, transparent), transparent 70%),
    linear-gradient(var(--surface), var(--papier));
  border-bottom: 1px solid var(--bordure);
  margin-bottom: 28px;
}
.hero-grille { display: grid; grid-template-columns: 1fr 220px; gap: 24px; align-items: center; padding-block: 44px 36px; }
@media (max-width: 680px) {
  .hero-grille { grid-template-columns: 1fr; padding-block: 28px 24px; }
  .hero-urne { display: none; }
}
.intro { color: var(--encre-douce); font-size: 1.08rem; margin: 0 0 24px; max-width: 60ch; }

.hero-urne { width: 100%; height: auto; }
.hero-urne .papier { fill: var(--surface); stroke: var(--encre); stroke-width: 2; }
.hero-urne .ligne { fill: var(--encre); }
.hero-urne .ligne.pale { fill: var(--encre-pale); }
.hero-urne .coche-rond { fill: none; stroke: var(--encre); stroke-width: 2; }
.hero-urne .coche { fill: none; stroke: var(--encre); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.hero-urne .urne-corps { fill: var(--encre); }
.hero-urne .urne-couvercle { fill: color-mix(in srgb, var(--encre) 80%, var(--surface)); }
.hero-urne .urne-fente { fill: var(--papier); }
.hero-urne .urne-vitre { fill: color-mix(in srgb, var(--surface) 14%, transparent); stroke: color-mix(in srgb, var(--surface) 35%, transparent); }
.hero-urne .urne-texte { fill: var(--surface); font: 700 18px var(--serif); letter-spacing: .35em; }
.urne-bulletin { animation: glisse 3.2s ease-in-out infinite; }
@keyframes glisse {
  0%, 15% { transform: translateY(-6px); opacity: 1; }
  55% { transform: translateY(46px); opacity: 1; }
  70% { transform: translateY(46px); opacity: 0; }
  71% { transform: translateY(-6px); opacity: 0; }
  100% { transform: translateY(-6px); opacity: 1; }
}

.chiffres { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.chiffres li {
  flex: 1 1 120px; background: var(--surface); border: 1px solid var(--bordure);
  border-radius: var(--rayon); padding: 10px 14px; color: var(--encre-douce); font-size: .88rem;
}
.chiffres strong { display: block; font: 700 1.7rem/1.1 var(--serif); color: var(--encre); }
.note-donnees { margin: 14px 0 0; color: var(--encre-douce); font-size: .88rem; line-height: 1.5; }
.note-donnees strong { color: var(--encre); font-weight: 600; }

.etapes { list-style: none; counter-reset: etape; padding: 0; margin: 0 0 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 680px) { .etapes { grid-template-columns: 1fr; } }
.etapes li { counter-increment: etape; position: relative; padding: 14px 14px 14px 52px; font-size: .95rem; color: var(--encre-douce); }
.etapes li strong { color: var(--encre); display: block; }
.etapes li::before {
  content: counter(etape); position: absolute; left: 10px; top: 14px; width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid var(--encre); color: var(--encre); font: 700 1rem/26px var(--serif); text-align: center;
}

.carte {
  background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon);
  padding: 20px; margin: 0 0 18px; box-shadow: var(--ombre);
}
.aide { color: var(--encre-douce); font-size: .9rem; margin: 0 0 12px; }
details.carte summary { cursor: pointer; font-weight: 600; }
details.carte[open] summary { margin-bottom: 10px; }
details.carte ul { margin: 0; padding-left: 20px; }
details.carte li { margin: 4px 0; }

.pastilles { display: flex; flex-wrap: wrap; gap: 8px; }
.pastilles label {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none;
  border: 1px solid var(--bordure); border-radius: 999px; padding: 6px 14px; font-size: .95rem;
  background: var(--papier); transition: background .15s, border-color .15s, color .15s;
}
.pastilles input { accent-color: var(--encre); margin: 0; }
.pastilles label:has(input:checked) { border-color: var(--encre); background: var(--surface); }
.pastilles label:has(input:not(:checked)) { color: var(--encre-douce); }
.pastilles small { color: var(--encre-douce); }

.btn {
  font: inherit; cursor: pointer; border-radius: 8px; padding: 12px 24px;
  border: 1px solid transparent; transition: transform .05s, background .15s, box-shadow .15s;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-principal {
  background: var(--encre); color: var(--accent-texte); font-weight: 600; margin-bottom: 20px;
  font-size: 1.05rem; padding: 14px 30px; box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--encre) 60%, transparent);
}
.btn-principal:not(:disabled):hover { box-shadow: 0 8px 22px -6px color-mix(in srgb, var(--encre) 70%, transparent); }
.btn-secondaire { background: var(--surface); color: var(--encre); border-color: var(--bordure); }
.btn-lien { background: none; color: var(--encre-douce); text-decoration: underline; padding-inline: 8px; }

/* Questionnaire */
.entete-question { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.theme-puce { margin: 0; font: italic 700 1.1rem var(--serif); display: flex; align-items: center; gap: 10px; }
.theme-puce::before { content: ""; width: 22px; height: 2px; background: var(--rouge); }
.compteur { margin: 0; color: var(--encre-douce); font-size: .88rem; font-variant-numeric: tabular-nums; }
.progression { height: 4px; background: var(--papier-fonce); border-radius: 2px; overflow: hidden; margin-bottom: 26px; }
#barre-progression { height: 100%; width: 0; background: var(--encre); transition: width .25s; }

.bulletin {
  position: relative; background: var(--surface); border: 1px solid var(--bordure);
  border-radius: 3px; padding: 22px 30px 18px; margin: 0 auto 26px; max-width: 640px;
  box-shadow: var(--ombre-bulletin);
  background-image: linear-gradient(to bottom, transparent 0, transparent calc(100% - 1px), var(--bordure) 0);
}
.bulletin::before {
  /* coin plié */
  content: ""; position: absolute; top: -1px; right: -1px; width: 26px; height: 26px;
  background: linear-gradient(225deg, var(--papier) 50%, var(--papier-fonce) 50%);
  border-bottom-left-radius: 3px; box-shadow: -1px 1px 2px rgba(31, 42, 77, .12);
}
.bulletin-entete, .bulletin-pied {
  display: flex; justify-content: space-between; margin: 0; font-size: .72rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--encre-douce);
}
.bulletin-entete { border-bottom: 1px dashed var(--bordure); padding-bottom: 10px; padding-right: 22px; }
.bulletin-entete { gap: 10px; }
.bulletin-entete #numero-bulletin { white-space: nowrap; }
.bulletin-entete .mention-mobile { display: none; }
.bulletin-pied { justify-content: center; border-top: 1px dashed var(--bordure); padding-top: 10px; }
.bulletin .texte {
  margin: 0; padding: 28px 0; min-height: 150px; display: flex; align-items: center; justify-content: center;
  text-align: center; font-size: clamp(1.25rem, 3.2vw, 1.6rem); line-height: 1.4; text-wrap: balance;
}
.bulletin.entree { animation: entree .35s ease-out; }
@keyframes entree { from { opacity: 0; transform: translateY(14px) rotate(-.6deg); } to { opacity: 1; transform: none; } }

.echelle { border: 0; padding: 0; margin: 0 0 22px; display: grid; gap: 8px; min-width: 0; }
.echelle legend { font: 700 1.05rem var(--serif); margin-bottom: 10px; padding: 0; }
.echelle button {
  font: inherit; text-align: left; cursor: pointer; display: flex; align-items: center; gap: 12px;
  background: var(--surface); color: var(--encre); border: 1px solid var(--bordure);
  border-radius: 8px; padding: 11px 16px; transition: border-color .15s, background .15s, transform .1s;
}
.echelle button:hover { border-color: var(--encre); }
.echelle button[aria-pressed="true"] { border-color: var(--encre); box-shadow: inset 0 0 0 1px var(--encre); background: var(--papier); font-weight: 600; }
.echelle .pastille {
  --taille: calc(10px + var(--force) * 5px);
  flex: none; width: var(--taille); height: var(--taille); border-radius: 50%;
  margin-inline: calc((25px - var(--taille)) / 2);
}
.echelle .accord .pastille { background: var(--encre); }
.echelle .desaccord .pastille {
  border: 2px solid var(--encre);
  background: repeating-linear-gradient(45deg, var(--encre) 0 1.5px, transparent 1.5px 4px);
}
.echelle .neutre .pastille { border: 2px solid var(--encre-douce); background: transparent; }

/*
 * Téléphone : tout l'écran de question doit tenir sans défiler.
 * Échelle en miroir sur 2 colonnes (désaccord à gauche, accord à droite,
 * intensité décroissante vers le bas, « Neutre » sur toute la largeur).
 */
@media (max-width: 719px) {
  main > #ecran-questions.wrap { padding-top: 12px; }
  .site-header .wrap { padding-block: 8px; }
  .brand-icone { width: 24px; height: 24px; }
  .brand-texte { font-size: 1.05rem; }

  .entete-question { margin-bottom: 6px; gap: 2px 10px; }
  .theme-puce { font-size: .98rem; }
  .theme-puce::before { width: 14px; }
  .compteur { font-size: .78rem; }
  .progression { margin-bottom: 12px; }

  .bulletin { padding: 10px 16px 8px; margin-bottom: 12px; }
  .bulletin::before { width: 18px; height: 18px; }
  .bulletin-entete { padding-bottom: 6px; font-size: .66rem; }
  .bulletin-pied { display: none; }
  .bulletin-entete .mention-mobile { display: inline; }
  .bulletin .texte { padding: 12px 0 6px; min-height: 92px; font-size: clamp(1.05rem, 4.6vw, 1.25rem); line-height: 1.35; }
  .bulletin.long .texte { font-size: clamp(.95rem, 4vw, 1.08rem); line-height: 1.3; }

  .echelle { grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 12px; }
  /* légende masquée visuellement mais lue par les lecteurs d'écran */
  .echelle legend {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .echelle button { padding: 9px 10px; gap: 8px; font-size: .88rem; line-height: 1.2; min-height: 44px; }
  .echelle .pastille { --taille: calc(8px + var(--force) * 4px); margin-inline: calc((20px - var(--taille)) / 2); }
  /* boutons dans l'ordre −3 … +3 */
  .echelle button:nth-of-type(1) { grid-area: 1 / 1; }
  .echelle button:nth-of-type(2) { grid-area: 2 / 1; }
  .echelle button:nth-of-type(3) { grid-area: 3 / 1; }
  .echelle button:nth-of-type(4) { grid-area: 4 / 1 / 5 / 3; justify-content: center; }
  .echelle button:nth-of-type(5) { grid-area: 3 / 2; }
  .echelle button:nth-of-type(6) { grid-area: 2 / 2; }
  .echelle button:nth-of-type(7) { grid-area: 1 / 2; }
  .echelle button.accord { flex-direction: row-reverse; text-align: right; }

  #ecran-questions .navigation { flex-wrap: nowrap; }
  #ecran-questions .btn { padding: 8px 14px; font-size: .9rem; }
  #ecran-questions .btn-lien { padding-inline: 4px; }
}

@media (min-width: 720px) {
  .echelle { grid-template-columns: repeat(7, 1fr); gap: 6px; }
  .echelle legend { grid-column: 1 / -1; text-align: center; }
  .echelle button {
    flex-direction: column; text-align: center; justify-content: flex-start;
    padding: 14px 6px; font-size: .84rem; line-height: 1.25; gap: 10px;
  }
  .echelle button:hover { transform: translateY(-2px); }
  .echelle .pastille { margin: calc((25px - var(--taille)) / 2) 0; }
}

.navigation { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; }
.raccourcis { margin-top: 20px; text-align: center; }
@media (hover: none) { .raccourcis { display: none; } }

/* Résultats */
/* Onglets de l'écran résultats */
.onglets { display: flex; gap: 4px; border-bottom: 1px solid var(--bordure); margin: 0 0 20px; }
.onglet {
  flex: 0 1 auto; font: inherit; font-weight: 600; font-size: .95rem; cursor: pointer;
  background: none; color: var(--encre-douce); border: 0; border-bottom: 3px solid transparent;
  padding: 10px 16px 9px; margin-bottom: -1px;
}
.onglet:hover { color: var(--encre); }
.onglet[aria-selected="true"] { color: var(--encre); border-bottom-color: var(--rouge); }
@media (max-width: 560px) {
  .onglets { gap: 0; }
  .onglet { flex: 1 1 0; padding-inline: 4px; font-size: .9rem; }
}
.panneau { margin-bottom: 24px; }
.methode h2 { margin-top: 0; font-size: 1.15rem; }

.tri { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; color: var(--encre-douce); font-size: .95rem; }
.btn-tri {
  font: inherit; font-size: .9rem; cursor: pointer; border-radius: 999px; padding: 5px 14px;
  background: var(--surface); color: var(--encre); border: 1px solid var(--bordure);
}
.btn-tri.actif { background: var(--encre); color: var(--accent-texte); border-color: var(--encre); }

.resultats { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 10px; }
.resultats li {
  background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon);
  padding: 14px 18px; display: grid; grid-template-columns: 2.6rem 1fr auto; gap: 4px 14px; align-items: center;
}
.resultats li.podium { border-color: var(--encre); box-shadow: var(--ombre); }
.resultats .rang { font: 700 1.25rem var(--serif); color: var(--encre-douce); text-align: center; }
.resultats .podium .rang {
  color: var(--accent-texte); background: var(--encre); border-radius: 50%; width: 2.3rem; height: 2.3rem;
  line-height: 2.3rem; font-size: 1.05rem;
}
.resultats .nom { font-weight: 700; font-size: 1.12rem; }
.resultats .nom small { display: block; font: 400 .85rem var(--sans); color: var(--encre-douce); }
.resultats .valeurs { text-align: right; font-variant-numeric: tabular-nums; }
.resultats .valeurs strong { font: 700 1.35rem var(--serif); display: block; }
.resultats .valeurs small { color: var(--encre-douce); font-size: .82rem; }
.resultats .jauge { grid-column: 2 / -1; height: 10px; position: relative; background: var(--papier-fonce); border-radius: 5px; }
.resultats .jauge::before { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--encre-douce); }
.resultats .jauge span { position: absolute; top: 0; bottom: 0; border-radius: 5px; background: var(--encre); }
.resultats .jauge span.negatif {
  background: repeating-linear-gradient(45deg, var(--encre) 0 2px, transparent 2px 5px);
  box-shadow: inset 0 0 0 1.5px var(--encre);
}
.resultats .details-theme { grid-column: 2 / -1; font-size: .85rem; color: var(--encre-douce); }
.resultats .details-theme summary { cursor: pointer; }
.resultats .details-theme table { width: 100%; border-collapse: collapse; margin-top: 6px; }
.resultats .details-theme td { padding: 3px 0; border-bottom: 1px solid var(--bordure); }
.resultats .details-theme td:last-child { text-align: right; font-variant-numeric: tabular-nums; color: var(--encre); }

.methode p { margin: 0 0 10px; color: var(--encre-douce); font-size: .95rem; }

/* Mes réponses : un bloc repliable par thème, une fiche encadrée par réponse */
.theme-reponses { padding: 0; margin-bottom: 12px; }
.theme-reponses summary {
  display: flex; align-items: center; gap: 12px; padding: 14px 18px; list-style: none;
}
.theme-reponses summary::-webkit-details-marker { display: none; }
.theme-reponses summary::before {
  content: ""; flex: none; width: 8px; height: 8px; border-right: 2px solid var(--encre); border-bottom: 2px solid var(--encre);
  transform: rotate(-45deg); transition: transform .15s;
}
.theme-reponses[open] summary::before { transform: rotate(45deg); }
details.theme-reponses[open] summary { margin-bottom: 0; border-bottom: 1px solid var(--bordure); }
.theme-reponses .theme-nom { flex: 1; font: italic 700 1.05rem var(--serif); }
.theme-reponses .theme-compte { color: var(--encre-douce); font-size: .85rem; font-weight: 400; font-variant-numeric: tabular-nums; }

.liste-reponses { list-style: none; margin: 0; padding: 14px; display: grid; gap: 10px; }
.liste-reponses li {
  background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 12px 16px;
}
.reponse-texte { margin: 0 0 10px; overflow-wrap: anywhere; }
.reponse-pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; }
.reponse-candidats { margin: 0; font-size: .85rem; color: var(--encre-douce); overflow-wrap: anywhere; }
.reponse-candidats strong { color: var(--encre); font-weight: 600; }
.reponse-valeur {
  font-size: .85rem; font-weight: 600; border-radius: 999px; padding: 3px 12px; border: 1px solid var(--encre);
}
.reponse-valeur.positif { background: var(--encre); color: var(--accent-texte); }
.reponse-valeur.negatif { color: var(--encre); background: repeating-linear-gradient(45deg, var(--papier-fonce) 0 3px, transparent 3px 7px); }
.reponse-valeur.neutre { color: var(--encre-douce); border-color: var(--bordure); }
.reponse-valeur.vide { color: var(--encre-douce); border-style: dashed; border-color: var(--bordure); font-weight: 400; }

/* Pied de page */
.site-footer { border-top: 1px solid var(--bordure); background: var(--surface); color: var(--encre-douce); font-size: .85rem; }
.site-footer .wrap { padding-block: 22px; }
.site-footer p { margin: 4px 0; }
.devise { font-style: italic; font-size: 1rem; color: var(--encre); letter-spacing: .04em; }

/* Page de texte (mentions légales) */
.page-texte .carte p { margin: 0 0 10px; }
.page-texte .carte p:last-child { margin-bottom: 0; }
.page-texte .carte ul { margin: 0 0 10px; padding-left: 20px; }
.page-texte .carte li { margin: 4px 0; }
.page-texte a.btn-principal { display: inline-block; text-decoration: none; margin-top: 8px; }
.a-completer { background: #fff3cd; color: #5a4300; padding: 0 4px; border-radius: 3px; }
@media (prefers-color-scheme: dark) { .a-completer { background: #3d3214; color: #f3dc9a; } }
.site-footer a { color: var(--encre-douce); }

/* Soutien */
.soutien {
  display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap;
  border-left: 4px solid var(--encre); margin-top: 8px;
}
.soutien > div { flex: 1 1 320px; }
.soutien p { margin: 0; color: var(--encre-douce); font-size: .95rem; }
.soutien .btn { text-decoration: none; white-space: nowrap; }
.page-texte .usages li { margin: 8px 0; }
.soutien-action .btn-principal { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Accueil : thèmes à parcourir, repliés par défaut */
.choix-themes summary { display: flex; align-items: center; gap: 12px; list-style: none; }
.choix-themes summary::-webkit-details-marker { display: none; }
.choix-themes summary::before {
  content: ""; flex: none; width: 8px; height: 8px; border-right: 2px solid var(--encre); border-bottom: 2px solid var(--encre);
  transform: rotate(-45deg); transition: transform .15s;
}
.choix-themes[open] summary::before { transform: rotate(45deg); }
.choix-themes summary h2 { margin: 0; flex: 1; }
.choix-themes .theme-compte { color: var(--encre-douce); font-size: .9rem; font-weight: 400; }

/* Sigles : soulignés en pointillés, définition dans une bulle au clic ou au toucher */
.sigle {
  font: inherit; color: inherit; letter-spacing: inherit; line-height: inherit;
  background: none; border: 0; border-radius: 2px; padding: 0; margin: 0;
  cursor: help; text-decoration: underline dotted; text-decoration-thickness: 1px; text-underline-offset: .18em;
}
.sigle:hover, .sigle[aria-expanded="true"] { text-decoration-style: solid; background: var(--papier-fonce); }
.bulle-sigle {
  position: absolute; z-index: 50; width: max-content; max-width: min(320px, calc(100vw - 32px));
  padding: 10px 14px; border-radius: 8px; background: var(--encre); color: var(--surface);
  font: .9rem/1.45 var(--sans); text-align: left; box-shadow: 0 8px 24px -6px rgba(0, 0, 0, .35);
}
.bulle-sigle strong { display: block; margin-bottom: 2px; }

/* Garder ses résultats (PDF via l'impression du navigateur) */
.actions-resultats { margin-bottom: 16px; padding-block: 14px; }
.actions-boutons { display: flex; flex-wrap: wrap; gap: 10px; }
.actions-boutons .btn { flex: 1 1 auto; margin: 0; text-align: center; text-decoration: none; font-size: 1rem; padding: 11px 18px; }
.actions-resultats .aide { margin: 10px 0 0; font-size: .85rem; }
@media (max-width: 560px) {
  .actions-boutons { gap: 6px; flex-wrap: nowrap; }
  .actions-boutons .btn { flex: 1 1 0; padding: 10px 4px; font-size: .85rem; line-height: 1.25; }
}
@media print { .actions-resultats { display: none !important; } }
.imprime-seul { display: none; }

@media print {
  /* Toujours en clair, même si l'appareil est en mode sombre */
  :root {
    --papier: #ffffff; --papier-fonce: #ece5d6; --surface: #ffffff; --encre: #1f2a4d; --encre-douce: #4a5068;
    --encre-pale: #c9c6bb; --bordure: #cfc7b6; --accent-texte: #ffffff; --ombre: none; --ombre-bulletin: none;
    color-scheme: light;
  }
  @page { margin: 14mm 12mm; }
  body { background: #fff; font-size: 11pt; min-height: 0; display: block; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  .tricolore, .brand-mention, .onglets, .tri, .soutien, .navigation, .site-footer, .bulle-sigle,
  .theme-reponses summary::before, #panneau-reponses > .aide { display: none !important; }
  .site-header { border: 0; }
  .site-header .wrap, .wrap { max-width: none; padding-inline: 0; }
  main { padding-bottom: 0; }
  main > .ecran.wrap { padding-top: 8px; }

  .imprime-seul { display: block; }
  .mention-impression { color: var(--encre-douce); font-size: 9pt; margin: 0 0 12px; }
  #ecran-resultats .panneau[hidden] { display: block !important; }
  .panneau { margin-bottom: 18px; }
  .panneau > h2.imprime-seul { font-size: 14pt; margin: 18px 0 10px; break-after: avoid; }
  .methode { break-before: page; }

  .carte, .resultats li, .liste-reponses li { box-shadow: none !important; }
  .resultats li, .liste-reponses li { break-inside: avoid; }
  .resultats { gap: 6px; }
  .resultats li { padding: 8px 14px; gap: 2px 12px; }
  .resultats .details-theme { display: none; }
  .theme-reponses { border: 0; padding: 0; background: none; }
  .theme-reponses summary { padding: 8px 0 4px; border-bottom: 1px solid var(--bordure); break-after: avoid; }
  .liste-reponses { padding: 8px 0; }
  .sigle { text-decoration: none; cursor: auto; }
  .reponse-candidats a { color: var(--encre); }
}

/* Résultats : avertissement avant le classement */
.avertissement { border-left: 4px solid var(--rouge); margin-bottom: 22px; }
.avertissement h2 { margin: 0 0 8px; font-size: 1.1rem; }
.avertissement p { margin: 0 0 8px; color: var(--encre-douce); font-size: .95rem; }
.avertissement p:last-child { margin-bottom: 0; }
.avertissement strong { color: var(--encre); }
@media print { .avertissement { break-inside: avoid; font-size: 10pt; } }
@media print {
  .candidats-programmes { break-before: page; }
  .candidats-programmes h2 { font-size: 14pt; margin: 0 0 4px; }
  .candidats-programmes ul { list-style: none; padding: 0; margin: 10px 0 0; }
  .candidats-programmes li { margin: 0 0 8px; break-inside: avoid; font-size: 10pt; }
  .candidats-programmes a { color: var(--encre); overflow-wrap: anywhere; font-size: 9pt; }
}
/* Avertissement repliable : seul le titre est visible par défaut */
.avertissement summary { display: flex; align-items: center; gap: 12px; list-style: none; }
.avertissement summary::-webkit-details-marker { display: none; }
.avertissement summary::before {
  content: ""; flex: none; width: 8px; height: 8px; border-right: 2px solid var(--encre); border-bottom: 2px solid var(--encre);
  transform: rotate(-45deg); transition: transform .15s;
}
.avertissement[open] summary::before { transform: rotate(45deg); }
.avertissement summary h2 { margin: 0; flex: 1; }
details.avertissement[open] summary { margin-bottom: 10px; }
@media print { .avertissement summary::before { display: none; } }