/* site/assets/espace.css — Espace client (lot 4), même style que le site */
.es { padding: 40px 0 20px; }
.es .alert { margin-bottom: 18px; }
.es-ro { background: #EDE7FB; color: #4B2A99; border: 1px solid #CDBEF2; border-radius: 14px; padding: 12px 16px; font-weight: 700; margin-bottom: 18px; }
.es-ro a { color: inherit; }
.es-login { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 40px; align-items: start; padding: 20px 0 40px; }
.es-login h1 { font-size: clamp(34px, 5vw, 56px); }
.es-intro .btn { margin-top: 8px; }
.es-lk { text-align: center; font-weight: 700; color: var(--pvl); }
.field input.pin { font-size: 26px; letter-spacing: .5em; text-align: center; font-weight: 800; }
.es-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.es-top h1 { font-size: clamp(30px, 4.4vw, 48px); margin: 8px 0 0; }
.es-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 26px; }
.es-tabs a { text-decoration: none; font-weight: 700; padding: 10px 16px; border-radius: 12px; background: #fff; border: 1px solid var(--line); }
.es-tabs a[aria-current] { background: var(--pv); border-color: var(--pv); color: #fff; }
.es-tabs a.wa { background: #25D366; border-color: #25D366; color: #06290F; margin-inline-start: auto; }
.es-h { font-size: clamp(22px, 2.6vw, 30px); margin: 26px 0 14px; }
.es-h3 { font-size: 20px; margin: 26px 0 12px; }
.es-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.es-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 20px 22px; text-decoration: none; display: block; margin-bottom: 16px; }
.es-grid > .es-card { margin-bottom: 0; }
a.es-card { transition: transform .2s, box-shadow .2s; } a.es-card:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -26px rgba(15,39,64,.6); }
.es-card .btn { margin: 4px 6px 0 0; }
.es-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.es-chip { display: inline-block; color: #fff; background: var(--mu); font-size: 13px; font-weight: 700; padding: 4px 11px; border-radius: 999px; white-space: nowrap; }
.es-chip.big { font-size: 15px; padding: 6px 14px; }
.es-chip.on { background: #2F8A3B; } .es-chip.soon { background: #D97706; } .es-chip.off { background: #94A3B8; }
.es-mini { display: flex; gap: 18px; flex-wrap: wrap; margin: 14px 0 8px; }
.es-mini div { display: flex; flex-direction: column; } .es-mini span { font-size: 13px; color: var(--mu); } .es-mini b { font-size: 20px; font-family: var(--disp); }
.es-more { font-weight: 700; color: var(--pvl); font-size: 15px; }
.es-bar { height: 10px; background: var(--bg); border-radius: 99px; overflow: hidden; margin: 14px 0 10px; } .es-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--sun), var(--leaf)); border-radius: 99px; }
.es-back { display: inline-block; font-weight: 700; text-decoration: none; color: var(--pvl); margin-bottom: 6px; }
.es-ph { margin-top: 6px; }
.es-upd { font-size: 14px; margin: 6px 0 16px; }
.es-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.es-tile { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.es-tile span { font-size: 14px; color: var(--mu); font-weight: 600; } .es-tile b { font-size: 28px; font-family: var(--disp); line-height: 1.1; }
.es-tile small { color: #2F6B1A; font-weight: 600; font-size: 13.5px; }
.es-tiles.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.es-flow { padding: 18px 16px 12px; }
.es-tile.hl { background: var(--leafsoft); border-color: #CDE5BF; }
.es-soc { display: block; height: 8px; background: var(--bg); border-radius: 99px; overflow: hidden; margin-top: 6px; } .es-soc i { display: block; height: 100%; border-radius: 99px; }
.es-chart { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 6px; align-items: end; height: 170px; }
.es-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; }
.es-col i { display: block; width: 100%; max-width: 30px; background: linear-gradient(0deg, var(--sun), var(--sun2)); border-radius: 6px 6px 2px 2px; }
.es-col span { font-size: 12px; color: var(--mu); }
.es-alert { background: #FFF6E5; border: 1px solid #F2D08A; border-radius: 16px; padding: 14px 18px; margin-bottom: 12px; }
.es-alert.crit { background: #FBE9E9; border-color: #EFB9B9; } .es-alert.ok { background: var(--leafsoft); border-color: #CDE5BF; }
.es-alert p { margin: 4px 0 2px; }
.es-help { margin-top: 18px; } .es-help a { font-weight: 700; color: var(--pvl); }
.es-steps { list-style: none; margin: 0; padding: 0; }
.es-steps li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; padding-bottom: 20px; position: relative; }
.es-steps li:not(:last-child)::before { content: ''; position: absolute; inset-inline-start: 16px; top: 34px; bottom: 0; width: 2px; background: var(--line); }
.es-steps li.ok:not(:last-child)::before { background: var(--leaf); }
.es-steps .dot { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--line); background: #fff; display: grid; place-items: center; font-weight: 800; color: var(--mu); }
.es-steps .ok .dot { background: var(--leaf); border-color: var(--leaf); color: #fff; }
.es-steps .cur .dot { border-color: var(--sun); color: #9A6400; box-shadow: 0 0 0 5px rgba(242,165,22,.22); }
.es-steps b { display: block; padding-top: 5px; } .es-steps small { display: block; color: var(--mu); font-size: 14px; }
.es-t { width: 100%; border-collapse: collapse; font-size: 15.5px; } .es-t th, .es-t td { text-align: start; padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; } .es-t th { color: var(--mu); font-size: 13.5px; font-weight: 600; }
.es-wt { display: block; font-size: 18px; margin-bottom: 8px; }
.es-w { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.es-w div { display: flex; flex-direction: column; } .es-w span { font-weight: 700; }
.es form.es-card .field { margin-bottom: 12px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
/* ── Lot 5b : Telegram + choix des alertes ── */
.btn.tg { background: #229ED9; border-color: #229ED9; color: #fff; }
.btn.tg:hover { background: #1B8BC2; }
.btn.tg.big { font-size: 18px; padding: 16px 26px; border-radius: 16px; box-shadow: 0 14px 28px -16px rgba(34,158,217,.9); }
.tg-later { background: none; border: 0; color: var(--mu); font: inherit; font-weight: 700; cursor: pointer; padding: 8px 10px; text-decoration: underline; }
.tg-ban { display: flex; align-items: center; gap: 16px; padding: 16px 18px; margin: 0 0 22px; border-radius: var(--r); color: #fff;
  background: linear-gradient(120deg, #229ED9 0%, #1B7FB8 55%, #0F5E8C 100%); box-shadow: 0 18px 34px -24px rgba(15,94,140,.9); }
.tg-ban-ic { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.18); }
.tg-ban-tx { flex: 1; display: flex; flex-direction: column; gap: 3px; } .tg-ban-tx b { font-size: 18px; } .tg-ban-tx span { opacity: .92; font-size: 15px; }
.tg-ban-act { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tg-ban .btn.tg { background: #fff; color: #0F5E8C; border-color: #fff; } .tg-ban .tg-later { color: rgba(255,255,255,.85); }
.tg-pop { position: fixed; inset: 0; z-index: 90; background: rgba(15,39,64,.55); display: grid; place-items: center; padding: 16px; animation: tgfade .25s ease; }
.tg-pop-card { background: #fff; border-radius: 24px; max-width: 440px; width: 100%; padding: 28px 24px 18px; text-align: center; box-shadow: 0 30px 60px -20px rgba(0,0,0,.45); animation: tgup .3s ease; }
.tg-pop-ic { width: 76px; height: 76px; margin: -66px auto 12px; border-radius: 50%; display: grid; place-items: center; background: #229ED9; border: 6px solid #fff; }
.tg-pop-card h3 { margin: 0 0 8px; font-size: 22px; } .tg-pop-card p { margin: 0 0 16px; color: var(--mu); font-size: 15.5px; line-height: 1.5; }
.tg-pop-card .btn { width: 100%; justify-content: center; }
@keyframes tgfade { from { opacity: 0; } } @keyframes tgup { from { transform: translateY(24px); opacity: 0; } }
.es-sub { margin: -6px 0 18px; }
.tg-card { background: #fff; border: 2px solid #CDE8F6; border-radius: var(--r); padding: 22px; margin-bottom: 22px; }
.tg-card.on { border-color: #9FD9A8; background: linear-gradient(180deg, #F3FBF4, #fff 60%); }
.tg-head { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.tg-logo { flex: none; width: 58px; height: 58px; border-radius: 50%; background: #229ED9; display: grid; place-items: center; }
.tg-head h3 { margin: 0; font-size: 22px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .tg-head p { margin: 2px 0 0; color: var(--mu); }
.tg-badge { font-size: 12px; font-weight: 800; background: #E6F4FB; color: #0F5E8C; padding: 3px 9px; border-radius: 999px; }
.tg-steps { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 12px; }
.tg-steps li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; }
.tg-steps li > span { width: 34px; height: 34px; border-radius: 50%; background: #229ED9; color: #fff; display: grid; place-items: center; font-weight: 800; }
.tg-steps b { display: block; padding-top: 5px; } .tg-steps small { display: block; color: var(--mu); font-size: 14px; }
.tg-stores { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.tg-stores a { font-size: 14px; font-weight: 700; text-decoration: none; padding: 6px 12px; border-radius: 10px; background: #111; color: #fff; }
.tg-go { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.tg-qr { display: flex; align-items: center; gap: 12px; color: var(--mu); max-width: 300px; } .tg-qr svg { width: 112px; height: 112px; display: block; border-radius: 8px; border: 1px solid var(--line); padding: 4px; background: #fff; }
.tg-wait { margin: 14px 0 0; color: #0F5E8C; font-weight: 700; font-size: 15px; }
.tg-ok { background: #E8F6EA; border: 1px solid #BFE3C4; border-radius: 12px; padding: 10px 14px; font-weight: 700; margin-bottom: 12px; }
.tg-acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .tg-acts form { margin: 0; }
.nt-form { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 8px 18px 20px; }
.nt-row { display: grid; grid-template-columns: minmax(0, 1fr) 96px 96px; gap: 8px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.nt-th { font-size: 13px; font-weight: 800; color: var(--mu); text-transform: uppercase; letter-spacing: .03em; padding: 10px 0; }
.nt-th span:not(:first-child), .nt-c { text-align: center; justify-self: center; }
.nt-lab { display: flex; gap: 12px; align-items: flex-start; } .nt-lab i { font-style: normal; font-size: 24px; line-height: 1.2; }
.nt-lab b { display: block; } .nt-lab small { display: block; color: var(--mu); font-size: 14px; line-height: 1.4; }
.nt-na { color: #C3CBD5; font-weight: 800; }
.nt-note { font-size: 14px; margin: 14px 0; }
.sw { position: relative; display: inline-block; width: 52px; height: 30px; cursor: pointer; }
.sw input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.sw i { position: absolute; inset: 0; border-radius: 999px; background: #CBD5E1; transition: background .2s; }
.sw i::after { content: ''; position: absolute; top: 3px; inset-inline-start: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.2); transition: transform .2s; }
.sw input:checked + i { background: #2F8A3B; } .sw input:checked + i::after { transform: translateX(22px); }
[dir="rtl"] .sw input:checked + i::after { transform: translateX(-22px); }
.sw input:focus-visible + i { outline: 3px solid #93C5FD; outline-offset: 2px; }
.sw.dis { opacity: .45; cursor: not-allowed; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 620px) {
  .tg-ban { flex-direction: column; align-items: flex-start; } .tg-ban-act { width: 100%; } .tg-ban .btn.tg { flex: 1; justify-content: center; }
  .tg-qr { display: none; } .tg-go .btn.tg.big { width: 100%; justify-content: center; }
  .nt-row { grid-template-columns: minmax(0, 1fr) 66px 66px; } .nt-th span { font-size: 10.5px; letter-spacing: 0; } .nt-lab i { display: none; } .nt-form { padding: 6px 12px 16px; }
}
@media (max-width: 900px) { .es-login { grid-template-columns: minmax(0, 1fr); gap: 20px; } .es-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .es-tiles { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; } .es-tile b { font-size: 22px; } .es-chart { gap: 3px; height: 140px; } .es-tabs a { padding: 9px 12px; } .es-tabs a.wa { margin-inline-start: 0; } .es-grid { grid-template-columns: minmax(0, 1fr); } }
/* Lot CLIENT_A : bouton retour bien visible */
.es-back-top { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; margin: 0 0 10px; border: 1.5px solid var(--line, #E5E7EB); border-radius: 12px; background: #fff; color: var(--pv, #0F2740); }
.es-back-top:hover { border-color: #2F8A3B; color: #2F8A3B; }
/* Lot CLIENT_B : 📊 Mes rapports */
.rp-form { display: flex; flex-direction: column; gap: 14px; margin-bottom: 14px; }
.rp-l { display: block; font-weight: 800; font-size: 14px; margin-bottom: 6px; }
.rp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rp-chip { position: relative; cursor: pointer; }
.rp-chip input { position: absolute; opacity: 0; pointer-events: none; }
.rp-chip span { display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; border: 1.5px solid var(--line, #E5E7EB); border-radius: 999px; background: #fff; font-weight: 600; font-size: 14px; }
.rp-chip i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.rp-chip input:checked + span { border-color: #0F2740; background: #0F2740; color: #fff; }
.rp-chip input:focus-visible + span { outline: 3px solid #F2A516; outline-offset: 2px; }
.rp-chip.dis span { opacity: .45; cursor: not-allowed; }
.rp-dates { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 10px; } .rp-dates input { padding: 8px 10px; border: 1px solid #CBD5E1; border-radius: 10px; font: inherit; }
.rp-row2 { display: flex; flex-wrap: wrap; gap: 12px; } .rp-row2 label { flex: 1 1 220px; }
.rp-row2 select { width: 100%; padding: 10px 12px; border: 1px solid #CBD5E1; border-radius: 12px; font: inherit; background: #fff; }
.rp-form .btn { align-self: flex-start; }
.rp-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border-bottom: 1px solid var(--line, #E5E7EB); padding-bottom: 12px; margin-bottom: 12px; }
.rp-head img { height: 46px; width: auto; } .rp-head div { display: flex; flex-direction: column; flex: 1 1 200px; } .rp-head b { font-size: 18px; } .rp-head span { color: #475569; font-size: 14px; }
.rp-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.rp-hint { font-size: 13px; margin: 8px 0 14px; }
.rp-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); gap: 10px; margin-bottom: 14px; }
.rp-kpi { border: 1px solid var(--line, #E5E7EB); border-radius: 14px; padding: 10px 12px; border-top: 4px solid var(--c, #94A3B8); }
.rp-kpi span { display: block; font-size: 13px; color: #475569; } .rp-kpi b { font-size: 22px; } .rp-kpi small { font-size: 13px; color: #64748B; font-weight: 600; }
.rp-chart { position: relative; height: 300px; margin-bottom: 14px; }
.rp-tw { overflow-x: auto; margin-bottom: 12px; }
.rp-t { width: 100%; border-collapse: collapse; font-size: 14px; }
.rp-t th, .rp-t td { padding: 7px 9px; border-bottom: 1px solid #EEF2F6; text-align: end; white-space: nowrap; }
.rp-t th:first-child, .rp-t td:first-child { text-align: start; }
.rp-t thead th { font-size: 12.5px; color: #475569; vertical-align: bottom; } .rp-t thead small { display: block; font-weight: 500; color: #94A3B8; }
.rp-t tfoot th { border-top: 2px solid #0F2740; border-bottom: 0; }
.rp-note { font-size: 13px; }
@media print {
  @page { size: A4; margin: 12mm; }
  body { background: #fff !important; }
  .hd, .ft, .wa-float, .es-top, .es-tabs, .es-back-top, .rp-form, .rp-acts, .rp-hint, .tg-ban, .tg-pop, .skip, .alert { display: none !important; }
  .es, .wrap { padding: 0 !important; margin: 0 !important; max-width: none !important; }
  .es-h { display: none; }
  .rp-out { border: 0 !important; box-shadow: none !important; padding: 0 !important; }
  .rp-chart { height: 260px; break-inside: avoid; }
  .rp-kpis { grid-template-columns: repeat(4, 1fr); } .rp-kpi { break-inside: avoid; }
  .rp-t { font-size: 11px; } .rp-t th, .rp-t td { padding: 4px 6px; }
  .rp-tw { overflow: visible; }
  a { color: inherit; text-decoration: none; }
}
.rp-dates[hidden] { display: none; }
.es-rplink { margin: 10px 0 4px; }

/* 📰 Nouveautés et 📬 Mes messages (11/10/2026) */
.nw-mini img { width: 100%; height: 150px; object-fit: cover; border-radius: 12px; margin-bottom: 10px; display: block; }
.nw-mini .nw-ex { margin: 8px 0 6px; color: var(--ink); }
.es-chip.nw-new { background: #D97706; }
.nw-links { display: flex; flex-wrap: wrap; gap: 8px; }
.nw-card .nw-img { width: 100%; max-height: 360px; object-fit: cover; border-radius: 14px; margin-bottom: 14px; display: block; }
.nw-card .nw-t { margin: 0; font-size: 22px; }
.nw-card .nw-body { margin: 10px 0 8px; line-height: 1.6; } .nw-card .nw-body a { color: var(--pvl); font-weight: 700; word-break: break-word; }
.ms-day { margin-top: 22px; }
.ms-item { padding: 14px 18px; margin-bottom: 10px; }
.ms-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.ms-ic { font-size: 20px; } .ms-time { font-weight: 700; color: var(--mu); font-size: 14px; }
.ms-ch { display: inline-flex; gap: 6px; flex-wrap: wrap; margin-inline-start: auto; }
.ms-b { color: #fff; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: #64748B; }
.ms-b.tg { background: #229ED9; } .ms-b.wa { background: #1DA851; } .ms-b.app { background: #ff6b00; }
.ms-txt { line-height: 1.55; word-break: break-word; }
.ms-pag { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 18px 0; }

/* 🔐 Application : connexion par Face ID / empreinte (11/10/2026) */
.es-lgw { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.es-lgw [hidden], .bio-pop[hidden], .bio-pop [hidden], .bio-card [hidden] { display: none !important; }
.bio-login { text-align: center; }
.bio-login .btn { width: 100%; justify-content: center; }
.bio-ic { font-size: 46px; line-height: 1; }
.bio-msg { margin: 0; padding: 10px 12px; border-radius: 12px; background: #FFF4E5; color: #8A4B00; font-size: 14.5px; font-weight: 600; }
.bio-pop-ic { background: #F2A516; font-size: 34px; }
.bio-choices { display: grid; gap: 10px; margin-top: 4px; }
.bio-pop .bio-msg { margin-bottom: 12px; }
.bio-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.bio-devs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bio-devs li { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.bio-dv { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .bio-dv small { color: var(--mu); font-size: 13px; }
.bio-me { color: #2F8A3B; font-style: normal; font-weight: 700; }
.bio-devs form { margin: 0; flex: none; } .bio-devs .btn { margin: 0; }
/* 🔒 Verrouillage de l'application à l'ouverture */
.bio-lock { position: fixed; inset: 0; z-index: 100000; background: linear-gradient(160deg, #0F2740 0%, #173A5E 100%); display: grid; place-items: center; padding: 16px; }
.bio-lock[hidden] { display: none !important; }
.bio-lock [hidden] { display: none !important; }
.bio-lock-card { background: #fff; border-radius: 24px; max-width: 420px; width: 100%; padding: 26px 22px 20px; text-align: center; display: grid; gap: 12px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.55); }
.bio-lock-card img { margin: 0 auto; height: auto; }
.bio-lock-card h3 { margin: 0; font-size: 21px; }
.bio-lock-card .btn { width: 100%; justify-content: center; margin: 0; }
html.bio-locked, html.bio-locked body, body:has(.bio-lock:not([hidden])) { overflow: hidden; }
/* Lot 4 — 🩺 Santé de votre centrale */
.es-health .es-hs { display: flex; gap: 14px; align-items: center; margin-bottom: 8px; }
.es-health .es-hsc { flex: 0 0 auto; min-width: 74px; height: 74px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 800; color: var(--c); border: 6px solid var(--c); background: #fff; }
.es-health .es-hsc small { font-size: 11px; font-weight: 700; opacity: .7; }
.es-health .es-hadv { background: var(--leafsoft, #EEF7E8); border-radius: 12px; padding: 9px 12px; margin-top: 8px; line-height: 1.45; }
.es-health .es-hadv.warn { background: #FFF6E5; } .es-health .es-hadv.crit { background: #FBE9E9; }

/* ── Lot 5a (11/10/2026) : 🧾 Mes paiements (bêta), 🛒 boutique testeurs, 🧪 compte démo ── */
.es-beta { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; background: var(--sun); color: var(--pv); padding: 2px 7px; border-radius: 6px; vertical-align: middle; }
.es-demo { background: #EEF4FB; border: 1px dashed var(--pvl); color: var(--pv); border-radius: 14px; padding: 10px 14px; margin: 0 0 14px; font-size: 15px; }
a.es-card.es-fin { display: flex; align-items: center; gap: 14px; border-color: #F5DDA8; background: linear-gradient(180deg, #FFFBF1, #fff); }
.es-fin-ic { width: 46px; height: 46px; border-radius: 14px; background: var(--sunsoft); display: grid; place-items: center; font-size: 22px; flex: none; }
.es-fin-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; color: var(--ink); }
.es-fin-tx small { color: var(--mu); font-size: 13px; } .es-fin-tx b { font-family: var(--disp); font-size: 22px; }
.es-fin-tx .es-bar { height: 7px; margin: 6px 0 4px; max-width: 320px; }
.es-fin-sum { border-color: #F5DDA8; background: linear-gradient(180deg, #FFFBF1, #fff); } .es-fin-sum.ok { border-color: #CDE7C8; background: linear-gradient(180deg, #F2FAF0, #fff); }
.es-fin-sum small { display: block; }
.es-fin-big { display: block; font-family: var(--disp); font-size: clamp(26px, 6vw, 36px); margin: 2px 0; }
.es-fin-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .es-fin-acts .btn { margin: 0; }
.es-inv { list-style: none; margin: 0; padding: 0; }
.es-inv li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); } .es-inv li:first-child { border-top: 0; }
.es-inv-ic { width: 40px; height: 40px; border-radius: 12px; background: var(--bg); display: grid; place-items: center; font-size: 18px; flex: none; }
.es-inv-t { flex: 1; min-width: 0; display: flex; flex-direction: column; } .es-inv-t small { font-size: 13px; }
.es-inv-r { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-align: end; } .es-inv-r small { font-size: 12px; }
.es-pill { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.es-pill.ok { background: #E3F2E1; color: #2F8A3B; } .es-pill.warn { background: var(--sunsoft); color: #9A5B00; } .es-pill.info { background: #E6EEFD; color: #2563EB; }
@media (max-width: 520px) { a.es-card.es-fin .es-more { display: none; } .es-inv li { gap: 10px; } .es-inv-ic { width: 34px; height: 34px; } }

/* ── 🎨 Lot 5b (11/10/2026) : nouvelle mise en page « Ma maison » (section .es2 — testeurs puis tous) ── */
.es2 { padding-top: 22px; }
.es2 .es-card { border: 0; box-shadow: 0 1px 2px rgba(16,32,47,.05), 0 8px 24px -6px rgba(16,32,47,.10); border-radius: 20px; }
.es2-hero { background: linear-gradient(150deg, var(--pv) 0%, #1d4466 100%); color: #fff; border-radius: 26px; padding: 22px 22px 24px; margin-bottom: 18px; }
.es2-hero small { opacity: .72; font-size: 14px; } .es2-hero h1 { color: #fff; font-size: clamp(26px, 4vw, 40px); margin: 4px 0 0; }
.es2-site { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,.14); color: #fff; font-weight: 600; font-size: 14px; text-decoration: none; }
.es2-t { font-size: 19px; margin: 0; } .es2-t3 { font-size: 17px; margin: 0 0 10px; }
.es2-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; padding: 4px 11px; border-radius: 999px; color: var(--c); background: color-mix(in srgb, var(--c) 13%, #fff); white-space: nowrap; }
.es2-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); display: inline-block; }
a.es2-live { color: var(--ink); }
.es2-flow { display: flex; align-items: center; margin-top: 14px; padding: 12px 14px; border-radius: 16px; background: linear-gradient(90deg, #FFF8E8, #EEF7EC); }
.es2-node { display: flex; flex-direction: column; align-items: center; font-size: 12px; color: var(--mu); min-width: 64px; } .es2-node b { font-size: 24px; line-height: 1.1; } .es2-node strong { color: var(--ink); font-size: 15px; }
.es2-arrow { flex: 1; height: 2px; margin: 0 6px 18px; background: repeating-linear-gradient(90deg, var(--sun) 0 7px, transparent 7px 12px); background-size: 24px 2px; animation: es2-flow 1.2s linear infinite; }
@keyframes es2-flow { to { background-position: 24px 0; } }
@media (prefers-reduced-motion: reduce) { .es2-arrow { animation: none; } }
.es2-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 12px 0 10px; }
.es2-tile { border-radius: 16px; padding: 12px 14px; background: var(--bg); display: flex; flex-direction: column; gap: 2px; }
.es2-tile small { font-size: 13px; color: var(--mu); } .es2-tile b { font-family: var(--disp); font-size: 24px; line-height: 1.15; }
.es2-tile.sun { background: var(--sunsoft); } .es2-tile.leaf { background: var(--leafsoft); } .es2-tile.blue { background: #E8F0FB; }
.es2-soc { display: block; height: 6px; border-radius: 9px; background: rgba(15,39,64,.12); margin-top: 6px; overflow: hidden; } .es2-soc i { display: block; height: 100%; background: #2F8A3B; border-radius: 9px; }
.es2-warn { font-size: 14px; font-weight: 600; color: #9A5B00; background: var(--sunsoft); border-radius: 12px; padding: 8px 12px; margin-bottom: 8px; }
.es2-sites { list-style: none; margin: 6px 0 12px; padding: 0; }
.es2-sites a { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.es2-sites li:first-child a { border-top: 0; }
.es2-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent); flex: none; }
.es2-sn { flex: 1; min-width: 0; display: flex; flex-direction: column; } .es2-sn small { color: var(--mu); font-size: 13px; } .es2-sv { font-weight: 700; font-size: 14px; white-space: nowrap; }
.es2-save { display: flex; align-items: center; gap: 14px; } .es2-save div { display: flex; flex-direction: column; } .es2-save b { font-family: var(--disp); font-size: 28px; color: #2F8A3B; }
.es2-save-ic { width: 54px; height: 54px; border-radius: 18px; background: var(--leafsoft); display: grid; place-items: center; font-size: 26px; flex: none; }
.es2-qa { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.es2-qa a { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: none; }
.es2-qa i { width: 52px; height: 52px; border-radius: 16px; background: var(--bg); display: grid; place-items: center; font-style: normal; font-size: 23px; transition: transform .15s; } .es2-qa a:hover i { transform: translateY(-2px); }
a.es2-health { display: flex; align-items: center; gap: 14px; color: var(--ink); } a.es2-health > span:last-child { display: flex; flex-direction: column; gap: 3px; }
.es2-grade { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; font-family: var(--disp); font-size: 30px; font-weight: 800; color: var(--c); background: color-mix(in srgb, var(--c) 14%, #fff); flex: none; }
a.es2-order { color: var(--ink); }
.es2-steps { display: flex; gap: 4px; margin: 12px 0 8px; } .es2-steps i { flex: 1; height: 7px; border-radius: 9px; background: #DFE6EC; } .es2-steps i.done { background: #2F8A3B; } .es2-steps i.on { background: var(--sun); }
.es2-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .es2-btns .btn { margin: 0; }
.es2-news { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; }
.es2-nw { flex: none; width: 240px; scroll-snap-align: start; border-radius: 16px; overflow: hidden; background: var(--bg); text-decoration: none; color: var(--ink); display: flex; flex-direction: column; }
.es2-nw img, .es2-nwimg { width: 100%; height: 110px; object-fit: cover; display: grid; place-items: center; font-size: 34px; background: linear-gradient(135deg, #1d4466, var(--sun)); }
.es2-nwt { padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; font-size: 14px; } .es2-nwt small { font-size: 12.5px; }
.es2-menu { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.es2-menu .es-card { display: flex; align-items: center; gap: 14px; margin: 0; color: var(--ink); } .es2-menu i { width: 48px; height: 48px; border-radius: 15px; background: var(--bg); display: grid; place-items: center; font-style: normal; font-size: 22px; flex: none; }
.es2-menu span { display: flex; flex-direction: column; } .es2-menu small { font-size: 13px; }
.es2-plusact { margin: 18px 0 10px; }
.es2-seg { position: sticky; top: 8px; z-index: 20; display: flex; gap: 4px; overflow-x: auto; background: #fff; padding: 5px; border-radius: 14px; box-shadow: 0 6px 20px rgba(16,32,47,.10); margin: 0 0 16px; }
.es2-seg a { flex: 1; text-align: center; white-space: nowrap; padding: 9px 12px; border-radius: 10px; font-size: 14px; font-weight: 700; color: var(--mu); text-decoration: none; } .es2-seg a:hover, .es2-seg a:focus { background: var(--pv); color: #fff; }
#flux, #energie, #sante, #alertes-c, #regles { scroll-margin-top: 76px; }
.es2-new { display: flex; justify-content: center; margin: 0 0 16px; font-size: 16px; padding: 14px; }
.es2-tk small.mu { display: block; margin-top: 2px; } .es2-tkx { margin: 8px 0 0; font-size: 15px; color: var(--ink); }
.es2-tl { list-style: none; margin: 12px 0 14px; padding: 0; padding-inline-start: 22px; position: relative; }
.es2-tl::before { content: ''; position: absolute; inset-inline-start: 6px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.es2-tl li { position: relative; padding-bottom: 10px; font-size: 14.5px; color: var(--mu); } .es2-tl li small { margin-inline-start: 6px; font-size: 12px; }
.es2-tl li::before { content: ''; position: absolute; inset-inline-start: -21px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: #CFD8E0; border: 2px solid #fff; box-shadow: 0 0 0 1px #CFD8E0; }
.es2-tl li.done { color: var(--ink); font-weight: 600; } .es2-tl li.done::before { background: #2F8A3B; box-shadow: 0 0 0 1px #2F8A3B; }
.es2-tl li.next::before { background: var(--sun); box-shadow: 0 0 0 4px var(--sunsoft); }
/* barre du bas : téléphone / application ; les onglets du haut restent sur grand écran */
.es2-bar { display: none; }
@media (max-width: 820px) {
  .es2 .es-tabs { display: none; }
  .es2-bar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; inset-inline: 0; bottom: 0; z-index: 70; background: rgba(255,255,255,.97); backdrop-filter: blur(10px); border-top: 1px solid var(--line); padding: 7px 4px calc(8px + env(safe-area-inset-bottom)); }
  .es2-bar a { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11.5px; font-weight: 700; color: var(--mu); text-decoration: none; }
  .es2-bar i { font-style: normal; font-size: 22px; line-height: 1.1; filter: grayscale(1); opacity: .6; }
  .es2-bar a[aria-current] { color: var(--pv); } .es2-bar a[aria-current] i { filter: none; opacity: 1; }
  .es2-bar a[aria-current]::after { content: ''; width: 18px; height: 3px; border-radius: 3px; background: var(--sun); margin-top: 1px; }
  body:has(.es2) { padding-bottom: 78px; }
  body:has(.es2) .wa-float { display: none; }
}
@media (max-width: 420px) { .es2-tiles { grid-template-columns: 1fr 1fr; } .es2-tile b { font-size: 21px; } .es2-node { min-width: 54px; } }
@media print { .es2-bar, .es2-seg { display: none !important; } }

/* ── ☀️ Thème « Course du soleil » (11/10/2026, design Claude) — même esprit que l'accueil ISS « soleil » ──
   Bleu cellule #0F2740, or du soleil #F2A516, vert du logo #4E9F2D · titres Bricolage Grotesque, texte Onest. */
.es2 { --s-pv: #0F2740; --s-line: #24496D; --s-sun: #F2A516; --s-sunsoft: #FDF1D6; --s-leaf: #4E9F2D; --s-leafsoft: #E5F2DD; --s-blue: #1D4E89; --s-bluesoft: #E3ECF7; --s-bg: #EDF1F4; --s-bd: #D8E0E7; --s-mu: #5B6B7A; }
body:has(.es2) { background: #EDF1F4; }
.es2 h1, .es2 h2, .es2 .es-h { font-family: 'Bricolage Grotesque', var(--disp), sans-serif; letter-spacing: -.015em; }
.es3-hero { background: var(--s-pv); color: #fff; border-radius: 22px; padding: 22px 24px 18px; margin: 0 0 16px; }
.es3-hero small { color: #A9BDD1; font-size: 13.5px; }
.es3-hero h1 { color: #fff; font-size: clamp(24px, 3.2vw, 34px); font-weight: 700; line-height: 1.15; margin: 4px 0 0; }
.es3-hero-sm { padding-bottom: 20px; }
.es3-hero-h { display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.es3-kpis { margin-inline-start: auto; display: flex; gap: 28px; }
.es3-kpis span { display: block; font-size: 13px; color: #A9BDD1; } .es3-kpis b { font-family: 'Bricolage Grotesque', sans-serif; font-size: 30px; font-weight: 800; line-height: 1.1; }
.es3-kpis .sun b { color: var(--s-sun); }
.es3-arcbox { margin-top: 10px; } .es3-arcbox svg { display: block; width: 100%; height: auto; font-family: 'Onest', sans-serif; }
.es3-arcbox.es3-m { display: none; }
.es3-halo { animation: es3-pulse 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes es3-pulse { 50% { transform: scale(1.25); opacity: .12; } }
@media (prefers-reduced-motion: reduce) { .es3-halo { animation: none; } }
.es3-arcl { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: #8FA6BC; margin-top: 4px; flex-wrap: wrap; }
.es3-lg i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--s-sun); margin: 0 6px 0 0; vertical-align: -1px; }
.es3-lg i.y { width: 14px; height: 0; border-top: 2px dashed #FFC94D; border-radius: 0; background: none; margin-inline-start: 10px; vertical-align: 3px; }
.es3-cols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.es3-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.es2 .es3-card, .es2 .es3-col > .es-card { margin: 0; background: #fff; border: 1px solid var(--s-bd); border-radius: 18px; box-shadow: none; padding: 16px 18px; color: var(--ink); }
.es2 #soleil.es3-card { margin-bottom: 16px; }
a.es3-card:hover { border-color: var(--s-pv); transform: none; }
.es3-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.es3-row h2, .es3-h { font-size: 18px; font-weight: 700; margin: 0; }
.es3-tag { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; color: var(--c, var(--s-blue)); background: color-mix(in srgb, var(--c, #1D4E89) 13%, #fff); white-space: nowrap; }
.es3-flow { display: flex; align-items: center; margin-top: 14px; }
.es3-node { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 78px; text-align: center; }
.es3-node i, .es3-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-style: normal; }
.es3-node i.sun, .es3-ic.sun { background: var(--s-sunsoft); color: #B57900; } .es3-node i.blue { background: var(--s-bluesoft); color: var(--s-blue); } .es3-node i.leaf, .es3-ic.leaf { background: var(--s-leafsoft); color: #2F6B16; }
.es3-node b { font-size: 14.5px; } .es3-node small { font-size: 12px; color: var(--s-mu); }
.es3-wire { flex: 1; height: 2px; margin-bottom: 38px; background: repeating-linear-gradient(90deg, var(--s-sun) 0 6px, transparent 6px 11px); background-size: 22px 2px; animation: es3-wire 1.3s linear infinite; }
.es3-wire.leaf { background-image: repeating-linear-gradient(90deg, var(--s-leaf) 0 6px, transparent 6px 11px); }
@keyframes es3-wire { to { background-position: 22px 0; } }
@media (prefers-reduced-motion: reduce) { .es3-wire { animation: none; } }
.es3-note { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--s-bg); font-size: 13.5px; }
.es3-list { list-style: none; margin: 8px 0 0; padding: 0; }
.es3-list a { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--s-bd); color: inherit; text-decoration: none; }
.es3-list li:first-child a { border-top: 0; }
.es3-list .t { flex: 1; min-width: 0; display: flex; flex-direction: column; } .es3-list small { color: var(--s-mu); font-size: 13px; } .es3-list .r { font-weight: 700; white-space: nowrap; }
.es3-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent); flex: none; }
.go { font-size: 26px; font-weight: 300; color: var(--s-mu); line-height: 1; }
.es3-save { display: flex; align-items: center; gap: 14px; } .es3-save .es3-ic { width: 54px; height: 54px; border-radius: 16px; flex: none; }
.es3-save div { display: flex; flex-direction: column; } .es3-save small { color: var(--s-mu); font-size: 13px; } .es3-save b { font-family: 'Bricolage Grotesque', sans-serif; font-size: 26px; font-weight: 800; color: #2F6B16; letter-spacing: -.02em; }
.es3-pay { display: flex; align-items: center; gap: 12px; background: var(--s-sunsoft); border-radius: 18px; padding: 14px 18px; color: var(--ink); text-decoration: none; }
.es3-pay .t { flex: 1; display: flex; flex-direction: column; } .es3-pay small { color: #8A5A00; font-weight: 600; font-size: 13px; } .es3-pay b { font-family: 'Bricolage Grotesque', sans-serif; font-size: 22px; font-weight: 800; }
.es3-pay .bar, .es3-pbar { display: block; height: 6px; border-radius: 9px; background: rgba(138,90,0,.15); margin-top: 6px; overflow: hidden; } .es3-pay .bar i, .es3-pbar i { display: block; height: 100%; background: var(--s-sun); border-radius: 9px; }
.es3-pay .go { color: #8A5A00; }
a.es3-health { display: flex; align-items: center; gap: 14px; } a.es3-health > span:last-child { display: flex; flex-direction: column; gap: 2px; } a.es3-health small { color: var(--s-mu); font-size: 13px; }
.es3-grade { width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; font-family: 'Bricolage Grotesque', sans-serif; font-size: 30px; font-weight: 800; color: var(--c); background: color-mix(in srgb, var(--c) 14%, #fff); flex: none; }
.es3-steps { display: flex; gap: 4px; margin: 12px 0 8px; } .es3-steps i { flex: 1; height: 7px; border-radius: 9px; background: var(--s-bd); } .es3-steps i.done { background: var(--s-leaf); } .es3-steps i.on { background: var(--s-sun); }
.es3-sav { display: flex; align-items: center; gap: 12px; } .es3-sav .t { flex: 1; display: flex; flex-direction: column; } .es3-sav small { color: var(--s-mu); font-size: 13px; }
.es3-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 12px; font-weight: 700; text-decoration: none; background: var(--s-pv); color: #fff; border: 0; }
.es3-btn.sun { background: var(--s-sun); color: #1B1300; } .es3-btn.sun:hover { background: #DB9410; }
.es3-big { display: flex; width: 100%; min-height: 50px; margin-top: 16px; font-size: 16px; }
.es3-more { font-weight: 700; font-size: 13.5px; color: var(--s-blue); text-decoration: none; }
.es3-news { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin-top: 12px; padding-bottom: 4px; }
.es3-nw { flex: none; width: 230px; scroll-snap-align: start; border-radius: 14px; overflow: hidden; background: var(--s-bg); color: var(--ink); text-decoration: none; display: flex; flex-direction: column; }
.es3-nw img, .es3-nwimg { width: 100%; height: 104px; object-fit: cover; display: grid; place-items: center; background: var(--s-pv); color: var(--s-sun); }
.es3-nw .t { padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; font-size: 14px; } .es3-nw small { color: var(--s-mu); font-size: 12.5px; }
/* Ma centrale */
.es3-top { display: flex; align-items: center; gap: 12px; }
.es3-iconbtn { width: 44px; height: 44px; border-radius: 12px; background: rgba(255,255,255,.10); display: grid; place-items: center; color: #fff; flex: none; }
html[dir=rtl] .es3-iconbtn svg { transform: scaleX(-1); }
.es3-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.es3-chip { font-size: 12.5px; font-weight: 700; padding: 4px 11px; border-radius: 999px; background: color-mix(in srgb, var(--c, #ffffff) 26%, transparent); color: #fff; }
.es3-seg { display: flex; gap: 4px; margin-top: 16px; background: rgba(255,255,255,.08); border: 1px solid var(--s-line); padding: 4px; border-radius: 14px; overflow-x: auto; }
.es3-seg a { flex: 1; text-align: center; white-space: nowrap; padding: 9px 10px; border-radius: 10px; color: #DCE6EF; font-size: 13.5px; font-weight: 600; text-decoration: none; }
.es3-seg a.on, .es3-seg a:hover { background: var(--s-sun); color: #1B1300; font-weight: 700; }
#soleil, #energie, #sante, #alertes-c, #regles { scroll-margin-top: 16px; }
.es3-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--s-mu); margin-top: 6px; }
.es3-legend i { display: inline-block; width: 12px; margin-inline-end: 6px; vertical-align: 2px; }
.es3-legend i.p { height: 10px; border-radius: 3px; background: var(--s-sun); vertical-align: -1px; } .es3-legend i.l { height: 3px; border-radius: 3px; background: var(--s-blue); } .es3-legend i.y { height: 0; border-top: 2px dashed #DB9410; }
.es3-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.es3-tiles > div { border-radius: 14px; padding: 10px 12px; background: var(--s-bg); display: flex; flex-direction: column; }
.es3-tiles .sun { background: var(--s-sunsoft); } .es3-tiles .blue { background: var(--s-bluesoft); } .es3-tiles .leaf { background: var(--s-leafsoft); }
.es3-tiles small { font-size: 12px; color: var(--s-mu); } .es3-tiles b { font-family: 'Bricolage Grotesque', sans-serif; font-size: 22px; font-weight: 800; }
/* Paiements */
.es3-amount { font-family: 'Bricolage Grotesque', sans-serif; font-size: clamp(32px, 7vw, 44px); font-weight: 800; letter-spacing: -.02em; margin: 2px 0 4px; }
.es3-hero .es3-pbar { height: 10px; background: rgba(255,255,255,.12); margin-top: 10px; }
.es3-hero .es-beta { vertical-align: middle; font-family: 'Onest', sans-serif; letter-spacing: .04em; }
/* Onglets du haut (ordinateur) et barre du bas (téléphone / application) */
.es2 .es-tabs a { border-radius: 10px; background: transparent; border-color: transparent; padding: 9px 14px; font-size: 14.5px; }
.es2 .es-tabs a[aria-current] { background: var(--s-pv); border-color: var(--s-pv); color: #fff; }
.es2-bar i { filter: none !important; opacity: 1 !important; display: grid; place-items: center; height: 24px; }
.es2-bar a { color: var(--s-mu); } .es2-bar a[aria-current] { color: var(--s-pv); }
.es2-menu i { color: var(--s-pv); }
@media (max-width: 820px) {
  .es2 { padding-top: 0; }
  .es3-hero { margin: 0 -22px 16px; border-radius: 0 0 28px 28px; padding: 20px 20px 18px; }
  .es3-kpis { margin: 0; width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; order: 3; }
  .es3-kpis > div { background: rgba(255,255,255,.08); border: 1px solid var(--s-line); border-radius: 14px; padding: 9px 11px; }
  .es3-kpis > div.sun { background: var(--s-sun); border-color: var(--s-sun); color: #1B1300; } .es3-kpis .sun span, .es3-kpis .sun b { color: #1B1300; }
  .es3-kpis b { font-size: 21px; }
  .es3-arcbox.es3-m { display: block; } .es3-arcbox.es3-d { display: none; }
  .es3-cols { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .es3-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 🏠 Maison illustrée animée ↔ icônes, au choix du client (11/10/2026) */
.es3-vsw { display: inline-flex; gap: 2px; background: #EEF1F4; border-radius: 12px; padding: 3px; margin: 12px 0 4px; }
.es3-vsw button { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: #4A5A69; font: 600 14px 'Onest', sans-serif; cursor: pointer; }
.es3-vsw button[aria-pressed="true"] { background: #fff; color: var(--s-pv, #0F2740); font-weight: 700; box-shadow: 0 1px 3px rgba(16,32,47,.14); }
.es3-vmaison { margin: 6px -6px 0; } .es3-vmaison[hidden], .es3-vicones[hidden] { display: none !important; }
.es3-morebtn { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; }
/* ── V2 (11/10/2026, recherche UX : Tesla, Enphase, SolarEdge, Huawei, SunPower) — en-tête clair, une vedette, listes, 4 onglets ── */
.es3-appbar { background: #fff; border: 1px solid #E1E7ED; border-radius: 20px; padding: 14px 16px 12px; margin: 0 0 14px; color: #10202F; }
.es3-appbar h1, .es3-h1 { font-family: 'Bricolage Grotesque', sans-serif; font-size: 24px; font-weight: 700; margin: 0; color: #10202F; display: block; }
.es3-appbar > small { color: #4A5A69; font-size: 13.5px; }
.es3-ab-row { display: flex; align-items: center; gap: 10px; }
.es3-ab-t { flex: 1; min-width: 0; display: flex; flex-direction: column; } .es3-ab-t b { font-family: 'Bricolage Grotesque', sans-serif; font-size: 17px; } .es3-ab-t small { color: #4A5A69; font-size: 13px; }
.es3-logo, .es3-avatar { width: 38px; height: 38px; border-radius: 11px; background: #0F2740; color: #F2A516; display: grid; place-items: center; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; flex: none; }
.es3-avatar { width: 52px; height: 52px; border-radius: 50%; font-size: 22px; }
.es3-iconbtn.light { background: #EEF1F4; color: #0F2740; }
.es3-ab-st { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; } .es3-ab-st small { color: #4A5A69; font-size: 13px; }
.es3-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; padding: 5px 11px; border-radius: 999px; color: color-mix(in srgb, var(--c) 70%, #000); background: color-mix(in srgb, var(--c) 14%, #fff); }
.es3-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.es3-lbl { display: block; font-size: 13px; font-weight: 600; color: #4A5A69; }
.es3-bignum { font-family: 'Bricolage Grotesque', sans-serif; font-size: 46px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; color: #10202F; }
.es3-bignum span { font-size: 20px; color: #4A5A69; font-weight: 700; }
.es3-kpi3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.es3-kpi3 a { background: #fff; border: 1px solid #E1E7ED; border-radius: 16px; padding: 12px; text-decoration: none; color: #10202F; display: flex; flex-direction: column; gap: 2px; min-height: 92px; box-sizing: border-box; }
.es3-kpi3 small { font-size: 12px; color: #4A5A69; font-weight: 600; } .es3-kpi3 b { font-family: 'Bricolage Grotesque', sans-serif; font-size: 22px; font-weight: 800; }
.es3-kpi3 em { font-style: normal; font-size: 12px; color: #4A5A69; } .es3-kpi3 em.up { color: #24561A; font-weight: 700; } .es3-kpi3 em.down { color: #A12F2F; font-weight: 700; }
.es3-kpi3 a:hover { border-color: #0F2740; }
.es3-arcl-l { color: #4A5A69; align-items: center; }
.es3-pay em { font-family: 'Onest', sans-serif; font-style: normal; font-size: 12.5px; font-weight: 600; color: #4A5A69; }
.es3-pay { border: 1px solid #F3D99A; background: #FFF8E6; }
.es3-rowcard { display: flex !important; align-items: center; gap: 12px; }
.es3-rowcard .t { flex: 1; min-width: 0; display: flex; flex-direction: column; } .es3-rowcard small { color: #4A5A69; font-size: 13px; }
.es3-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; } .es3-ic.blue { background: #E3ECF7; color: #1D4E89; }
.es3-sec { font-family: 'Onest', sans-serif !important; font-size: 13px !important; font-weight: 700; letter-spacing: .03em !important; text-transform: uppercase; color: #4A5A69; margin: 4px 4px 8px; }
.es3-group { background: #fff; border: 1px solid #E1E7ED; border-radius: 18px; overflow: hidden; }
.es3-li { display: flex; align-items: center; gap: 12px; padding: 10px 16px; min-height: 60px; box-sizing: border-box; color: #10202F; text-decoration: none; border-top: 1px solid #E1E7ED; }
.es3-li:first-child { border-top: 0; } a.es3-li:hover { background: #F7F9FB; }
.es3-li .t { flex: 1; min-width: 0; display: flex; flex-direction: column; } .es3-li small { color: #4A5A69; font-size: 13px; }
.es3-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.es3-btn.light { background: #fff; color: #0F2740; border: 1px solid #C3CCD5; min-height: 52px; }
.es3-cta { width: 100%; min-height: 54px; font-size: 16px; font-weight: 800; border-radius: 16px; box-shadow: 0 8px 20px -8px rgba(122,79,0,.55); }
.es3-sticky { position: sticky; bottom: 16px; z-index: 30; margin-top: 16px; }
.es3-lang { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 36px; border-radius: 9px; font-weight: 700; color: #4A5A69; text-decoration: none; }
.es3-lang[aria-current] { background: #fff; color: #0F2740; box-shadow: 0 1px 3px rgba(16,32,47,.14); }
.es3-next { background: #0F2740; color: #fff; border-radius: 18px; padding: 14px 16px; margin-bottom: 8px; } .es3-next small { display: block; color: #B8C8D8; font-size: 13px; } .es3-next b { font-family: 'Bricolage Grotesque', sans-serif; font-size: 20px; }
/* Les bandeaux des pages de détail passent en clair (V2) */
.es3-hero { background: #fff; color: #10202F; border: 1px solid #E1E7ED; }
.es3-hero small { color: #4A5A69; } .es3-hero h1 { color: #10202F; }
.es3-hero .es3-iconbtn { background: #EEF1F4; color: #0F2740; }
.es3-chip { color: color-mix(in srgb, var(--c, #5B6B7A) 75%, #000); background: color-mix(in srgb, var(--c, #5B6B7A) 14%, #fff); }
.es3-seg { background: #EEF1F4; border-color: #E1E7ED; } .es3-seg a { color: #10202F; } .es3-seg a.on, .es3-seg a:hover { background: #0F2740; color: #fff; }
.es3-hero .es3-pbar { background: #EEF1F4; } .es3-hero .es3-arcl { color: #4A5A69; }
.es2-bar { grid-template-columns: repeat(4, 1fr) !important; }
@media (max-width: 820px) {
  .es3-appbar { margin: 0 -22px 14px; border-radius: 0; border-width: 0 0 1px; padding: 14px 18px 12px; }
  .es3-hero { margin: 0 -22px 14px; border-radius: 0; border-width: 0 0 1px; }
  .es3-sticky { bottom: 86px; }
  .es3-bignum { font-size: 42px; }
}
/* ── Réglages et alertes + disposition téléphone de tous les boutons (12/10/2026, nouvelle présentation .es2) ── */
.es3-jump { display: flex; gap: 6px; overflow-x: auto; margin-top: 12px; padding-bottom: 2px; }
.es3-jump a { flex: none; padding: 8px 14px; min-height: 40px; box-sizing: border-box; display: inline-flex; align-items: center; border-radius: 999px; background: #EEF1F4; color: #0F2740; font-weight: 700; font-size: 13.5px; text-decoration: none; }
#prefs, [id^="regles"] { scroll-margin-top: 16px; }
.es3-rules .es-rule { border: 1px solid #E1E7ED; border-radius: 16px; padding: 14px; margin-bottom: 10px; background: #fff; }
.es3-rules .es-rule.on { border-color: #4E9F2D; background: #F6FBF4; }
.es3-rtog { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.es3-rtog input, .es2 .es-ch input[type=checkbox] { width: 22px; height: 22px; accent-color: #0F2740; flex: none; }
.es3-rfields { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin: 10px 0 4px; }
.es3-rfields label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: #4A5A69; }
.es3-rin { display: flex; align-items: center; border: 1px solid #C3CCD5; border-radius: 12px; background: #fff; overflow: hidden; min-height: 48px; }
.es3-rin input { flex: 1; min-width: 0; border: 0; padding: 10px 12px; font: 700 17px 'Onest', sans-serif; color: #10202F; background: transparent; }
.es3-rin input:focus { outline: none; } .es3-rin:focus-within { border-color: #0F2740; box-shadow: 0 0 0 3px rgba(15,39,64,.12); }
.es3-rin input:disabled { color: #8A97A4; }
.es3-rin em { font-style: normal; font-weight: 700; color: #4A5A69; padding: 0 12px; background: #EEF1F4; align-self: stretch; display: grid; place-items: center; }
.es2 .es-ch { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.es2 .es-ch label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid #C3CCD5; border-radius: 12px; background: #fff; font-weight: 600; cursor: pointer; }
.es2 .es-ch label:has(input:checked) { border-color: #0F2740; background: #E3ECF7; }
.es3-save-btn { min-height: 52px; font-size: 16px; }
@media (max-width: 820px) {
  /* Boutons : pleine largeur, 48 px de haut, bien espacés (zone du pouce) */
  .es2 .es-card .btn, .es2 form.form .btn, .es2 .tg-acts .btn, .es2 .tg-acts form, .es2 .tg-go .btn, .es2 .es-fin-acts .btn, .es2 .nw-links .btn { display: flex; width: 100%; min-height: 48px; justify-content: center; align-items: center; margin: 6px 0 0; box-sizing: border-box; }
  .es2 .tg-acts { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
  .es2 .tg-acts .tg-later, .es2 .tg-later { min-height: 44px; width: 100%; }
  .es2 .tg-go { flex-direction: column; align-items: stretch; gap: 12px; } .es2 .tg-qr { display: none; }
  .es2 .es-rtest { flex-direction: column; align-items: stretch; } .es2 .es-rtest .btn { width: 100%; min-height: 48px; }
  .es2 .es-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .es2 .es-card { padding: 16px; }
  .es2 .field input, .es2 .field select, .es2 .field textarea { min-height: 48px; font-size: 16px; }
  .es2 form.form button[type=submit], .es2 .nt-form > .btn, .es3-save-btn { position: sticky; bottom: 84px; z-index: 25; width: 100%; min-height: 52px; box-shadow: 0 8px 20px -8px rgba(16,32,47,.35); }
  .es3-rfields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .es2 .es-ch .mu { width: 100%; }
  .es2 .es-ch label { flex: 1 1 0; justify-content: center; }
  .es2 .es-h { font-size: 22px; margin: 18px 0 10px; }
  .es2 .es-back-top { width: 100%; justify-content: center; min-height: 44px; box-sizing: border-box; }
  .es2 .nt-table .nt-lab small { display: block; }
}
/* 22/10/2026 : 📱 connexion dans l'application (visiteur) — bandeau bleu nuit + cartes, comme la maquette validée */
.in-app-v .es-login { gap: 14px; padding-top: 0; }
.in-app-v .es-intro { margin: -20px calc(50% - 50vw) 0; padding: 22px max(20px, calc(50vw - 50%)) 30px; color: #fff; border-radius: 0 0 28px 28px;
  background: radial-gradient(circle at 88% 8%, rgba(255,201,77,.5), transparent 50%), linear-gradient(165deg, #0F2740 0%, #173A5E 100%); }
.in-app-v .es-intro h1 { color: #fff; font-size: 28px; margin: 8px 0 6px; } .in-app-v .es-intro .mu { color: #C9D6E3; } .in-app-v .es-intro .kick { background: rgba(242,165,22,.18); color: #FFD27A; }
.in-app-v .es-intro .btn.wa { display: none; }
.in-app-v .es-login .form { background: #fff; border-radius: 22px; padding: 18px 16px; box-shadow: 0 10px 30px -18px rgba(15,39,64,.35); }
.in-app-v .es-login .form .btn { width: 100%; justify-content: center; height: 52px; }
.in-app-v .es-login .es-lk { display: block; margin-top: 12px; padding: 12px; border-radius: 14px; background: #EEF2F5; color: var(--pv); font-weight: 700; text-align: center; text-decoration: none; }
/* bandeau collé sous l en-tête dans l application */
body.in-app-v .es { padding-top: 0; }
body.in-app-v .ah-hero, body.in-app-v .es-intro { margin-top: 0 !important; }

/* 22/10/2026 : 📱 application client, client CONNECTÉ (étape 2) — sans en-tête ni pied du site ; bandeaux bleu nuit « Course du soleil » */
body.in-app-c .hd-cl, body.in-app-c .ft-cl, body.in-app-c .wa-float { display: none !important; }
body.in-app-c, body.es-pc { padding-top: env(safe-area-inset-top); }
body.in-app-c .es, body.es-pc .es { padding-top: 0; }
body.in-app-c .es .es3-appbar, body.es-pc .es .es3-appbar { margin: 0 calc(50% - 50vw) 14px; padding: 18px max(18px, calc(50vw - 50%)) 20px; border: 0; border-radius: 0 0 26px 26px; color: #fff;
  background: radial-gradient(circle at 90% 0%, rgba(255,201,77,.45), rgba(242,165,22,.1) 38%, transparent 60%), linear-gradient(165deg, #0F2740 0%, #173A5E 100%); }
body.in-app-c .es .es3-appbar h1, body.in-app-c .es .es3-appbar .es3-h1, body.in-app-c .es .es3-ab-t b, body.es-pc .es .es3-appbar h1, body.es-pc .es .es3-appbar .es3-h1, body.es-pc .es .es3-ab-t b { color: #fff; }
body.in-app-c .es .es3-appbar > small, body.in-app-c .es .es3-ab-t small, body.in-app-c .es .es3-ab-st small, body.es-pc .es .es3-appbar > small, body.es-pc .es .es3-ab-t small, body.es-pc .es .es3-ab-st small { color: #C9D6E3; }
body.in-app-c .es .es3-appbar .es3-iconbtn.light, body.es-pc .es .es3-appbar .es3-iconbtn.light { background: rgba(255,255,255,.14); color: #fff; }
body.in-app-c .es .es3-appbar .es3-logo, body.in-app-c .es .es3-appbar .es3-avatar, body.es-pc .es .es3-appbar .es3-logo, body.es-pc .es .es3-appbar .es3-avatar { background: #F2A516; color: #0F2740; }
body.in-app-c .es .es3-appbar .es3-pill, body.es-pc .es .es3-appbar .es3-pill { background: rgba(255,255,255,.95); }
body.in-app-c .es .es3-hero, body.es-pc .es .es3-hero { margin: 0 calc(50% - 50vw) 16px; border-radius: 0 0 26px 26px; border: 0; color: #fff;
  background: radial-gradient(circle at 90% 0%, rgba(255,201,77,.45), transparent 55%), linear-gradient(165deg, #0F2740 0%, #173A5E 100%); padding-left: max(18px, calc(50vw - 50%)); padding-right: max(18px, calc(50vw - 50%)); }
body.in-app-c .es .es3-hero h1, body.es-pc .es .es3-hero h1 { color: #fff; } body.in-app-c .es .es3-hero small { color: #C9D6E3; }
body.in-app-c .es .es3-hero .es3-iconbtn, body.es-pc .es .es3-hero .es3-iconbtn { background: rgba(255,255,255,.14); color: #fff; }

/* 22/10/2026 : 🔔 « Mes alertes » de l'application client (inc/es2_notifs.php) + pastille de l'onglet */
.es2-bar i { position: relative; }
.es2-bd { position: absolute; top: -6px; inset-inline-end: -12px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #E53935; color: #fff; font: 800 11px/18px Onest, sans-serif; text-align: center; border: 2px solid #fff; }
.nf-seg { display: flex; gap: 6px; overflow-x: auto; margin-top: 12px; scrollbar-width: none; }
.nf-seg button { flex: none; border: 0; border-radius: 999px; padding: 8px 13px; font: 700 13px Onest, sans-serif; background: rgba(255,255,255,.14); color: #DCE6F0; cursor: pointer; }
.nf-seg button.on { background: #fff; color: #0F2740; }
.es:not(.es2) .nf-seg button, body:not(.in-app-c):not(.es-pc) .nf-seg button { background: #EEF2F5; color: #4A5A69; } body:not(.in-app-c):not(.es-pc) .nf-seg button.on { background: #0F2740; color: #fff; }
.nf-day { font-weight: 800; font-size: 13px; color: #5B6B7A; margin: 12px 0 2px; } .nf-day:first-child { margin-top: 0; }
.nf-it { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid #E1E7ED; } .nf-day + .nf-it { border-top: 0; }
.nf-ic { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; font-style: normal; font-size: 19px; flex: none; }
.nf-it b { display: block; font-size: 15px; } .nf-it p { margin: 2px 0 2px; font-size: 13.5px; color: #3B4A58; } .nf-it small { color: #5B6B7A; font-size: 12px; }
.nf-it.unread b::after { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #F2A516; margin-inline-start: 6px; vertical-align: middle; }
.nf-snd { margin-top: 14px; }
.nf-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid #E1E7ED; } .nf-row:first-of-type { border-top: 0; }
.nf-play { width: 38px; height: 38px; border-radius: 50%; border: 0; background: #0F2740; color: #fff; font-size: 13px; flex: none; cursor: pointer; }
.nf-t { flex: 1; min-width: 0; } .nf-t b { display: block; font-size: 14.5px; } .nf-t small { color: #5B6B7A; font-size: 12.5px; }
.nf-sw { position: relative; flex: none; } .nf-sw input { position: absolute; opacity: 0; width: 46px; height: 28px; margin: 0; cursor: pointer; }
.nf-sw i { display: block; width: 46px; height: 28px; border-radius: 14px; background: #C9D3DC; position: relative; transition: background .2s; }
.nf-sw i::after { content: ''; position: absolute; top: 3px; inset-inline-start: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .2s; }
.nf-sw input:checked + i { background: #3E8E2B; } .nf-sw input:checked + i::after { transform: translateX(18px); } [dir=rtl] .nf-sw input:checked + i::after { transform: translateX(-18px); }
.nf-sw input:focus-visible + i { outline: 3px solid #F2A516; outline-offset: 2px; }
/* 5 onglets dans l application (Alertes en plus) */
body.in-app-c .es2-bar { grid-template-columns: repeat(5, 1fr) !important; }
body.in-app-c .es2-bar a, body.es-pc .es2-bar a { font-size: 11px; white-space: nowrap; }

/* 22/10/2026 : vue « Icônes » en croix (style Growatt) — es2IconsCross() */
.ic-x3 { padding: 6px 0 2px; }
.ic-g { display: grid; grid-template-columns: 1fr .55fr 1fr .55fr 1fr; grid-template-rows: auto 30px auto 30px auto; align-items: center; justify-items: center;
  grid-template-areas: ". . pv . ." ". . l1 . ." "ld l2 inv l3 gr" ". . l4 . ." ". . bt . ."; max-width: 420px; margin: 0 auto; }
.ic-pv { grid-area: pv; } .ic-ld { grid-area: ld; } .ic-inv { grid-area: inv; } .ic-gr { grid-area: gr; } .ic-bt { grid-area: bt; }
.ic-ln[data-l=pv] { grid-area: l1; } .ic-ln[data-l=ld] { grid-area: l2; } .ic-ln[data-l=gr] { grid-area: l3; } .ic-ln[data-l=bt] { grid-area: l4; }
.ic-g:not(:has(.ic-bt)) .ic-ln[data-l=bt] { display: none; }
.ic-c { position: relative; width: 100%; max-width: 104px; aspect-ratio: 1 / 1; border-radius: 20px; background: #F6F8FB; border: 2px solid #D5DDE5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; text-align: center; padding: 6px 4px; }
.ic-c i { font-style: normal; color: #10202F; line-height: 1; } .ic-c b { font: 800 15px/1.15 'Bricolage Grotesque', Onest, sans-serif; color: #10202F; } .ic-c b u { text-decoration: none; display: block; font: 600 12px Onest, sans-serif; color: #5B6B7A; }
.ic-c small { font-size: 11px; color: #5B6B7A; line-height: 1.2; }
.ic-pv { border-color: #F5B54A; background: #FFF8EA; } .ic-ld { border-color: #A9BAD0; } .ic-gr { border-color: #6D7FD6; background: #F3F5FD; } .ic-bt { border-color: #5CCFC6; background: #EFFBFA; }
.ic-inv { border-color: #E1E7ED; background: #fff; box-shadow: 0 8px 18px -12px rgba(15,39,64,.35); } .ic-inv b { display: none; } .ic-inv small { font-size: 12.5px; color: #3B4A58; font-weight: 600; }
.ic-gr.off { opacity: .55; border-style: dashed; }
.ic-x { position: absolute; top: -10px; right: -10px; background: #4A5563; color: #fff; font: 800 12px/1 Onest, sans-serif; font-style: normal; padding: 5px 8px; border-radius: 999px; }
.ic-ln { position: relative; background: #D5DDE5; border-radius: 2px; overflow: hidden; }
.ic-ln.v { width: 3px; height: 100%; } .ic-ln.h { height: 3px; width: 100%; }
.ic-ln.off { background: repeating-linear-gradient(90deg, #B8C3CE 0 6px, transparent 6px 11px); }
.ic-ln s { position: absolute; display: none; width: 8px; height: 8px; border-radius: 50%; }
.ic-ln.on s { display: block; }
.ic-ln[data-l=pv] { background: #F7D79A; } .ic-ln[data-l=pv] s { background: #F2A516; }
.ic-ln[data-l=ld] s { background: #7F95B2; } .ic-ln[data-l=gr] s { background: #5468D4; } .ic-ln[data-l=bt] { background: #A7E6E1; } .ic-ln[data-l=bt] s { background: #2DB7AC; }
.ic-ln.v s { left: -2.5px; animation: icv 1.6s linear infinite; } .ic-ln.h s { top: -2.5px; animation: ich 1.6s linear infinite; }
.ic-ln.v.rev s { animation-name: icvr; } .ic-ln.h.rev s { animation-name: ichr; }
@keyframes icv { from { top: -8px; } to { top: 100%; } } @keyframes icvr { from { top: 100%; } to { top: -8px; } }
@keyframes ich { from { left: -8px; } to { left: 100%; } } @keyframes ichr { from { left: 100%; } to { left: -8px; } }
@media (prefers-reduced-motion: reduce) { .ic-ln s { animation: none !important; left: calc(50% - 4px); top: calc(50% - 4px); } }
.nf-more { display: flex; width: 100%; justify-content: center; margin-top: 12px; }

/* 22/10/2026 : 📱 accueil de l'app — courbe du soleil, chiffres du jour et météo de demain DANS le bandeau bleu nuit (es2_home.php, $APPHDR) */
.hh-arc { display: block; margin: 10px -6px 0; }
.hh-arc svg { width: 100%; height: auto; display: block; }
.hh-lbl { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 11.5px; color: #9FB3C8; margin-top: 2px; white-space: nowrap; }
.hh-lbl i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin: 0 4px 0 6px; vertical-align: -1px; } .hh-lbl i.p { background: #F2A516; } .hh-lbl i.l { height: 3px; border-radius: 2px; background: #7FB3E6; vertical-align: 2px; }
.hh-kpi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.hh-kpi a { display: block; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 9px 10px; text-decoration: none; color: #fff; min-width: 0; }
.hh-kpi small { display: block; color: #9FB3C8; font-size: 11.5px; line-height: 1.25; } .hh-kpi b { display: block; font: 800 18px/1.2 'Bricolage Grotesque', Onest, sans-serif; margin-top: 2px; }
.hh-kpi em { display: block; font-style: normal; font-size: 11px; color: #C9D6E3; } .hh-kpi em.up { color: #8EE07A; } .hh-kpi em.down { color: #FF9C8F; }
.hh-wx { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 9px 12px; border-radius: 14px; background: linear-gradient(90deg, rgba(242,165,22,.22), rgba(242,165,22,.06)); border: 1px solid rgba(242,165,22,.45); color: #fff; }
.hh-wx i { font-style: normal; font-size: 28px; line-height: 1; } .hh-wx b { display: block; font-size: 14px; } .hh-wx small { color: #DCE6F0; font-size: 12.5px; }
.hh-wx em { margin-inline-start: auto; font-style: normal; background: #F2A516; color: #0F2740; font-weight: 800; font-size: 11.5px; padding: 4px 8px; border-radius: 999px; white-space: nowrap; }
body:not(.in-app-c):not(.es-pc) .hh-arc, body:not(.in-app-c):not(.es-pc) .hh-lbl, body:not(.in-app-c):not(.es-pc) .hh-kpi, body:not(.in-app-c):not(.es-pc) .hh-wx { display: none; }

/* 22/10/2026 : logo ATD SOLAR en filigrane derrière la courbe du soleil (bandeau de l accueil, app) */
.hh-arc { position: relative; }
.hh-arc::before { content: ""; position: absolute; left: 26%; right: 26%; top: 16%; bottom: 34%; background: url("logo.png") center / contain no-repeat; opacity: .12; filter: brightness(0) invert(1); pointer-events: none; }
.hh-arc svg { position: relative; }
/* 22/10/2026 : conseil sous la météo de demain (bannière de l accueil) */
.hh-wx { flex-wrap: wrap; }
.hh-tip { flex-basis: 100%; margin: 6px 0 0; padding-top: 7px; border-top: 1px solid rgba(255,255,255,.18); font-size: 12.5px; line-height: 1.4; color: #FDF1D6; }
.hh-tip.hh-faible { color: #FFD7CF; }
/* 22/10/2026 : 📱 page Énergie de l app — la courbe juste sous la date, puis les chiffres, puis les camemberts */
body.in-app-c .gwen-e, body.es-pc .gwen-e { display: flex; flex-direction: column; }
body.in-app-c .gwen-e > .gwen-top, body.es-pc .gwen-e > .gwen-top { order: 1; }
body.in-app-c .gwen-e > .gwen-g2, body.es-pc .gwen-e > .gwen-g2 { display: contents; }
body.in-app-c .gwen-e > .gwen-g2 > .gwen-box:first-child, body.es-pc .gwen-e > .gwen-g2 > .gwen-box:first-child { order: 2; margin-bottom: 12px; }
body.in-app-c .gwen-e > .ek, body.es-pc .gwen-e > .ek { order: 3; }
body.in-app-c .gwen-e > .gwen-g2 > .gwen-box:last-child, body.es-pc .gwen-e > .gwen-g2 > .gwen-box:last-child { order: 4; margin-top: 12px; }
body.in-app-c .gwen-e > .et, body.es-pc .gwen-e > .et { order: 5; }
/* 22/10/2026 : 📱 « Mes sites » (client à plusieurs centrales, maquette A) — total dans le bandeau, une carte par site, barre de sites */
.ms-big { margin-top: 12px; } .ms-big small { display: block; color: #C9D6E3; font-size: 13px; }
.ms-big b { display: block; color: #fff; font: 800 42px/1.1 'Bricolage Grotesque', Onest, sans-serif; letter-spacing: -.02em; } .ms-big b span { font-size: 18px; color: #C9D6E3; }
.ms-tip { margin: 10px 0 0; padding: 8px 12px; border-radius: 12px; background: rgba(242,165,22,.16); border: 1px solid rgba(242,165,22,.4); color: #FDF1D6; font-size: 12.5px; line-height: 1.4; } .ms-tip.hh-faible { color: #FFD7CF; }
.ms-h { font: 700 16px Onest, sans-serif; color: #10202F; margin: 4px 4px 10px; }
.ms-card { display: grid; grid-template-columns: 1fr 112px; gap: 8px; align-items: center; background: #fff; border-radius: 18px; padding: 12px 14px; margin-bottom: 10px; text-decoration: none; color: #10202F;
  box-shadow: 0 1px 3px rgba(15,39,64,.08); border-inline-start: 4px solid var(--c); }
.ms-t { min-width: 0; } .ms-t > b { display: block; font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-st { display: block; font-size: 12.5px; font-weight: 700; color: color-mix(in srgb, var(--c) 80%, #000); margin-top: 2px; } .ms-st i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c); margin-inline-end: 5px; }
.ms-n { display: flex; gap: 12px; margin-top: 8px; } .ms-n small { display: block; font-size: 11.5px; color: #5B6B7A; } .ms-n b { display: block; font-size: 15px; white-space: nowrap; }
.ms-sp svg { width: 112px; height: 58px; display: block; }
.ms-chips { display: flex; gap: 8px; overflow-x: auto; margin-top: 12px; scrollbar-width: none; } .ms-chips::-webkit-scrollbar { display: none; }
.ms-chips a { flex: none; white-space: nowrap; padding: 7px 13px; border-radius: 999px; background: rgba(255,255,255,.14); color: #fff; font-size: 13px; font-weight: 600; text-decoration: none; }
.ms-chips a.on { background: #F2A516; color: #0F2740; font-weight: 800; } .ms-chips i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c); margin-inline-end: 6px; border: 1.5px solid rgba(255,255,255,.7); }
.ms-tot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .ms-tot div { background: #F4F6F8; border-radius: 14px; padding: 10px; } .ms-tot small { display: block; font-size: 11.5px; color: #5B6B7A; } .ms-tot b { display: block; font: 800 18px/1.2 'Bricolage Grotesque', Onest, sans-serif; }
.ms-share { list-style: none; margin: 0; padding: 0; } .ms-share li { margin: 10px 0; } .ms-share .r { display: flex; justify-content: space-between; font-size: 13.5px; } .ms-share .r b { font-weight: 700; }
.ms-share .bar { height: 10px; border-radius: 6px; background: #EEF1F4; margin-top: 5px; overflow: hidden; } .ms-share .bar i { display: block; height: 100%; border-radius: 6px; background: var(--c); }
.ms-bars { display: flex; align-items: flex-end; gap: 4px; height: 140px; margin-top: 12px; } .ms-bars > span { flex: 1; display: flex; flex-direction: column-reverse; height: 100%; justify-content: flex-start; }
.ms-bars > span i { display: block; background: var(--c); } .ms-bars > span i:last-child { border-radius: 4px 4px 0 0; }
.ms-bx { display: flex; justify-content: space-between; font-size: 11px; color: #5B6B7A; margin-top: 4px; }
.ms-leg { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12.5px; margin-top: 10px; } .ms-leg i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--c); margin-inline-end: 5px; vertical-align: -1px; }
.ms-u { font-size: 12px; font-weight: 700; opacity: .75; margin-inline-start: 1px; } .ms-kpi b, .ms-tot b { white-space: nowrap; }
.hh-kpi b small.ms-u, .ms-tot b small.ms-u { display: inline; color: inherit; font-size: 12px; }
/* 22/10/2026 : 📍 position de la maison (inc/es_position.php) */
.pos-c { margin-bottom: 12px; } .pos-h { margin: 0 0 8px; font-size: 17px; }
.pos-ok { margin: 0; font-weight: 700; color: #2F7D32; } .pos-wait { margin: 0; font-weight: 700; color: #B45309; } .pos-no { margin: 0 0 8px; font-weight: 700; color: #C62828; }
.pos-sm { font-size: 14px; margin: 6px 0 0; } .pos-f { margin-top: 10px; } .pos-f .btn { width: 100%; justify-content: center; margin-top: 6px; }
.pos-st { margin: 8px 0 0; font-size: 14px; } .pos-alt, .pos-more { margin-top: 10px; } .pos-alt summary, .pos-more summary { cursor: pointer; font-size: 14px; font-weight: 600; color: #1D4E89; }
.pos-hint { border-inline-start: 4px solid #F2A516; margin-bottom: 12px; }
.es .pos-f.form { border: 0; padding: 0; box-shadow: none; background: none; max-width: none; }
/* 22/10/2026 : 📱 après « Se déconnecter » — bandeau sur l accueil de l app + lien retour depuis la connexion */
.ah-bye { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; padding: 10px 14px; border-radius: 14px; background: #E8F3EA; color: #1E5B2A; font-weight: 700; font-size: 14px; }
.ah-bye a { flex: none; background: #0F2740; color: #fff; padding: 8px 12px; border-radius: 10px; text-decoration: none; font-size: 13.5px; }
.ah-backhome { display: block; text-align: center; margin-top: 14px; }
/* 23/10/2026 : 📷 photos des demandes SAV — appareil photo ou galerie, aperçu */
.ph-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ph-b { position: relative; overflow: hidden; justify-content: center; text-align: center; font-size: 14px; padding: 12px 8px; }
.ph-b input { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.ph-b.dis { opacity: .45; pointer-events: none; }
.ph-list { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.ph-it { position: relative; width: 84px; height: 84px; border-radius: 12px; overflow: hidden; border: 1px solid #D8E0E7; }
.ph-it img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-it button { position: absolute; top: 4px; inset-inline-end: 4px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(15,39,64,.85); color: #fff; font-weight: 800; cursor: pointer; }
/* 23/10/2026 : 🔔 invitation à activer les notifications (inc/notif_invite.php) */
.ni-bg { position: fixed; inset: 0; z-index: 9000; background: rgba(15,39,64,.55); display: flex; align-items: flex-end; justify-content: center; padding: 16px; }
.ni-bg[hidden] { display: none; }
.ni-card { width: 100%; max-width: 420px; background: #fff; border-radius: 22px; padding: 20px 18px calc(18px + env(safe-area-inset-bottom)); text-align: center; box-shadow: 0 -8px 30px rgba(0,0,0,.2); }
.ni-ic { font-size: 40px; line-height: 1; } .ni-card h3 { margin: 8px 0 6px; font-size: 19px; color: #10202F; } .ni-card p { margin: 0 0 12px; color: #4A5A69; font-size: 14.5px; line-height: 1.45; }
.ni-card .btn { width: 100%; justify-content: center; margin-top: 8px; } .ni-msg { background: #FFF4E5; color: #8A4B00 !important; border-radius: 12px; padding: 9px 12px; }
/* 23/10/2026 : 🛡 Garanties pas encore activées par ATD SOLAR — ligne grisée, non cliquable */
.es3-li-off { opacity: .5; filter: grayscale(1); cursor: not-allowed; }
/* 23/10/2026 : interrupteurs des notifications enregistrés tout de suite — petit message */
.pf-toast { position: fixed; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 8000; background: #1E5B2A; color: #fff; font-weight: 700; font-size: 14px; padding: 10px 18px; border-radius: 999px; box-shadow: 0 6px 18px rgba(0,0,0,.2); }
.pf-toast.bad { background: #B42318; } .pf-toast[hidden] { display: none; }

/* ═══ 23/10/2026 (Cheikh, maquette A) 🖥 Espace client sur ORDINATEUR : menu bleu nuit à gauche, bandeau du soleil en tableau de bord ═══ */
.es2-side-logo, .es2-side-bot { display: none; }
@media (min-width: 1024px) {
  body.es-pc .hd-cl, body.es-pc .ft-cl, body.es-pc .wa-float { display: none !important; }
  body.es-pc .es { padding-top: 0; }
  body.es-pc .es > .wrap { max-width: none; margin: 0; padding: 22px 30px 40px; margin-inline-start: 248px; }
  body.es-pc .es2-bar { display: flex !important; flex-direction: column; gap: 4px; position: fixed; top: 0; bottom: 0; inset-inline-start: 0; inset-inline-end: auto; width: 248px; z-index: 80;
    padding: 20px 14px; border: 0; background: linear-gradient(180deg, #0F2740, #14324F); backdrop-filter: none; }
  body.es-pc .es2-bar > a { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 11px 14px; border-radius: 12px; color: #C9D6E3; font-size: 15px; font-weight: 600; }
  body.es-pc .es2-bar > a i { height: auto; color: inherit; }
  body.es-pc .es2-bar > a[aria-current] { background: #F2A516; color: #0F2740; }
  body.es-pc .es2-bar > a[aria-current]::after { display: none; }
  body.es-pc .es2-bar > a:hover:not([aria-current]) { background: rgba(255,255,255,.08); color: #fff; }
  body.es-pc .es2-bd { position: static; margin-inline-start: auto; border: 0; }
  body.es-pc .es2-side-logo { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; padding: 4px 10px 20px !important; margin-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,.1); border-radius: 0 !important; background: none !important; }
  body.es-pc .es2-side-logo img { width: 130px; height: auto; background: #fff; border-radius: 12px; padding: 6px 10px; }
  body.es-pc .es2-side-logo span { color: #F2A516; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
  body.es-pc .es2-side-bot { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
  body.es-pc .es2-side-wa { background: #25D366; color: #06290F; border-radius: 12px; padding: 11px; text-align: center; font-weight: 800; text-decoration: none; }
  body.es-pc .es2-side-lang { display: flex; gap: 6px; } body.es-pc .es2-side-lang a { flex: 1; text-align: center; padding: 7px; border-radius: 9px; background: rgba(255,255,255,.1); color: #DCE6F0; text-decoration: none; font-size: 13px; font-weight: 700; }
  body.es-pc .es2-side-lang a[aria-current] { background: #fff; color: #0F2740; }
  body.es-pc .es2-side-out { color: #9FB3C8; text-align: center; font-size: 13px; text-decoration: none; padding: 6px; } body.es-pc .es2-side-out:hover { color: #fff; }
  /* bandeaux bleu nuit : arrondis, dans la page (plus de pleine largeur comme sur téléphone) */
  body.es-pc .es .es3-appbar, body.es-pc .es .es3-hero { margin: 0 0 18px !important; border-radius: 22px !important; padding: 20px 24px !important; }
  /* accueil : courbe du soleil à gauche, chiffres + météo à droite (tableau de bord) */
  body.es-pc header.es3-appbar:has(.hh-arc), body.es-pc header.es3-appbar:has(.ms-big) { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); column-gap: 26px; align-items: start; }
  body.es-pc header.es3-appbar:has(.hh-arc) > *, body.es-pc header.es3-appbar:has(.ms-big) > * { grid-column: 1; }
  body.es-pc header.es3-appbar .es3-ab-row { grid-column: 1 / -1 !important; }
  body.es-pc header.es3-appbar .hh-kpi, body.es-pc header.es3-appbar .hh-wx, body.es-pc header.es3-appbar .ms-kpi, body.es-pc header.es3-appbar .ms-tip { grid-column: 2 !important; }
  body.es-pc header.es3-appbar .hh-kpi { grid-row: 2 / span 3; grid-template-columns: 1fr 1fr; align-self: start; margin-top: 4px; }
  body.es-pc header.es3-appbar .hh-kpi a:first-child { grid-column: 1 / -1; }
  body.es-pc header.es3-appbar .hh-kpi b { font-size: 22px; }
  body.es-pc header.es3-appbar .hh-wx { grid-row: 5; }
  body.es-pc header.es3-appbar .ms-kpi { grid-row: 2 / span 2; grid-template-columns: 1fr 1fr 1fr; }
  body.es-pc header.es3-appbar .ms-tip { grid-row: 4; }
  body.es-pc .hh-arc svg { max-height: 230px; }
  body.es-pc .es3-cols { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 18px; }
  body.es-pc .ms-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; } body.es-pc .ms-list .ms-h { grid-column: 1 / -1; } body.es-pc .ms-card { margin: 0; }
  body.es-pc .es3-cols:has(.ms-list) { grid-template-columns: minmax(0, 1fr); }
  /* fenêtres (invitation, Telegram…) et messages : au-dessus du menu */
  body.es-pc .pf-toast { bottom: 28px; }
}
@media (min-width: 1024px) {
  body.es-pc .es-tabs, body.es-pc .es-back-top { display: none !important; }
  body.es-pc .es2-bar a { text-decoration: none !important; }
  body.es-pc .es2-bar > a:not(.es2-side-logo) { display: flex !important; flex-direction: row !important; align-items: center !important; }
  body.es-pc .es2-bar > a:not(.es2-side-logo) i { width: 24px; flex: none; }
}
@media (min-width: 1024px) {
  body.es-pc header.es3-appbar .hh-kpi { grid-row: 2 / span 2 !important; }
  body.es-pc header.es3-appbar .hh-wx { grid-row: 4 / span 2 !important; align-self: start; }
  body.es-pc header.es3-appbar .hh-arc { grid-row: 3 / span 2; }
  body.es-pc .es3-cols:not(:has(.es3-col + .es3-col > *)) { grid-template-columns: minmax(0, 1fr); }
  body.es-pc .es3-cols:not(:has(.es3-col + .es3-col > *)) .es3-heroc { max-width: 900px; }
}
@media (max-width: 1023.98px) { .es2-bar .es2-side-logo, .es2-bar .es2-side-bot { display: none !important; } }
@media (max-width: 1023.98px) { body.es-pc .es2-bar { grid-template-columns: repeat(5, 1fr) !important; } body.es-pc .es2-bar a { font-size: 11px; white-space: nowrap; } }

/* 23/10/2026 : boutons WhatsApp / Appeler / Se déconnecter pleins (règle : jamais de bouton blanc à contour) */
.es3-btn.wa { background: #25D366; color: #06371A; min-height: 52px; } .es3-btn.wa:hover { background: #1FBE5B; }
.es3-btn.tall { min-height: 52px; }
.es3-quick { display: none !important; }
@media (min-width: 1024px) { body.es-pc .es3-quick { display: flex !important; flex-direction: column; gap: 6px; } body.es-pc .es3-quick .es3-rowcard { padding: 10px 4px; border-top: 1px solid var(--s-bd); text-decoration: none; color: inherit; } body.es-pc .es3-quick .es3-rowcard:first-of-type { border-top: 0; } }
/* 23/10/2026 : pastilles « Mes sites » (multi-sites) — ne doivent jamais élargir la page sur téléphone (débordement de 29 px) */
.ms-chips { max-width: 100%; min-width: 0; box-sizing: border-box; }
.es-rplink { max-width: 100%; white-space: normal; text-align: center; height: auto; min-height: 48px; padding-top: 10px; padding-bottom: 10px; box-sizing: border-box; }

/* ☀️ 24/10/2026 : scène « Course du soleil » (site/inc/es2_sunscene.php) */
.sn { border-radius: 18px; overflow: hidden; margin-top: 8px; }
.sn-svg { display: block; width: 100%; height: auto; }
.sn-s1 { stop-color: #7FB6EA; } .sn-s2 { stop-color: #FFE7B8; } .sn-ground { fill: #E9D3A8; } .sn-mc { fill: #7FB6EA; }
.sn .sn-moon, .sn .sn-stars { display: none; }
.sn[data-night] .sn-s1 { stop-color: #0B1430; } .sn[data-night] .sn-s2 { stop-color: #24335C; } .sn[data-night] .sn-ground { fill: #8C7B5E; } .sn[data-night] .sn-mc { fill: #0B1430; }
.sn[data-night] .sn-moon, .sn[data-night] .sn-stars { display: inline; } .sn[data-night] .sn-sun { display: none; }
.sn-t { font: 600 12px Onest, system-ui, sans-serif; fill: #fff; opacity: .92; }
.sn-f { fill: none; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 2 14; animation: snRun 1.1s linear infinite; }
.sn-f.rev { animation-direction: reverse; }
.sn-f.off { stroke: #94A3B8 !important; opacity: .4; animation: none; stroke-dasharray: 5 7; }
.sn-pv { stroke: #F2A516; } .sn-bt { stroke: #22C55E; } .sn-ld { stroke: #3B82F6; } .sn-gr { stroke: #8B5CF6; stroke-width: 4; } .sn-ge { stroke: #F97316; }
@keyframes snRun { to { stroke-dashoffset: -16; } }
@media (prefers-reduced-motion: reduce) { .sn-f { animation: none; stroke-dasharray: none; } }
.sn-msg { font-weight: 700; font-size: 16px; line-height: 1.35; margin: 12px 0 0; color: var(--ink, #0F2740); }
.sn-big { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.sn-big div { border-radius: 14px; padding: 10px 12px; background: #F4F7FA; border-inline-start: 4px solid var(--c); min-width: 0; }
.sn-big small { font-size: 12px; color: #4A5A69; display: block; } .sn-big b { display: block; font-size: 20px; font-weight: 800; color: #0F2740; }
.sn, .sn svg, .sn text { direction: ltr !important; unicode-bidi: isolate; }

/* 🧊 24/10/2026 : « Ma centrale en ce moment » en 3D (site/inc/es2_scene3d.php + assets/scene3d/scene3d.js) */
.s3d { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.s3d-stage { position: relative; width: 100%; aspect-ratio: 4 / 3.7; max-width: 100%; border-radius: 18px; overflow: hidden; background: #0d1a2e; }
.s3d-gl { display: block; width: 100% !important; height: 100% !important; touch-action: none; }
.s3d:not(.s3d-on) .s3d-stage, .s3d:not(.s3d-on) .s3d-tl, .s3d:not(.s3d-on) .s3d-msg, .s3d:not(.s3d-on) .s3d-tot { display: none; }
.s3d-clock { position: absolute; top: 10px; left: 12px; right: 12px; display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 600; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.65); pointer-events: none; font-variant-numeric: tabular-nums; z-index: 3; }
.s3d-clock b { font-size: 16px; font-weight: 800; }
.s3d-wx { position: absolute; top: 32px; left: 0; right: 0; text-align: center; font-size: 12px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.65); pointer-events: none; z-index: 3; }
.s3d-tags { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.s3d-tag { position: absolute; left: 0; top: 0; transform: translate(-50%, -100%); background: rgba(8,16,30,.86); border: 1.5px solid var(--c); border-radius: 12px; padding: 4px 8px 5px; color: #fff; white-space: nowrap; box-shadow: 0 6px 16px -6px rgba(0,0,0,.7); font-variant-numeric: tabular-nums; visibility: hidden; }
.s3d-tag::after { content: ''; position: absolute; left: 50%; bottom: -6px; width: 10px; height: 10px; background: rgba(8,16,30,.86); border-right: 1.5px solid var(--c); border-bottom: 1.5px solid var(--c); transform: translateX(-50%) rotate(45deg); }
.s3d-tag.below::after { bottom: auto; top: -6px; transform: translateX(-50%) rotate(225deg); }
.s3d-tag b { display: block; font-size: 15px; line-height: 1.1; font-weight: 800; }
.s3d-tag small { display: block; font-size: 10.5px; color: #cfd9e4; }
.s3d-tag.dim { opacity: .62; } .s3d-tag[hidden] { display: none !important; }
.s3d-tl { background: #13233A; border: 1px solid #2A4263; border-radius: 14px; padding: 8px 10px 6px; display: flex; flex-direction: column; gap: 4px; color: #EAF0F7; }
.s3d-tl-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; color: #9FB1C6; white-space: nowrap; }
.s3d-tl-top b { color: #fff; font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.s3d-live { font: 700 12px inherit; font-family: inherit; border: 0; border-radius: 999px; padding: 6px 11px; background: #e5484d; color: #fff; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.s3d-live.past { background: #1A2F4C; color: #EAF0F7; border: 1px solid #2A4263; }
.s3d-live i { width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.s3d-live:not(.past) i { animation: s3dPulse 1.4s infinite; } @keyframes s3dPulse { 50% { opacity: .3; } }
.s3d-track { position: relative; height: 40px; } .s3d-spark { position: absolute; inset: 0; width: 100%; height: 100%; }
.s3d-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; touch-action: none; }
.s3d-axis { display: flex; justify-content: space-between; font-size: 10px; color: #9FB1C6; font-variant-numeric: tabular-nums; }
.s3d-msg { font-weight: 700; font-size: 16px; line-height: 1.35; margin: 0; color: var(--ink, #0F2740); }
.s3d-msg small { display: block; font-weight: 500; font-size: 12px; color: #4A5A69; margin-top: 2px; }
.s3d-tot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.s3d-tot div { background: #F4F7FA; border-radius: 12px; padding: 8px 10px; min-width: 0; } .s3d-tot small { display: block; color: #4A5A69; font-size: 11.5px; } .s3d-tot b { font-size: 17px; font-weight: 800; color: #0F2740; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .s3d-live:not(.past) i { animation: none; } }
@media (min-width: 700px) { .s3d-stage { aspect-ratio: 16 / 9; } }
.s3d-tag.moved::after { display: none; }