/* Pages web (partenaire, flotte, admin) : mêmes tokens que l'app, mise en page bureau. */
:root { --container: 1200px; --page-pad: 24px; }
html, body { background: var(--bg); height: auto; min-height: 100%; }
body { color: var(--ink); }

.web-header {
  position: sticky; top: 0; z-index: 50; background: var(--surface); color: var(--ink); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 16px; padding: 12px 24px;
}
.web-header .logo { font-size: 24px; color: var(--ink); }
.web-header nav { display: flex; gap: 4px; margin-left: 16px; flex-wrap: wrap; }
.web-header nav a, .web-header nav button { color: var(--ink-2); text-decoration: none; padding: 8px 12px; border-radius: 10px; font-weight: 600; font-size: 14px; }
.web-header nav a.on, .web-header nav button.on { background: var(--primary-50); color: var(--primary-hover); }
.web-header .spacer { flex: 1; }
.web-header .who { font-size: 14px; color: var(--ink-2); }

.container { max-width: var(--container); margin: 0 auto; padding: var(--page-pad); }
.narrow { max-width: 760px; }
.panel { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 24px; margin-bottom: 20px; border: 1px solid var(--border); }
.panel h2 { margin: 0 0 4px; font-size: 22px; letter-spacing: -0.02em; }
.panel h3 { margin: 20px 0 10px; font-size: 16px; }
.panel .sub { color: var(--ink-2); margin: 0 0 18px; }

.grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.span-2 { grid-column: span 2; }
@media (max-width: 720px) {
  .grid, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .span-2 { grid-column: auto; }
  .container { padding: 16px; }
  .web-header { padding: 10px 16px; flex-wrap: wrap; gap: 8px 12px; }
  .web-header .logo { font-size: 22px; }
  .web-header nav { order: 3; margin-left: 0; width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .web-header nav a, .web-header nav button { white-space: nowrap; }
}

.f label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; color: var(--ink-2); }
.f input, .f select, .f textarea {
  width: 100%; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--border);
  background: var(--surface); font-size: 15px; outline: none;
}
.f input:focus, .f select:focus, .f textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(230, 72, 92, 0.18); }
.f .help { font-size: 12px; color: var(--ink-3); margin-top: 4px; }
.f.err input, .f.err select { border-color: var(--danger); }
.err-msg { font-size: 12px; font-weight: 600; color: var(--danger); margin-top: 5px; }
.step-label { margin: 0 0 10px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.consent { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; font-size: 14px; line-height: 1.5; flex-wrap: wrap; cursor: pointer; }
.consent input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--primary); flex: none; }
.consent span { flex: 1; min-width: 0; }
.consent.err span { color: var(--danger); }
.consent .err-msg { flex-basis: 100%; margin: 0 0 0 28px; }
/* formulaire partenaire : numéro confirmé par code SMS (cases du code : .onb-otp, app.css) */
[data-sec="phone"] .f { max-width: 336px; }
[data-sec="phone"] .onb-otp { margin-top: 6px; }
[data-sec="phone"] .onb-cells span { height: 58px; font-size: 26px; border-radius: 14px; }
[data-sec="phone"] .onb-resend { text-align: left; margin-top: 10px; }
.phone-ok { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 12px 14px; border-radius: 14px; background: var(--success-50); font-size: 15px; }
.phone-ok .ic-ok { color: var(--success); flex: none; }
.phone-ok > span { flex: 1; min-width: 0; }
.phone-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.phone-actions .btn { width: auto; }
.nowrap { white-space: nowrap; }
.form-msg { margin: 18px 0 0; min-height: 0; font-size: 14px; font-weight: 600; color: var(--danger); }
.form-msg:empty { display: none; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.04em; }

.steps { display: flex; gap: 6px; margin: 0 0 20px; }
.steps div { flex: 1; height: 5px; border-radius: 3px; background: var(--bg-3); }
.steps div.on { background: var(--primary-200); }
.steps div.cur { background: var(--primary); }

.choice { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 720px) { .choice { grid-template-columns: 1fr; } }
.choice button {
  text-align: left; padding: 20px; border-radius: 18px; border: 2px solid var(--border); background: var(--surface);
}
.choice button.on { border-color: var(--primary); background: var(--primary-50); }
.choice .big { font-size: 34px; }
.choice b { display: block; font-size: 18px; margin: 8px 0 4px; }
.choice span { color: var(--ink-2); font-size: 14px; }

.check-list { list-style: none; padding: 0; margin: 10px 0 0; font-size: 14px; }
.check-list li { padding: 6px 0; display: flex; gap: 8px; align-items: flex-start; }
.check-list .ok { color: var(--success); }
.check-list .ko { color: var(--danger); }
.check-list .wa { color: var(--warning-ink); }

.docs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 720px) { .docs { grid-template-columns: 1fr 1fr; } }
.doc {
  border: 2px dashed var(--border); border-radius: 16px; padding: 14px; text-align: center; cursor: pointer;
  min-height: 130px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; position: relative;
  overflow: hidden; background: var(--surface);
}
.doc.has { border-style: solid; border-color: var(--primary); }
.doc img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .35; }
.doc b, .doc span { position: relative; }
.doc span { font-size: 12px; color: var(--ink-2); }
.doc input { display: none; }

.actions-bar { display: flex; gap: 10px; justify-content: space-between; margin-top: 22px; }
.actions-bar .btn { width: auto; min-width: 150px; }
/* téléphone : deux boutons de 150 px ne tiennent pas dans la carte (360 px) → ils se partagent la largeur */
@media (max-width: 480px) { .actions-bar .btn { min-width: 0; flex: 1 1 0; } }

/* Tableaux & KPI */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
@media (max-width: 900px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 16px 18px; }
.kpi .l { font-size: 13px; color: var(--ink-2); font-weight: 600; }
.kpi .v { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.kpi .s { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.kpi.brand { background: var(--primary); border-color: var(--primary); color: #fff; }
.kpi.brand .l, .kpi.brand .s { color: rgba(255, 255, 255, 0.85); }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); font-weight: 700; padding: 10px 12px; border-bottom: 1px solid var(--border); }
td { padding: 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
.badge { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--bg-3); color: var(--ink-2); white-space: nowrap; }
.badge.green { background: var(--success-50); color: #12925f; }
.badge.blue { background: var(--info-50); color: var(--info); }
.badge.red { background: var(--danger-50); color: var(--danger); }
.badge.amber { background: var(--warning-50); color: var(--warning-ink); }
@media (prefers-color-scheme: dark) {
  .badge.green { color: var(--success-bright); }
  .badge.blue { color: #9cc3ff; }
  .badge.red { color: #ff8a73; }
}
.row-actions { display: flex; gap: 6px; justify-content: flex-end; }
.row-actions button, .row-actions select { font-size: 13px; padding: 6px 10px; border-radius: 9px; background: var(--track); font-weight: 600; border: 0; }

.two-col { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }
.map-box { height: 380px; border-radius: 16px; overflow: hidden; position: relative; }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 160px; padding-top: 10px; }
.bars .bar { flex: 1; background: var(--brand); border-radius: 6px 6px 0 0; min-height: 3px; position: relative; }
.bars .bar:hover { background: var(--primary-hover); }
.bars-labels { display: flex; gap: 6px; font-size: 11px; color: var(--ink-3); margin-top: 6px; }
.bars-labels span { flex: 1; text-align: center; }

dialog { border: 0; border-radius: var(--radius-lg); padding: 24px; max-width: 640px; width: calc(100% - 32px); background: var(--surface); box-shadow: var(--shadow-lg); color: var(--ink); }
dialog::backdrop { background: rgba(41, 43, 46, 0.45); }
.login-card { max-width: 420px; margin: 8vh auto; }

/* Admin : rapport journalier et e-mails (admin-reports.js) */
.rp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.rp-tools { display: flex; gap: 8px; align-items: center; }
.rp-tools input { padding: 9px 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.rp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; margin-bottom: 20px; }
@media (max-width: 1000px) { .rp-grid { grid-template-columns: 1fr; } }
.rp-frame { width: 100%; height: 760px; border: 1px solid var(--border); border-radius: 16px; background: var(--bg); }
.rp-side { display: grid; gap: 12px; align-content: start; }
.rp-side h3 { margin: 6px 0 0; }
.rp-tpls { display: grid; gap: 6px; }
.row-btn { text-align: left; padding: 10px 12px; border-radius: 10px; background: var(--bg); font-weight: 600; font-size: 14px; }
.row-btn:hover { background: var(--track); }
.row-btn.on { background: var(--primary-50); color: var(--primary-text); }
.form-msg { margin: 0; font-size: 14px; font-weight: 600; color: var(--danger); }
.form-msg:empty { display: none; }

/* Admin : zones interdites */
.zn-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; margin: 12px 0 16px; }
@media (max-width: 900px) { .zn-grid { grid-template-columns: 1fr; } }
.zn-map { height: 460px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); }
.zn-form .f { margin-bottom: 10px; }
.zn-form .f label, .zn-form .lbl { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.zn-form input, .zn-form select { width: 100%; padding: 8px 10px; border-radius: 8px; border: 1.5px solid var(--border); background: var(--surface); color: var(--ink); }
.zn-form .seg, #plTabs.seg { display: inline-flex; flex-wrap: wrap; max-width: 100%; gap: 2px; background: var(--bg-2, #f1f2f4); border-radius: 8px; padding: 3px; } /* petit écran : jamais plus large que la page */
.zn-form .seg button, #plTabs.seg button { border: 0; background: none; padding: 6px 12px; border-radius: 6px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.zn-form .seg button.on, #plTabs.seg button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.zn-check { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.zn-check input { width: auto; }
#znTest.on { outline: 2px solid #1a73e8; }
.dm-list { margin: 6px 0 10px; padding-left: 18px; font-size: 14px; line-height: 1.6; }

/* ---------- Admin : barre latérale (menu groupé par thème) ---------- */
@media (min-width: 900px) {
  .admin-app { --side: 232px; }
  .admin-app .web-header { padding-left: calc(var(--side) + 24px); }
  .admin-app .web-header .logo { position: fixed; left: 0; top: 0; width: var(--side); height: 64px; display: flex; align-items: center; padding: 0 20px;
    background: var(--surface); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); z-index: 61; box-sizing: border-box; }
  .admin-app #nav { position: fixed; left: 0; top: 64px; bottom: 0; width: var(--side); margin: 0; padding: 10px 12px 24px; box-sizing: border-box;
    display: flex; flex-direction: column; flex-wrap: nowrap; gap: 2px; overflow-y: auto; background: var(--surface); border-right: 1px solid var(--line); z-index: 60; }
  .admin-app #nav.hidden { display: none; }
  .admin-app #nav button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left;
    padding: 9px 12px; border-radius: 8px; font-size: 14px; }
  .admin-app #nav button:hover { background: var(--bg-2); color: var(--ink); }
  .admin-app #nav button.on { background: var(--primary-50); color: var(--primary-hover); }
  .admin-app #nav .nav-group { display: block; margin: 14px 12px 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3, #8a8f98); }
  .admin-app #nav .nav-group:first-child { margin-top: 4px; }
  .admin-app main.container { margin-left: var(--side); max-width: none; padding: 24px 32px; }
  .admin-app #nav:not(.hidden) ~ .spacer { flex: 1; }
}
@media (max-width: 899px) { .admin-app #nav .nav-group { display: none; } }
/* Pastilles de compteur alignées à droite, lisibles */
.admin-app #nav button span:not(:empty) { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--primary); color: #fff; font-size: 12px; font-weight: 700; display: inline-grid; place-items: center; }
@media (min-width: 900px) {
  .admin-app:has(#nav.hidden) main.container { margin-left: auto; max-width: var(--container); }
  .admin-app:has(#nav.hidden) .web-header { padding-left: 24px; }
  .admin-app:has(#nav.hidden) .web-header .logo { position: static; width: auto; height: auto; border: 0; padding: 0; }
}

/* ---------- admin : heures de pointe (carte de chaleur) ---------- */
:root { --mk-s1: #fdf1ef; --mk-s2: #fbd5ce; --mk-s3: #f4a597; --mk-s4: #e6485c; --mk-s5: #a01323; --mk-peak: #292b2e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --mk-s1: #2a1f22; --mk-s2: #4a2530; --mk-s3: #7a2c3a; --mk-s4: #d8405a; --mk-s5: #ff8a73; --mk-peak: #f1f2f5; } }
:root[data-theme="dark"] { --mk-s1: #2a1f22; --mk-s2: #4a2530; --mk-s3: #7a2c3a; --mk-s4: #d8405a; --mk-s5: #ff8a73; --mk-peak: #f1f2f5; }
.mk-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 16px 18px; margin-bottom: 16px; }
.mk-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 12.5px; color: var(--ink-2); margin-bottom: 12px; }
.mk-lt { font-weight: 700; color: var(--ink); }
.mk-li { display: inline-flex; align-items: center; gap: 6px; }
.mk-sw { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.mk-scroll { overflow-x: auto; }
.mk-heat { border-collapse: separate; border-spacing: 2px; width: 100%; min-width: 640px; table-layout: fixed; font-variant-numeric: tabular-nums; }
.mk-heat thead th { font-size: 11.5px; font-weight: 600; color: var(--ink-3); padding-bottom: 4px; text-align: center; }
.mk-heat tbody th { font-size: 13px; font-weight: 600; color: var(--ink); text-align: left; white-space: nowrap; padding-right: 8px; width: 96px; }
.mk-heat td { height: 30px; border-radius: 4px; cursor: default; position: relative; }
.mk-heat td:focus-visible { outline: 2px solid var(--mk-peak); outline-offset: 1px; }
.mk-c1 { --c: var(--mk-s1); } .mk-c2 { --c: var(--mk-s2); } .mk-c3 { --c: var(--mk-s3); } .mk-c4 { --c: var(--mk-s4); } .mk-c5 { --c: var(--mk-s5); }
.mk-heat td, .mk-sw { background: var(--c, var(--track)); }
/* Pas encore de données : couleur du profil, hachurée (lisible sans la couleur). */
.mk-heat td.prior, .mk-sw.prior { background-image: repeating-linear-gradient(135deg, transparent 0 4px, color-mix(in srgb, var(--surface) 70%, transparent) 4px 6px); }
.mk-sw.prior { --c: var(--mk-s3); }
/* Heure de pointe : barre sous la case (en plus de la couleur). */
.mk-heat td.peak::after, .mk-sw.peak::after { content: ''; position: absolute; left: 3px; right: 3px; bottom: 3px; height: 3px; border-radius: 2px; background: var(--mk-peak); }
.mk-sw.peak { position: relative; background: var(--track); }
.mk-heat td.now { box-shadow: inset 0 0 0 2px var(--mk-peak); }
.mk-tip { position: absolute; z-index: 5; max-width: 280px; background: var(--ink); color: var(--surface); border-radius: 10px; padding: 8px 10px; font-size: 12.5px; line-height: 1.45; pointer-events: none; box-shadow: 0 6px 20px rgba(0, 0, 0, .2); }
.mk-tip .muted { opacity: .88; }
.mk-peaks { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--ink-2); margin: 12px 0 0; }
.mk-peaks b { color: var(--ink); }
.mk-how { font-size: 14px; color: var(--ink-2); max-width: 72ch; }
.mk-how summary { cursor: pointer; font-weight: 700; color: var(--ink); }
.mk-how li { margin: 6px 0; }
.mk-how li b { color: var(--ink); }
.mk-heat thead th:first-child { width: 104px; }
.mk-heat th { text-transform: none; letter-spacing: 0; }
#marketPanel .rp-tools select { min-width: 132px; padding: 9px 12px; }
#marketPanel .rp-tools { flex-wrap: wrap; }
#marketPanel .rp-tools .btn { width: auto; }

/* ---------- admin : selfies de contrôle ---------- */
.sf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-top: 14px; }
.sf-card { border: 1px solid var(--border); border-radius: 16px; padding: 12px; display: grid; gap: 10px; background: var(--surface); }
.sf-pics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sf-pics figure { margin: 0; }
.sf-pics img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px; background: var(--track); display: block; }
.sf-pics figcaption { font-size: 12px; color: var(--ink-2); text-align: center; margin-top: 4px; }
.sf-meta { font-size: 13.5px; line-height: 1.45; }