/* 2Bgroups TV, version téléphone : mêmes blocs que la TV, empilés et à faire défiler. */
html { font-size: 12px; }
html, body { height: auto; min-height: 100%; overflow: visible; overflow-x: hidden; -webkit-text-size-adjust: 100%; }
#root { display: block; height: auto; padding: 0 0.9rem calc(1.5rem + env(safe-area-inset-bottom)); transform: none !important; }

.top { position: sticky; top: 0; z-index: 10; flex-wrap: wrap; height: auto; margin: 0 -0.9rem 0.9rem; padding: calc(0.7rem + env(safe-area-inset-top)) 0.9rem 0.7rem; background: var(--bg); border-bottom: 1px solid var(--line); }
.brand { font-size: 1.9rem; }
.pill { margin-right: 0.9rem; font-size: 1.05rem; }
.clock span { display: none; }
.clock b { font-size: 1.9rem; font-weight: 500; }
.period { order: 9; width: 100%; margin: 0.7rem 0 0; }
.chips { display: flex; }
.chips span { flex: 1; margin: 0; padding: 0.7rem 0.3rem; text-align: center; font-size: 1.25rem; cursor: pointer; }
.progress { display: none; }

.body, .main, .middle, .side, .rail { display: contents; }
.body { display: flex; flex-direction: column; }
.kpis { order: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; margin: 0 0 0.9rem; }
.kpi { margin: 0; padding: 0.9rem 1rem; }
.kpi:last-child { grid-column: 1 / -1; }
.kpi h3 { font-size: 1rem; }
.kpi .big { font-size: 2.5rem; }
.kpi .sub { flex-wrap: wrap; font-size: 1.05rem; white-space: normal; }
.delta { font-size: 1.05rem; }

.board { order: 2; flex: none; margin-bottom: 0.9rem; padding: 0.3rem 1rem 0.4rem; }
.row.head .c-chart, .row.head .c-num, .row.head .c-money, .row.head .c-rank { display: none; }
.row.head .c-name { font-size: 1.1rem; }
#sites { overflow: visible; }
.vbelt { position: static; will-change: auto; }
.vbelt.scroll { animation: none; -webkit-animation: none; }
#sites .row { flex-wrap: wrap; padding: 0.8rem 0; }
#sites .c-name { flex: 0 0 calc(100% - 8.4rem); }
.c-rank { width: 1.9rem; font-size: 1.4rem; }
.c-name b { font-size: 1.4rem; }
.c-chart { width: 6.5rem; height: 2.6rem; padding: 0 0 0 0.6rem; }
#sites .c-num, #sites .c-money { order: 2; flex: 1 1 0; width: auto; min-width: 0; margin-top: 0.6rem; padding: 0 0.4rem; justify-content: flex-start; }
#sites .c-num:nth-child(4) { border-left: 0; padding-left: 0; }
#sites .c-num::before, #sites .c-money::before { display: block; margin-bottom: 0.15rem; color: var(--faint); font-size: 0.9rem; font-weight: 700; }
#sites .c-num:nth-child(4)::before { content: "Visiteurs"; }
#sites .c-num.narrow::before { content: "Pages"; }
#sites .c-num.sales::before { content: "Ventes"; }
#sites .c-money::before { content: "CA"; }
#sites .c-money.result::before { content: "Résultat"; }
#sites .c-num b, #sites .c-money b { font-size: 1.4rem; }
#sites .c-num b.long, #sites .c-money b.long { font-size: 1.2rem; }
#sites .c-num .delta { font-size: 0.95rem; }

.notifs { order: 3; flex: none; margin-bottom: 0.9rem; }
.list { overflow: visible; }
.nt { padding: 0.6rem 0; }
.nt:last-child { border-bottom: 0; }
.nt p { white-space: normal; }

.carousel { order: 4; height: auto; margin: 0 -0.9rem 0.9rem; padding: 0 0.9rem; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.carousel::-webkit-scrollbar { display: none; }
.belt { position: static; width: max-content; height: 7.2rem; animation: none !important; -webkit-animation: none !important; will-change: auto; }
.card { width: 21rem; }

.ai { order: 5; margin-bottom: 0.9rem; }
.renew { white-space: normal; }
.vps { order: 6; flex: none; overflow: visible; }
#vps-list { display: block; }
.srv { height: 4.8rem; }
.vps-cols span, .srv .ring { width: 3.6rem; }
.setup { position: fixed; padding: 2rem; text-align: center; }
.push-box { margin-bottom: 0.9rem; font-size: 1.2rem; font-weight: 700; color: var(--soft); text-align: center; }
#push-btn { width: 100%; min-height: 4rem; border: 0; border-radius: 0.8rem; background: var(--accent); color: #fff; font: inherit; font-weight: 800; }