/* Page « Merci pour votre potin » */
.potin-merci { --prune: var(--wp--preset--color--prune, #4a1d4f); --lilas: var(--wp--preset--color--lilas, #e3d4f2); --ocre: var(--wp--preset--color--ocre, #e8a33a); --encre: var(--wp--preset--color--encre, #2a1b33); --blanc: var(--wp--preset--color--blanc, #fff); max-width: 640px; margin: 0 auto; }

/* La petite conversation */
.potin-merci__conversation { display: flex; flex-direction: column; gap: 8px; padding: 22px; margin-bottom: 28px; background: var(--lilas); border-radius: 28px; }
.potin-merci__moi { align-self: flex-end; max-width: 80%; display: flex; flex-direction: column; gap: 10px; background: var(--prune); color: var(--blanc); font-weight: 600; line-height: 1.4; padding: 14px 18px; border-radius: 24px 24px 6px 24px; animation: potinMerciEnvoi .5s cubic-bezier(.2, .9, .3, 1.3) both; }
.potin-merci__moi img { width: 180px; max-width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 14px; }
.potin-merci__lu { align-self: flex-end; margin: 0; font-size: .75rem; font-weight: 700; color: var(--prune); opacity: 0; animation: potinMerciFondu .3s ease .6s forwards; }
.potin-merci__ecrit { margin: 6px 0 0 !important; opacity: 0; animation: potinMerciFondu .3s ease 1.1s forwards; }
@keyframes potinMerciEnvoi { from { opacity: 0; transform: translateY(18px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes potinMerciFondu { to { opacity: 1; } }

.potin-merci__titre { margin: 0 0 8px; font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.05; letter-spacing: -.03em; color: var(--prune); }
.potin-merci__intro { margin: 0 0 24px; font-size: 1.125rem; }

/* Étapes */
.potin-merci__etapes { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-direction: column; gap: 0; }
.potin-merci__etapes li { position: relative; display: flex; gap: 14px; padding: 0 0 18px; }
.potin-merci__etapes li:not(:last-child)::before { content: ""; position: absolute; left: 21px; top: 44px; bottom: 2px; width: 2px; background: var(--lilas); }
.potin-merci__etapes li.est-fait:not(:last-child)::before { background: var(--prune); }
.potin-merci__picto { flex: 0 0 44px; height: 44px; display: grid; place-items: center; font-size: 20px; border-radius: 50%; background: var(--blanc); border: 2px solid var(--lilas); }
.potin-merci__etapes li.est-fait .potin-merci__picto { background: var(--prune); border-color: var(--prune); }
.potin-merci__etapes li.est-encours .potin-merci__picto { border-color: var(--ocre); box-shadow: 0 0 0 0 rgba(232, 163, 58, .6); animation: potinMerciHalo 1.8s ease-out infinite; }
@keyframes potinMerciHalo { 0% { box-shadow: 0 0 0 0 rgba(232, 163, 58, .55); } 100% { box-shadow: 0 0 0 14px rgba(232, 163, 58, 0); } }
.potin-merci__etapes li > span:last-child { display: flex; flex-direction: column; gap: 2px; padding-top: 2px; }
.potin-merci__etapes strong { font-size: 1.0625rem; }
.potin-merci__etapes li:not(.est-fait):not(.est-encours) { opacity: .65; }

/* Boutons */
.potin-merci__actions { display: flex; flex-wrap: wrap; gap: 14px 16px; margin: 0 0 22px; }
.potin-merci__bouton { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 1.0625rem; text-decoration: none; padding: 14px 24px; border-radius: 999px; border: 2px solid var(--prune); background: var(--blanc); color: var(--prune); box-shadow: 0 6px 0 var(--prune); transition: transform .15s ease, box-shadow .15s ease; }
.potin-merci__bouton:hover { transform: translateY(2px); box-shadow: 0 4px 0 var(--prune); color: var(--prune); }
.potin-merci__bouton--principal { background: var(--ocre); border-color: var(--ocre); color: var(--encre); }
.potin-merci__bouton--principal:hover { color: var(--encre); }

/* Encart Instagram */
.potin-merci__insta { display: flex; align-items: center; gap: 14px; padding: 16px 18px; margin: 0 0 22px; border-radius: 22px; background: var(--prune); color: var(--blanc); text-decoration: none; }
.potin-merci__insta:hover { color: var(--blanc); }
.potin-merci__insta-logo { font-size: 28px; }
.potin-merci__insta > span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; flex: 1; font-size: .9375rem; line-height: 1.35; }
.potin-merci__insta-bouton { flex: 0 0 auto; font-weight: 800; background: var(--ocre); color: var(--encre); padding: 9px 16px; border-radius: 999px; }

.potin-merci__encore { margin: 0; font-weight: 600; }

@media (max-width: 600px) {
	.potin-merci__actions { flex-direction: column; align-items: stretch; }
	.potin-merci__bouton { justify-content: center; }
	.potin-merci__insta { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
	.potin-merci__moi, .potin-merci__lu, .potin-merci__ecrit { animation: none; opacity: 1; }
	.potin-merci__etapes li.est-encours .potin-merci__picto { animation: none; }
}