/*
	Styles applicatifs — Monitoring franchises.
	Transcription en classes des styles inline de la maquette
	(.claude/doc/design/v1/Monitoring Chope & Compagnie.dc.html).
*/

*{ box-sizing:border-box; }
html, body{ margin:0; padding:0; height:100%; }
body{ background:var(--bg); color:var(--text); font-family:var(--font); -webkit-font-smoothing:antialiased; }
a{ color:var(--accent-ink); text-decoration:none; }
a:hover{ text-decoration:underline; }
button{ font-family:inherit; cursor:pointer; }
input, select{ font-family:inherit; }
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-thumb{ background:#d3d3d8; border-radius:99px; border:3px solid var(--surface); }
::-webkit-scrollbar-thumb:hover{ background:#bcbcc4; }

@keyframes shShimmer{ 0%{ background-position:-360px 0; } 100%{ background-position:360px 0; } }
@keyframes shSlide{ from{ transform:translateX(24px); opacity:0; } to{ transform:translateX(0); opacity:1; } }
@keyframes shFade{ from{ opacity:0; } to{ opacity:1; } }

.num{ font-variant-numeric:tabular-nums; }

/* ══ Écrans centrés (connexion, sélection boutique) ══ */

.centerScreen{ min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg, #fafafb, #f2f2f4); padding:40px; }
.centerScreen .inner{ max-width:100%; animation:shFade .3s ease; }
.centerScreen .footNote{ text-align:center; margin-top:18px; font-size:11px; color:var(--text-3); }
.centerScreen .footNote b{ font-weight:600; color:var(--text-2); }

.loginCard{ width:400px; max-width:100%; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--sh-pop); padding:36px 34px; }
.loginCard .logo{ height:44px; display:block; margin:0 auto 8px; }
.loginCard .brand{ text-align:center; font-size:12px; color:var(--text-3); letter-spacing:.04em; margin-bottom:26px; }
.loginCard .sep{ height:1px; background:var(--border); margin:0 0 24px; }
.loginCard h1{ font-size:19px; font-weight:600; margin:0 0 2px; }
.loginCard .sub{ font-size:13px; color:var(--text-2); margin-bottom:24px; }
.loginCard label{ display:block; font-size:12px; font-weight:600; color:var(--text-2); margin-bottom:6px; }
.loginCard input{ width:100%; height:40px; padding:0 12px; margin-bottom:16px; border:1px solid var(--border-strong); border-radius:var(--r-md); font-size:14px; background:#fff; outline:none; }
.loginCard input[type=password]{ margin-bottom:24px; letter-spacing:.15em; }
.loginCard input:focus{ border-color:var(--text); box-shadow:0 0 0 3px rgba(20,20,30,.08); }
.loginCard .error{ display:flex; align-items:center; gap:8px; padding:10px 12px; margin-bottom:16px; background:var(--st-danger-bg); color:var(--st-danger-fg); border-radius:var(--r-md); font-size:13px; }
.btnPrimary{ width:100%; height:42px; border:none; border-radius:var(--r-md); background:var(--text); color:#fff; font-size:14px; font-weight:600; }
.btnPrimary:hover{ background:#000; }
.btnPrimary:focus-visible{ outline:2px solid var(--accent-ink); outline-offset:2px; }

.shopSelect{ width:560px; }
.shopSelect .logo{ height:32px; display:block; margin:0 auto 22px; }
.shopSelect h1{ text-align:center; font-size:19px; font-weight:600; margin:0; }
.shopSelect .sub{ text-align:center; font-size:13px; color:var(--text-2); margin:4px 0 22px; }
.shopSelect .grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.shopSelect .grid.single{ grid-template-columns:1fr; }
.shopCard{ display:flex; align-items:center; gap:14px; padding:16px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--sh-card); text-align:left; }
.shopCard:hover{ box-shadow:var(--sh-cardHover); border-color:var(--border-strong); }
.shopCard:focus-visible{ outline:2px solid var(--accent-ink); outline-offset:2px; }
.shopCard .tile{ width:48px; height:48px; border-radius:var(--r-md); overflow:hidden; flex:none; }
.shopCard .tile img{ width:100%; height:100%; object-fit:cover; }
.shopCard .name{ font-size:15px; font-weight:600; color:var(--text); }
.shopCard .meta{ font-size:12px; color:var(--text-2); margin-top:2px; }

/* ══ Coquille applicative ══ */

.app{ height:100vh; display:flex; background:var(--surface); overflow:hidden; }

.appNav{ width:208px; flex:none; background:#fbfbfc; border-right:1px solid var(--border); display:flex; flex-direction:column; }
.appNav .head{ height:60px; display:flex; align-items:center; gap:10px; padding:0 18px; border-bottom:1px solid var(--border); }
.appNav .head .tile{ width:30px; height:30px; border-radius:6px; overflow:hidden; flex:none; box-shadow:var(--sh-sm); }
.appNav .head .tile img{ width:100%; height:100%; object-fit:cover; }
.appNav .head .title{ font-size:13px; font-weight:600; line-height:1.1; white-space:nowrap; }
.appNav .head .title small{ display:block; font-size:10px; color:var(--text-3); font-weight:500; }
.appNav .items{ padding:10px; display:flex; flex-direction:column; gap:2px; }
.appNav .items a{ display:flex; align-items:center; gap:10px; height:36px; padding:0 10px; border-radius:var(--r-md); font-size:13px; font-weight:500; color:var(--text-2); text-decoration:none; }
.appNav .items a:hover{ background:var(--hover); color:var(--text); }
.appNav .items a:focus-visible{ outline:2px solid var(--accent-ink); outline-offset:-2px; }
.appNav .items a.active{ background:var(--accent-weak); color:var(--accent-ink); font-weight:600; }
.appNav .items a svg{ flex:none; }
.appNav .foot{ margin-top:auto; padding:14px 16px; border-top:1px solid var(--border); display:flex; align-items:center; gap:8px; font-size:10px; color:var(--text-3); white-space:nowrap; }
.appNav .foot img{ height:14px; opacity:.85; }

.appMain{ flex:1; min-width:0; display:flex; flex-direction:column; position:relative; }

.appHeader{ height:60px; flex:none; display:flex; align-items:center; gap:16px; padding:0 22px; border-bottom:1px solid var(--border); background:var(--surface); z-index:5; }
.appHeader .pageTitle{ font-size:15px; font-weight:600; }
.appHeader .right{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.appHeader .shopSwitch{ display:flex; align-items:center; gap:8px; height:36px; padding:0 10px 0 8px; border:1px solid var(--border); border-radius:var(--r-md); background:#fff; font-size:13px; font-weight:600; color:var(--text); text-decoration:none; }
.appHeader .shopSwitch:hover{ border-color:var(--border-strong); background:var(--hover); text-decoration:none; }
.appHeader .shopSwitch .tile{ width:22px; height:22px; border-radius:4px; overflow:hidden; display:inline-block; }
.appHeader .shopSwitch .tile img{ width:100%; height:100%; object-fit:cover; }
.appHeader .vsep{ width:1px; height:24px; background:var(--border); }
.appHeader .user{ display:flex; align-items:center; gap:8px; height:36px; padding:0 6px; font-size:13px; font-weight:500; }
.appHeader .user .avatar{ width:28px; height:28px; border-radius:50%; background:var(--accent-weak); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; }
.appHeader .logout{ width:34px; height:34px; display:flex; align-items:center; justify-content:center; border:1px solid var(--border); border-radius:var(--r-md); background:#fff; color:var(--text-2); }
.appHeader .logout:hover{ border-color:var(--border-strong); background:var(--hover); color:var(--text); }

.appContent{ flex:1; overflow:auto; background:var(--bg); }

/* ══ Composants communs ══ */

.card{ background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--sh-card); }

.badge{ display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 9px; border-radius:var(--r-pill); font-size:11.5px; font-weight:600; white-space:nowrap; }
.badge .dot{ width:6px; height:6px; border-radius:50%; }
.badge.neutral{ background:var(--st-neutral-bg); color:var(--st-neutral-fg); }
.badge.neutral .dot{ background:var(--st-neutral-dot); }
.badge.info{ background:var(--st-info-bg); color:var(--st-info-fg); }
.badge.info .dot{ background:var(--st-info-dot); }
.badge.ok{ background:var(--st-ok-bg); color:var(--st-ok-fg); }
.badge.ok .dot{ background:var(--st-ok-dot); }
.badge.danger{ background:var(--st-danger-bg); color:var(--st-danger-fg); }
.badge.danger .dot{ background:var(--st-danger-dot); }

/* ══ Tablette ══ */

@media (max-width:1100px){
	.appNav{ width:64px; }
	.appNav .head .title, .appNav .items a span, .appNav .foot span{ display:none; }
	.appNav .items a{ justify-content:center; }
	.appNav .foot{ justify-content:center; }
}