/* Scanner de tracking — composant partagé. Utilise les couleurs du site (:root de la page). */
.scan{--scan-r:16px;max-width:760px}
.scan-label{display:block;font-weight:700;margin-bottom:8px}
.scan-field{display:flex;gap:8px;flex-wrap:wrap}
.scan-field input{flex:1 1 240px;min-width:0;font:inherit;font-size:1.1rem;padding:15px 18px;border-radius:14px;border:2px solid var(--line);background:var(--bg);color:var(--ink)}
.scan-field input:focus{outline:none;border-color:var(--ink)}
.scan-field input::placeholder{color:var(--muted);opacity:.8}
.scan-go{font:inherit;font-weight:800;font-size:1.05rem;padding:15px 24px;border-radius:14px;background:var(--ink);color:var(--bg);border:2px solid var(--ink);cursor:pointer;transition:transform .15s var(--ease-out,ease)}
.scan-go:hover{transform:translateY(-1px)}
.scan-go:active{transform:scale(.97)}
.scan-go:disabled{opacity:.6;cursor:progress;transform:none}
@media (max-width:520px){.scan-go{flex:1 1 100%}}
.scan-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.scan-note{color:var(--muted);font-size:.93rem;margin-top:10px}
.scan-err{margin-top:12px;color:var(--loss);font-weight:700}

/* Étapes pendant la lecture */
.scan-steps{list-style:none;margin:22px 0 0;padding:18px 20px;border:1px solid var(--line);border-radius:var(--scan-r);background:var(--surface);display:grid;gap:8px;font-size:.98rem}
.scan-steps li{display:flex;align-items:center;gap:10px;color:var(--muted);opacity:.55;transition:opacity .25s}
.scan-steps li::before{content:"";flex:0 0 14px;height:14px;border-radius:50%;border:2px solid var(--line)}
.scan-steps li.is-on{opacity:1;color:var(--ink)}
.scan-steps li.is-on::before{border-color:var(--sun);border-right-color:transparent;animation:scan-spin .8s linear infinite}
.scan-steps li.is-done{opacity:1;color:var(--ink)}
.scan-steps li.is-done::before{background:var(--gain);border-color:var(--gain);box-shadow:inset 0 0 0 2px var(--surface)}
@keyframes scan-spin{to{transform:rotate(360deg)}}

/* Résultat */
.scan-card{margin-top:22px;border:1px solid var(--line);border-radius:20px;background:var(--bg);padding:24px;box-shadow:0 24px 48px -32px rgba(20,32,43,.45);opacity:0;transform:translateY(10px);transition:opacity .4s var(--ease-out,ease),transform .4s var(--ease-out,ease)}
.scan-card.is-in{opacity:1;transform:none}
.scan-head{display:flex;gap:20px;align-items:center}
.scan-gauge{--p:0;--c:var(--gain);flex:0 0 112px;height:112px;border-radius:50%;display:grid;place-content:center;text-align:center;
  background:radial-gradient(closest-side,var(--bg) 79%,transparent 80% 100%),conic-gradient(var(--c) calc(var(--p)*1%),var(--line) 0)}
.scan-gauge[data-ton=attention]{--c:var(--sun)}
.scan-gauge[data-ton=alerte]{--c:var(--loss)}
.scan-gauge b{font-family:"Outfit",system-ui,sans-serif;font-size:2.4rem;line-height:1;letter-spacing:-.03em}
.scan-gauge small{color:var(--muted);font-size:.8rem}
.scan-title{min-width:0}
.scan-kicker{display:block;color:var(--muted);font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.scan-domain{display:block;font-family:"Outfit",system-ui,sans-serif;font-size:1.5rem;letter-spacing:-.02em;overflow-wrap:anywhere}
.scan-tags{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:.92rem;color:var(--muted)}
.scan-chip{display:inline-block;padding:3px 10px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--ink);font-weight:700;font-size:.85rem}
@media (max-width:520px){.scan-head{flex-direction:column;align-items:flex-start}.scan-card{padding:18px}}

.scan-list{list-style:none;margin:20px 0 0;padding:0}
.scan-item{display:grid;grid-template-columns:96px 1fr;gap:12px;padding:14px 0;border-top:1px solid var(--line);opacity:0;transform:translateY(6px);animation:scan-in .35s var(--ease-out,ease) forwards;animation-delay:calc(var(--i)*90ms + 250ms)}
@keyframes scan-in{to{opacity:1;transform:none}}
.scan-item strong{display:block}
.scan-item p{color:var(--muted);font-size:.97rem;margin-top:2px}
.scan-badge{align-self:start;justify-self:start;padding:3px 9px;border-radius:999px;font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  background:color-mix(in srgb,var(--sky) 14%,transparent);color:var(--sky)}
.scan-item[data-niveau=alerte] .scan-badge{background:color-mix(in srgb,var(--loss) 14%,transparent);color:var(--loss)}
.scan-item[data-niveau=attention] .scan-badge{background:color-mix(in srgb,var(--sun) 22%,transparent);color:color-mix(in srgb,var(--sun) 55%,var(--ink))}
.scan-item[data-niveau=bon] .scan-badge{background:color-mix(in srgb,var(--gain) 14%,transparent);color:var(--gain)}
@media (max-width:520px){.scan-item{grid-template-columns:1fr;gap:6px}}

.scan-limits{margin-top:18px;padding:14px 16px;border:1px solid var(--line);background:var(--surface);border-radius:12px;font-size:.97rem}
.scan-scale{margin-top:10px;color:var(--muted);font-size:.85rem}
.scan-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:20px}
.scan-again{all:unset;cursor:pointer;color:var(--muted);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.scan-again:focus-visible{outline:3px solid var(--sun);outline-offset:3px;border-radius:4px}
.scan-mail{margin-top:24px;padding-top:20px;border-top:1px dashed var(--line)}
.scan-consent{display:flex;gap:8px;align-items:flex-start;margin-top:10px;font-size:.9rem;color:var(--muted)}
.scan-consent input{margin-top:4px}
.scan-msg{margin-top:12px;font-weight:700;color:var(--gain)}

@media (prefers-reduced-motion:reduce){
  .scan-card,.scan-item{opacity:1;transform:none;animation:none;transition:none}
  .scan-steps li.is-on::before{animation:none}
}