/* Swiss TrottiPass — « Mon espace » v4 : présentation façon « Localiser ». */
:root{--a4-red:#E30613;--a4-red-d:#c30511;--a4-navy:#14263f;--a4-text:#33415a;--a4-muted:#5b6780;--a4-bg:#FAFAF8;--a4-line:#e6e4df;--a4-green:#1c8a42}
html body.signed-in:has(#dashboard:not([hidden])){background:var(--a4-bg)!important}
html body.a4-on #dashboard *{text-shadow:none!important}

/* une seule colonne : la barre latérale devient le menu sous l'initiale */
html body.a4-on #dashboard.workspace{display:block!important;position:relative;max-width:none!important;padding:0!important}
html body.a4-on #dashboard.workspace>nav.a4-menu{display:none!important}
html body.a4-on #dashboard.workspace.a4-menu-open>nav.a4-menu{display:flex!important;flex-direction:column;position:absolute!important;z-index:80;right:0;top:76px;width:260px!important;min-height:0!important;height:auto!important;padding:8px!important;margin:0!important;background:#fff!important;border:1px solid var(--a4-line)!important;border-radius:16px!important;box-shadow:0 18px 40px -16px rgba(20,38,63,.35)!important;animation:a4pop .16s ease}
@keyframes a4pop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
html body.a4-on #dashboard nav.a4-menu .sidebar-brand,html body.a4-on #dashboard nav.a4-menu .sidebar-footer{display:none!important}
html body.a4-on #dashboard nav.a4-menu>button{display:flex!important;align-items:center;gap:12px;width:100%!important;min-height:46px!important;margin:0!important;padding:0 14px!important;border:0!important;border-radius:10px!important;background:none!important;color:var(--a4-navy)!important;font-size:15px!important;font-weight:600!important;text-align:left;box-shadow:none!important}
html body.a4-on #dashboard nav.a4-menu>button:hover{background:#f4f2ee!important}
html body.a4-on #dashboard nav.a4-menu>button[aria-pressed=true]{color:var(--a4-red)!important;background:#fff1f2!important}
html body.a4-on #dashboard nav.a4-menu>button.a4-out{margin-top:6px!important;border-top:1px solid var(--a4-line)!important;border-radius:0 0 10px 10px!important;color:var(--a4-muted)!important}
html body.a4-on #dashboard .workspace-content{width:100%!important;max-width:none!important;margin:0!important;padding:0!important}
/* ancien en-tête du compte et ancienne vue d'ensemble : remplacés par la nouvelle barre */
html body.a4-on #dashboard .workspace-content>.session,html body.a4-on #dashboard .member-overview,html body.a4-on #dashboard .screen-heading:has(#workspace-title),html body.a4-on #dashboard .garage-add-action{display:none!important}
html body.a4-on #dashboard #tp-stage .tps-head,html body.a4-on #dashboard #tp-stage .tps-dock,html body.a4-on #dashboard #tp-stage .tps-sw{display:none!important}

/* barre du haut : vignettes + bonjour + initiale */
.a4-top{display:flex;align-items:center;gap:16px;padding:8px 0 18px}
.a4-pick{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.a4-thumb{display:inline-flex!important;align-items:center;gap:10px;min-height:52px!important;padding:6px 16px 6px 6px!important;border:0!important;border-radius:99px!important;background:transparent!important;color:var(--a4-navy)!important;font-size:15px!important;font-weight:600!important;box-shadow:none!important;cursor:pointer}
.a4-thumb i{width:40px;height:40px;border-radius:50%;background:#e9edf2 url(/public/trottinette-detouree.webp) center/150% no-repeat;background-size:cover}
.a4-thumb:not(.on) i{background-size:150%}
.a4-thumb i[style]{background-size:cover!important}
.a4-thumb.on{background:#fff!important;box-shadow:0 0 0 2px var(--a4-navy)!important}
.a4-thumb.on.bad{box-shadow:0 0 0 2px var(--a4-red)!important}
.a4-add{width:40px!important;height:40px!important;min-height:40px!important;padding:0!important;border-radius:50%!important;border:1.5px dashed #b8b4ab!important;background:transparent!important;color:var(--a4-muted)!important;font-size:22px!important;line-height:1!important;box-shadow:none!important;cursor:pointer}
.a4-add:hover{border-color:var(--a4-red)!important;color:var(--a4-red)!important}
.a4-who{margin-left:auto;display:flex;align-items:center;gap:14px}
.a4-hello{color:var(--a4-muted);font-size:15px}
.a4-av{width:44px!important;height:44px!important;min-height:44px!important;padding:0!important;border:0!important;border-radius:50%!important;background:var(--a4-red)!important;color:#fff!important;font-size:17px!important;font-weight:700!important;box-shadow:0 0 0 3px #fff,0 0 0 4px var(--a4-line)!important;cursor:pointer}

/* grande photo */
.a4-hero{position:relative;min-height:clamp(380px,36vw,500px);border-radius:28px;overflow:hidden;display:flex;align-items:center;background:#1b2840;animation:a4in .7s ease both}
@keyframes a4in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.a4-bg{position:absolute;inset:0;background:center 62%/cover no-repeat;transition:filter .3s}
.a4-bg.own{background-position:center}
.a4-hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(10,18,36,.8) 0%,rgba(10,18,36,.5) 38%,rgba(10,18,36,0) 64%)}
.a4-hero.st-stolen .a4-bg,.a4-hero.st-declared .a4-bg{filter:saturate(.55)}
.a4-hero.st-stolen::before,.a4-hero.st-declared::before{background:linear-gradient(90deg,rgba(120,6,14,.9) 0%,rgba(120,6,14,.62) 40%,rgba(120,6,14,.08) 72%)}
.a4-in{position:relative;z-index:2;width:min(620px,60%);padding:44px clamp(28px,4vw,56px);color:#fff}
.a4-in h1{margin:16px 0 12px!important;font-size:clamp(34px,3.6vw,52px)!important;line-height:1.04!important;font-weight:800!important;letter-spacing:-.02em!important;color:#fff!important}
.a4-in p{margin:0!important;font-size:17px!important;line-height:1.5!important;color:#e2e8f2!important}
.a4-in p b{color:#fff}
.a4-in .a4-sub{margin-top:12px!important;font-size:16px!important;color:#fff!important}
.a4-badge{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 8px;border-radius:99px;font-weight:700;font-size:16px;background:#e8f7ee;color:#136b33}
.a4-badge b{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--a4-green);color:#fff;font-size:15px}
.st-wait .a4-badge{background:#fff4e0;color:#8a4b00}.st-wait .a4-badge b{background:#e08a00}
.st-stolen .a4-badge,.st-declared .a4-badge{background:#fff;color:#b0101a}.st-stolen .a4-badge b,.st-declared .a4-badge b{background:var(--a4-red)}
.a4-cta{margin-top:24px!important;min-height:50px!important;padding:0 24px!important;border:0!important;border-radius:12px!important;background:var(--a4-red)!important;color:#fff!important;font-size:16px!important;font-weight:600!important;cursor:pointer}

/* trois actions */
.a4-acts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--a4-line);margin-top:6px}
.a4-act{display:flex!important;align-items:center;gap:18px;min-height:0!important;padding:28px 26px!important;margin:0!important;border:0!important;border-left:1px solid var(--a4-line)!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;text-align:left;cursor:pointer;color:var(--a4-navy)!important;transition:background-color .15s}
.a4-act:first-child{border-left:0!important;padding-left:6px!important}
.a4-act:hover{background:#fff!important}
.a4-ic{flex:none;width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:#fff1f2}
.a4-ic svg{width:30px;height:30px}
.a4-act:nth-child(3) .a4-ic{background:#eaf2ff}
.st-stolen~.a4-acts .a4-act:nth-child(1) .a4-ic,.st-declared~.a4-acts .a4-act:nth-child(1) .a4-ic{background:#f1f3f6}
.st-stolen~.a4-acts .a4-act:nth-child(3) .a4-ic,.st-declared~.a4-acts .a4-act:nth-child(3) .a4-ic{background:#e8f7ee}
.a4-tx{display:flex;flex-direction:column;gap:4px;min-width:0}
.a4-tx b{font-size:19px;color:var(--a4-navy)}
.a4-tx small{font-size:14.5px;color:var(--a4-muted);line-height:1.35}
.a4-act.red .a4-tx b{color:var(--a4-red)}
.a4-go{margin-left:auto;color:var(--a4-muted);font-size:24px}
.a4-links{display:flex;flex-wrap:wrap;gap:8px 28px;padding:16px 6px 0}
.a4-link{min-height:36px!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;color:var(--a4-red)!important;font-size:15px!important;font-weight:600!important;cursor:pointer}
.a4-link:hover{text-decoration:underline}
.a4-note{flex-basis:100%;margin:6px 0 0!important;padding:12px 16px;border-left:3px solid var(--a4-green);background:#fff;color:var(--a4-navy);font-size:15px}

/* pièces + historique */
.a4-two{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,1fr);gap:clamp(32px,5vw,80px);padding:clamp(48px,5vw,72px) 0 24px;align-items:start}
.a4-kick{margin:0 0 8px!important;font-size:13px!important;font-weight:700!important;letter-spacing:.1em!important;text-transform:uppercase!important;color:var(--a4-red)!important}
.a4-h{margin:0 0 6px!important;font-size:clamp(22px,2vw,28px)!important;font-weight:700!important;color:var(--a4-navy)!important;letter-spacing:-.01em}
html body.a4-on #dashboard .a4-parts #tp-stage{display:block!important;padding:0!important;margin:0!important;background:none!important;border:0!important;box-shadow:none!important;min-height:0!important}
html body.a4-on #dashboard .a4-parts .tps-sc{position:relative!important;left:auto!important;top:auto!important;right:auto!important;margin:8px auto 0!important;max-width:560px}
html body.a4-on #dashboard .a4-parts .tps-sc img{filter:drop-shadow(0 24px 26px rgba(20,38,63,.15))}
html body.a4-on #dashboard .a4-parts .tps-aux,html body.a4-on #dashboard .a4-parts .tps-hint{position:static!important}
html body.a4-on #dashboard .a4-parts .tps-hint{display:none!important}
html body.a4-on #dashboard .tps-h{width:30px!important;height:30px!important;min-height:0!important;padding:0!important;border-radius:50%!important;border:2px solid #fff!important;background:var(--a4-navy)!important;color:#fff!important;font-size:12px!important;font-weight:700!important;box-shadow:0 0 0 6px rgba(227,6,19,.12),0 6px 14px rgba(20,38,63,.25)!important;transition:transform .2s,background-color .2s}
html body.a4-on #dashboard .tps-h.has{background:var(--a4-red)!important}
html body.a4-on #dashboard .tps-h:hover,html body.a4-on #dashboard .tps-h.on{transform:scale(1.12);background:var(--a4-red)!important}
html body.a4-on #dashboard .tps-l{border-radius:999px!important;border:0!important;box-shadow:0 6px 16px rgba(20,38,63,.14)!important;font-weight:600!important;color:var(--a4-navy)!important}
html body.a4-on #dashboard .tps-other{border-radius:12px!important;border:1px solid var(--a4-line)!important;background:#fff!important}
html body.a4-on #dashboard .tps-sv{display:none!important}
.a4-tl{list-style:none;margin:20px 0 6px!important;padding:0!important;position:relative}
.a4-tl::before{content:"";position:absolute;left:11px;top:8px;bottom:8px;width:2px;background:var(--a4-line)}
.a4-tl li{position:relative;padding:0 0 24px 42px!important;margin:0!important}
.a4-tl li::before{content:"";position:absolute;left:4px;top:4px;width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--a4-navy)}
.a4-tl li.g::before{border-color:var(--a4-green)}
.a4-tl li.o::before{border-color:#e08a00}
.a4-tl li.r::before,.a4-tl li.w::before{border-color:var(--a4-red)}
.a4-tl b{display:block;color:var(--a4-navy);font-size:16px}
.a4-tl span{font-size:14px;color:var(--a4-muted)}
.a4-muted{color:var(--a4-muted);font-size:14px;margin:0 0 8px!important}

/* code de transfert : une ligne */
html body.a4-on #dashboard .workspace-screen details.form-card{background:none!important;border:0!important;border-top:1px solid var(--a4-line)!important;border-bottom:1px solid var(--a4-line)!important;border-radius:0!important;box-shadow:none!important;max-width:none!important}

/* autres écrans du compte (coordonnées, signalements, paramètres) : fond clair, champs arrondis */
html body.a4-on #dashboard input:not([type=checkbox]):not([type=radio]):not([type=file]),html body.a4-on #dashboard select,html body.a4-on #dashboard textarea{border-radius:12px!important;border:1px solid #d9d6cf!important;background:#fff!important}
html body.a4-on #dashboard input:focus,html body.a4-on #dashboard select:focus,html body.a4-on #dashboard textarea:focus{border-color:var(--a4-navy)!important;box-shadow:0 0 0 3px rgba(20,38,63,.12)!important}

/* tablette / téléphone */
@media(max-width:1000px){
 .a4-acts{grid-template-columns:1fr}
 .a4-act{border-left:0!important;border-top:1px solid var(--a4-line)!important;padding:20px 4px!important}
 .a4-act:first-child{border-top:0!important}
 .a4-two{grid-template-columns:1fr}
 .a4-in{width:min(620px,80%)}
}
@media(max-width:700px){
 .a4-hello{display:none}
 .a4-thumb span{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .a4-hero{display:block;min-height:0;border-radius:22px}
 .a4-bg{position:relative;height:220px}
 .a4-hero::before{display:none}
 .a4-in{width:auto;padding:22px 20px 26px;background:var(--a4-navy)}
 .st-stolen .a4-in,.st-declared .a4-in{background:#8f0a14}
 .a4-in h1{font-size:30px!important}
 html body.a4-on #dashboard.workspace.a4-menu-open>nav.a4-menu{position:fixed!important;left:12px;right:12px;top:auto;bottom:12px;width:auto!important}
}