:root{
  color-scheme: light;
  --plane:        #f9f9f7;
  --surface:      #fcfcfb;
  --surface-2:    #f3f2ee;
  --ink:          #0b0b0b;
  --ink-2:        #52514e;
  --ink-muted:    #898781;
  --grid:         #e1e0d9;
  --baseline:     #c3c2b7;
  --border:       rgba(11,11,11,0.10);
   
  --accent:       #0f6f8c;
  --accent-text:  #0f6f8c;
  --accent-ink:   #ffffff;
   
  --accent-mark:  #ffffff;
  --alert:        #eb6834;
  --pos:          #2a78d6;
  --neg:          #e34948;
  --pos-fill:     rgba(42,120,214,0.14);
  --neg-fill:     rgba(227,73,72,0.14);
  --good-text:    #006300;
   
  --trend-bas:       #006300;
  --trend-bas-fill:  rgba(0,99,0,0.14);
  --trend-haut:      #a3350a;
  --trend-haut-fill: rgba(235,104,52,0.14);
  --summer:       #eda100;
  --winter:       #2a78d6;
  --summer-ink:   #1a1400;
  --winter-ink:   #ffffff;
  --e85-color:    #6da7ec;
  --fuel-e10:     #66bb6a;
  --fuel-e5:      #2e7d32;
  --fuel-e10-ink: #0f2a10;
  --fuel-e5-ink:  #ffffff;
  --e85-fill:     rgba(109,167,236,0.14);
  --fuel-e10-fill:rgba(102,187,106,0.14);
  --fuel-e5-fill: rgba(46,125,50,0.14);
  --fuel-e85:     #29bde3;
  --fuel-e85-ink: #04344a;
  --fuel-strike:  #ff2f24;
  --fuel-e85-fill:rgba(41,189,227,0.14);
  --fuel-off:     #d8d6cf;
   
  --fuel-elec:    #4fd18a;
  --fuel-b7:      #e2e52b;
  --fuel-b7-ink:  #1c1c10;
  --fuel-b7-fill: rgba(226,229,43,0.16);
}
@media (prefers-color-scheme: dark){
  :root:where(:not([data-theme="light"])){
    color-scheme: dark;
    --plane:        #0d0d0d;
    --surface:      #1a1a19;
    --surface-2:    #232322;
    --ink:          #ffffff;
    --ink-2:        #c3c2b7;
    --ink-muted:    #898781;
    --grid:         #2c2c2a;
    --baseline:     #383835;
    --border:       rgba(255,255,255,0.10);
    --accent:       #14788f;
    --accent-text:  #14788f;
    --accent-ink:   #ffffff;
    --alert:        #d95926;
    --pos:          #3987e5;
    --neg:          #e66767;
    --pos-fill:     rgba(57,135,229,0.16);
    --neg-fill:     rgba(230,103,103,0.16);
    --good-text:    #0ca30c;
     
    --trend-bas:       #16b616;
    --trend-bas-fill:  rgba(12,163,12,0.14);
    --trend-haut:      #f5854f;
    --trend-haut-fill: rgba(217,89,38,0.16);
    --summer:       #c98500;
    --winter:       #3987e5;
    --summer-ink:   #1a1400;
    --winter-ink:   #ffffff;
    --e85-color:    #86b6ef;
    --fuel-e10:     #7cc47f;
    --fuel-e5:      #3e9142;
    --fuel-e10-ink: #0f2a10;
    --fuel-e5-ink:  #ffffff;
    --e85-fill:     rgba(134,182,239,0.16);
    --fuel-e10-fill:rgba(124,196,127,0.16);
    --fuel-e5-fill: rgba(62,145,66,0.16);
    --fuel-e85:     #3ac6ea;
    --fuel-e85-ink: #04344a;
    --fuel-strike:  #ff5c52;
    --fuel-e85-fill:rgba(58,198,234,0.16);
    --fuel-off:     #3a3a37;
    --fuel-elec:    #4fd18a;
    --fuel-b7:      #e6e93e;
    --fuel-b7-ink:  #1c1c10;
    --fuel-b7-fill: rgba(230,233,62,0.18);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --plane:        #0d0d0d;
  --surface:      #1a1a19;
  --surface-2:    #232322;
  --ink:          #ffffff;
  --ink-2:        #c3c2b7;
  --ink-muted:    #898781;
  --grid:         #2c2c2a;
  --baseline:     #383835;
  --border:       rgba(255,255,255,0.10);
  --accent:       #14788f;
  --accent-text:  #14788f;
  --accent-ink:   #ffffff;
  --alert:        #d95926;
  --pos:          #3987e5;
  --neg:          #e66767;
  --pos-fill:     rgba(57,135,229,0.16);
  --neg-fill:     rgba(230,103,103,0.16);
  --good-text:    #0ca30c;
  --trend-bas:       #16b616;
  --trend-bas-fill:  rgba(12,163,12,0.14);
  --trend-haut:      #f5854f;
  --trend-haut-fill: rgba(217,89,38,0.16);
  --summer:       #c98500;
  --winter:       #3987e5;
  --summer-ink:   #1a1400;
  --winter-ink:   #ffffff;
  --e85-color:    #86b6ef;
  --fuel-e10:     #7cc47f;
  --fuel-e5:      #3e9142;
  --fuel-e10-ink: #0f2a10;
  --fuel-e5-ink:  #ffffff;
  --e85-fill:     rgba(134,182,239,0.16);
  --fuel-e10-fill:rgba(124,196,127,0.16);
  --fuel-e5-fill: rgba(62,145,66,0.16);
  --fuel-e85:     #3ac6ea;
  --fuel-e85-ink: #04344a;
  --fuel-strike:  #ff5c52;
  --fuel-e85-fill:rgba(58,198,234,0.16);
  --fuel-off:     #3a3a37;
  --fuel-elec:    #4fd18a;
  --fuel-b7:      #e6e93e;
  --fuel-b7-ink:  #1c1c10;
  --fuel-b7-fill: rgba(230,233,62,0.18);
}
:root[data-theme="light"]{
  color-scheme: light;
  --plane:        #f9f9f7;
  --surface:      #fcfcfb;
  --surface-2:    #f3f2ee;
  --ink:          #0b0b0b;
  --ink-2:        #52514e;
  --ink-muted:    #898781;
  --grid:         #e1e0d9;
  --baseline:     #c3c2b7;
  --border:       rgba(11,11,11,0.10);
   
  --accent:       #0f6f8c;
  --accent-text:  #0f6f8c;
  --accent-ink:   #ffffff;
  --alert:        #eb6834;
  --pos:          #2a78d6;
  --neg:          #e34948;
  --pos-fill:     rgba(42,120,214,0.14);
  --neg-fill:     rgba(227,73,72,0.14);
  --good-text:    #006300;
   
  --trend-bas:       #006300;
  --trend-bas-fill:  rgba(0,99,0,0.14);
  --trend-haut:      #a3350a;
  --trend-haut-fill: rgba(235,104,52,0.14);
  --summer:       #eda100;
  --winter:       #2a78d6;
  --summer-ink:   #1a1400;
  --winter-ink:   #ffffff;
  --e85-color:    #6da7ec;
  --fuel-e10:     #66bb6a;
  --fuel-e5:      #2e7d32;
  --fuel-e10-ink: #0f2a10;
  --fuel-e5-ink:  #ffffff;
  --e85-fill:     rgba(109,167,236,0.14);
  --fuel-e10-fill:rgba(102,187,106,0.14);
  --fuel-e5-fill: rgba(46,125,50,0.14);
  --fuel-e85:     #29bde3;
  --fuel-e85-ink: #04344a;
  --fuel-strike:  #ff2f24;
  --fuel-e85-fill:rgba(41,189,227,0.14);
  --fuel-off:     #d8d6cf;
  --fuel-elec:    #4fd18a;
  --fuel-b7:      #e2e52b;
  --fuel-b7-ink:  #1c1c10;
  --fuel-b7-fill: rgba(226,229,43,0.16);
}

 
body[data-app="b7"]{
  --accent:       #e0a800;
  --accent-text:  #876300;
  --accent-ink:   #1c1c10;
  --accent-mark:  #1c1c10;
}
 
@media (prefers-color-scheme: dark){
  :root:where(:not([data-theme="light"])) body[data-app="b7"]{
    --accent:       #eab72b;
    --accent-text:  #eab72b;
    --accent-ink:   #1c1c10;
    --accent-mark:  #ffffff;
  }
}
:root[data-theme="dark"] body[data-app="b7"]{
  --accent:       #eab72b;
  --accent-text:  #eab72b;
  --accent-ink:   #1c1c10;
  --accent-mark:  #ffffff;
}
:root[data-theme="light"] body[data-app="b7"]{
  --accent:       #e0a800;
  --accent-text:  #876300;
  --accent-ink:   #1c1c10;
  --accent-mark:  #1c1c10;
}

*{ box-sizing:border-box; }

 
[hidden]{ display:none !important; }

body{
  margin:0;
  background:var(--plane);
  color:var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
 
.wrap{
  max-width:1180px;
  margin:0 auto;
  padding:28px 20px 0;
}
header.top{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:22px;
}
.eyebrow{
  text-transform:uppercase;
  letter-spacing:0.08em;
  font-size:12px;
  font-weight:600;
  color:var(--accent-text);
}
h1{
  margin:0;
  font-size:26px;
  font-weight:700;
  letter-spacing:-0.01em;
  text-wrap:balance;
}
.sub{
  margin:0;
  color:var(--ink-2);
  font-size:14.5px;
  max-width:62ch;
  line-height:1.5;
}
.top-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
}
.top-text{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}
.logo-mark{
  flex:none;
  width:40px;
  height:40px;
}
@media (max-width: 480px){
  .logo-mark{ width:32px; height:32px; }
}

 
.logo-mark.pwa-check-trigger{ cursor:pointer; }
.logo-mark.pwa-check-trigger:hover{ opacity:0.8; }
.logo-mark.pwa-check-trigger:focus-visible{ outline:2px solid var(--accent-text); outline-offset:2px; border-radius:12px; }

 
.pwa-update-banner{
  position:fixed;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:100%;
  max-width:480px;
  z-index:50;
  background:var(--accent);
  color:var(--accent-ink);
  font-size:13px;
  padding:10px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  box-shadow:0 -2px 10px rgba(0,0,0,0.2);
}
.pwa-update-actions{ display:flex; gap:6px; flex:none; }
.pwa-update-banner button{
  border:none;
  border-radius:8px;
  font-size:13px;
  cursor:pointer;
  padding:7px 12px;
  background:var(--accent-ink);
  color:var(--accent);
}
#pwaUpdateDismiss{ background:transparent; color:var(--accent-ink); opacity:0.8; padding:7px 8px; }

 
.head-right{
  display:flex;
  align-items:center;
  gap:12px;
  flex:none;
}
 
.seg.seg-nav{
  flex:none;
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:1fr;
}
.seg-nav > *{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:6px 11px;
  background:var(--surface-2);
  color:var(--ink-2);
  font-size:13px;
  font-weight:600;
  text-decoration:none;
  white-space:nowrap;
}
.seg-nav > .active{
  background:var(--accent);
  color:var(--accent-mark);
}
.seg-nav a:hover{
  background:var(--grid);
  color:var(--ink);
}
.seg-nav a:focus-visible{
  outline:2px solid var(--accent-text);
  outline-offset:-2px;
}
 
.nav-dot{
  width:11px;
  height:11px;
  flex:none;
  box-shadow:0 0 0 1px rgba(0,0,0,0.18);
}
.nav-dot-e85{ border-radius:50%; background:var(--fuel-e85); }
.nav-dot-b7{ border-radius:3px; background:var(--fuel-b7); }
 
.nav-dot-elec{
  width:8px; height:8px;
  border-radius:2px;
  background:var(--fuel-elec);
  transform:rotate(45deg);
  display:inline-block;
}
@media (max-width: 480px){
  .head-right{ gap:9px; }
  .seg-nav > *{ padding:5px 9px; font-size:12.5px; }
}

 
.layout{
  display:grid;
  grid-template-columns: 420px 1fr;
  gap:5px;
  align-items:start;
}
.col-left, .col-right{
  display:flex;
  flex-direction:column;
  gap:5px;
  min-width:0;
}
@media (max-width: 1080px){
  .layout{ grid-template-columns: 1fr; }
}

 
.result-grid{
  display:flex;
  flex-direction:column;
  gap:18px;
  margin-top:18px;
}

.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  padding:20px;
}
.card h2{
  margin:0 0 14px;
  font-size:14px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--ink-2);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
}
.reset-btn{
  text-transform:none;
  letter-spacing:normal;
  font-size:12px;
  font-weight:600;
  color:var(--ink-2);
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:6px;
  padding:4px 9px;
  cursor:pointer;
  font-family:inherit;
}
.reset-btn:hover{ color:var(--ink); border-color:var(--ink-muted); }