/* ==========================================================================
   Owly — site public : scènes animées (motion design)
   Chaque scène est une petite histoire graphique, sans texte à lire pour la comprendre : ce que fait l'application.
   Principe : l'état NATUREL d'un élément est son état final ; quand la scène est visible, site.js ajoute .is-run
   (et la rejoue toutes les data-loop millisecondes) : les animations « entrent » alors depuis un état caché, avec un
   retard --d. Sans JavaScript ou avec « moins de mouvement », la scène s'affiche à son état final, sans rien bouger.
   Tout est dimensionné en cqw (unités du conteneur) : la scène garde les mêmes proportions du téléphone à l'ordinateur.
   ========================================================================== */

.sc { container-type: inline-size; position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 26px; isolation: isolate;
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  background: radial-gradient(130% 100% at 12% 0%, #fff 0%, #ebf3ff 50%, #d8e6fb 100%);
  box-shadow: var(--shadow); line-height: 1.2; color: var(--text); }
.sc { text-align: left; }
.sc > * { font-size: 3.5cqw; }
.sc.sc-mini { aspect-ratio: 16 / 9; border-radius: 20px; box-shadow: none; }
.sc *, .sc *::before, .sc *::after { box-sizing: border-box; }
.sc svg.icon { width: 1.25em; height: 1.25em; flex: none; }
.sc .a { position: absolute; }
.sc .card { position: absolute; background: #fff; border-radius: 3.2cqw; box-shadow: 0 2.4cqw 6cqw -2.4cqw rgba(0, 35, 90, .32); }
.sc .muted { color: var(--muted); }
.sc .pill { display: inline-flex; align-items: center; gap: 1.2cqw; padding: 1.3cqw 2.8cqw; border-radius: 99px; font-weight: 800; font-size: 3.1cqw; white-space: nowrap; }
.sc .pill.blue { background: var(--soft-primary); color: var(--primary); }
.sc .pill.orange { background: var(--accent); color: #1b1200; }
.sc .pill.green { background: var(--success); color: #fff; }
.sc .pill.soft-green { background: color-mix(in srgb, var(--success) 16%, #fff); color: var(--success); }
.sc .pill.white { background: #fff; color: var(--text); box-shadow: 0 1cqw 3cqw -1cqw rgba(0, 35, 90, .3); }
.sc .av { position: absolute; width: 11cqw; height: 11cqw; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 4.4cqw; border: .8cqw solid #fff; box-shadow: 0 1.6cqw 3.4cqw -1.2cqw rgba(0, 30, 80, .45); }
.sc .av.c1 { background: #f59a23; } .sc .av.c2 { background: #0a93b8; } .sc .av.c3 { background: #2f6fd0; } .sc .av.c4 { background: #12935a; } .sc .av.c5 { background: #7a5af8; }
.sc .inp { height: 9cqw; border: .5cqw solid var(--line); border-radius: 2.6cqw; padding: 0 3cqw; display: flex; align-items: center; background: #f6f9ff; font-weight: 700; }
.sc .lab { font-size: 2.7cqw; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin: 2.6cqw 0 1cqw; }
.sc .btn { height: 10cqw; border-radius: 3cqw; background: var(--accent); display: flex; align-items: center; justify-content: center; gap: 1.6cqw; font-weight: 800; color: #1b1200; }
.sc .btn.blue { background: var(--primary); color: #fff; }
.sc .phone { position: absolute; border-radius: 6cqw; background: #0b1b33; padding: 1.8cqw; box-shadow: 0 4cqw 9cqw -3cqw rgba(0, 25, 70, .55); }
.sc .phone-in { width: 100%; height: 100%; border-radius: 4.6cqw; background: #fff; padding: 5cqw 3.4cqw 3cqw; position: relative; overflow: hidden; }
.sc .phone::before { content: ''; position: absolute; top: 2.9cqw; left: 50%; width: 9cqw; height: 1.1cqw; margin-left: -4.5cqw; border-radius: 2cqw; background: #1c2f52; z-index: 2; }
.sc .t { font-weight: 800; font-size: 4cqw; letter-spacing: -.02em; }
.sc .coin { position: absolute; width: 8.5cqw; height: 8.5cqw; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 4.4cqw; color: #7a4a00; background: radial-gradient(circle at 35% 30%, #ffe08a, #f6b01e 70%); border: .6cqw solid #e49b0f; box-shadow: 0 1cqw 2cqw -.5cqw rgba(120, 70, 0, .5); }

/* Compteur : plusieurs valeurs superposées, une seule visible à la fois (voir .is-run) */
.sc .num { position: relative; display: inline-block; vertical-align: bottom; }
.sc .num > span { position: absolute; left: 0; top: 0; white-space: nowrap; opacity: 0; }
.sc .num > span:last-child { position: static; opacity: 1; }
.sc .type { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom; max-width: calc(var(--n, 12) * 1.3ch); }

/* ---------- Mouvement : seulement quand la scène est visible (.is-run) ---------- */
@keyframes sc-pop { from { opacity: 0; transform: scale(.4); } }
@keyframes sc-up { from { opacity: 0; transform: translateY(5cqw); } }
@keyframes sc-fade { from { opacity: 0; } }
@keyframes sc-slide { from { opacity: 0; transform: translateX(14cqw); } }
@keyframes sc-slide-l { from { opacity: 0; transform: translateX(-14cqw); } }
@keyframes sc-drop { 0% { opacity: 0; transform: translateY(-22cqw); } 60% { opacity: 1; transform: translateY(1.6cqw); } 80% { transform: translateY(-.8cqw); } 100% { transform: none; } }
@keyframes sc-draw { from { stroke-dashoffset: 1; } }
@keyframes sc-type { from { max-width: 0; } }
@keyframes sc-press { 50% { transform: scale(.93); filter: brightness(.92); } }
@keyframes sc-on { from { opacity: 0; } to { opacity: 1; } }
@keyframes sc-off { to { opacity: 0; } }
@keyframes sc-view-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes sc-scan { 0%, 100% { top: 6%; } 50% { top: 84%; } }
@keyframes sc-ring { 0% { transform: scale(.6); opacity: .7; } 100% { transform: scale(2.1); opacity: 0; } }
@keyframes sc-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.4cqw); } }
@keyframes sc-swing { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes sc-ringbell { 0%, 60%, 100% { transform: rotate(0); } 66% { transform: rotate(16deg); } 72% { transform: rotate(-14deg); } 78% { transform: rotate(10deg); } 84% { transform: rotate(-6deg); } }
@keyframes sc-plus { 0% { opacity: 0; transform: translateY(0); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-7cqw); } }
@keyframes sc-fill { from { transform: scaleX(0); } }
@keyframes sc-tok { from { transform: translateX(-80cqw); } }
@keyframes sc-node { from { background: #fff; border-color: var(--line); } }
@keyframes sc-shift { from { transform: translateY(-13cqw); } }
@keyframes sc-fly { 0% { opacity: 0; transform: none; } 6% { opacity: 1; transform: none; } 88% { opacity: 1; } 100% { opacity: 0; transform: translate(41cqw, -34cqw) scale(.8); } }
@keyframes sc-plane { 0% { opacity: 0; transform: translate(0, 0) rotate(0); } 8% { opacity: 1; } 100% { opacity: 0; transform: translate(40cqw, -26cqw) rotate(-14deg); } }
@keyframes sc-stamp { 0% { opacity: 0; transform: rotate(-8deg) scale(2.2); } 70% { opacity: 1; transform: rotate(-8deg) scale(.94); } 100% { transform: rotate(-8deg) scale(1); } }
@keyframes sc-coin { 0% { opacity: 0; transform: translateY(-9cqw) scale(.8); } 22% { opacity: 1; transform: translateY(-7cqw) scale(1); } 55% { opacity: 1; transform: translateY(0); } 70% { transform: translateY(-2cqw); } 85% { transform: translateY(0); } 100% { opacity: 0; transform: translateY(2cqw) scale(.7); } }
@keyframes sc-twinkle { 0%, 100% { opacity: 0; transform: scale(.4); } 50% { opacity: 1; transform: scale(1); } }
@keyframes sc-tick { from { stroke-dashoffset: 1; } }
@keyframes sc-wave { 0% { transform: scale(.4); opacity: .8; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes sc-light { from { background: #fff; color: var(--muted); transform: scale(.9); } }

.sc.is-run .in-pop { animation: sc-pop .55s cubic-bezier(.2, 1.5, .4, 1) var(--d, 0s) backwards; }
.sc.is-run .in-up { animation: sc-up .6s ease-out var(--d, 0s) backwards; }
.sc.is-run .in-fade { animation: sc-fade .6s ease var(--d, 0s) backwards; }
.sc.is-run .in-slide { animation: sc-slide .65s cubic-bezier(.2, .9, .3, 1) var(--d, 0s) backwards; }
.sc.is-run .in-slide-l { animation: sc-slide-l .65s cubic-bezier(.2, .9, .3, 1) var(--d, 0s) backwards; }
.sc.is-run .in-drop { animation: sc-drop .9s ease-out var(--d, 0s) backwards; }
.sc.is-run .in-draw { animation: sc-draw .7s ease-out var(--d, 0s) backwards; }
.sc.is-run .type { animation: sc-type var(--w, .9s) steps(var(--n, 12), end) var(--d, 0s) backwards; }
.sc.is-run .press { animation: sc-press .38s ease var(--d, 0s) both; }
.sc.is-run .num > span { animation: sc-on .01s step-end var(--d, 0s) both, sc-off .01s step-end var(--e, 99s) forwards; }
.sc.is-run .num > span:last-child { animation: sc-on .01s step-end var(--d, 0s) both; }
.sc.is-run .view-out { animation: sc-view-out .45s ease var(--d, 0s) both; }
.sc.is-run .scan { animation: sc-scan 1.6s ease-in-out infinite; }
.sc.is-run .ring { animation: sc-ring 2.2s ease-out infinite; }
.sc.is-run .float { animation: sc-float 3s ease-in-out infinite; }
.sc.is-run .swing { animation: sc-swing 2.2s ease-in-out infinite; transform-origin: 50% 0; }
.sc.is-run .bell { animation: sc-ringbell 2.8s ease-in-out infinite; transform-origin: 50% 12%; }
.sc.is-run .plus { animation: sc-plus 1.1s ease-out var(--d, 0s) both; }
.sc.is-run .twinkle { animation: sc-twinkle 1.6s ease-in-out var(--d, 0s) infinite; }
.sc.is-run .shift { animation: sc-shift .55s ease var(--d, 0s) backwards; }
.sc.is-run .fly { animation: sc-fly 1.1s ease-in-out var(--d, 0s) both; }
.sc.is-run .plane { animation: sc-plane 1.2s ease-in var(--d, 0s) both; }
.sc.is-run .stamp { animation: sc-stamp .55s ease-out var(--d, 0s) backwards; }
.sc.is-run .coin.drop { animation: sc-coin 1.5s ease-in var(--d, 0s) both; }
.sc.is-run .light { animation: sc-light .5s ease var(--d, 0s) backwards; }
.sc.is-run .wave { animation: sc-wave 1.6s ease-out var(--d, 0s) infinite; }
.sc.is-run .tick { animation: sc-tick .5s ease-out var(--d, 0s) backwards; }

/* États naturels (finaux) propres à chaque scène */
.sc .hide-final { opacity: 0; }                      /* visible au début seulement : masqué à l'état final */
.sc .fly, .sc .plane { opacity: 0; }                 /* trajets : invisibles à l'état final */
.sc .coin.drop { opacity: 0; }

/* ---------- Scène « create » : Vous créez votre espace ---------- */
.sc-create .win { left: 7cqw; top: 6cqw; width: 86cqw; height: 63cqw; overflow: hidden; }
.sc-create .win-bar { height: 8cqw; display: flex; align-items: center; gap: 1.4cqw; padding: 0 3cqw; background: #eef3fb; border-bottom: .4cqw solid var(--line); }
.sc-create .win-bar i { width: 2.2cqw; height: 2.2cqw; border-radius: 50%; background: #c9d6ea; }
.sc-create .win-bar span { margin-left: 3cqw; padding: .9cqw 3cqw; border-radius: 99px; background: #fff; color: var(--muted); font-size: 2.8cqw; font-weight: 700; }
.sc-create .view { position: absolute; left: 0; right: 0; top: 8cqw; bottom: 0; padding: 2cqw 6cqw; }
.sc-create .view .lab { margin: 1.8cqw 0 .8cqw; }
.sc-create .view .inp { height: 8cqw; }
.sc-create .view.form .btn { margin-top: 3.4cqw; height: 9cqw; }
.sc-create .rbar { display: flex; align-items: center; gap: 2cqw; font-weight: 800; color: #fff; background: var(--primary); margin: -3cqw -6cqw 4cqw; padding: 2.6cqw 6cqw; }
.sc-create .rbar img { width: 5cqw; height: auto; }
.sc-create .tiles { display: flex; gap: 2.6cqw; }
.sc-create .tile { flex: 1; text-align: center; padding: 3cqw 1cqw; border-radius: 3cqw; background: var(--soft-primary); font-weight: 700; font-size: 2.9cqw; }
.sc-create .tile b { display: block; font-size: 8cqw; letter-spacing: -.03em; color: var(--primary); }
.sc-create .tile.accent { background: var(--soft-accent); } .sc-create .tile.accent b { color: var(--orange-600); }
.sc-create .page { margin-top: 4cqw; display: flex; align-items: center; gap: 2cqw; padding: 2.6cqw 3cqw; border-radius: 3cqw; border: .5cqw dashed color-mix(in srgb, var(--orange-600) 50%, var(--line)); background: var(--soft-accent); font-weight: 800; font-size: 3cqw; }
.sc-create .tst { right: 4cqw; top: 2cqw; z-index: 3; }

/* ---------- Scène « network » : Vous invitez vos apporteurs ---------- */
.sc-network .qr { left: 36cqw; top: 14cqw; width: 28cqw; height: 28cqw; padding: 2.6cqw; }
.sc-network .qr svg.q { width: 100%; height: 100%; display: block; }
.sc-network .qr .scan { position: absolute; left: 2cqw; right: 2cqw; height: .9cqw; border-radius: 1cqw; background: var(--accent); box-shadow: 0 0 3cqw var(--accent); }
.sc-network .qrcap { left: 50%; top: 45cqw; transform: translateX(-50%); }
.sc-network .hub { left: 41cqw; top: 25cqw; width: 18cqw; height: 18cqw; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 2cqw 6cqw -2cqw rgba(0, 35, 90, .45); }
.sc-network .hub img { width: 11cqw; height: auto; }
.sc-network .hub::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: .7cqw solid var(--accent); opacity: 0; }
.sc.is-run.sc-network .hub::after { animation: sc-ring 2.4s ease-out 2s infinite; }
.sc-network .cnt { left: 50%; bottom: 4cqw; transform: translateX(-50%); }
.sc-network svg.lines { left: 0; top: 0; width: 100cqw; height: 75cqw; }
.sc-network svg.lines line { stroke: var(--teal); stroke-width: .9; stroke-linecap: round; opacity: .55; }
.sc-network .plus { position: absolute; font-weight: 800; color: var(--success); font-size: 3.6cqw; opacity: 0; }

/* ---------- Scène « signal » : Vous recevez des signalements ---------- */
.sc-signal .phone { left: 4cqw; top: 6cqw; width: 31cqw; height: 63cqw; }
.sc-signal .addr { margin-top: 2.4cqw; font-weight: 700; font-size: 3cqw; }
.sc-signal .chips { display: flex; gap: 1.2cqw; margin-top: 2cqw; }
.sc-signal .chips span { padding: .8cqw 2cqw; border-radius: 99px; background: #f1f5fb; font-size: 2.6cqw; font-weight: 700; color: var(--muted); }
.sc-signal .chips span.on { background: var(--primary); color: #fff; }
.sc-signal .thumbs { display: flex; gap: 1.6cqw; margin-top: 2.6cqw; }
.sc-signal .thumb { width: 9cqw; height: 9cqw; border-radius: 2cqw; background: linear-gradient(135deg, #8fb6e8, #3f7ccc); }
.sc-signal .thumb + .thumb { background: linear-gradient(135deg, #ffd8a0, #f6a02d); }
.sc-signal .phone .btn { position: absolute; left: 3.4cqw; right: 3.4cqw; bottom: 3cqw; height: 8cqw; font-size: 3cqw; }
.sc-signal .fly { left: 8cqw; top: 46cqw; width: 22cqw; padding: 2cqw 2.4cqw; display: flex; align-items: center; gap: 1.6cqw; font-weight: 800; font-size: 2.9cqw; z-index: 4; }
.sc-signal .dash { left: 40cqw; top: 6cqw; width: 56cqw; height: 63cqw; overflow: hidden; }
.sc-signal .dash-h { display: flex; align-items: center; justify-content: space-between; padding: 3cqw 3.6cqw; background: var(--primary); color: #fff; font-weight: 800; }
.sc-signal .bellbox { position: relative; display: grid; place-items: center; width: 7cqw; height: 7cqw; border-radius: 2cqw; background: rgba(255, 255, 255, .16); }
.sc-signal .badge { position: absolute; right: -1.2cqw; top: -1.2cqw; min-width: 4cqw; height: 4cqw; border-radius: 99px; background: var(--accent); color: #1b1200; font-size: 2.6cqw; font-weight: 800; display: grid; place-items: center; border: .5cqw solid var(--primary); }
.sc-signal .row { position: absolute; left: 3cqw; right: 3cqw; height: 11cqw; border-radius: 2.6cqw; background: #f3f6fb; display: flex; align-items: center; gap: 2cqw; padding: 0 2.6cqw; font-weight: 700; font-size: 3cqw; }
.sc-signal .row.new { background: var(--soft-accent); box-shadow: inset 0 0 0 .5cqw color-mix(in srgb, var(--accent) 70%, #fff); }
.sc-signal .row .sq { width: 6.4cqw; height: 6.4cqw; border-radius: 1.8cqw; background: #dbe5f5; flex: none; display: grid; place-items: center; color: var(--primary); }
.sc-signal .row .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-signal .tags { left: 42cqw; top: 59cqw; right: 3cqw; display: flex; flex-wrap: nowrap; gap: 1.4cqw; }
.sc-signal .tags .pill { font-size: 2.5cqw; padding: .9cqw 1.8cqw; }
.sc-signal .row .pill { font-size: 2.5cqw; padding: .9cqw 1.9cqw; }

/* ---------- Scène « track » : Vous suivez jusqu'à la commission ---------- */
.sc-track .status { left: 50%; top: 6cqw; transform: translateX(-50%); font-size: 4.6cqw; padding: 2cqw 5cqw; }
.sc-track .status .num { text-align: center; }
.sc-track .rail { left: 10cqw; width: 80cqw; top: 31cqw; height: 1.8cqw; border-radius: 2cqw; background: #cfdcf1; }
.sc-track .fill { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--teal), var(--accent)); transform-origin: left center; }
.sc.is-run.sc-track .fill { animation: sc-fill 6s steps(5, jump-end) .6s backwards; }
.sc-track .node { width: 5.4cqw; height: 5.4cqw; margin: -1.8cqw 0 0 -2.7cqw; top: 31cqw; border-radius: 50%; background: var(--primary); border: .8cqw solid var(--primary); box-shadow: 0 0 0 1cqw rgba(255, 255, 255, .8); }
.sc-track .node.last { background: var(--success); border-color: var(--success); }
.sc.is-run.sc-track .node { animation: sc-node .4s ease var(--d, 0s) backwards; }
.sc-track .tok { left: 90cqw; top: 31cqw; margin: -5.4cqw 0 0 -5cqw; width: 10cqw; height: 10cqw; border-radius: 50%; background: var(--accent); color: #1b1200; display: grid; place-items: center; border: .8cqw solid #fff; box-shadow: 0 1.6cqw 3cqw -1cqw rgba(0, 30, 80, .5); z-index: 2; }
.sc.is-run.sc-track .tok { animation: sc-tok 6s steps(5, jump-end) .6s backwards; }
.sc-track .alert { left: 5cqw; bottom: 5cqw; height: 15cqw; width: 42cqw; padding: 2.4cqw 2.4cqw; display: flex; align-items: center; gap: 2cqw; font-weight: 800; font-size: 3cqw; }
.sc-track .alert .ic-b { width: 8cqw; height: 8cqw; border-radius: 50%; background: var(--soft-accent); color: var(--orange-600); display: grid; place-items: center; flex: none; }
.sc-track .alert small { display: block; font-weight: 600; color: var(--muted); font-size: 2.6cqw; }
.sc-track .comm { right: 5cqw; bottom: 5cqw; width: 46cqw; height: 23cqw; padding: 3cqw 3.4cqw; }
.sc-track .comm .big { font-size: 8.4cqw; font-weight: 800; letter-spacing: -.04em; color: var(--success); margin-top: 1cqw; }
.sc-track .comm .stamp { position: absolute; right: 2.4cqw; top: 2.4cqw; transform: rotate(-8deg); padding: .7cqw 2cqw; border: .6cqw solid var(--success); border-radius: 1.6cqw; color: var(--success); font-weight: 800; font-size: 2.6cqw; text-transform: uppercase; letter-spacing: .06em; background: #fff; }

/* ---------- Apporteurs : s'inscrire ---------- */
.sc-reg .phone { left: 5cqw; top: 5cqw; width: 42cqw; height: 65cqw; }
.sc-reg .inp { font-size: 3cqw; }
.sc-reg .chk { display: flex; align-items: center; gap: 1.8cqw; margin-top: 3cqw; font-size: 2.6cqw; font-weight: 700; color: var(--muted); }
.sc-reg .chk i { width: 5cqw; height: 5cqw; border-radius: 1.4cqw; background: var(--primary); display: grid; place-items: center; color: #fff; flex: none; }
.sc-reg .phone .btn { position: absolute; left: 3.4cqw; right: 3.4cqw; bottom: 3cqw; height: 8.4cqw; font-size: 3cqw; }
.sc-reg .link { left: 52cqw; top: 8cqw; width: 42cqw; padding: 3cqw; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1.8cqw; font-size: 2.8cqw; }
.sc-reg .link img { width: 9cqw; height: auto; }
.sc-reg .link .u { padding: 1.4cqw 2cqw; border-radius: 2cqw; background: var(--soft-primary); color: var(--primary); font-weight: 800; font-size: 2.7cqw; white-space: nowrap; }
.sc-reg .link .pill { font-size: 2.6cqw; }
.sc-reg .app { left: 63cqw; top: 49cqw; width: 22cqw; text-align: center; font-weight: 700; font-size: 2.8cqw; }
.sc-reg .app .ico { width: 15cqw; height: 15cqw; margin: 0 auto 1.4cqw; border-radius: 4cqw; background: #fff; display: grid; place-items: center; box-shadow: 0 2cqw 5cqw -2cqw rgba(0, 30, 80, .5); }
.sc-reg .app .ico img { width: 10cqw; height: auto; }

/* ---------- Apporteurs : signaler ---------- */
.sc-report .phone { left: 8cqw; top: 5cqw; width: 38cqw; height: 65cqw; }
.sc-report .phone .btn { position: absolute; left: 3.4cqw; right: 3.4cqw; bottom: 3cqw; height: 8.4cqw; font-size: 3cqw; }
.sc-report .chips { display: flex; gap: 1.2cqw; margin-top: 2cqw; }
.sc-report .chips span { padding: .8cqw 2cqw; border-radius: 99px; background: #f1f5fb; font-size: 2.6cqw; font-weight: 700; color: var(--muted); }
.sc-report .chips span.on { background: var(--primary); color: #fff; }
.sc-report .thumbs { display: flex; gap: 1.6cqw; margin-top: 2.6cqw; }
.sc-report .thumb { width: 10cqw; height: 10cqw; border-radius: 2cqw; background: linear-gradient(135deg, #8fb6e8, #3f7ccc); }
.sc-report .thumb + .thumb { background: linear-gradient(135deg, #ffd8a0, #f6a02d); }
.sc-report .plane { left: 38cqw; top: 40cqw; z-index: 3; color: var(--primary); }
.sc-report .plane svg { width: 11cqw; height: 11cqw; }
.sc-report .done { left: 54cqw; top: 22cqw; width: 40cqw; padding: 3.6cqw; text-align: center; font-weight: 800; }
.sc-report .done .ok { width: 14cqw; height: 14cqw; margin: 0 auto 2cqw; border-radius: 50%; background: color-mix(in srgb, var(--success) 16%, #fff); color: var(--success); display: grid; place-items: center; }
.sc-report .done .ok svg { width: 8cqw; height: 8cqw; }
.sc-report .secs { right: 5cqw; top: 5cqw; }

/* ---------- Apporteurs : on s'occupe de tout ---------- */
.sc-pro .house { left: 6cqw; top: 9cqw; width: 22cqw; text-align: center; font-weight: 700; font-size: 2.8cqw; }
.sc-pro .house .circ, .sc-pro .agent .circ { width: 17cqw; height: 17cqw; margin: 0 auto 1.6cqw; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 2cqw 5cqw -2cqw rgba(0, 35, 90, .45); color: var(--primary); }
.sc-pro .house .circ svg { width: 9cqw; height: 9cqw; }
.sc-pro .agent { right: 6cqw; top: 9cqw; width: 22cqw; text-align: center; font-weight: 700; font-size: 2.8cqw; }
.sc-pro .agent .circ img { width: 11cqw; height: auto; }
.sc-pro .call { left: 50%; top: 14cqw; width: 11cqw; height: 11cqw; margin-left: -5.5cqw; border-radius: 50%; background: var(--accent); display: grid; place-items: center; color: #1b1200; z-index: 2; }
.sc-pro .call::before, .sc-pro .call::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: .6cqw solid var(--accent); opacity: 0; }
.sc.is-run.sc-pro .call::before { animation: sc-wave 1.6s ease-out .4s infinite; }
.sc.is-run.sc-pro .call::after { animation: sc-wave 1.6s ease-out 1s infinite; }
.sc-pro .doc { left: 28cqw; top: 37cqw; width: 44cqw; padding: 3cqw; }
.sc-pro .doc .ln { height: 1.2cqw; border-radius: 1cqw; background: #dbe5f5; margin-top: 1.6cqw; }
.sc-pro .doc .ln.s { width: 60%; }
.sc-pro .doc .stamp { position: absolute; right: 2cqw; bottom: 2.4cqw; transform: rotate(-8deg); padding: .8cqw 2.2cqw; border: .7cqw solid var(--success); border-radius: 1.6cqw; color: var(--success); font-weight: 800; font-size: 2.8cqw; text-transform: uppercase; background: #fff; }
.sc-pro .todo { left: 50%; bottom: 3cqw; transform: translateX(-50%); display: flex; gap: 1.6cqw; }

/* ---------- Apporteurs : la commission ---------- */
.sc-paid .wallet { left: 28cqw; top: 33cqw; width: 44cqw; height: 25cqw; border-radius: 4cqw; background: linear-gradient(160deg, #1f58b8, #003784); box-shadow: 0 3cqw 7cqw -3cqw rgba(0, 25, 70, .6); }
.sc-paid .wallet::before { content: ''; position: absolute; left: 4cqw; right: 4cqw; top: -2cqw; height: 6cqw; border-radius: 3cqw 3cqw 0 0; background: #2f6fd0; }
.sc-paid .wallet .clasp { position: absolute; right: 4cqw; top: 9cqw; width: 11cqw; height: 8cqw; border-radius: 2cqw; background: var(--accent); }
.sc-paid .amount { left: 50%; top: 4cqw; transform: translateX(-50%); font-size: 11cqw; font-weight: 800; letter-spacing: -.05em; color: var(--primary); white-space: nowrap; }
.sc-paid .coin.c1 { left: 32cqw; top: 26cqw; } .sc-paid .coin.c2 { left: 44cqw; top: 22cqw; } .sc-paid .coin.c3 { left: 56cqw; top: 26cqw; }
.sc-paid .coin.c4 { left: 38cqw; top: 30cqw; } .sc-paid .coin.c5 { left: 50cqw; top: 30cqw; }
.sc-paid .paid { left: 50%; bottom: 4cqw; transform: translateX(-50%); }
.sc-paid .spark { color: var(--accent); }

/* ---------- Mini-scènes des fonctions ---------- */
.sc-mini > * { font-size: 4cqw; }
.sc-mini .card { border-radius: 4cqw; }
.sc-mini .btn { height: 11cqw; border-radius: 3.2cqw; }
.sc-m-recruit .qr { left: 7cqw; top: 8cqw; width: 29cqw; height: 29cqw; padding: 2.8cqw; }
.sc-m-recruit .qr svg.q { width: 100%; height: 100%; display: block; }
.sc-m-recruit .qr .scan { position: absolute; left: 2cqw; right: 2cqw; height: 1cqw; border-radius: 1cqw; background: var(--accent); box-shadow: 0 0 3cqw var(--accent); }
.sc-m-recruit .url { left: 5cqw; top: 41cqw; font-size: 3.2cqw; }
.sc-m-recruit .poster { left: 48cqw; top: 6cqw; width: 26cqw; height: 40cqw; padding: 3cqw; text-align: center; transform: rotate(4deg); }
.sc-m-recruit .poster img { width: 12cqw; height: auto; }
.sc-m-recruit .poster .ln { height: 1.4cqw; border-radius: 1cqw; background: #dbe5f5; margin: 2cqw auto 0; width: 80%; }
.sc-m-recruit .poster .mini { margin-top: 3cqw; height: 9cqw; border-radius: 2cqw; background: var(--soft-primary); }
.sc-m-recruit .wa { left: 74cqw; top: 8cqw; }
.sc-m-signal .field { left: 6cqw; top: 6cqw; right: 6cqw; }
.sc-m-signal .sugg { left: 6cqw; top: 22cqw; right: 30cqw; padding: 2.6cqw 3cqw; font-weight: 700; font-size: 3.4cqw; display: flex; align-items: center; gap: 2cqw; }
.sc-m-signal .map { left: 74cqw; top: 22cqw; width: 22cqw; height: 28cqw; border-radius: 3.4cqw; background: linear-gradient(135deg, #cfe3ff, #e8f3e0); overflow: hidden; }
.sc-m-signal .map::before { content: ''; position: absolute; left: 0; right: 0; top: 40%; height: 2cqw; background: rgba(255, 255, 255, .85); }
.sc-m-signal .map::after { content: ''; position: absolute; top: 0; bottom: 0; left: 38%; width: 2cqw; background: rgba(255, 255, 255, .85); }
.sc-m-signal .pin { left: 80cqw; top: 26cqw; width: 10cqw; height: 10cqw; color: var(--accent); z-index: 2; }
.sc-m-signal .pin svg { width: 100%; height: 100%; }
.sc-m-signal .ph { left: 6cqw; top: 38cqw; display: flex; gap: 2cqw; }
.sc-m-signal .ph span { width: 12cqw; height: 9cqw; border-radius: 2.4cqw; background: linear-gradient(135deg, #8fb6e8, #3f7ccc); }
.sc-m-signal .ph span + span { background: linear-gradient(135deg, #ffd8a0, #f6a02d); }
.sc-m-follow .tst { left: 8cqw; right: 8cqw; height: 11.5cqw; padding: 0 3.4cqw; display: flex; align-items: center; gap: 3cqw; font-weight: 800; font-size: 3.6cqw; }
.sc-m-follow .tst .ico { width: 7cqw; height: 7cqw; border-radius: 50%; display: grid; place-items: center; background: var(--soft-primary); color: var(--primary); flex: none; }
.sc-m-follow .tst.done .ico { background: color-mix(in srgb, var(--success) 18%, #fff); color: var(--success); }
.sc-m-follow .t1 { top: 6cqw; } .sc-m-follow .t2 { top: 21cqw; } .sc-m-follow .t3 { top: 36cqw; }
.sc-m-relance .clock { left: 10cqw; top: 8cqw; width: 30cqw; height: 30cqw; }
.sc-m-relance .clock svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.sc-m-relance .clock circle { fill: none; stroke-width: 9; }
.sc-m-relance .clock .bg { stroke: #cfdcf1; }
.sc-m-relance .clock .fg { stroke: var(--accent); stroke-linecap: round; }
.sc.is-run.sc-m-relance .clock .fg { animation: sc-tick 2.2s ease-in-out .3s backwards; }
.sc-m-relance .clock b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 7cqw; letter-spacing: -.03em; color: var(--primary); }
.sc-m-relance .clock small { position: absolute; left: 0; right: 0; bottom: 7cqw; text-align: center; font-size: 2.8cqw; font-weight: 800; color: var(--muted); }
.sc-m-relance .bellb { left: 46cqw; top: 8cqw; width: 12cqw; height: 12cqw; border-radius: 50%; background: var(--accent); display: grid; place-items: center; color: #1b1200; }
.sc-m-relance .bellb svg { width: 7cqw; height: 7cqw; }
.sc-m-relance .msg { left: 46cqw; top: 26cqw; right: 6cqw; padding: 3cqw 3.4cqw; font-weight: 700; font-size: 3.4cqw; }
.sc-m-comm .card { left: 8cqw; top: 8cqw; width: 52cqw; height: 40cqw; padding: 4cqw; }
.sc-m-comm .big { font-size: 10cqw; font-weight: 800; letter-spacing: -.04em; color: var(--primary); margin-top: 2cqw; }
.sc-m-comm .st { position: absolute; left: 4cqw; bottom: 4cqw; }
.sc-m-comm .coin.c1 { left: 66cqw; top: 14cqw; } .sc-m-comm .coin.c2 { left: 78cqw; top: 26cqw; } .sc-m-comm .coin.c3 { left: 64cqw; top: 36cqw; }
.sc.is-run.sc-m-comm .coin { animation: sc-pop .55s cubic-bezier(.2, 1.5, .4, 1) var(--d, 0s) backwards; }
.sc-m-msg .bubble { left: 6cqw; top: 8cqw; padding: 3.2cqw 3.6cqw; width: 40cqw; font-weight: 700; font-size: 3.5cqw; z-index: 2; }
.sc-m-msg .wavec { left: 36cqw; top: 14cqw; width: 14cqw; height: 14cqw; border-radius: 50%; border: .8cqw solid var(--accent); opacity: 0; }
.sc-m-msg .avs { left: 52cqw; top: 6cqw; width: 42cqw; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3cqw 2cqw; }
.sc-m-msg .avs i { position: relative; display: grid; place-items: center; width: 11cqw; height: 11cqw; border-radius: 50%; font-style: normal; font-weight: 800; color: #fff; background: #9fb2d0; font-size: 4cqw; margin: 0 auto; }
.sc.is-run.sc-m-msg .avs i { animation: sc-light .5s ease var(--d, 0s) backwards; }
.sc-m-msg .avs i.c1 { background: #f59a23; } .sc-m-msg .avs i.c2 { background: #0a93b8; } .sc-m-msg .avs i.c3 { background: #2f6fd0; }
.sc-m-msg .avs i.c4 { background: #12935a; } .sc-m-msg .avs i.c5 { background: #7a5af8; } .sc-m-msg .avs i.c6 { background: #d6457a; }
.sc-m-msg .avs i::after { content: ''; position: absolute; right: -1cqw; bottom: -1cqw; width: 4.6cqw; height: 4.6cqw; border-radius: 50%; background: var(--success) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 70% no-repeat; border: .5cqw solid #fff; }
.sc.is-run.sc-m-msg .wavec { animation: sc-wave 1.8s ease-out .6s infinite; }

/* ---------- Mise en page : cartes de scène + titres ---------- */
.scene-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
@media (min-width: 760px) { .scene-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; } }
.scene-card { display: flex; flex-direction: column; gap: 14px; }
.scene-card .num-badge { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 800; flex: none; }
.scene-card h3 { display: flex; align-items: center; gap: 12px; margin: 0; }
.scene-card p { margin: 0; color: var(--muted); }
.feat-card { display: flex; flex-direction: column; gap: 14px; overflow: hidden; }
.feat-card .sc { border-radius: 16px; }

/* Bande « Made in France » (discrète) */
.fr-strip { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px; font-weight: 700; font-size: 14.5px; color: var(--muted); text-align: center; border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent); background: var(--surface); }
.fr-strip .france-flag { margin: 0; }

/* ---------- Décor vivant du héros : de petits repères qui flottent ---------- */
.hero-float { position: absolute; z-index: 0; pointer-events: none; color: rgba(255, 255, 255, .22); animation: hero-float 7s ease-in-out infinite; }
.hero-float svg { width: 100%; height: 100%; }
@keyframes hero-float { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-14px) rotate(3deg); } }
.site-hero .wrap { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .sc *, .sc *::before, .sc *::after { animation: none !important; }
  .hero-float { animation: none; }
}