@property --sig-score { syntax: '<integer>'; inherits: true; initial-value: 0; }

/**
 * AJELI · Section « Les signaux » (19 octobre 2026, variante A retenue).
 *
 * Scène en CSS pur, lancée par scene.js (classe .is-play) quand elle est à
 * l'écran. Les styles de base décrivent l'état final du premier prospect :
 * c'est la version fixe (animations réduites, impression). Les keyframes sont
 * générées par le gabarit : chaque élément change d'état une seule fois par
 * passage, sans retour en arrière. Le seul vert est la validation.
 */

.sig-head { max-width: 760px; margin-bottom: var(--space-8); }
.sig-head__principe { margin: var(--space-4) 0 0; font-size: 20px; line-height: 1.45; font-weight: 500; letter-spacing: -0.01em; color: var(--color-fg); }

.sig-scene { margin: 0; }
.sig-stage { position: relative; height: 720px; border-radius: 16px; background: #F5F5F2; overflow: hidden; font-size: 15px; color: var(--color-fg); }
.sig-rounds, .sig-round { position: absolute; inset: 0; }

/* Le prospect, son analyse et sa jauge */
.sig-card { position: absolute; left: 50%; top: calc(50% - 90px); transform: translate(-50%, -50%); width: 320px; display: flex; flex-direction: column; gap: 4px; padding: 20px 22px; background: #FFFFFF; border: 1.5px solid #0A0A0A; border-radius: 14px; box-shadow: 0 4px 24px rgba(10, 10, 10, 0.06); overflow: hidden; }
.sig-card__tag { font-size: 13px; color: #767676; }
.sig-card__scan { opacity: 0; }
.sig-card__name { font-size: 20px; line-height: 1.25; font-weight: 500; }
.sig-card__meta { color: #555555; }
.sig-scan { position: absolute; top: 0; bottom: 0; left: 100%; width: 2px; background: rgba(10, 10, 10, 0.35); box-shadow: -18px 0 0 0 rgba(10, 10, 10, 0.04), -36px 0 0 0 rgba(10, 10, 10, 0.03); opacity: 0; pointer-events: none; }
.sig-score { display: block; margin-top: 12px; font-size: 14px; color: #555555; }
.sig-score__n { font-size: 28px; line-height: 1; font-weight: 600; letter-spacing: -0.02em; color: #0A0A0A; counter-reset: sig-n var(--sig-score); }
.sig-score__n::before { content: counter(sig-n); }
.sig-round--out .sig-score__n { color: #8A8A86; }
.sig-gauge { display: block; margin-top: 8px; }
.sig-gauge__bar { position: relative; display: block; height: 8px; border-radius: 4px; background: #EDEDE8; }
.sig-gauge__fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: #0A0A0A; }
.sig-gauge__seuil { position: absolute; top: -5px; bottom: -5px; width: 2px; margin-left: -1px; background: #0A0A0A; }
.sig-gauge__seuil em { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 12px; color: #555555; }
.sig-gauge__ends { display: flex; justify-content: space-between; margin-top: 4px; font-size: 12px; color: #767676; }
.sig-verdict { margin-top: 10px; padding-top: 10px; border-top: 1px solid #EDEDE8; line-height: 1.4; }
.sig-round--out .sig-verdict { color: #555555; }
.sig-round--out .sig-card { border-color: #D4D4D0; }
.sig-round--out .sig-card, .sig-round--out .sig-chips { opacity: 0.45; }
.sig-round--out .sig-gauge__fill { background: #8A8A86; }

/* Les signaux autour : allumés (noir) ou barrés, avec leur famille de source */
.sig-chips { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0 0 180px; }
.sig-slot { position: absolute; left: calc(50% + var(--x)); top: calc(50% + var(--y)); transform: translate(-50%, -50%); }
.sig-chip { display: inline-grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; padding: 8px 14px; border-radius: 14px; border: 1px solid #E4E4E0; background: #FFFFFF; color: #8A8A86; white-space: nowrap; }
.sig-chip .sig-icon { grid-row: 1 / span 2; width: 20px; height: 20px; color: currentColor; }
.sig-chip__txt, .sig-chip__src { grid-column: 2; }
.sig-chip__src { font-size: 11.5px; opacity: 0.8; }
.sig-chip.is-lit { background: #0A0A0A; border-color: #0A0A0A; color: #FFFFFF; }
.sig-chip.is-off { opacity: 0.55; text-decoration: line-through; text-decoration-thickness: 1.5px; text-decoration-color: #8A8A86; }
.sig-chip.is-off .sig-chip__src { text-decoration: none; }

@supports (offset-path: ellipse(10px 10px at 50% 50%)) {
	.sig-slot { left: 0; top: 0; transform: none; offset-path: ellipse(40% 40% at 50% 50%); offset-rotate: 0deg; offset-distance: var(--o); }
}

/* La suite pour une entreprise gardée : la validation, puis la piste d'actions */
.sig-track { list-style: none; margin: 0; padding: 0; position: absolute; left: 24px; right: 24px; bottom: 28px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 10px; }
.sig-track li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; font-size: 14px; }
.sig-act { border: 1px solid #0A0A0A; background: #FFFFFF; display: inline-flex; align-items: center; gap: 8px; }
.sig-track li { position: relative; }
.sig-track li + li::before { content: ""; position: absolute; left: -11px; top: 50%; width: 10px; height: 1px; background: #0A0A0A; }
.sig-logo, .sig-track .sig-icon { width: 16px; height: 16px; flex-shrink: 0; color: #0A0A0A; }
.sig-act--appel { flex-wrap: wrap; justify-content: center; row-gap: 0; max-width: 230px; padding: 5px 14px; border-radius: 16px; }
.sig-track .sig-break { flex-basis: 100%; height: 0; padding: 0; margin: 0; }
.sig-track .sig-break::before, .sig-track .sig-break + li::before { display: none; }
.sig-logo--caldotcom { width: 52px; height: 12px; }
.sig-act__note { flex-basis: 100%; text-align: center; font-size: 11px; color: #555555; }
.sig-act--rdv { border-width: 1.5px; font-size: 14px; }
.sig-act--rdv strong { font-weight: 600; }
.sig-appel { display: flex; align-items: center; gap: 10px; margin: var(--space-8) 0 0; font-size: 16px; }
.sig-valid { background: var(--color-accent); color: #0A0A0A; font-weight: 500; }
.sig-valid::before { content: ""; width: 10px; height: 6px; border-left: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: translateY(-2px) rotate(-45deg); }

/* Familles */
.sig-fams { list-style: none; margin: var(--space-8) 0 0; padding: 0; }
.sig-fams--short { display: flex; flex-wrap: wrap; gap: 14px 28px; }
.sig-fams--short li { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; }
.sig-icon { width: 22px; height: 22px; flex-shrink: 0; color: #0A0A0A; }
.sig-fams--full { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-8) var(--space-12); }
.sig-fam__title { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 18px; font-weight: 500; }
.sig-fam__list { margin: 0; padding: 0 0 0 32px; color: #404040; font-size: 16px; line-height: 1.55; }
.sig-fam__list li + li { margin-top: 4px; }

/* Mobile : pas d'orbite, une pile de signaux qui changent d'état un par un. */
@media (max-width: 719px) {
	.sig-head__principe { font-size: 18px; }
	.sig-stage { height: auto; padding: 20px; }
	.sig-rounds { position: relative; display: grid; }
	.sig-round { position: relative; inset: auto; grid-area: 1 / 1; }
	.sig-card { position: relative; left: auto; top: auto; transform: none; width: auto; }
	.sig-chips { position: static; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 16px; }
	.sig-slot { position: static; transform: none; offset-path: none; }
	.sig-track { position: static; flex-direction: column; align-items: flex-start; margin-top: 16px; }
	.sig-track li + li::before { left: 22px; top: -9px; width: 1px; height: 8px; }
	.sig-track .sig-break { display: none; }
	.sig-track .sig-break + li::before { display: block; }
}

/* Version fixe et animations réduites : le premier prospect seulement. */
.sig-scene--fixe .sig-round:not(:first-child) { display: none; }
.sig-scene--fixe .sig-round:first-child, .sig-scene--fixe .sig-round:first-child .sig-card, .sig-scene--fixe .sig-round:first-child .sig-chips { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
	.sig-round:not(:first-child) { display: none; }
}

/* Animations : seulement si le visiteur les accepte, et hors version fixe. */
@media (prefers-reduced-motion: no-preference) {
	.sig-scene:not(.sig-scene--fixe) :is(.sig-round, .sig-scan, .sig-card__scan, .sig-gauge__fill, .sig-score, .sig-verdict, .sig-chip, .sig-valid, .sig-act, .sig-slot) {
		animation-duration: var(--sig-T);
		animation-iteration-count: infinite;
		animation-fill-mode: both;
		animation-timing-function: linear;
		animation-delay: calc(var(--r) * var(--sig-L));
		animation-play-state: paused;
	}
	.sig-scene.is-play :is(.sig-round, .sig-scan, .sig-card__scan, .sig-gauge__fill, .sig-score, .sig-verdict, .sig-chip, .sig-valid, .sig-act, .sig-slot) { animation-play-state: running; }
	.sig-scene:not(.sig-scene--fixe) .sig-round { animation-name: sig-round; }
	.sig-scene:not(.sig-scene--fixe) .sig-scan { animation-name: sig-scan; }
	.sig-scene:not(.sig-scene--fixe) .sig-card__scan { animation-name: sig-scan-txt; }
	.sig-scene:not(.sig-scene--fixe) :is(.sig-gauge__fill, .sig-score, .sig-verdict, .sig-chip, .sig-valid, .sig-act) { animation-name: var(--kf); }
	.sig-scene:not(.sig-scene--fixe) .sig-gauge__fill { animation-timing-function: ease-out; }
	.sig-scene:not(.sig-scene--fixe) .sig-chip.is-off { text-decoration-line: line-through; }

	/* L'orbite : les signaux gravitent lentement autour du prospect. */
	@supports (offset-path: ellipse(10px 10px at 50% 50%)) {
		.sig-scene:not(.sig-scene--fixe) .sig-slot { animation-name: sig-orbit; animation-duration: 90s; animation-delay: 0s; }
	}
	@media (max-width: 719px) {
		.sig-scene:not(.sig-scene--fixe) .sig-slot { animation-name: none; }
	}
}

@keyframes sig-orbit { from { offset-distance: var(--o); } to { offset-distance: calc(var(--o) + 100%); } }