/* ==========================================================================
   SIMPLE Idea — feuille de style de la façade

   Tout est sous .sphf-idea (enveloppe posée par SIMPLE Core, classes
   « sphf sphf--{mode} sphf-idea »).
   Tout est en em (sauf filets de 1 à 2 px et courbures). Couleurs, ombres,
   courbure et police : variables --sphf-* de SIMPLE Core, sans aucune valeur
   écrite ici. Bandeau, boutons, messages, onglets (tri), champs et état vide :
   composants communs de SIMPLE Core (sphf-base.css), non recopiés ici.

   Variable propre : --sphf-idea-star (couleur des étoiles, repli sur l'accent)
   et --sphf-idea-pct (part remplie des étoiles moyennes, posée par le gabarit).
   ========================================================================== */

/* ------------------------------------------------------------------ Tableau */

.sphf-idea .sphf-idea-board { margin: 0 0 2em; }
.sphf-idea .sphf-idea-desc { margin: 0 0 1.25em; color: var(--sphf-muted); }

/* ------------------------------------------------------------------ Barre : tri à gauche, « Proposer » à droite */

.sphf-idea .sphf-idea-bar { align-items: center; }
/* Les onglets de tri de Core prennent toute la ligne : ici ils laissent la place au bouton. */
.sphf-idea .sphf-idea-sort { flex: 1 1 22em; max-width: 32em; margin: 0; }
.sphf-idea .sphf-idea-propose { white-space: nowrap; }
/* Sans JavaScript le bouton ne pourrait rien ouvrir : le formulaire reste affiché et le bouton disparaît. */
.sphf-idea:not(.sphf--js) .sphf-idea-propose,
.sphf-idea:not(.sphf--js) .sphf-idea-cancel { display: none; }

/* ------------------------------------------------------------------ Formulaire */

/* Avec JavaScript, le formulaire reste replié tant qu'on n'a pas cliqué sur « Proposer ».
   L'aperçu de l'administration montre la même chose, qu'il ait reçu le script ou non. */
.sphf-idea.sphf--js .sphf-idea-form:not(.is-open),
.sphf-idea.sphf--preview .sphf-idea-form:not(.is-open) { display: none; }
.sphf-idea.sphf--preview .sphf-idea-propose,
.sphf-idea.sphf--preview .sphf-idea-cancel { display: inline-flex; }

.sphf-idea .sphf-idea-form {
	margin: 0 0 1.5em;
	padding: 1.25em 1.25em 1em;
	background: var(--sphf-card);
	border: 1px solid var(--sphf-line);
	border-radius: var(--sphf-radius);
	box-shadow: var(--sphf-shadow);
}

/* ------------------------------------------------------------------ Liste */

.sphf-idea .sphf-idea-sort { max-width: 32em; }
.sphf-idea .sphf-idea-list { margin: 0; padding: 0; list-style: none; }
.sphf-idea .sphf-idea-item {
	display: flex;
	flex-wrap: wrap;
	gap: .5em 1.25em;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 .65em;
	padding: .9em 1.1em;
	background: var(--sphf-card);
	border: 1px solid var(--sphf-line);
	border-radius: var(--sphf-radius-s);
}
.sphf-idea .sphf-idea-item__main { flex: 1 1 18em; min-width: 0; }
.sphf-idea .sphf-idea-item__title { margin: 0 0 .2em; font-size: var(--sphf-t3); font-weight: var(--sphf-bold); overflow-wrap: anywhere; }
.sphf-idea .sphf-idea-item__body { margin: 0 0 .35em; color: var(--sphf-muted); font-size: var(--sphf-small); overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ Étoiles moyennes */

.sphf-idea .sphf-idea-score { display: flex; flex-wrap: wrap; gap: .4em; align-items: baseline; margin: 0; font-size: var(--sphf-small); }
.sphf-idea .sphf-idea-score__votes { color: var(--sphf-muted); }

/* Deux rangées de cinq étoiles superposées : la rangée pleine est coupée à
   --sphf-idea-pct, ce qui montre une moyenne au dixième près (4,2 = 84 %). */
.sphf-idea .sphf-idea-meter { position: relative; display: inline-block; line-height: 1; letter-spacing: .1em; white-space: nowrap; }
.sphf-idea .sphf-idea-meter::before { content: "★★★★★"; color: var(--sphf-field-line, var(--sphf-line)); }
.sphf-idea .sphf-idea-meter__fill { position: absolute; top: 0; left: 0; width: var(--sphf-idea-pct, 0%); overflow: hidden; }
.sphf-idea .sphf-idea-meter__fill::before { content: "★★★★★"; color: var(--sphf-idea-star, var(--sphf-accent)); }

/* ------------------------------------------------------------------ Étoiles cliquables */

.sphf-idea .sphf-idea-rate { display: flex; align-items: center; gap: .1em; flex: 0 0 auto; }
.sphf-idea .sphf-idea-rate__label { margin-right: .35em; color: var(--sphf-muted); font-size: var(--sphf-small); }
/* Boutons nus : le thème ne doit pas leur donner fond, bordure ni ombre. */
.sphf-idea .sphf-idea-star {
	padding: .1em .12em !important;
	margin: 0;
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	/* Étoile inactive = commande : bordure de champ (3:1), pas le filet décoratif. */
	color: var(--sphf-field-line, var(--sphf-line));
	font-size: 1.5em;
	line-height: 1;
	cursor: pointer;
	transition: color .12s, transform .12s;
}
.sphf-idea .sphf-idea-star:focus-visible { outline: 2px solid var(--sphf-accent); outline-offset: 2px; border-radius: 4px; }
.sphf-idea .sphf-idea-star.is-on,
.sphf-idea .sphf-idea-star.is-hover { color: var(--sphf-idea-star, var(--sphf-accent)); }
.sphf-idea .sphf-idea-star.is-hover { transform: scale(1.12); }
.sphf-idea .sphf-idea-star[disabled] { cursor: default; }
.sphf-idea .sphf-idea-rate.is-busy { opacity: .6; }

/* ------------------------------------------------------------------ Mobile */

@media (max-width: 600px) {
	.sphf-idea .sphf-idea-bar .sphf-bar__actions,
	.sphf-idea .sphf-idea-propose { width: 100%; }
	.sphf-idea .sphf-idea-item { padding: .8em .9em; }
	.sphf-idea .sphf-idea-star { font-size: 1.7em; }
}