.qc2027-root {
	max-width: 640px;
	margin: 0 auto;
	font-family: inherit;
}

.qc2027-progress {
	background: #e5e5e5;
	border-radius: 4px;
	height: 6px;
	margin-bottom: 16px;
	overflow: hidden;
}

.qc2027-progress-bar {
	background: #1a1a1a;
	height: 100%;
	transition: width .3s ease;
}

.qc2027-theme {
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: .05em;
	color: #666;
	margin-bottom: 4px;
}

.qc2027-question {
	font-size: 20px;
	margin: 0 0 20px;
}

.qc2027-echelle {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Les regles de bouton du theme masquent souvent le libelle (texte blanc
   sur fond blanc). On force donc couleur, fond et typographie. */
.qc2027-root .qc2027-opt {
	display: block;
	width: 100%;
	padding: 14px 18px;
	border: 1px solid #ccc;
	border-radius: 6px;
	background: #fff !important;
	color: #1a1a1a !important;
	cursor: pointer;
	text-align: left;
	font-size: 15px;
	line-height: 1.4;
	font-family: inherit;
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none;
	transition: background .15s ease, border-color .15s ease;
}

.qc2027-root .qc2027-opt:hover,
.qc2027-root .qc2027-opt:focus {
	border-color: #1a1a1a;
	background: #f5f5f5 !important;
	color: #1a1a1a !important;
}

.qc2027-skip {
	margin-top: 12px;
	background: none;
	border: none;
	color: #666;
	text-decoration: underline;
	cursor: pointer;
	font-size: 13px;
}

.qc2027-resultats {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.qc2027-resultat-ligne {
	display: grid;
	grid-template-columns: 140px 1fr 50px;
	align-items: center;
	gap: 10px;
}

.qc2027-barre {
	background: #eee;
	border-radius: 4px;
	height: 10px;
	overflow: hidden;
}

.qc2027-barre-remplie {
	background: #1a1a1a;
	height: 100%;
}

.qc2027-compteur {
	font-size: 12px;
	color: #888;
	margin-bottom: 8px;
}

.qc2027-root .qc2027-opt-active {
	border-color: #1a1a1a;
	border-width: 2px;
	background: #f0f0f0 !important;
	font-weight: 600;
}

.qc2027-root .qc2027-importance {
	margin-top: 18px;
	font-size: 14px;
	color: #444;
	display: flex;
	align-items: center;
	gap: 9px;
	cursor: pointer;
	user-select: none;
}

.qc2027-root .qc2027-importance input[type="checkbox"] {
	width: 17px;
	height: 17px;
	margin: 0;
	flex: 0 0 auto;
	cursor: pointer;
}

.qc2027-nav {
	margin-top: 14px;
	display: flex;
	gap: 16px;
	align-items: center;
}

.qc2027-back {
	background: none;
	border: none;
	color: #666;
	cursor: pointer;
	font-size: 13px;
}

.qc2027-parti {
	color: #777;
	font-weight: normal;
}

.qc2027-couverture {
	font-size: 12px;
	color: #888;
	margin: -4px 0 10px;
}

.qc2027-insuffisants {
	margin-top: 28px;
	padding: 14px 16px;
	background: #f7f7f7;
	border-left: 3px solid #bbb;
	border-radius: 4px;
	font-size: 14px;
}

.qc2027-insuffisants h4 {
	margin: 0 0 8px;
}

.qc2027-mentions {
	margin-top: 24px;
	padding-top: 16px;
	border-top: 1px solid #e5e5e5;
	font-size: 13px;
	color: #555;
}

.qc2027-restart {
	margin-top: 18px;
	padding: 10px 18px;
	border: 1px solid #1a1a1a;
	background: #fff;
	border-radius: 6px;
	cursor: pointer;
}


/* Boutons secondaires : meme protection contre les styles du theme. */
.qc2027-root .qc2027-skip,
.qc2027-root .qc2027-back {
	background: none !important;
	border: none;
	color: #666 !important;
	cursor: pointer;
	font-size: 13px;
	font-family: inherit;
	text-transform: none;
	padding: 4px 0;
	box-shadow: none;
}

.qc2027-root .qc2027-skip {
	text-decoration: underline;
}

.qc2027-root .qc2027-restart {
	background: #fff !important;
	color: #1a1a1a !important;
	font-family: inherit;
	text-transform: none;
}

/* ---------------------------------------------------------------
   Echelle de reponses : degrade teal (accord) / ambre (desaccord).
   La teinte est un signal secondaire : le libelle et la position
   dans la liste restent les porteurs d'information principaux,
   pour rester lisible en cas de daltonisme ou d'impression N&B.
   --------------------------------------------------------------- */
.qc2027-root .qc2027-opt.qc2027-vp2:hover { background: #E1F5EE !important; border-color: #1D9E75; }
.qc2027-root .qc2027-opt.qc2027-vp1:hover { background: #F0FAF6 !important; border-color: #5DCAA5; }
.qc2027-root .qc2027-opt.qc2027-vp0:hover { background: #F1EFE8 !important; border-color: #888780; }
.qc2027-root .qc2027-opt.qc2027-vm1:hover { background: #FDF7EC !important; border-color: #EF9F27; }
.qc2027-root .qc2027-opt.qc2027-vm2:hover { background: #FAEEDA !important; border-color: #BA7517; }

.qc2027-root .qc2027-opt.qc2027-vp2.qc2027-opt-active { background: #E1F5EE !important; border-color: #0F6E56; }
.qc2027-root .qc2027-opt.qc2027-vp1.qc2027-opt-active { background: #F0FAF6 !important; border-color: #1D9E75; }
.qc2027-root .qc2027-opt.qc2027-vp0.qc2027-opt-active { background: #F1EFE8 !important; border-color: #5F5E5A; }
.qc2027-root .qc2027-opt.qc2027-vm1.qc2027-opt-active { background: #FDF7EC !important; border-color: #BA7517; }
.qc2027-root .qc2027-opt.qc2027-vm2.qc2027-opt-active { background: #FAEEDA !important; border-color: #854F0B; }

.qc2027-root .qc2027-opt:focus-visible {
	outline: 2px solid #185FA5;
	outline-offset: 2px;
}

/* --- Resultats : liste complete avec vignettes et barres --- */
.qc2027-resultats-entete {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 4px;
}

.qc2027-root .qc2027-pdf {
	padding: 8px 14px;
	border: 1px solid #1a1a1a;
	border-radius: 6px;
	background: #fff !important;
	color: #1a1a1a !important;
	cursor: pointer;
	font-size: 13px;
	font-family: inherit;
	text-transform: none;
}

.qc2027-avert {
	background: #FAEEDA;
	border-left: 3px solid #BA7517;
	padding: 10px 14px;
	font-size: 14px;
	color: #412402;
}

.qc2027-ligne {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 12px 0;
	border-bottom: 1px solid #eee;
}

.qc2027-ligne-indicatif { opacity: 0.62; }

.qc2027-avatar {
	width: 46px;
	height: 46px;
	flex: 0 0 46px;
	border-radius: 50%;
	overflow: hidden;
	background: #F1EFE8;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 600;
	color: #5F5E5A;
}

.qc2027-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.qc2027-infos { flex: 1 1 auto; min-width: 0; }

.qc2027-nom-ligne {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
}

.qc2027-nom-ligne .qc2027-candidat-nom { font-weight: 600; }
.qc2027-nom-ligne .qc2027-pourcentage { font-weight: 600; white-space: nowrap; }

.qc2027-infos .qc2027-parti {
	font-size: 13px;
	color: #777;
	margin-bottom: 6px;
}

.qc2027-infos .qc2027-barre {
	background: #eee;
	border-radius: 4px;
	height: 9px;
	overflow: hidden;
	margin-bottom: 5px;
}

.qc2027-infos .qc2027-barre-remplie {
	background: #1D9E75;
	height: 100%;
}

.qc2027-ligne-indicatif .qc2027-barre-remplie {
	background: repeating-linear-gradient(45deg, #B4B2A9, #B4B2A9 4px, #D3D1C7 4px, #D3D1C7 8px);
}

/* --- Impression / export PDF via le navigateur --- */
@media print {
	body * { visibility: hidden !important; }
	.qc2027-root, .qc2027-root * { visibility: visible !important; }
	.qc2027-root {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		max-width: none;
	}
	.qc2027-print-hide { display: none !important; }
	.qc2027-ligne { break-inside: avoid; page-break-inside: avoid; }
	.qc2027-ligne-indicatif { opacity: 1; color: #555; }
	.qc2027-infos .qc2027-barre-remplie,
	.qc2027-ligne-indicatif .qc2027-barre-remplie {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
}

/* --- Ecran d'accueil --- */
.qc2027-intro h2 {
	margin: 0 0 12px;
	font-size: 22px;
	line-height: 1.3;
}

.qc2027-intro-lead {
	font-size: 16px;
	color: #444;
	margin: 0 0 20px;
}

.qc2027-intro-faits {
	list-style: none;
	margin: 0 0 20px;
	padding: 16px 18px;
	background: #F7F7F5;
	border-radius: 8px;
	font-size: 14px;
	line-height: 1.6;
}

.qc2027-intro-faits li {
	margin: 0 0 8px;
	padding-left: 18px;
	position: relative;
}

.qc2027-intro-faits li:last-child { margin-bottom: 0; }

.qc2027-intro-faits li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 9px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #1D9E75;
}

.qc2027-intro-note {
	font-size: 13px;
	color: #666;
	margin: 0 0 14px;
}

.qc2027-root .qc2027-start {
	padding: 13px 26px;
	border: 1px solid #1a1a1a;
	border-radius: 6px;
	background: #1a1a1a !important;
	color: #fff !important;
	cursor: pointer;
	font-size: 15px;
	font-family: inherit;
	text-transform: none;
}

.qc2027-root .qc2027-start:hover { background: #333 !important; }

.qc2027-methodo-lien {
	font-size: 13px;
	margin-left: 14px;
	color: #666;
}

/* ===============================================================
   Couleur
   La couleur porte de l'information, elle ne decore pas :
   pastilles de theme (reperage), accent unique (progression et
   actions), mise en avant du meilleur score. Aucune couleur de
   parti n'est utilisee : ce serait une prise de position visuelle.
   =============================================================== */

.qc2027-root {
	--qc-accent: #0F6E56;
	--qc-accent-clair: #E1F5EE;
	--qc-encre: #1F2933;
	--qc-doux: #667380;
	--qc-bord: #E3E5E8;
	--qc-fond: #F7F9F9;
	color: var(--qc-encre);
}

/* Progression en couleur d'accent, plus lisible que le noir */
.qc2027-root .qc2027-progress {
	background: var(--qc-bord);
	height: 5px;
	border-radius: 3px;
}

.qc2027-root .qc2027-progress-bar { background: var(--qc-accent); }

/* La question est posee dans une carte, pas sur fond nu */
.qc2027-carte {
	background: var(--qc-fond);
	border: 1px solid var(--qc-bord);
	border-radius: 12px;
	padding: 20px 22px 22px;
	margin-bottom: 18px;
}

.qc2027-root .qc2027-compteur {
	font-size: 12px;
	color: var(--qc-doux);
	letter-spacing: .02em;
	margin-bottom: 12px;
}

.qc2027-themes {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 12px;
}

.qc2027-theme-pastille {
	display: inline-block;
	padding: 4px 11px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
}

.qc2027-root .qc2027-question {
	font-size: 20px;
	line-height: 1.4;
	margin: 0;
	color: var(--qc-encre);
}

.qc2027-root .qc2027-opt { border-color: var(--qc-bord); }

/* Mise en avant du meilleur score */
.qc2027-ligne-premier {
	background: var(--qc-accent-clair);
	border-radius: 10px;
	padding: 14px 16px;
	border-bottom: none;
	margin-bottom: 4px;
}

.qc2027-badge {
	display: inline-block;
	margin-left: 8px;
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--qc-accent);
	color: #fff;
	font-size: 11px;
	font-weight: 500;
	vertical-align: middle;
	white-space: nowrap;
}

.qc2027-ligne-premier .qc2027-barre { background: #fff; }
.qc2027-ligne-premier .qc2027-barre-remplie { background: var(--qc-accent); }

.qc2027-root .qc2027-barre-remplie { background: #5DCAA5; }

.qc2027-root .qc2027-start {
	background: var(--qc-accent) !important;
	border-color: var(--qc-accent);
}

.qc2027-root .qc2027-start:hover { background: #0B5643 !important; }

.qc2027-root .qc2027-pdf {
	border-color: var(--qc-accent);
	color: var(--qc-accent) !important;
}

.qc2027-root .qc2027-pdf:hover { background: var(--qc-accent-clair) !important; }

.qc2027-intro-faits { background: var(--qc-fond); border: 1px solid var(--qc-bord); }
.qc2027-intro-faits li::before { background: var(--qc-accent); }
.qc2027-methodo-lien { color: var(--qc-accent); }

.qc2027-ligne { border-bottom-color: var(--qc-bord); }
.qc2027-infos .qc2027-parti { color: var(--qc-doux); }
.qc2027-root .qc2027-couverture { color: var(--qc-doux); }

@media print {
	.qc2027-carte, .qc2027-ligne-premier { background: #fff !important; }
	.qc2027-badge { border: 1px solid #999; }
}

@media (max-width: 600px) {
	.qc2027-carte { padding: 16px; }
	.qc2027-root .qc2027-question { font-size: 18px; }
	.qc2027-badge { display: block; margin: 4px 0 0; width: fit-content; }
}

/* ===============================================================
   Accessibilite
   =============================================================== */

/* Texte reserve aux lecteurs d'ecran */
.qc2027-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Anneau de focus visible sur tous les elements interactifs */
.qc2027-root button:focus-visible,
.qc2027-root a:focus-visible,
.qc2027-root input:focus-visible,
.qc2027-root [tabindex]:focus-visible {
	outline: 3px solid #185FA5;
	outline-offset: 2px;
	border-radius: 4px;
}

/* Le titre recoit le focus par programme : pas d'anneau dans ce cas,
   l'annonce du lecteur d'ecran suffit et l'anneau desorienterait
   l'utilisateur a la souris. */
.qc2027-root h2:focus:not(:focus-visible),
.qc2027-root h3:focus:not(:focus-visible) { outline: none; }

/* Numero de raccourci clavier devant chaque reponse */
.qc2027-touche {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	margin-right: 10px;
	border: 1px solid var(--qc-bord);
	border-radius: 5px;
	background: #fff;
	font-size: 12px;
	color: var(--qc-doux);
	flex: 0 0 22px;
}

.qc2027-root .qc2027-opt {
	display: flex;
	align-items: center;
}

.qc2027-opt-active .qc2027-touche {
	border-color: currentColor;
	color: inherit;
}

.qc2027-aide-clavier {
	font-size: 13px;
	color: var(--qc-doux);
	margin: 12px 0 0;
}

/* Contraste : 12px gris clair etait sous le seuil lisible */
.qc2027-root .qc2027-couverture {
	font-size: 13px;
	color: #5A6672;
}

.qc2027-root .qc2027-skip,
.qc2027-root .qc2027-back {
	color: #5A6672 !important;
	font-size: 14px;
	min-height: 44px;
}

/* Cibles tactiles d'au moins 44px */
.qc2027-root .qc2027-opt { min-height: 48px; }
.qc2027-root .qc2027-start,
.qc2027-root .qc2027-pdf,
.qc2027-root .qc2027-restart { min-height: 44px; }

.qc2027-root .qc2027-importance { min-height: 44px; }

/* Respect de la preference systeme pour les animations reduites */
@media (prefers-reduced-motion: reduce) {
	.qc2027-root *,
	.qc2027-root *::before,
	.qc2027-root *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* Mode contraste eleve */
@media (forced-colors: active) {
	.qc2027-root .qc2027-opt { border: 1px solid ButtonText; }
	.qc2027-barre-remplie { forced-color-adjust: none; background: Highlight !important; }
	.qc2027-badge { border: 1px solid ButtonText; }
}

/* --- Case d'importance : l'effet doit etre explicite --- */
.qc2027-root .qc2027-importance {
	align-items: flex-start;
	padding: 12px 14px;
	background: var(--qc-fond);
	border: 1px solid var(--qc-bord);
	border-radius: 8px;
	margin-top: 18px;
}

.qc2027-root .qc2027-importance input[type="checkbox"] { margin-top: 2px; }

.qc2027-importance-texte {
	display: block;
	line-height: 1.4;
}

.qc2027-importance-aide {
	display: block;
	font-size: 13px;
	color: var(--qc-doux);
	margin-top: 3px;
}

/* --- Navigation : les deux actions sont separees --- */
.qc2027-root .qc2027-nav {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 24px;
	margin-top: 22px;
	padding-top: 16px;
	border-top: 1px solid var(--qc-bord);
	flex-wrap: wrap;
}

.qc2027-nav-gauche { flex: 0 0 auto; }

.qc2027-nav-droite {
	flex: 0 1 auto;
	text-align: right;
	margin-left: auto;
}

.qc2027-skip-aide {
	display: block;
	font-size: 12px;
	color: var(--qc-doux);
	margin-top: 2px;
}

@media (max-width: 520px) {
	.qc2027-root .qc2027-nav { flex-direction: column; gap: 8px; }
	.qc2027-nav-droite { text-align: left; margin-left: 0; }
}

/* --- Clin d'oeil --- */
.qc2027-clin {
	display: flex;
	gap: 16px;
	align-items: center;
	background: #FAEEDA;
	border-left: 4px solid #EF9F27;
	border-radius: 0 10px 10px 0;
	padding: 16px 18px;
	margin: 0 0 22px;
}

.qc2027-clin-img {
	width: 84px;
	height: 84px;
	object-fit: cover;
	border-radius: 8px;
	flex: 0 0 84px;
}

.qc2027-clin-titre {
	margin: 0 0 4px;
	font-weight: 600;
	color: #633806;
}

.qc2027-clin-texte {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: #854F0B;
}

/* --- Un peu plus de couleur sur l'ecran de fin --- */
.qc2027-resultats-entete {
	padding-bottom: 14px;
	border-bottom: 3px solid var(--qc-accent);
	margin-bottom: 18px;
}

.qc2027-resultats-entete h3 {
	margin: 0;
	font-size: 21px;
	color: var(--qc-encre);
}

/* Le pourcentage prend la couleur du niveau de proximite */
.qc2027-pct-haut  { color: #0F6E56; }
.qc2027-pct-moyen { color: #5A6672; }
.qc2027-pct-bas   { color: #854F0B; }

.qc2027-ligne-premier .qc2027-pourcentage { color: #0F6E56; }

/* Degrade discret sur les barres selon le rang */
.qc2027-root .qc2027-barre { background: #EDEFF1; }

.qc2027-mentions {
	background: var(--qc-fond);
	border-radius: 10px;
	padding: 16px 18px;
	border-top: none;
	margin-top: 26px;
}

.qc2027-avatar { border: 2px solid #fff; box-shadow: 0 0 0 1px var(--qc-bord); }
.qc2027-ligne-premier .qc2027-avatar { box-shadow: 0 0 0 2px var(--qc-accent); }

@media print {
	.qc2027-clin { background: #fff !important; border-left: 2px solid #999; }
	.qc2027-clin-img { display: none; }
}