/*
 * Mouvement du parcours de réservation (b1 étapes, b2 choix confirmés, b3 formes grises).
 * Tout est réglable ici. Seuls transform / opacity / stroke-dashoffset sont animés.
 * Contenu sans JavaScript = inchangé ; tout s'arrête avec prefers-reduced-motion.
 */
:root {
	--a4p-rdv-fuchsia: #C70256;
	--a4p-rdv-fuchsia-clair: #E0026B;
	--a4p-rdv-trait: #e6dde1;
	--a4p-rdv-gris: #efe6e9;
	--a4p-rdv-gris-clair: #f8f2f4;
	--a4p-rdv-texte-doux: #6b5f64;
	--a4p-rdv-duree-courte: .25s;
	--a4p-rdv-duree: .45s;
	--a4p-rdv-courbe: cubic-bezier(.6, 0, .2, 1);
	--a4p-rdv-ressort: cubic-bezier(.3, 1.5, .5, 1);
	--a4p-rdv-distance: 12px;
	--a4p-rdv-pastille: 28px;
	--a4p-rdv-case: 28px;
	--a4p-rdv-lueur-duree: 1.3s;
	--a4p-rdv-forme-hauteur: 40px;
}

/* ===== b1 : indicateur d'étapes (construit par le script, l'original reste lisible par les lecteurs d'écran) ===== */
.a4p-rdv-etapes-actives .sln-progbar__wrapper .sln-progbar { display: none !important; }
.a4p-rdv-etapes-actives .sln-progbar__wrapper .sln-progbar__text {
	position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.sln-salon--l__content .a4p-rdv-parcours, .a4p-rdv-parcours { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: row; grid-template-columns: none; align-items: flex-start; width: 100%; }
.sln-salon--l__content .a4p-rdv-parcours li, .a4p-rdv-parcours li { flex: 1 1 0; width: auto; height: auto; display: flex; flex-direction: column; align-items: center; position: relative; margin: 0; padding: 0; min-width: 0; }
.a4p-rdv-parcours li::before { /* trait vers la pastille précédente */
	content: ""; position: absolute; top: calc(var(--a4p-rdv-pastille) / 2 - 1.5px); right: 50%; width: 100%; height: 3px; background: var(--a4p-rdv-trait);
}
.a4p-rdv-parcours li:first-child::before { display: none; }
.a4p-rdv-parcours .a4p-rdv-trait {
	position: absolute; top: calc(var(--a4p-rdv-pastille) / 2 - 1.5px); right: 50%; width: 100%; height: 3px;
	background: var(--a4p-rdv-fuchsia); transform: scaleX(0); transform-origin: left;
}
.a4p-rdv-parcours li:first-child .a4p-rdv-trait { display: none; }
.a4p-rdv-parcours li.a4p-rdv-fait .a4p-rdv-trait, .a4p-rdv-parcours li.a4p-rdv-ici .a4p-rdv-trait { transform: scaleX(1); }
.a4p-rdv-parcours .a4p-rdv-pastille {
	position: relative; z-index: 1; box-sizing: border-box; width: var(--a4p-rdv-pastille); height: var(--a4p-rdv-pastille); border-radius: 50%;
	display: grid; place-items: center; background: #fff; border: 2px solid var(--a4p-rdv-trait); color: var(--a4p-rdv-texte-doux);
	font: 800 .75rem/1 inherit; font-family: inherit;
}
.a4p-rdv-parcours .a4p-rdv-fait .a4p-rdv-pastille { background: var(--a4p-rdv-fuchsia); border-color: var(--a4p-rdv-fuchsia); color: #fff; }
.a4p-rdv-parcours .a4p-rdv-ici .a4p-rdv-pastille { border-color: var(--a4p-rdv-fuchsia); color: var(--a4p-rdv-fuchsia); }
.a4p-rdv-parcours .a4p-rdv-pastille svg { position: absolute; width: 16px; height: 16px; opacity: 0; }
.a4p-rdv-parcours .a4p-rdv-fait .a4p-rdv-pastille svg { opacity: 1; }
.a4p-rdv-parcours .a4p-rdv-fait .a4p-rdv-pastille .a4p-rdv-num { opacity: 0; }
.a4p-rdv-parcours .a4p-rdv-pastille path { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; }
.a4p-rdv-parcours .a4p-rdv-fait .a4p-rdv-pastille path { stroke-dashoffset: 0; }
.a4p-rdv-parcours .a4p-rdv-nom { margin-top: 6px; font-size: .72rem; line-height: 1.2; text-align: center; color: var(--a4p-rdv-texte-doux); overflow-wrap: anywhere; }
.a4p-rdv-parcours .a4p-rdv-ici .a4p-rdv-nom { color: var(--a4p-rdv-fuchsia); font-weight: 700; }
@media (max-width: 480px) { .a4p-rdv-parcours .a4p-rdv-nom { font-size: .66rem; } }

/* Les transitions ne jouent qu'une fois le script prêt (classe posée après la construction) */
.a4p-rdv-anime .a4p-rdv-parcours .a4p-rdv-trait { transition: transform var(--a4p-rdv-duree) var(--a4p-rdv-courbe); }
.a4p-rdv-anime .a4p-rdv-parcours .a4p-rdv-pastille { transition: background var(--a4p-rdv-duree-courte) .3s, border-color var(--a4p-rdv-duree-courte) .3s, color var(--a4p-rdv-duree-courte) .3s; }
.a4p-rdv-anime .a4p-rdv-parcours .a4p-rdv-pastille path { transition: stroke-dashoffset var(--a4p-rdv-duree) var(--a4p-rdv-courbe) .35s; }
.a4p-rdv-anime .a4p-rdv-parcours .a4p-rdv-pastille svg, .a4p-rdv-anime .a4p-rdv-parcours .a4p-rdv-num { transition: opacity var(--a4p-rdv-duree-courte) .3s; }
.a4p-rdv-anime .a4p-rdv-parcours .a4p-rdv-ici .a4p-rdv-pastille { animation: a4p-rdv-pop .4s var(--a4p-rdv-ressort) .3s both; }
@keyframes a4p-rdv-pop { from { transform: scale(.8); } to { transform: scale(1); } }

/* Passage d'un écran à l'autre : le contenu glisse doucement (jamais invisible plus d'un instant) */
.a4p-rdv-entree .sln-salon--l__content > :not(.sln-progbar__wrapper):not(.sln-topbar):not(.sln-salon-title) { animation: a4p-rdv-entree var(--a4p-rdv-duree) var(--a4p-rdv-courbe) both; }
@keyframes a4p-rdv-entree { from { opacity: .01; transform: translateX(var(--a4p-rdv-distance)); } }

/* ===== b2 : choix confirmé d'un coup d'œil ===== */
.a4p-rdv-coche { width: 20px; height: 20px; pointer-events: none; display: block; }
.a4p-rdv-coche path { fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; }
.sln-checkbox, .sln-radiobox { position: relative; }
.sln-checkbox > .a4p-rdv-coche, .sln-radiobox > .a4p-rdv-coche { position: absolute; left: 0; top: 0; width: var(--a4p-rdv-case, 28px); height: var(--a4p-rdv-case, 28px); padding: 4px; box-sizing: border-box; z-index: 2; }
/* La case de l'extension se remplit de fuchsia ; sa coche d'origine laisse place à la nôtre, tracée */
.sln-checkbox:has(input:checked) label::before, .sln-radiobox:has(input:checked) label::before { background: var(--a4p-rdv-fuchsia) !important; border-color: var(--a4p-rdv-fuchsia) !important; }
.sln-checkbox label::after, .sln-radiobox label::after { opacity: 0 !important; }
.a4p-rdv-anime .sln-checkbox label::before, .a4p-rdv-anime .sln-radiobox label::before { transition: background var(--a4p-rdv-duree-courte) var(--a4p-rdv-courbe), border-color var(--a4p-rdv-duree-courte) var(--a4p-rdv-courbe); }
.sln-checkbox:has(input:checked) > .a4p-rdv-coche path, .sln-radiobox:has(input:checked) > .a4p-rdv-coche path { stroke-dashoffset: 0; }
.a4p-rdv-anime .a4p-rdv-coche path { transition: stroke-dashoffset var(--a4p-rdv-duree) var(--a4p-rdv-courbe); }
.a4p-rdv-anime .sln-list__item { transition: transform var(--a4p-rdv-duree-courte) var(--a4p-rdv-courbe), box-shadow var(--a4p-rdv-duree-courte) var(--a4p-rdv-courbe); }
.a4p-rdv-anime .sln-list__item:has(input:checked) { box-shadow: 0 0 0 2px var(--a4p-rdv-fuchsia); }
.a4p-rdv-pop { animation: a4p-rdv-pop-choix .4s var(--a4p-rdv-ressort); }
@keyframes a4p-rdv-pop-choix { 40% { transform: scale(1.06); } }

/* ===== b3 : formes grises pendant les chargements ===== */
.a4p-rdv-formes { display: grid; gap: 8px; padding: 8px 0; width: 100%; }
.a4p-rdv-forme { position: relative; overflow: hidden; height: var(--a4p-rdv-forme-hauteur); border-radius: 12px; background: var(--a4p-rdv-gris); }
.a4p-rdv-forme:nth-child(3) { width: 70%; }
.a4p-rdv-forme::after {
	content: ""; position: absolute; inset: 0; transform: translateX(-100%);
	background: linear-gradient(90deg, transparent, var(--a4p-rdv-gris-clair), transparent);
	animation: a4p-rdv-lueur var(--a4p-rdv-lueur-duree) linear infinite;
}
@keyframes a4p-rdv-lueur { to { transform: translateX(100%); } }
/* Heures de la date : formes grises à la place des heures pendant la vérification (3 par ligne) */
.a4p-rdv-formes-creneaux { display: none; grid-template-columns: repeat(3, 1fr); }
.a4p-rdv-formes-creneaux .a4p-rdv-forme:nth-child(3) { width: auto; }
.a4p-rdv-charge .a4p-rdv-formes-creneaux { display: grid; }
.a4p-rdv-charge .datetimepicker-minutes .minute { display: none; }

/* On masque le texte « Loading… / Validation… » de l'extension quand les formes sont posées */
.a4p-rdv-formes-actives .sln-loader { font-size: 0; line-height: 0; color: transparent; }
.a4p-rdv-formes-actives .sln-loader::before, .a4p-rdv-formes-actives .sln-loader::after { display: none !important; }

@media (prefers-reduced-motion: reduce) {
	.a4p-rdv-anime *, .a4p-rdv-entree *, .a4p-rdv-formes *, .a4p-rdv-coche * { animation: none !important; transition: none !important; }
	.a4p-rdv-forme::after { display: none; }
}