/* Engrenage d'attente du Collectif DR (demande de Fred du 4 nov. 2026) : dès qu'une action fait réfléchir le site,
   une petite fenêtre avec un engrenage qui tourne, pour qu'on voie que ça travaille et qu'on ne reclique pas. */
.ps-engrenage-fond {
	position: fixed;
	inset: 0;
	z-index: 100050;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(17, 17, 17, 0.35);
	opacity: 0;
	transition: opacity 0.2s ease;
	cursor: progress;
}
.ps-engrenage-fond.est-visible { opacity: 1; }
.ps-engrenage-fond[hidden] { display: none; }

/* Mode discret (envois de photos qui ont déjà leur barre) : coin de l'écran, sans bloquer la page. */
.ps-engrenage-fond.est-discret {
	inset: auto 16px 16px auto;
	padding: 0;
	background: none;
	cursor: auto;
}

.ps-engrenage-carte {
	display: flex;
	align-items: center;
	gap: 16px;
	max-width: 360px;
	width: 100%;
	padding: 18px 22px;
	background: #fff;
	color: #111;
	border-radius: 14px;
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
	transform: translateY(6px) scale(0.98);
	transition: transform 0.2s ease;
}
.ps-engrenage-fond.est-visible .ps-engrenage-carte { transform: none; }
.ps-engrenage-fond.est-discret .ps-engrenage-carte { max-width: 300px; padding: 12px 16px; box-shadow: 0 8px 26px rgba(0, 0, 0, 0.22); }

.ps-engrenage-icone {
	position: relative;
	flex: 0 0 54px;
	width: 54px;
	height: 54px;
}
.ps-engrenage-fond.est-discret .ps-engrenage-icone { flex-basis: 36px; width: 36px; height: 36px; }
.ps-engrenage-icone svg { position: absolute; display: block; }
.ps-engrenage-grand {
	inset: 0;
	width: 100%;
	height: 100%;
	color: var(--wp--preset--color--accent, #d9541e);
	animation: ps-engrenage-tour 2.4s linear infinite;
}
.ps-engrenage-petit {
	right: -6px;
	bottom: -4px;
	width: 46%;
	height: 46%;
	color: #111;
	animation: ps-engrenage-tour 1.6s linear infinite reverse;
}

.ps-engrenage-texte { margin: 0; font-size: 16px; line-height: 1.4; font-weight: 600; }
.ps-engrenage-detail { margin: 4px 0 0; font-size: 14px; line-height: 1.4; color: #5c5c5a; }
.ps-engrenage-detail:empty { display: none; }
.ps-engrenage-fond.est-discret .ps-engrenage-texte { font-size: 14px; }

@keyframes ps-engrenage-tour { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
	.ps-engrenage-grand, .ps-engrenage-petit { animation-duration: 6s; }
}

/* Barre de chargement : continue pour l'IA, ou qui avance photo par photo en lot. */
.ps-engrenage-corps { flex: 1; min-width: 0; }
.ps-engrenage-barre {
	position: relative;
	display: block;
	height: 6px;
	margin-top: 10px;
	overflow: hidden;
	background: #efe9df;
	border-radius: 3px;
}
.ps-engrenage-barre[hidden] { display: none; }
.ps-engrenage-barre > span {
	display: block;
	height: 100%;
	width: 4%;
	background: var(--wp--preset--color--accent, #d9541e);
	border-radius: 3px;
	transition: width 0.4s ease;
}
.ps-engrenage-barre.est-continue > span {
	width: 35%;
	animation: ps-engrenage-va-vient 1.4s ease-in-out infinite;
}
@keyframes ps-engrenage-va-vient {
	0% { transform: translateX(-100%); }
	100% { transform: translateX(300%); }
}

/* Envoi PixPalace : photo corrigée ou modifiée, pas encore enregistrée. */
.ps-pixpalace-photo.a-enregistrer .ps-pixpalace-etat { color: #a85d00; font-weight: 700; }
.ps-pixpalace-photo.a-enregistrer { outline: 2px solid #f0c48a; outline-offset: 2px; }

/* Bilan de l'envoi PixPalace (pop-up de fin). */
.ps-bilan-envoi { max-width: 560px; max-height: 86vh; overflow: auto; }
.ps-bilan-envoi h3 { margin: 0 0 8px; }
.ps-bilan-resume { margin: 0 0 14px; line-height: 1.5; }
.ps-bilan-bloc { margin: 0 0 10px; padding: 10px 12px; border-radius: 8px; background: #f7f4ee; }
.ps-bilan-bloc summary { cursor: pointer; }
.ps-bilan-bloc ul { margin: 8px 0 0; padding-left: 18px; font-size: 14px; line-height: 1.45; }
.ps-bilan-ok { border-left: 4px solid #1f7a3a; }
.ps-bilan-deja { border-left: 4px solid #8a8a86; }
.ps-bilan-erreur.ps-bilan-bloc { border-left: 4px solid #b3261e; background: #fbeeec; }
p.ps-bilan-erreur { color: #b3261e; }

/* Fenêtres du site : retours à la ligne du texte gardés (bilans, texte rédigé par l IA). */
.ps-modale-texte { white-space: pre-line; }
.ps-texte-ia-modale label { display: block; margin: 0 0 10px; font-weight: 600; }
.ps-texte-ia-modale textarea { display: block; width: 100%; margin-top: 4px; padding: 8px 10px; font: inherit; font-weight: 400; font-size: 15px; border: 1px solid #d9d4ca; border-radius: 8px; box-sizing: border-box; }