/*
 * Encarts Unstale Pro dans le contenu publie.
 *
 * Ce fichier EMBELLIT, il ne conditionne rien : le HTML des encarts est
 * autonome et reste lisible sans lui, plugin desactive, licence expiree, site
 * migre. Rien ici ne doit donc masquer d'information par defaut.
 *
 * Contraintes tenues : aucune police distante, aucun !important, aucune
 * couleur en dur pour le texte (currentColor suit le theme du site, clair
 * comme sombre). Les bordures sont posees en currentColor attenue, ce qui
 * evite d'imposer une palette au theme du client.
 */

.unstale-tldr,
.unstale-cta,
.unstale-quiz {
	border: 1px solid;
	border-color: color-mix(in srgb, currentColor 20%, transparent);
	border-radius: 6px;
	margin: 1.5em 0;
	padding: 1em 1.25em;
}

.unstale-tldr-title,
.unstale-quiz-title {
	font-weight: 600;
	margin: 0 0 0.5em;
}

.unstale-tldr ul {
	margin: 0;
	padding-left: 1.25em;
}

.unstale-cta {
	border-left-width: 3px;
}

.unstale-cta p {
	margin: 0 0 0.5em;
}

.unstale-cta p:last-child {
	margin-bottom: 0;
}

.unstale-cta-link {
	font-weight: 600;
}

.unstale-quiz ol {
	margin: 0;
	padding-left: 1.25em;
}

.unstale-quiz ol > li + li {
	margin-top: 1em;
}

.unstale-quiz-q {
	font-weight: 600;
	margin: 0 0 0.35em;
}

.unstale-quiz ul {
	list-style: none;
	margin: 0;
	padding-left: 0;
}

/*
 * Le repli est fait par <details>, PAS par ce fichier.
 *
 * C'est ce qui permet au quiz d'etre jouable sans rien devoir a ce CSS : plugin
 * desactive, la reponse reste repliee et le lecteur l'ouvre quand meme. Un
 * survol CSS aurait au contraire rendu la reponse inatteignable au tactile, a
 * l'impression et aux lecteurs d'ecran, et l'aurait donnee d'emblee le jour ou
 * la feuille ne se charge plus. Ici le CSS ne masque rien, il rend juste le
 * resume cliquable a l'oeil.
 *
 * Limite assumee : un volet ferme s'imprime ferme. On ne peut pas l'ouvrir
 * depuis une feuille de style, `open` est un attribut et la regle du navigateur
 * qui masque le contenu ne s'annule pas de facon portable aujourd'hui.
 */
.unstale-quiz-a > summary {
	cursor: pointer;
	font-weight: 600;
	margin-top: 0.35em;
}

.unstale-quiz-sol {
	font-weight: 600;
	margin: 0.35em 0 0;
}

.unstale-quiz-sol::before {
	content: "\2713\00a0";
}

/*
 * Articles rafraichis AVANT le passage au volet : leur bonne reponse est
 * marquee dans la liste des choix, pas repliee. Ces deux regles les gardent
 * lisibles et ne peuvent pas etre retirees tant qu'un seul article publie porte
 * l'ancienne forme, c'est-a-dire pour toujours.
 */
.unstale-quiz li.is-answer {
	font-weight: 600;
}

.unstale-quiz li.is-answer::before {
	content: "\2713\00a0";
}

.unstale-quiz-why {
	margin: 0.35em 0 0;
	opacity: 0.8;
}

/*
 * Etats poses par assets/quiz.js, la couche de notation.
 *
 * Aucun de ces selecteurs n'existe dans post_content : sans le script, aucun ne
 * trouve quoi que ce soit et le socle <details> reste seul a l'ecran. C'est ce
 * qui permet de retirer le pro sans laisser d'etat mort dans l'article.
 */
.unstale-quiz-choice {
	background: none;
	border: 1px solid;
	border-color: color-mix(in srgb, currentColor 25%, transparent);
	border-radius: 4px;
	color: inherit;
	cursor: pointer;
	display: block;
	font: inherit;
	padding: 0.35em 0.6em;
	text-align: left;
	width: 100%;
}

.unstale-quiz li.is-live ul > li + li {
	margin-top: 0.35em;
}

.unstale-quiz-choice[aria-disabled="true"] {
	cursor: default;
}

/*
 * Le verdict est porte par un SYMBOLE, jamais par une couleur seule. Deux
 * raisons qui vont dans le meme sens : ce fichier ne pose aucune couleur en dur
 * parce qu'il ignore le theme du client, clair ou sombre, et une couleur seule
 * serait de toute facon illisible pour un daltonien. Le relief vient de
 * l'epaisseur de bordure et de l'opacite, tous deux derives de currentColor.
 */
.unstale-quiz-choice.is-correct {
	border-color: currentColor;
	border-width: 2px;
	font-weight: 600;
}

.unstale-quiz-choice.is-correct::after {
	content: "\00a0\2713";
}

.unstale-quiz-choice.is-wrong {
	opacity: 0.6;
}

.unstale-quiz-choice.is-wrong::after {
	content: "\00a0\2717";
}

/* Le resume a fait son travail : la reponse est ouverte sous les yeux. */
.unstale-quiz-a.is-revealed > summary {
	display: none;
}

.unstale-quiz-score {
	font-weight: 600;
	margin: 1em 0 0;
	text-align: right;
}

.unstale-quiz-score.is-final {
	font-size: 1.15em;
}