:root{
  --bg:#0b0d17;--bar:#0f1220;--surface:#141729;--surface2:#1a1e35;--line:#22263f;--field-line:#2e3456;--sep:#1e2240;
  --text:#eef0fa;--text2:#a9aecb;--text3:#8a90b0;--field:#0f1220;
  --accent:#4d8dff;--on-accent:#0b0d17;--accent-t:rgba(77,141,255,.16);
  --green:#2ed3a0;--green-t:rgba(46,211,160,.12);--yellow:#ffc23d;--yellow-t:rgba(255,194,61,.12);--violet:#a56bff;--violet-t:rgba(165,107,255,.14);
  --danger:#ff7a7a;--coral:#ff6b4a;--t-blue:#2f6bff;--t-white:#e9e7f5;--t-red:#e8344e;
  --f-title:"Sora","Segoe UI",system-ui,sans-serif;--f-text:"Manrope","Segoe UI",system-ui,sans-serif;
  color-scheme:dark;box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
:root[data-mode="light"]{
  --bg:#f3f5fa;--bar:#ffffff;--surface:#ffffff;--surface2:#eef1f8;--line:#dfe3ee;--field-line:#c5cbdc;--sep:#e6e9f2;
  --text:#121527;--text2:#4a5070;--text3:#5f6585;--field:#f7f8fc;
  --accent:#2563eb;--on-accent:#ffffff;--accent-t:rgba(37,99,235,.10);
  --green:#0f8a66;--green-t:rgba(15,138,102,.10);--yellow:#9a6a00;--yellow-t:rgba(232,166,0,.13);--violet:#6d3fd6;--violet-t:rgba(109,63,214,.10);
  --danger:#c62828;--t-white:#e3e1ef;color-scheme:light}
*,*::before,*::after{box-sizing:inherit}
select,input,textarea{box-sizing:border-box}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--f-text);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
button{font-family:inherit}
.hidden{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:1240px;margin:0 auto;padding-left:28px;padding-right:28px}
svg.ico,.logo svg,#themeIco svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.ttl{display:inline-flex;align-items:center;gap:10px;min-width:0}
.ic{width:30px;height:30px;border-radius:9px;display:inline-grid;place-items:center;color:#0b0d17;flex:none}
.ic svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.h1+.i,.ttl .h1{line-height:1.2}
.c-cyan{background:#3fd0f2}.c-blue{background:#4d8dff}.c-green{background:#2ed3a0}.c-yellow{background:#ffc23d}.c-violet{background:#b48cff}.c-coral{background:#ff6b4a}.c-pink{background:#ff5ca8}
.gps a{text-decoration:none}
.gps a[aria-disabled=true]{opacity:.45;pointer-events:none}
.energy{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line);padding-top:14px}
.check.big{font-size:14px;font-weight:700;color:var(--text);gap:10px}
.ic.sm{width:24px;height:24px;border-radius:7px}.ic.sm svg{width:14px;height:14px}
.src{background:var(--surface);border-color:var(--line)}
.src .k{color:var(--text2)}
.srcbar{display:flex;height:10px;border-radius:999px;overflow:hidden;background:var(--sep);margin:6px 0 4px}
.srcbar i{display:block;height:100%}
.srcbar .s1{background:#ffc23d}.srcbar .s2{background:#2ed3a0}.srcbar .s3{background:var(--accent)}
.src b{color:var(--text)}
.dot{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:4px;vertical-align:baseline}
.vsearch{position:relative}
.vresults{display:flex;flex-direction:column;gap:2px;margin-top:6px;padding:6px;border-radius:12px;background:var(--field);border:1px solid var(--field-line);max-height:320px;overflow:auto}
.vres{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:1px;border:0;background:transparent;color:var(--text);padding:8px 10px;border-radius:8px;cursor:pointer}
.vres:hover,.vres:focus-visible{background:var(--surface2);outline:none}
.vres b{font-size:14px}.vres span{font-size:12.5px;color:var(--text2)}
.cmp{display:flex;flex-direction:column;gap:6px}
.cmprow{padding:10px 12px;border-radius:12px;background:var(--field);border:1px solid var(--line)}
.cmprow.on{border-color:var(--accent)}
.cmprow small{color:var(--text3)}
.fuelrow{padding:8px 10px;border-radius:10px;background:var(--field);border:1px solid var(--line);font-size:14px}
.stops{margin:4px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:4px}
.pill.accent{margin-right:4px}
/* En-tête */
.top{background:var(--bar);border-bottom:1px solid var(--line)}
.topbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;padding-top:14px;padding-bottom:12px}
.brandmark{display:flex;align-items:center;gap:12px}
.logo{width:36px;height:36px;border-radius:10px;background:var(--accent);color:var(--on-accent);display:grid;place-items:center}
.logo svg{width:20px;height:20px}
.sitename{font-family:var(--f-title);font-weight:600;font-size:18px}
.tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.inl{display:inline-flex;align-items:center;gap:6px}
.lang{display:inline-flex;gap:2px;padding:3px;border-radius:999px;border:1px solid var(--line);background:var(--surface)}
.lang button{border:0;background:transparent;color:var(--text2);font-weight:700;font-size:12px;padding:6px 10px;border-radius:999px;cursor:pointer;min-height:32px}
.lang button[aria-pressed=true]{background:var(--text);color:var(--bg)}
.top .tabs{display:flex;gap:4px;overflow-x:auto;padding-bottom:10px;scrollbar-width:thin}
.top .tabs button{border:0;background:transparent;color:var(--text2);font-weight:500;font-size:14px;padding:9px 14px;border-radius:10px;white-space:nowrap;cursor:pointer;min-height:40px}
.tabs button:hover{color:var(--text)}
.tabs button[aria-current=page]{background:var(--surface2);color:var(--text);font-weight:700;box-shadow:inset 0 -2px 0 var(--accent)}

/* Éléments */
main.wrap{padding-top:26px;padding-bottom:48px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:22px;display:flex;flex-direction:column;gap:14px;min-width:0}
.h1{margin:0;font-family:var(--f-title);font-weight:700;font-size:30px;line-height:38px;letter-spacing:-.01em}
.h2{margin:0;font-family:var(--f-title);font-weight:600;font-size:19px;line-height:26px}
.h3{margin:0;font-family:var(--f-title);font-weight:600;font-size:16px;line-height:22px}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.row.between{justify-content:space-between}
.stack{display:flex;flex-direction:column;gap:12px}
.push{margin-left:auto}
.muted{color:var(--text2);margin:0}
.muted.sm,.sm{font-size:13px}
.hint{color:var(--text3);font-size:13px;line-height:1.45;margin:0}
.msg{color:var(--text2);font-size:13px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;align-items:end}
.pickers{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.6fr);gap:12px}
.lbl{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--text2);min-width:0}
.lblrow{display:inline-flex;align-items:center;gap:6px}
.fld{width:100%;min-height:44px;padding:10px 12px;border-radius:10px;border:1px solid var(--field-line);background:var(--field);color:var(--text);font:inherit;font-size:15px;font-weight:600}
.fld.sm{width:auto;min-height:36px;padding:6px 10px;font-size:13px}
select.fld.sm{padding-right:30px}
.fld:focus,.unit:focus-within,textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
select.fld{appearance:none;-webkit-appearance:none;padding-right:34px;background-image:linear-gradient(45deg,transparent 50%,var(--text3) 50%),linear-gradient(135deg,var(--text3) 50%,transparent 50%);background-position:calc(100% - 17px) 55%,calc(100% - 12px) 55%;background-size:5px 5px;background-repeat:no-repeat;text-overflow:ellipsis}
.unit{display:flex;align-items:stretch;border:1px solid var(--field-line);border-radius:10px;background:var(--field);overflow:hidden;min-height:44px}
.unit input{flex:1;min-width:0;border:0;background:transparent;color:var(--text);font:inherit;font-size:15px;font-weight:600;padding:10px 12px;outline:none}
.unit span{display:flex;align-items:center;padding:0 12px;color:var(--text3);font-size:13px;font-weight:600;white-space:nowrap}
textarea.fld{min-height:0;font-weight:500;font-size:14px;resize:vertical}
.code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;line-height:1.5;width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--field);color:var(--accent);resize:vertical}
.check{display:flex;align-items:center;gap:8px;font-weight:500;font-size:13px;color:var(--text2);cursor:pointer}
.check input{width:18px;height:18px;accent-color:var(--accent)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:700;padding:10px 16px;border-radius:14px;border:1px solid var(--field-line);background:transparent;color:var(--text);cursor:pointer;min-height:44px;white-space:nowrap}
.btn:hover{border-color:var(--accent)}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.sm{min-height:36px;padding:6px 12px;font-size:13px;border-radius:10px}
.btn.icon{width:44px;padding:0}
.btn.full{width:100%}
.btn:disabled{opacity:.5;cursor:default}
.link{border:0;background:transparent;color:var(--accent);font-weight:700;font-size:13px;cursor:pointer;padding:4px}
.btn:focus-visible,.link:focus-visible,.tabs button:focus-visible,.lang button:focus-visible,.seg button:focus-visible,.chips button:focus-visible,.i:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.i{width:22px;height:22px;border-radius:50%;border:1px solid var(--field-line);background:var(--surface2);color:var(--text2);font:700 12px/1 var(--f-title);display:inline-grid;place-items:center;cursor:pointer;padding:0;flex:none}
.i:hover,.i[aria-expanded=true]{border-color:var(--accent);color:var(--text)}
.tip{margin:0;padding:10px 12px;border-radius:10px;background:var(--surface2);border:1px solid var(--field-line);color:var(--text2);font-size:13px;line-height:1.5;font-weight:500}
.top .tip{margin-bottom:10px}
.pill{font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--surface2);color:var(--text)}
.pill.accent{background:var(--accent-t);color:var(--accent)}
.pill:empty{display:none}
.subpanel{padding:16px;border-radius:14px;background:var(--field);border:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.seg{display:inline-flex;gap:2px;padding:4px;border-radius:14px;background:var(--field);border:1px solid var(--line)}
.seg button{border:0;background:transparent;color:var(--text2);font-weight:600;font-size:14px;padding:8px 14px;border-radius:10px;cursor:pointer;min-height:38px;white-space:nowrap}
.seg button[aria-pressed=true]{background:var(--accent);color:var(--on-accent);font-weight:700}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips button{font-size:13px;font-weight:700;padding:7px 12px;border-radius:999px;border:1px solid var(--field-line);background:transparent;color:var(--text);cursor:pointer;min-height:36px}
.chips button[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.garage{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.garage .veh{display:inline-flex;align-items:center;border-radius:999px;border:1px solid var(--field-line);overflow:hidden}
.garage .veh button{border:0;background:transparent;color:var(--text2);font-weight:700;font-size:13px;padding:6px 12px;cursor:pointer;min-height:34px}
.garage .veh.on{border-color:var(--accent);background:var(--accent-t)}
.garage .veh.on button{color:var(--text)}
.garage .veh .x{padding:6px 10px 6px 0;color:var(--text3)}
.garage .add{border:1px dashed var(--field-line);background:transparent;color:var(--accent);font-weight:700;font-size:13px;padding:6px 12px;border-radius:999px;cursor:pointer;min-height:34px}
.garage form{display:flex;gap:6px;flex-wrap:wrap}
.garage input[type=text]{font:inherit;font-size:14px;padding:6px 12px;border-radius:999px;border:1px solid var(--field-line);background:var(--field);color:var(--text);width:190px;min-height:34px}
.garage form button{border:0;border-radius:999px;background:var(--accent);color:var(--on-accent);font-weight:700;padding:6px 14px;cursor:pointer}
.plages{display:grid;grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr);gap:8px 10px;align-items:center;color:var(--text2);font-weight:500;font-size:14px}
.tempo-colors{display:flex;gap:8px;flex-wrap:wrap}
.tempo-colors button{border:2px solid transparent;border-radius:10px;padding:7px 14px;font-weight:700;cursor:pointer;color:#fff;min-height:38px}
.tempo-colors button[data-c=blue]{background:var(--t-blue)}
.tempo-colors button[data-c=white]{background:var(--t-white);color:#121527}
.tempo-colors button[data-c=red]{background:var(--t-red)}
.tempo-colors button[aria-pressed=true]{border-color:var(--text);box-shadow:0 0 0 2px var(--surface) inset}
.tempo-grid{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);gap:8px 10px;align-items:center}
.tempo-grid .h{color:var(--text3);font-size:12px;font-weight:700}
.tempo-grid .c{font-weight:600;display:flex;align-items:center;gap:8px;font-size:14px}
.sw{width:12px;height:12px;border-radius:3px;display:inline-block}.sw.blue{background:var(--t-blue)}.sw.white{background:var(--t-white);border:1px solid var(--field-line)}.sw.red{background:var(--t-red)}

/* Colonnes */
.cols{display:flex;flex-wrap:wrap;gap:22px;align-items:flex-start}
.colmain{flex:999 1 560px;min-width:0;display:flex;flex-direction:column;gap:18px}
.colside{flex:1 1 340px;min-width:0;display:flex;flex-direction:column;gap:14px}
.narrow{max-width:760px}
.panel .card{gap:16px}

/* Batterie */
.battery{position:relative;height:96px;margin-right:12px}
.shell{position:absolute;inset:0;border:3px solid var(--field-line);border-radius:18px;padding:6px;overflow:hidden;background:var(--field)}
.nub{position:absolute;right:-12px;top:50%;transform:translateY(-50%);width:9px;height:32px;background:var(--field-line);border-radius:0 6px 6px 0}
.cells{position:relative;height:100%;border-radius:11px;overflow:hidden;background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),var(--sep) calc(10% - 1px) 10%)}
.fill-now,.fill-add{position:absolute;top:0;bottom:0;transition:left .15s,width .15s}
.fill-now{left:0;background:var(--field-line)}
.fill-add{background:var(--accent)}
.ranges{position:absolute;inset:9px}
.ranges input{position:absolute;inset:0;width:100%;height:100%;margin:0;background:none;-webkit-appearance:none;appearance:none;pointer-events:none}
.ranges input::-webkit-slider-runnable-track{background:none;height:100%}
.ranges input::-moz-range-track{background:none}
.ranges input::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:20px;height:76px;border-radius:8px;background:var(--text);border:3px solid var(--bg);cursor:ew-resize}
.ranges input::-moz-range-thumb{pointer-events:auto;width:14px;height:70px;border-radius:8px;background:var(--text);border:3px solid var(--bg);cursor:ew-resize}
.ranges input:focus-visible::-webkit-slider-thumb{outline:3px solid var(--accent);outline-offset:2px}
.ranges input:focus-visible::-moz-range-thumb{outline:3px solid var(--accent);outline-offset:2px}

/* Résultats */
.res-main{background:var(--accent);color:var(--on-accent);border-radius:20px;padding:22px;display:flex;flex-direction:column;gap:2px}
.res-main .k{font-size:14px;font-weight:700}
.res-main output{font-family:var(--f-title);font-weight:700;font-size:clamp(2.3rem,5vw,3rem);line-height:1.1;letter-spacing:-.02em;white-space:nowrap}
.res-main .s{font-size:13px;font-weight:600}
.res-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.res{border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:2px;min-width:0;border:1px solid transparent}
.res.wide{grid-column:1/-1}
.res .k{font-size:13px;font-weight:700}
.res output{font-family:var(--f-title);font-weight:700;font-size:1.4rem;line-height:1.25;color:var(--text)}
.res .s{font-size:12.5px;color:var(--text2);line-height:1.35}
.t-green{background:var(--green-t)}.t-green .k{color:var(--green)}
.t-yellow{background:var(--yellow-t)}.t-yellow .k{color:var(--yellow)}
.t-violet{background:var(--violet-t)}.t-violet .k{color:var(--violet)}
.t-greenb{border-color:color-mix(in srgb,var(--green) 35%,var(--line))}
.curve #chart{display:block;width:100%;height:180px}
.keys{display:flex;flex-wrap:wrap;gap:4px 16px;color:var(--text2);font-size:12px;font-weight:600}
.keys i{display:inline-block;width:14px;height:6px;border-radius:3px;margin-right:6px;vertical-align:middle}
.wideonly{display:none}
@media (min-width:1180px){.wideonly{display:flex}}
.sideout{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--text2)}
.sideout b{color:var(--text)}
.sideout .big{font-family:var(--f-title);font-weight:700;font-size:24px;color:var(--green);line-height:1.2}
.sideout .big.neg{color:var(--danger)}
.out{background:var(--field);border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:6px;line-height:1.5}
.out p{margin:0}
.out b{color:var(--text)}
.out .btn{align-self:flex-start;margin-top:6px}
.out .kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:4px 0}
.out .kpi{border-radius:12px;padding:12px 14px}
.out .kpi span{display:block;font-size:12.5px;font-weight:700}
.out .kpi strong{font-family:var(--f-title);font-size:22px}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.stat{border-radius:16px;padding:14px 16px;background:var(--surface);border:1px solid var(--line)}
.stat:first-child{background:var(--accent-t);border-color:transparent}
.stat p{margin:0;color:var(--text2);font-size:13px;font-weight:700}
.stat b{display:block;font-family:var(--f-title);font-size:22px}
.stat small{color:var(--text3);font-size:12px}
.jlist{list-style:none;margin:0;padding:0;display:grid;gap:6px;max-height:420px;overflow:auto}
.jlist li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;background:var(--surface);border:1px solid var(--line);font-size:14px}
.jlist li span{color:var(--text2)}
.jlist button{border:0;background:transparent;color:var(--text3);font-size:18px;cursor:pointer;padding:2px 8px;border-radius:8px}
.jlist button:hover{color:var(--danger)}
footer{margin-top:36px;color:var(--text3);font-size:12.5px;line-height:1.5}
footer p{margin:0 0 6px;max-width:80ch}
.credit{color:var(--text2);font-weight:700}
.copy{color:var(--text3);font-size:11.5px}

@media (max-width:900px){
  .pickers{grid-template-columns:minmax(0,1fr)}
  .stats{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:600px){
  .wrap{padding-left:14px;padding-right:14px}
  .card{padding:16px;border-radius:16px}
  .h1{font-size:24px;line-height:30px}
  .sitename{font-size:16px}
  .tools{gap:6px}
  #haBtn span{display:none}
  .btn{white-space:normal;text-align:center}
  .plages{grid-template-columns:auto minmax(0,1fr)}
  .battery{height:84px}
  .ranges input::-webkit-slider-thumb{height:64px}
  .ranges input::-moz-range-thumb{height:58px}
  .stats{grid-template-columns:minmax(0,1fr)}
  .tempo-grid{grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);gap:6px}
}
@media (max-width:900px){
  main.wrap{padding-bottom:90px}
}
@media (prefers-reduced-motion:reduce){.fill-now,.fill-add{transition:none}}


/* ===================== Nouvelle mise en page (v5) ===================== */
.app{display:flex;min-height:100vh;align-items:stretch}
.side{width:252px;flex:none;position:sticky;top:0;height:100vh;overflow-y:auto;background:var(--bar);border-right:1px solid var(--line);padding:20px 14px calc(16px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:18px}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.side .brandmark{padding:0 4px}
.profile{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.profile .link{align-self:flex-start;padding:4px 0 0}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text3)}
.profSub{font-size:13px;color:var(--text2)}
.side-nav{display:flex;flex-direction:column;gap:2px;overflow:visible;padding:0}
.side-nav button{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:8px 10px;border-radius:12px;border:0;background:transparent;color:var(--text2);font-weight:500;font-size:15px;min-height:44px;cursor:pointer;box-shadow:none}
.side-nav button:hover{color:var(--text);background:color-mix(in srgb,var(--surface2) 60%,transparent)}
.side-nav button[aria-current=page]{background:var(--surface2);color:var(--text);font-weight:700;box-shadow:none}
.side-nav .ic{width:28px;height:28px;border-radius:8px}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:12px}
.side-foot .lang{align-self:flex-start}
.mtop{display:none}
.btabs,.moreBtn{display:none}
main.wrap{width:100%;box-sizing:border-box;max-width:1180px;padding-top:24px}

/* Onglets de recharge en couleur */
.scen{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.scb{--c:var(--accent);display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border-radius:999px;border:1px solid var(--field-line);background:transparent;color:var(--text);font-weight:700;font-size:14px;cursor:pointer;min-height:42px;white-space:nowrap}
.scb .scic{width:28px;height:28px;border-radius:999px;display:grid;place-items:center;background:var(--c);color:#0b0d17}
.scb .scic svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.scb.on{background:var(--c);border-color:var(--c);color:#0b0d17}
.scb.on .scic{background:rgba(11,13,23,.16)}
.scb.add{padding:6px 14px;border-style:dashed;color:var(--accent)}
.scb:focus-visible,.scdel:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.scdel{border:0;background:transparent;color:var(--text3);font-size:20px;cursor:pointer;padding:0 6px;margin-left:-4px}
.scform{display:inline-flex;gap:6px;align-items:center}
.scform input{width:210px}

/* Calcul */
.calcgrid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:18px;align-items:start}
.results{display:flex;flex-direction:column;gap:12px;min-width:0}
.results .row .btn.sm{flex:1}
.calcgrid .gauge{transition:border-color .2s}
#timeRow{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.tipbar{background:var(--surface);border-color:color-mix(in srgb,var(--green) 55%,var(--line));padding:12px 16px}
.tipbar.warn{border-color:color-mix(in srgb,var(--yellow) 55%,var(--line))}
.tipbar .grow,.grow{flex:1;min-width:0}
.night #night{display:block;width:100%;height:70px}
.night .keys i{background:var(--accent)}

/* Réglages en cartes */
#setAC,#setDC{border-top:1px solid var(--line);padding-top:14px}
#setAC h3,#setDC h3{margin:0}

/* Accueil guidé */
.onb{position:fixed;inset:0;z-index:50;background:rgba(5,6,12,.72);display:grid;place-items:center;padding:16px;backdrop-filter:blur(4px)}
.onb-in{width:min(460px,100%);max-height:calc(100vh - 32px);overflow:auto;background:var(--bg);border:1px solid var(--line);border-radius:26px;padding:22px 22px 18px;display:flex;flex-direction:column;gap:14px;box-sizing:border-box}
.obbars{display:flex;gap:6px}.obbars span{flex:1;height:5px;border-radius:3px;background:var(--surface2)}.obbars span.on{background:var(--accent)}
.onb .h1{font-size:26px;line-height:1.2}
.onb .muted{margin:0}
.oblist{display:flex;flex-direction:column;gap:4px}
.oblist .vres{border:1px solid var(--line);background:var(--surface);border-radius:12px}
.oblist .vres.on,.obsel{border:1px solid var(--accent);background:var(--accent-t);border-radius:12px}
.obsel{display:flex;flex-direction:column;padding:10px 12px}
.obsel .dim,.dim{color:var(--text3)}
.obcards{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.obcard{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:14px;border-radius:16px;border:1px solid var(--line);background:var(--surface);color:var(--text);cursor:pointer;text-align:left}
.obcard.on{border-color:var(--accent);background:var(--accent-t)}
.obradios{display:flex;flex-direction:column;gap:6px}
.obradio{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-radius:12px;border:1px solid var(--field-line);background:var(--field);color:var(--text);font-weight:600;cursor:pointer;text-align:left}
.obradio i{width:14px;height:14px;border-radius:50%;border:2px solid var(--text3)}
.obradio.on{border-color:var(--accent)}.obradio.on i{border-color:var(--accent);background:var(--accent)}
.obsolar{padding:12px;border-radius:14px;border:1px solid var(--line);background:var(--surface)}
.obdone{text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
.obdone .ic{width:56px;height:56px;border-radius:18px}.obdone .ic svg{width:28px;height:28px}
.obsum{gap:10px;padding:14px}.obsum>div{display:flex;align-items:center;gap:10px}
.obnav{display:flex;gap:10px;margin-top:6px}.obnav .btn{flex:1}.obnav .pri{flex:2}
.obcard:focus-visible,.obradio:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
body.noscroll{overflow:hidden}

/* Menu « Plus » */
.sheet{position:fixed;inset:0;z-index:40}
.sheet-bg{position:absolute;inset:0;background:rgba(5,6,12,.55)}
.sheet-in{position:absolute;left:0;right:0;bottom:0;background:var(--surface);border-radius:24px 24px 0 0;border-top:1px solid var(--field-line);padding:10px 18px calc(22px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:6px}
.grab{align-self:center;width:40px;height:5px;border-radius:3px;background:var(--field-line);margin-bottom:8px}
.sheet-item{display:flex;align-items:center;gap:12px;padding:12px 6px;border:0;border-bottom:1px solid var(--sep);background:transparent;color:var(--text);font-weight:600;font-size:16px;text-align:left;cursor:pointer}
.sheet-in .lang{align-self:flex-start;margin-top:10px}

/* Tablettes et téléphones */
@media (max-width:1000px){
  .side{display:none}
  .mtop{display:flex;position:sticky;top:0;z-index:20;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;background:var(--bar);border-bottom:1px solid var(--line)}
  .mtop .logo{width:32px;height:32px}
  .profPill{display:inline-flex;align-items:center;gap:6px;max-width:calc(100vw - 80px);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;border:1px solid var(--field-line);background:var(--surface);color:var(--text);border-radius:999px;padding:6px 12px;font-weight:700;font-size:13px;cursor:pointer}
  .profPill .sep,.profPill .profShort{color:var(--text2);font-weight:600}
  .btabs{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--bar);border-top:1px solid var(--line);padding:6px 0 calc(6px + env(safe-area-inset-bottom,0px));gap:0;overflow:visible}
  .btabs button,.moreBtn{display:flex;flex-direction:column;align-items:center;gap:3px;border:0;background:transparent;color:var(--text3);font-size:11px;font-weight:700;padding:4px 2px;min-height:50px;cursor:pointer;box-shadow:none!important;border-radius:0}
  .btabs button svg,.moreBtn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .btabs button[aria-current=page]{color:var(--accent);background:transparent}
  .moreBtn{position:fixed;z-index:31;bottom:calc(6px + env(safe-area-inset-bottom,0px));right:0;width:20%}
  .moreBtn[aria-expanded=true]{color:var(--accent)}
  main.wrap{padding-bottom:110px}
  .calcgrid{grid-template-columns:minmax(0,1fr)}
  .calcgrid .results{order:-1}
  .scen{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;margin:0 -14px;padding-left:14px;padding-right:14px;scrollbar-width:none}
  .scen::-webkit-scrollbar{display:none}
  footer{padding-bottom:20px}
}
@media (max-width:600px){
  .onb{padding:0;place-items:stretch}
  .onb-in{width:100%;max-height:none;min-height:100%;border-radius:0;border:0;padding:calc(18px + env(safe-area-inset-top,0px)) 18px calc(18px + env(safe-area-inset-bottom,0px))}
  .obnav{margin-top:auto}
}

/* Langue et devise côte à côte, devise surlignée comme la langue choisie */
.prefs{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
select.curSel{background-color:var(--text);color:var(--bg);border-color:var(--text);border-radius:999px;font-weight:800;font-size:12px;min-height:38px;padding:6px 28px 6px 12px;background-image:linear-gradient(45deg,transparent 50%,var(--bg) 50%),linear-gradient(135deg,var(--bg) 50%,transparent 50%);background-position:calc(100% - 15px) 55%,calc(100% - 10px) 55%;background-size:5px 5px;background-repeat:no-repeat;cursor:pointer}
select.curSel option{background:var(--surface);color:var(--text)}

/* ===================== Garage ===================== */
.gargrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.gcard{gap:12px}
.gcard.def{border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}
.gimg{position:relative;border-radius:14px;overflow:hidden;background:radial-gradient(ellipse at 50% 72%,color-mix(in srgb,var(--accent) 14%,var(--surface2)) 0%,var(--surface) 70%);min-height:150px;display:grid;place-items:center;padding:8px}
.gimg img{width:100%;height:190px;object-fit:cover;border-radius:10px;display:block}
.gimg svg{max-height:170px}
.gbadge{position:absolute;top:10px;left:10px}
.ghead{display:flex;flex-direction:column;gap:2px}
.ghead b{font-size:17px}
.gsub{font-size:13px}
.gcols{display:flex;gap:6px;flex-wrap:wrap}
.gcol{width:24px;height:24px;border-radius:50%;border:2px solid var(--field-line);cursor:pointer;padding:0}
.gcol.on{border-color:var(--text);box-shadow:0 0 0 2px var(--surface) inset}
.gcol:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.gstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:8px}
.gstats>div{background:var(--field);border:1px solid var(--line);border-radius:12px;padding:8px 10px;display:flex;flex-direction:column;gap:1px;font-size:12.5px}
.gstats b{font-family:var(--f-title);font-size:17px}
.gstats small{color:var(--text3)}
.socbar{display:block;height:6px;border-radius:3px;background:var(--surface2);overflow:hidden;margin-top:4px}
.socbar i{display:block;height:100%;background:linear-gradient(90deg,#ff6b4a,#ffc23d 40%,#2ed3a0)}
.gact .btn{flex:1 1 auto}
.btn.danger{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 40%,var(--line))}
.phprev{width:100%;max-height:240px;object-fit:cover;border-radius:12px}

/* ===================== Bornes ===================== */
.bsearch{gap:12px}
.bfilters{align-items:flex-end;gap:10px 16px}
.bfilters .lbl{min-width:120px}
.bwrap{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:16px;align-items:start}
.bmapcard{padding:6px;overflow:hidden}
.bmap{height:520px;border-radius:14px;background:var(--field)}
.blist{display:flex;flex-direction:column;gap:10px;max-height:532px;overflow:auto;padding-right:4px}
.bitem{gap:8px;padding:14px 16px;cursor:pointer}
.bitem:hover{border-color:var(--field-line)}
.bname{font-size:15px}
.av{font-weight:700}.av.ok{color:var(--green)}.av.no{color:var(--yellow)}
.stopch{font-size:13px}
.stops li{margin-bottom:6px}
#tripMapCard{margin-top:12px}
#tripMap{height:380px}
.leaflet-container{font-family:var(--f-text);background:var(--field)}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:var(--surface);color:var(--text)}
.leaflet-control-attribution{background:color-mix(in srgb,var(--surface) 80%,transparent)!important;color:var(--text3)!important}
.leaflet-control-attribution a{color:var(--text2)!important}
@media (max-width:1000px){
  .bwrap{grid-template-columns:minmax(0,1fr)}
  .bmap{height:360px}
  .blist{max-height:none;overflow:visible}
}

a.btn{text-decoration:none}

/* Indice du bon moment, favoris */
.goodtime{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;border-radius:14px;border:1px solid var(--line);background:var(--surface);font-size:14px}
.goodtime i{width:12px;height:12px;border-radius:50%;flex:none;background:var(--green);box-shadow:0 0 0 4px color-mix(in srgb,var(--green) 25%,transparent)}
.goodtime.mid i{background:var(--yellow);box-shadow:0 0 0 4px color-mix(in srgb,var(--yellow) 25%,transparent)}
.goodtime.bad i{background:var(--coral);box-shadow:0 0 0 4px color-mix(in srgb,var(--coral) 25%,transparent)}
.goodtime span{color:var(--text2)}
.star{border:0;background:transparent;color:var(--text3);font-size:22px;line-height:1;cursor:pointer;padding:2px 4px;min-width:32px;min-height:32px}
.star.on{color:#ffc23d}
.star:focus-visible{outline:2px solid var(--accent);border-radius:8px}
.favgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.favc{gap:8px;padding:14px 16px;border-color:color-mix(in srgb,#ffc23d 40%,var(--line))}
#prePrices small{display:block;margin-top:4px;font-size:11.5px}

/* Compteur Tempo */
.tempocard{gap:12px}
.tgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tcell{border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:2px;border:1px solid var(--line);background:var(--field)}
.tcell.red{background:color-mix(in srgb,#e5484d 16%,var(--field));border-color:color-mix(in srgb,#e5484d 45%,var(--line))}
.tcell.white{background:color-mix(in srgb,#eef0fa 8%,var(--field));border-color:color-mix(in srgb,#eef0fa 30%,var(--line))}
.tcell.blue{background:color-mix(in srgb,#3b82f6 16%,var(--field));border-color:color-mix(in srgb,#3b82f6 45%,var(--line))}
.tnum{font-family:var(--f-title);font-weight:700;font-size:30px;line-height:1.1}
.tlbl{font-size:12.5px;font-weight:700;color:var(--text2)}
.tcell small{color:var(--text3);font-size:11.5px}
.tbar{display:block;height:5px;border-radius:3px;background:color-mix(in srgb,var(--text) 10%,transparent);overflow:hidden;margin-top:6px}
.tbar i{display:block;height:100%}
.tcell.red .tbar i{background:#e5484d}.tcell.white .tbar i{background:#eef0fa}.tcell.blue .tbar i{background:#3b82f6}
.tday{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--text2)}
.tday i{width:10px;height:10px;border-radius:50%;display:inline-block;border:1px solid var(--field-line)}
.tday i.red{background:#e5484d}.tday i.white{background:#eef0fa}.tday i.blue{background:#3b82f6}
@media (max-width:600px){.tnum{font-size:24px}.tcell{padding:10px}}

/* Rejouer la charge */
.replayBtn svg{width:14px;height:14px;fill:currentColor}
.gauge{position:relative}
.replayLbl{position:absolute;right:22px;top:64px;z-index:2;background:var(--surface2);border:1px solid var(--field-line);border-radius:999px;padding:5px 12px;font-size:13px;display:inline-flex;align-items:center;gap:8px}
.replayLbl .sun,.replayLbl .moon{width:12px;height:12px;border-radius:50%;display:inline-block}
.replayLbl .sun{background:#ffc23d;box-shadow:0 0 8px #ffc23d}
.replayLbl .moon{background:#cfd6ff;box-shadow:inset -3px -1px 0 #7b84b8}
.replaying .fill-add{transition:none}

/* Mode simple et sections repliables */
body.simple .adv{display:none!important}
.foldbtn{all:unset;display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;cursor:pointer}
.foldbtn svg{width:18px;height:18px;fill:none;stroke:var(--text3);stroke-width:2;transition:transform .2s;flex:none}
.foldbtn:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:6px}
.card.folded .foldbtn svg{transform:rotate(-90deg)}
.card[data-fold].folded > :not(:first-child){display:none!important}
.side-foot .exp{font-size:13px;color:var(--text2)}

/* Palette de commandes */
.cmdBtn{display:flex;align-items:center;gap:8px;width:100%;padding:9px 12px;border-radius:12px;border:1px solid var(--field-line);background:var(--field);color:var(--text3);font:inherit;font-size:13.5px;cursor:pointer;text-align:left}
.cmdBtn svg,.cmdrow svg,.iconbtn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;flex:none}
.cmdBtn span{flex:1}
.cmdBtn kbd{font:600 11px var(--f-text);border:1px solid var(--field-line);border-radius:6px;padding:1px 6px;color:var(--text3)}
.iconbtn{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:12px;border:1px solid var(--field-line);background:var(--surface);color:var(--text);cursor:pointer}
.iconbtn svg{width:18px;height:18px}
.cmd{position:fixed;inset:0;z-index:60;background:rgba(5,6,12,.6);display:flex;justify-content:center;align-items:flex-start;padding:12vh 16px 16px}
.cmd-in{width:min(620px,100%);background:var(--surface);border:1px solid var(--field-line);border-radius:20px;padding:12px;display:flex;flex-direction:column;gap:8px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.cmdrow{display:flex;align-items:center;gap:10px;padding:6px 10px;color:var(--text3)}
.cmdrow input{flex:1;border:0;background:transparent;color:var(--text);font:600 17px var(--f-text);outline:none;min-height:40px}
.cmdlist{display:flex;flex-direction:column;gap:2px;max-height:50vh;overflow:auto}
.cmdit{display:flex;justify-content:space-between;align-items:center;gap:10px;text-align:left;border:0;background:transparent;color:var(--text);padding:10px 12px;border-radius:10px;cursor:pointer;font:inherit}
.cmdit span{color:var(--text3);font-size:12.5px}
.cmdit.on,.cmdit:hover{background:var(--surface2)}
.qrbox{background:#fff;border-radius:14px;padding:10px;width:min(260px,100%)}
.qrbox svg{display:block;width:100%;height:auto}
@media (max-width:1000px){.mtop .iconbtn{margin-left:auto}}

/* Comparateur de véhicules et coût total */
.vresults2{display:flex;flex-direction:column;gap:2px;margin-top:6px}
.tblwrap{overflow-x:auto;margin-top:10px}
.vtable{border-collapse:collapse;width:100%;min-width:520px;font-size:14px}
.vtable th,.vtable td{padding:9px 10px;border-bottom:1px solid var(--sep);text-align:left;vertical-align:top}
.vtable tbody th{color:var(--text2);font-weight:600;font-size:13px;white-space:nowrap}
.vtable td small{color:var(--text3)}
.vth{display:flex;flex-direction:column;gap:2px;font-weight:400}
.vth b{font-size:14px}.vth .dim{font-size:12px}
.vimg{max-width:180px}
.tcobars{display:flex;flex-direction:column;gap:10px;margin:8px 0}
.tcobars>div{display:grid;grid-template-columns:90px 1fr auto;gap:10px;align-items:center}
.tbarw{height:14px;border-radius:7px;background:var(--surface2);overflow:hidden}
.tbarw i{display:block;height:100%;border-radius:7px}
.comm{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.gcred{position:absolute;right:10px;bottom:10px;font-size:11px;font-weight:700;background:rgba(11,13,23,.7);color:#eef0fa;padding:3px 8px;border-radius:999px}
.vimg img{width:100%;height:96px;object-fit:cover;border-radius:10px;display:block}
.cmdBtn span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Onglets internes de Comparer */
.subtabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px;padding:5px;border-radius:16px;background:var(--surface);border:1px solid var(--line)}
.subtabs button{flex:1 1 auto;border:0;background:transparent;color:var(--text2);font-weight:700;font-size:14px;padding:9px 14px;border-radius:12px;cursor:pointer;min-height:40px;white-space:nowrap}
.subtabs button[aria-selected=true]{background:var(--accent);color:var(--on-accent)}
.subtabs button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
[data-panel=fuel] [data-sub]{margin-top:0!important}
@media (max-width:600px){.subtabs{flex-wrap:nowrap;overflow-x:auto}}
/* Lieux enregistrés */
.places{gap:6px;flex-wrap:wrap}
.pchip{display:inline-flex;align-items:center;border-radius:999px;background:var(--surface2);border:1px solid var(--field-line)}
.pchip .pill{background:transparent;border:0;cursor:pointer;padding:6px 4px 6px 12px;color:var(--text);font-weight:700}
.pdel{border:0;background:transparent;color:var(--text3);cursor:pointer;font-size:16px;padding:0 10px 0 4px;min-height:32px}
.addp{border:1px dashed var(--field-line);background:transparent;color:var(--accent);cursor:pointer;padding:6px 12px}
.placerow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px}
.placerow>.dim{min-width:62px}
/* Photo du véhicule */
.gphoto{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%;min-height:150px;border-radius:14px;border:2px dashed var(--field-line);background:var(--field);color:var(--text2);font:700 14px var(--f-text);cursor:pointer}
.gphoto svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.6}
.gphoto:hover,.gphoto:focus-visible{border-color:var(--accent);color:var(--accent);outline:none}
/* Détails de recharge dans Calcul */
#calcDetBody #setAC,#calcDetBody #setDC{border-top:0;padding-top:0}
#calcDetBody #setAC>h3,#calcDetBody #setDC>h3{display:none}
#calcDetBody .energy{border-top:1px solid var(--line);padding-top:14px}

/* Bulles d'information flottantes */
.i{border-color:color-mix(in srgb,var(--accent) 45%,var(--field-line));background:color-mix(in srgb,var(--accent) 16%,var(--surface2));color:var(--accent);cursor:pointer;transition:transform .15s,background .15s}
.i:hover,.i.on{background:var(--accent);color:var(--on-accent);border-color:var(--accent);transform:scale(1.08)}
.pop{position:absolute;z-index:70;width:min(320px,calc(100vw - 16px));padding:14px 34px 14px 16px;border-radius:16px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 22%,var(--surface)) 0%,var(--surface) 70%);border:1px solid color-mix(in srgb,var(--accent) 55%,var(--line));box-shadow:0 18px 48px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.03) inset;color:var(--text);font-size:13.5px;line-height:1.5;animation:popin .14s ease-out}
.pop::before{content:"";position:absolute;left:calc(var(--ax,40px) - 8px);top:-8px;width:14px;height:14px;transform:rotate(45deg);background:color-mix(in srgb,var(--accent) 20%,var(--surface));border-left:1px solid color-mix(in srgb,var(--accent) 55%,var(--line));border-top:1px solid color-mix(in srgb,var(--accent) 55%,var(--line))}
.pop.up::before{top:auto;bottom:-8px;border:0;border-right:1px solid color-mix(in srgb,var(--accent) 55%,var(--line));border-bottom:1px solid color-mix(in srgb,var(--accent) 55%,var(--line));background:var(--surface)}
.pop-in{position:relative}
.pop-x{position:absolute;top:6px;right:8px;border:0;background:transparent;color:var(--text3);font-size:18px;cursor:pointer;width:26px;height:26px;border-radius:8px}
.pop-x:hover{color:var(--text);background:var(--surface2)}
@keyframes popin{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.pop{animation:none}}
.scenhd{gap:8px;align-items:center;margin-bottom:-6px}
.goodtime .i{margin-left:2px}

/* Menu latéral : section active bien visible */
.side-nav button[data-tab=calc]{--c:#4d8dff}.side-nav button[data-tab=garage]{--c:#3fd0f2}.side-nav button[data-tab=bornes]{--c:#ffc23d}.side-nav button[data-tab=trip]{--c:#ff6b4a}.side-nav button[data-tab=fuel]{--c:#2ed3a0}.side-nav button[data-tab=journal]{--c:#b48cff}.side-nav button[data-tab=community]{--c:#ff5ca8}.side-nav button[data-tab=settings]{--c:#ffc23d}
.side-nav button[aria-current=page]{background:var(--c);color:#0b0d17;font-weight:800;box-shadow:0 6px 18px color-mix(in srgb,var(--c) 35%,transparent)}
.side-nav button[aria-current=page] .ic{background:rgba(11,13,23,.16)!important;color:#0b0d17}
.btabs button[aria-current=page]{color:#0b0d17!important;background:var(--accent)!important;border-radius:14px!important;margin:0 4px}

.persotag{margin-left:6px;font:800 10px var(--f-text);text-transform:uppercase;letter-spacing:.08em;padding:3px 7px;border-radius:999px;background:#ffc23d;color:#0b0d17}

/* Carte OpenStreetMap assombrie en thème sombre */
.darkmap .leaflet-tile-pane{filter:invert(1) hue-rotate(185deg) brightness(.92) contrast(.88) saturate(.55)}
.leaflet-container{background:var(--field)}

/* Espace XCombo */
.c-indigo{background:#8b8cff}
.side-nav button[data-tab=xcombo]{--c:#8b8cff}
.xcsearch{gap:12px}
.xcgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.xcard{gap:10px}
.xct{font-size:16px}
.xccat{font-size:11.5px}
.xccat.securite{background:#e5484d33;color:#ff8a8f}.xccat.confort{background:#b48cff33;color:#cdb4ff}.xccat.climat{background:#3fd0f233;color:#7fe2f7}.xccat.eclairage{background:#ffc23d33;color:#ffd77a}.xccat.multimedia{background:#ff5ca833;color:#ff9cc8}.xccat.recharge{background:#2ed3a033;color:#6ee7c3}.xccat.pratique{background:#8b8cff33;color:#b9baff}
.xcrule{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.xcrule>div{background:var(--field);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.xcrule ul{margin:6px 0 0;padding-left:18px;font-size:13.5px;display:flex;flex-direction:column;gap:3px}
.xckw{font:800 11px var(--f-text);letter-spacing:.1em;color:#8b8cff}
.xckw.then{color:var(--green)}
.xcfoot{border-top:1px solid var(--sep);padding-top:10px;gap:8px;flex-wrap:wrap}
.xccode b{font-family:ui-monospace,monospace;font-size:15px;letter-spacing:.06em}
.xbgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;margin-top:10px}
.xb{display:flex;flex-direction:column;gap:4px;padding:12px;border-radius:12px;background:var(--field);border:1px solid var(--line)}
.xbr{color:var(--yellow)}
.pill.sm{font-size:11px;padding:3px 8px}
@media (max-width:600px){.xcrule{grid-template-columns:1fr}}

.xccat.alertes{background:#ff6b4a33;color:#ffa58f}.xccat.conduite{background:#4d8dff33;color:#8db6ff}.xccat.connectivite{background:#3fd0f233;color:#7fe2f7}.xccat.ambiance{background:#b48cff33;color:#cdb4ff}
.xcfoot{display:flex;flex-direction:column;gap:8px}
.xccode{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.xccode b{font-family:ui-monospace,monospace;font-size:17px;letter-spacing:.08em;color:var(--green)}
.installBtn{align-self:flex-start}

.xcgood ul{margin:6px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--text2)}
.xcgood{border-color:color-mix(in srgb,#8b8cff 45%,var(--line))}

/* XCombo : icônes et couleurs par catégorie */
.xc-climat{--xc:#3fd0f2}.xc-confort{--xc:#b48cff}.xc-recharge{--xc:#2ed3a0}.xc-eclairage{--xc:#ffc23d}.xc-alertes{--xc:#ff6b4a}.xc-securite{--xc:#ff5c7a}.xc-conduite{--xc:#4d8dff}.xc-connectivite{--xc:#38c4e8}.xc-ambiance{--xc:#ff5ca8}.xc-multimedia{--xc:#e879f9}.xc-pratique{--xc:#8b8cff}
.xc-avance{--xc:#8b8cff}.xc-declenchement{--xc:#a3e635}.xc-temps{--xc:#fbbf24}.xc-acces{--xc:#94a3b8}.xc-ecran{--xc:#60a5fa}.xc-energie{--xc:#2ed3a0}.xc-camera{--xc:#f472b6}.xc-navigation{--xc:#fb923c}
.xchips{display:flex;gap:8px;flex-wrap:wrap}
.xchip{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;border:1px solid var(--field-line);background:var(--surface);color:var(--text2);font:700 13px var(--f-text);cursor:pointer}
.xchip svg{width:16px;height:16px;fill:none;stroke:var(--xc,var(--accent));stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.xchip b{font-size:11.5px;color:var(--text3);font-weight:700}
.xchip.on{background:var(--xc,var(--accent));color:#0b0d17;border-color:transparent}
.xchip.on svg{stroke:#0b0d17}.xchip.on b{color:#0b0d17}
.xchip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.xcard{border-top:3px solid var(--xc,var(--line))}
.xchead{display:flex;align-items:center;gap:12px}
.xcico{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:color-mix(in srgb,var(--xc,var(--accent)) 18%,transparent)}
.xcico svg{width:22px;height:22px;fill:none;stroke:var(--xc,var(--accent));stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.xcico.sm{width:30px;height:30px;border-radius:9px}.xcico.sm svg{width:17px;height:17px}
.xctitle{display:flex;flex-direction:column;gap:2px;min-width:0}
.xccatl{color:var(--xc)}
.xcvars{display:flex;flex-direction:column;gap:6px}
.xcvar{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;background:var(--field);border:1px solid var(--line)}
.xcvar .xcc{font-family:ui-monospace,monospace;font-size:16px;letter-spacing:.05em;color:var(--green);white-space:nowrap}
.xcvl{min-width:0}
.xbhead{display:flex;align-items:center;gap:10px}
.xb{border-left:3px solid var(--xc,var(--line))}
@media (max-width:600px){.xcvar{grid-template-columns:1fr auto}.xcvar .xcvl{grid-column:1/-1}}
.xcvar{grid-template-columns:1fr auto}
.xcvar .xcvl{grid-column:1/-1}
.xcvar .xcvl:has(span:empty){display:none}

/* XCombo : affichage équilibré (colonnes façon mosaïque, variantes repliées) */
.xcgrid{display:block;columns:330px;column-gap:14px}
.xcgrid>.xcard{break-inside:avoid;margin-bottom:14px;display:flex;width:100%;box-sizing:border-box}
.xcgrid>.hint{column-span:all}
.xcvars .xmore{display:none}
.xcvars.open .xmore{display:grid}
.xcmore{align-self:flex-start;color:var(--xc,var(--accent));border-color:color-mix(in srgb,var(--xc,var(--accent)) 45%,var(--line))}
.xcrule ul{gap:2px}

/* Guide */
.c-lime{background:#a3e635}
.side-nav button[data-tab=guide]{--c:#a3e635}
.gidx{display:flex;flex-wrap:wrap;gap:8px}
.gchip{display:inline-flex;align-items:center;gap:8px;padding:7px 12px 7px 7px;border-radius:999px;border:1px solid var(--field-line);background:var(--surface);color:var(--text);text-decoration:none;font-weight:700;font-size:13.5px}
.gchip b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#a3e635;color:#0b0d17;font-size:12px}
.gchip:hover,.gchip:focus-visible{border-color:#a3e635;outline:none}
.gsec{gap:14px;scroll-margin-top:16px}
/* v77 : Guide, sommaire à droite (ordinateur) ou liste déroulante, bandeau Home Assistant */
.glay{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:20px;align-items:start}
.gside{position:sticky;top:16px;display:flex;flex-direction:column;gap:8px;max-height:calc(100vh - 32px);overflow:auto;padding:14px;border:1px solid var(--line);border-radius:18px;background:var(--surface)}
.gside-t{font-family:var(--f-title);font-size:14px;padding:0 6px}
.gside .gidx{flex-direction:column;flex-wrap:nowrap;gap:2px}
.gside .gchip{border:0;border-radius:10px;background:transparent;padding:6px 8px 6px 6px;font-weight:600;font-size:13.5px;color:var(--text2);line-height:1.3}
.gside .gchip b{flex:none;background:color-mix(in srgb,#a3e635 20%,transparent);color:#a3e635}
.gside .gchip:hover{background:var(--surface2,rgba(127,127,127,.08));color:var(--text)}
.gside .gchip.on{background:color-mix(in srgb,#a3e635 14%,transparent);color:var(--text);font-weight:800}
.gside .gchip.on b{background:#a3e635;color:#0b0d17}
.gsel{display:none;flex-direction:column;gap:6px}
@media (max-width:1199px){.glay{grid-template-columns:minmax(0,1fr)}.gside{display:none}.gsel{display:flex}}
@media (max-width:1000px){.gsec{scroll-margin-top:76px}}
.gha{display:flex;align-items:center;gap:18px;padding:20px 22px;border-radius:20px;text-decoration:none;color:var(--text);border:1.5px solid color-mix(in srgb,#3fd0f2 55%,transparent);background:linear-gradient(120deg,color-mix(in srgb,#3fd0f2 20%,var(--surface)) 0%,color-mix(in srgb,#b48cff 16%,var(--surface)) 100%);box-shadow:0 10px 30px -18px #3fd0f2;transition:transform .15s,box-shadow .15s}
.gha:hover,.gha:focus-visible{transform:translateY(-2px);box-shadow:0 16px 36px -16px #3fd0f2;outline:none}
.gha-ic{flex:none;width:56px;height:56px;border-radius:16px;background:#3fd0f2;color:#0b0d17;display:grid;place-items:center}
.gha-ic svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gha-t{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.gha-k{align-self:flex-start;font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#0b0d17;background:#3fd0f2;border-radius:20px;padding:2px 9px}
.gha-t b{font-family:var(--f-title);font-size:19px;line-height:1.25}
.gha-x{color:var(--text2);font-size:14.5px;line-height:1.45}
.gha-btn{flex:none}
@media (max-width:640px){.gha{flex-wrap:wrap;padding:16px}.gha-ic{width:46px;height:46px}.gha-btn{width:100%;justify-content:center;text-align:center}}
@media (prefers-reduced-motion:reduce){.gha{transition:none}.gha:hover{transform:none}}
.ghd{display:flex;gap:14px;align-items:flex-start}
.gnum{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#a3e635;color:#0b0d17;font:800 18px var(--f-title)}
.ghd .h2{margin:2px 0 4px}
.gcols{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:18px;align-items:start}
.gshot{margin:0;border-radius:14px;overflow:hidden;border:1px solid var(--field-line);background:var(--field)}
.gshot img{display:block;width:100%;height:auto}.gshot picture{display:block}@media (max-width:600px){.gshot{max-width:300px;margin:0 auto}}
.gsteps{margin:0;padding-left:0;list-style:none;counter-reset:g;display:flex;flex-direction:column;gap:10px}
.gsteps li{counter-increment:g;position:relative;padding-left:36px;line-height:1.5;color:var(--text2)}
.gsteps li::before{content:counter(g);position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,#a3e635 22%,transparent);color:#a3e635;font:800 12px var(--f-text)}
.gtext{display:flex;flex-direction:column;gap:14px}
.gtext .btn{align-self:flex-start}
@media (max-width:1000px){.gcols{grid-template-columns:minmax(0,1fr)}}

.gshot{cursor:zoom-in}

/* Alignement : tous les libellés de champ ont la même hauteur, avec ou sans bouton i */
.lbl>span:first-child{min-height:24px;display:flex;align-items:center}
.grid{align-items:start}
.hareq{border:1px solid color-mix(in srgb,#3fd0f2 45%,var(--line));background:color-mix(in srgb,#3fd0f2 7%,var(--surface));border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.hareq ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;color:var(--text2);font-size:14px}
.hareq .code{white-space:pre;flex:1;min-width:0;overflow-x:auto;display:block;padding:10px 12px;border-radius:10px}
[data-fold=ha] .h3{margin:10px 0 -4px}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}

/* Pied de page compact */
footer.foot{padding:18px 0 28px;border-top:1px solid var(--line);margin-top:28px}
.footrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0;font-size:13px;color:var(--text3)}
.footrow .credit{font-weight:700;color:var(--text2)}
.footrow a{color:var(--text2)}
.footrow .sep{opacity:.5}
.linkbtn{border:0;background:transparent;color:var(--accent);font:inherit;font-weight:700;cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:3px}
#pop p{margin:0 0 8px}#pop p:last-child{margin:0}
/* Mots longs (allemand) dans les fiches XCombo */
.xcrule li,.xb b,.xct,.xcvl{overflow-wrap:anywhere;hyphens:auto}
.jchead{gap:8px;align-items:center}
/* Bornes : champ de recherche pleine largeur sur mobile */
@media (max-width:600px){.bsearch .row:first-child{flex-wrap:wrap}.bsearch .row:first-child #bQ{flex:1 1 100%}.bsearch .row:first-child .btn{flex:1 1 0}}
.pop.wide{width:min(480px,calc(100vw - 16px))}

/* Pastille de langue (en-tête mobile) */
.langpill{appearance:none;-webkit-appearance:none;border:1px solid var(--field-line);background:var(--surface);color:var(--text);font:800 12px var(--f-text);letter-spacing:.06em;border-radius:999px;padding:8px 12px;min-height:40px;cursor:pointer;margin-left:auto}
.langpill:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mtop .langpill+.iconbtn{margin-left:8px}
@media (min-width:1001px){.langpill{display:none}}
/* Onglets de Comparer : dégradé indiquant le défilement sur mobile */
@media (max-width:600px){
  .subtabs{position:relative;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 36px),transparent)}
  .subtabs::-webkit-scrollbar{display:none}
  .subtabs.end{-webkit-mask-image:none;mask-image:none}
}
/* Compteur Tempo : couleurs plus franches */
.tcell.red{background:linear-gradient(135deg,color-mix(in srgb,#e5484d 55%,var(--surface)),color-mix(in srgb,#e5484d 32%,var(--surface)));border-color:#e5484d}
.tcell.white{background:linear-gradient(135deg,color-mix(in srgb,#eef0fa 30%,var(--surface)),color-mix(in srgb,#eef0fa 14%,var(--surface)));border-color:color-mix(in srgb,#eef0fa 75%,transparent)}
.tcell.blue{background:linear-gradient(135deg,color-mix(in srgb,#3b82f6 55%,var(--surface)),color-mix(in srgb,#3b82f6 32%,var(--surface)));border-color:#3b82f6}
.tcell .tnum{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.tcell .tlbl{color:#fff}
.tcell small{color:rgba(255,255,255,.8)}
.tcell .tbar{background:rgba(0,0,0,.28)}
:root[data-theme=light] .tcell .tnum,:root[data-theme=light] .tcell .tlbl{color:#141729;text-shadow:none}
:root[data-theme=light] .tcell small{color:#3a3f5c}

/* Menu de gauche plus large, préférences centrées */
.side{width:284px}
.side-foot .prefs{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px}
.side-foot .lang{align-self:center}
/* Compteur Tempo compact */
.tempocard{gap:8px;padding-top:14px;padding-bottom:14px}
.tgrid{gap:8px}
.tcell{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto;column-gap:10px;row-gap:2px;padding:8px 12px;border-radius:12px;align-items:center}
.tcell .tnum{grid-row:1 / span 2;font-size:24px;line-height:1}
.tcell .tlbl{font-size:12px;line-height:1.2}
.tcell small{font-size:11px;line-height:1.2}
.tcell .tbar{grid-column:1 / -1;height:4px;margin-top:4px}
.tempocard>small{font-size:11.5px}
@media (max-width:600px){.tcell{grid-template-columns:1fr;text-align:left}.tcell .tnum{grid-row:auto;font-size:20px}}

/* Carrousel des puissances de borne rapide */
.dccar{display:flex;align-items:stretch;gap:6px}
.dctrack{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;flex:1;padding:2px;scroll-behavior:smooth}
.dctrack::-webkit-scrollbar{display:none}
.dct{position:relative;flex:0 0 auto;scroll-snap-align:start;min-width:104px;display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:10px 12px;border-radius:14px;border:1px solid var(--field-line);background:var(--field);color:var(--text);cursor:pointer;text-align:left;font:inherit}
.dct b{font:800 22px var(--f-title);line-height:1}
.dct .u{font-size:11px;font-weight:700;color:var(--text3)}
.dct small{font-size:11px;color:var(--text2);line-height:1.25;max-width:120px;margin-top:3px}
.dct.on{background:color-mix(in srgb,#b48cff 26%,var(--field));border-color:#b48cff;box-shadow:0 0 0 1px #b48cff inset}
.dct.add{align-items:center;justify-content:center;border-style:dashed;color:var(--accent);min-width:88px}
.dct.add b{font-size:20px}
.dcx{position:absolute;top:4px;right:6px;color:var(--danger);font-weight:800}
.dct:focus-visible,.dcnav:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.dcnav{flex:none;width:34px;border-radius:12px;border:1px solid var(--field-line);background:var(--surface);color:var(--text);font-size:20px;cursor:pointer}
.dcnav:disabled{opacity:.3;cursor:default}
.dcedit{gap:14px;align-items:center;margin-top:-4px}
@media (max-width:600px){.dcnav{display:none}}
@media (max-width:380px){.langpill{padding:6px 8px;min-height:36px;font-size:11px}.mtop .iconbtn{width:36px;height:36px}.mtop{gap:6px}.mtop .profShort,.mtop [class*=prof]{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
.phgal{margin:0;padding:10px 12px;border-radius:12px;font-size:13.5px;line-height:1.45}
.phgal.none{background:color-mix(in srgb,#ffc23d 16%,var(--surface));border:1px solid color-mix(in srgb,#ffc23d 55%,var(--line));color:var(--text)}
.phgal.has{background:var(--field);border:1px solid var(--line);color:var(--text2)}

/* Import du journal */
.onb-in.imp{max-width:860px;width:min(860px,calc(100vw - 24px));max-height:calc(100vh - 40px);overflow:auto}
#impMap{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
#impPrev td,#impPrev th{white-space:nowrap}
/* Vos messages */
.mymsg{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--field);display:flex;flex-direction:column;gap:6px}
.mymsg.new{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.mrep{border-left:3px solid var(--green);padding:6px 10px;background:color-mix(in srgb,var(--green) 10%,transparent);border-radius:0 8px 8px 0}
.mrep p{margin:4px 0 0;white-space:pre-wrap}
.hasnew{position:relative}
.hasnew::after{content:"";position:absolute;top:6px;right:8px;width:9px;height:9px;border-radius:50%;background:#ff5c7a;box-shadow:0 0 0 2px var(--bar,#0b0d17)}
/* Bandeau d'annonce publié depuis le tableau de bord */
.annbar{display:flex;align-items:center;gap:10px;margin:0 0 14px;padding:10px 14px;border-radius:14px;background:color-mix(in srgb,var(--ac,#4d8dff) 16%,var(--surface));border:1px solid var(--ac,#4d8dff);font-size:14px;font-weight:600}
.annbar #annTx{flex:1}
.annbar button{border:0;background:transparent;color:var(--text2);font-size:20px;cursor:pointer;padding:0 4px}

/* Carte « La communauté Watt Budget » */
.commcard{background:radial-gradient(120% 140% at 0% 0%,color-mix(in srgb,#ff5ca8 14%,transparent),transparent 55%),radial-gradient(120% 140% at 100% 100%,color-mix(in srgb,#4d8dff 14%,transparent),transparent 55%),var(--surface);border-color:color-mix(in srgb,#ff5ca8 40%,var(--line))}
.csgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.csn{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:16px;background:color-mix(in srgb,var(--cc) 12%,var(--field));border:1px solid color-mix(in srgb,var(--cc) 40%,var(--line))}
.csn b{font:800 26px var(--f-title);line-height:1.1;color:var(--text)}
.csn small{font-size:12px;color:var(--text2);line-height:1.3}
.csic{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:var(--cc);margin-bottom:4px}
.csic svg{width:16px;height:16px;fill:none;stroke:#0b0d17;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cs-blue{--cc:#4d8dff}.cs-cyan{--cc:#3fd0f2}.cs-violet{--cc:#b48cff}.cs-green{--cc:#2ed3a0}.cs-yellow{--cc:#ffc23d}.cs-pink{--cc:#ff5ca8}
.csrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.csrow .h3{margin:0 0 8px;font-size:14px}
.csb{display:grid;grid-template-columns:80px 1fr 44px;gap:8px;align-items:center;font-size:13px;margin:5px 0}
.csbar{height:9px;border-radius:5px;background:var(--field);overflow:hidden}.csbar i{display:block;height:100%;border-radius:5px}
.csb b{text-align:right}
.csx{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;margin:0 0 6px;border-radius:12px;border:1px solid var(--line);background:var(--field);color:var(--text);font:600 13px var(--f-text);text-align:left;cursor:pointer}
.csx:hover,.csx:focus-visible{border-color:#b48cff;outline:none}
.csrank{width:22px;height:22px;flex:none;border-radius:50%;display:grid;place-items:center;background:#b48cff;color:#0b0d17;font-weight:800;font-size:12px}
@media (max-width:600px){.csgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.csrow{grid-template-columns:minmax(0,1fr)}}
/* v36 · statuts XCombo personnels */
.xcview{display:flex;flex-direction:column;gap:10px;margin:4px 0 14px}
.xcvtabs{display:flex;gap:8px;flex-wrap:wrap}
.xsv-inst{--xc:var(--green)}.xsv-try{--xc:var(--yellow)}.xsv-no{--xc:var(--danger)}
.xcvprog{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.xcvbar{width:160px;max-width:40%;height:8px;border-radius:999px;background:var(--surface2);overflow:hidden}
.xcvbar i{display:block;height:100%;border-radius:999px;background:var(--green);transition:width .4s ease}
.xcst{display:flex;gap:6px;flex-wrap:wrap;border-top:1px solid var(--sep);padding-top:10px}
.xsb{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:10px;border:1px solid var(--field-line);background:transparent;color:var(--text2);font:700 12.5px var(--f-text);cursor:pointer}
.xsb svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.xsb:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.xsb-inst[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:#0b0d17}
.xsb-try[aria-pressed="true"]{background:var(--yellow);border-color:var(--yellow);color:#0b0d17}
.xsb-no[aria-pressed="true"]{background:var(--danger);border-color:var(--danger);color:#fff}
.xsb-note{margin-left:auto}
.xcard.xst-inst{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--green) 55%,transparent)}
.xcard.xst-no{opacity:.72}
.xcnote{width:100%;font:inherit;font-size:13.5px;color:var(--text);background:var(--field);border:1px solid var(--field-line);border-radius:10px;padding:8px 10px;resize:vertical}
.xcnew{margin-left:auto;align-self:flex-start;font:800 11px var(--f-text);padding:3px 9px;border-radius:999px;background:var(--accent);color:var(--on-accent,#0b0d17);white-space:nowrap}
@media (prefers-reduced-motion:reduce){.xcvbar i{transition:none}}

/* v40 · Quoi de neuf ? */
.newsBtn{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:12px;border:1px solid var(--field-line);background:var(--surface);color:var(--text);font:700 14px var(--f-text);cursor:pointer;text-align:left}
.newsBtn:hover{background:var(--surface2)}.newsBtn .ic{flex:none}
.newsBtn:focus-visible,.news-x:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.newsCount{margin-left:auto;min-width:22px;height:22px;padding:0 7px;border-radius:999px;background:#ff5c7a;color:#fff;font-size:12px;display:grid;place-items:center}
.news-in{width:min(640px,100%)}
.news-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.news-head .hint{margin:4px 0 0}
.news-x{flex:none;width:36px;height:36px;border-radius:50%;border:1px solid var(--field-line);background:var(--surface);color:var(--text);font-size:22px;line-height:1;cursor:pointer}
.news-dates{display:flex;gap:10px;flex-wrap:wrap}.news-dates .lbl{flex:1;min-width:140px}
.news-count{margin:0}
.news-list{display:flex;flex-direction:column;gap:16px}
.news-date{font:700 13px var(--f-text);color:var(--text3);margin:0 0 8px;text-transform:none}
.news-day{display:flex;flex-direction:column;gap:8px}
.news-item{border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:14px;padding:12px 14px;background:var(--surface);display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.news-item p{margin:0}

/* v41 · soutien */
.doncard{display:flex;flex-direction:column;gap:10px;border-top:3px solid var(--yellow)}
.doncard p{margin:0}
.donBtn{background:var(--yellow);border-color:var(--yellow);color:#0b0d17;text-decoration:none;font-weight:800}
.donLink{color:inherit}
.news-don{margin:4px 0 0;padding-top:12px;border-top:1px solid var(--sep)}
.news-don a{color:var(--accent);font-weight:700}
.donAlt{color:var(--accent);font-weight:700;align-self:flex-start}

/* v43 · soutien : pastille, choix Stripe / PayPal */
.donPill{display:inline-flex;align-items:center;gap:6px;padding:5px 12px 5px 9px;border-radius:999px;border:0;cursor:pointer;font:800 12.5px var(--f-text);color:#0b0d17;background:linear-gradient(135deg,#ffd166,#ffb020);box-shadow:0 4px 14px rgba(255,176,32,.28);transition:transform .15s ease,box-shadow .15s ease}
.donPill svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.donPill:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(255,176,32,.4)}
.donPill:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.donChoices{display:flex;gap:10px;flex-wrap:wrap}.donChoices.col{flex-direction:column}
.donCh{flex:1;min-width:210px;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;text-decoration:none;color:#fff;font:inherit;transition:transform .15s ease,filter .15s ease}
.donCh:hover{transform:translateY(-1px);filter:brightness(1.08)}.donCh:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.donCh svg{width:26px;height:26px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.donCh span{display:flex;flex-direction:column;gap:1px}.donCh b{font-size:15px}.donCh small{font-size:12px;opacity:.85}
.donSt{background:linear-gradient(135deg,#635bff,#4d8dff)}
.donPP{background:linear-gradient(135deg,#0070ba,#1f9cf0)}
.donNewsBtn{color:var(--accent);font-weight:700}
.don-in{width:min(460px,100%)}
.don-in p{margin:0}
@media (prefers-reduced-motion:reduce){.donPill,.donCh{transition:none}}
/* v43 · les cartes (Leaflet) restent sous les fenêtres */
.leaflet-container{isolation:isolate;z-index:0}
.onb{z-index:2000}

/* v48 · perso : entités Home Assistant par véhicule */
.gha{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;border-top:1px solid var(--sep);padding-top:10px;font-size:13.5px}
.gha code{font-size:12px;background:var(--surface2);padding:2px 6px;border-radius:6px}
.gha .lbl{flex:1 1 100%}.gha .hint{margin:0;flex:1 1 100%}

/* v49 · alignement des champs dans les grilles, langue dans l’accueil */
.grid>.lbl>.unit:last-child,.grid>.lbl>.fld:last-child,.grid>.lbl>select:last-child{margin-top:auto}
.oblang{display:flex;gap:4px;padding:3px;border-radius:999px;border:1px solid var(--field-line);background:var(--surface)}
.oblang button{border:0;background:none;color:var(--text2);font:800 11.5px var(--f-text);padding:4px 9px;border-radius:999px;cursor:pointer}
.oblang button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent,#0b0d17)}
.oblang button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.grid>.lbl{align-self:stretch}

/* ===== v50 : confort sur téléphone (mobile.js) ===== */
.mico{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mstep,.mpwr,.mswitch,.pbar{display:none}
.mhid{display:none!important}
.minst .sheet-in,.msheet .sheet-in{max-height:88vh;overflow-y:auto;gap:12px;z-index:1}
.minst .h2{font-size:20px}
.msteps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.msteps li{display:flex;align-items:center;gap:12px;background:var(--bar);border:1px solid var(--line);border-radius:16px;padding:12px;font-size:15px;line-height:1.4}
.mnum{width:30px;height:30px;flex:none;border-radius:999px;background:var(--accent);color:var(--on-accent);font-weight:800;display:grid;place-items:center}
.mprim{background:var(--accent);border-color:var(--accent);color:var(--on-accent);text-decoration:none}
.mrow{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mrow .btn{margin:0;align-self:stretch}
.minst .btn.full{align-self:stretch;margin:0}
.mapp{display:flex;align-items:center;gap:14px}
.mlogo{width:56px;height:56px;flex:none;border-radius:16px;background:var(--accent);color:var(--on-accent);display:grid;place-items:center}
.mlogo .mico{width:28px;height:28px}
.miab{display:flex;align-items:center;gap:10px;background:var(--surface2);border:1px solid var(--field-line);border-radius:16px;padding:10px 6px 10px 12px;margin-bottom:16px}
.miab .ic{width:32px;height:32px}
.miab-t{flex:1;font-size:13.5px;line-height:1.4}
.miab .btn{margin:0;flex:none;min-height:40px}
.mxx{flex:none;width:40px;height:40px;border:0;background:transparent;color:var(--text3);display:grid;place-items:center;cursor:pointer}
@media (max-width:1000px){
  .mswitch{display:flex;margin-bottom:14px}
  body.mlite .mstep{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .mcol{display:flex;flex-direction:column;gap:6px;min-width:0}
  .mlbl{font-size:13px;color:var(--text2)}
  .mbox{display:flex;align-items:center;justify-content:space-between;background:var(--field);border:1px solid var(--field-line);border-radius:14px;padding:4px}
  .mbox b{font-family:var(--f-title);font-size:21px;font-weight:700;font-variant-numeric:tabular-nums}
  .mpm{width:44px;height:44px;border:0;border-radius:10px;background:var(--surface2);color:var(--text);font-size:22px;line-height:1;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none}
  .mquick{display:flex;gap:4px}
  .mquick button{flex:1;min-height:54px;border-radius:12px;border:1px solid var(--field-line);background:transparent;color:var(--text2);font-weight:700;font-size:15px;cursor:pointer}
  .mquick button[aria-pressed=true]{border-color:var(--accent);background:var(--surface2);color:var(--text)}
  body.mlite #timeRow{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.mlite #timeRow>.lbl{min-width:0}
  body.mlite #timeRow>#wDay{grid-column:1/-1}
  body.mlite #timeRow .fld{min-height:52px;font-family:var(--f-title);font-size:17px;font-weight:600}
  body.mlite .mpwr{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:14px;color:var(--text2)}
  body.mlite .mpwr b{color:var(--text)}
  body.mlite .mpwr .linkbtn{min-height:44px;text-decoration:none}
  body.mlite #quickAC:not(.mopen)>.lbl,body.mlite #quickAC:not(.mopen)>.chips{display:none}
  body.mlite.m-calc main.wrap{padding-bottom:200px}
  .pbar{position:fixed;left:10px;right:10px;bottom:calc(72px + env(safe-area-inset-bottom,0px));z-index:29;display:flex;align-items:center;gap:12px;border:0;border-radius:20px;background:var(--accent);color:var(--on-accent);padding:10px 16px;text-align:left;cursor:pointer;font-family:inherit}
  .pbar.hidden{display:none}
  .pbar-t{flex:1;display:flex;flex-direction:column;min-width:0}
  .pbar-t .k{font-size:12px;font-weight:700}
  .pbar-t b{font-family:var(--f-title);font-size:28px;font-weight:700;line-height:1.1;letter-spacing:-.02em;white-space:nowrap}
  .pbar-d{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:12px;font-weight:700;flex:none}
  .pbar-d .mico{width:20px;height:20px}
  .msheet .mhead{display:flex;justify-content:flex-end;margin:-4px 0 0}
  .msheet .results{display:flex;flex-direction:column;gap:10px}
  .msheet .results .btn{margin:0}
  .msheet .mseg{margin:0}
  .msheet #mSegSlot>.card{margin:0}
  .msheet .sheet-in>*{flex-shrink:0}
  .msheet .res-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .msheet .res-grid .res{padding:10px 12px}
  .msheet .res-grid .res.wide{grid-column:auto}
  .msheet .res-grid .res.src{grid-column:1/-1}
  .msheet .res-grid output{font-size:17px;white-space:nowrap}
  .mswitch{-webkit-mask-image:none!important;mask-image:none!important;overflow:visible!important}
  .msheet .res-grid .s{font-size:12px;line-height:1.35}
  .msheet .res-main{padding:16px 18px}
  .pbar-t .pbs{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
@media (prefers-reduced-motion:no-preference){.msheet:not(.hidden) .sheet-in,.minst:not(.hidden) .sheet-in{animation:mup .22s ease-out}}
@keyframes mup{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}

/* ===== v51 : Réglages en sommaire (reglages.js) et barre latérale ===== */
.mswitch{display:flex;margin-bottom:14px}
@media (min-width:1001px){.mswitch{max-width:420px}}
.navsec{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text3);padding:12px 10px 2px}
.side-more button{min-height:40px;font-size:14px}
.side-more .ic{width:24px;height:24px;border-radius:7px}
.side-more .ic svg{width:14px;height:14px}
.rwrap.narrow{max-width:1100px}
.rset{display:grid;grid-template-columns:minmax(250px,300px) minmax(0,1fr);gap:20px;align-items:start}
.rnav{position:sticky;top:16px;display:flex;flex-direction:column;gap:8px}
.rintro{margin:0 0 2px}
.rlist{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:6px;display:flex;flex-direction:column;gap:2px}
.rrow{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:8px 10px;border:0;border-radius:14px;background:transparent;color:var(--text);text-align:left;cursor:pointer;font:inherit}
.rrow:hover{background:color-mix(in srgb,var(--surface2) 60%,transparent)}
.rrow[aria-current=true]{background:var(--surface2);box-shadow:inset 3px 0 0 var(--accent)}
.rrow:focus-visible,.rback:focus-visible,.rfold:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.rrow .ic{flex:none}
.rrow>svg,.rback svg,.rfold svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.rrow>svg{color:var(--text3)}
.rtx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.rtx b{font-size:15px;font-weight:700;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.rexp{font-size:11px;font-weight:700;padding:2px 7px;border-radius:999px;background:var(--surface2);color:var(--text2)}
.rsum{font-size:13px;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rsum.rok{color:var(--green)}
.rbody{min-width:0}
.rpage{display:flex;flex-direction:column;gap:16px}
.rpage.hidden{display:none}
.rback{display:none;align-self:flex-start;align-items:center;gap:4px;min-height:44px;padding:0 8px 0 0;border:0;background:transparent;color:var(--accent);font:inherit;font-weight:700;cursor:pointer}
.rh{outline:none}
.rh:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:6px}
.rfold{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:52px;margin-top:6px;padding:0 14px;border:1px solid var(--field-line);border-radius:14px;background:var(--bar);color:var(--text);font:inherit;font-weight:700;text-align:left;cursor:pointer}
.rfold svg{color:var(--text3);transition:transform .2s}
.rfold[aria-expanded=true] svg{transform:rotate(180deg)}
#setDC.rclosed{display:none}
.rinst .row{flex-wrap:wrap}
.rinst .installBtn.hidden+*{margin-top:0}
@media (max-width:1000px){
  .rset{display:block}
  .rnav{position:static}
  [data-panel=settings].rin .rnav{display:none}
  [data-panel=settings].rin .stack>.ttl{display:none}
  .rback{display:inline-flex}
  .rrow{min-height:60px}
}
@media (prefers-reduced-motion:reduce){.rfold svg{transition:none}}
@media (max-width:1000px){
  .mtop .brandmark{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:8px}
  .mtop .logo{flex:none}
  .mtop .profPill{flex:0 1 auto;min-width:0;max-width:100%}
  .mtop .profPill .profName{flex:none}
  .mtop .profPill .profShort{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .mtop .langpill,.mtop .iconbtn{flex:none}
}

/* v51.1 : Safari iPhone donne aux champs d'heure une largeur minimale propre qui les faisait déborder */
@media (max-width:1000px){
  input[type=time],input[type=date]{-webkit-appearance:none;appearance:none;display:block;min-width:0;max-width:100%;width:100%;box-sizing:border-box}
  input[type=time]::-webkit-date-and-time-value,input[type=date]::-webkit-date-and-time-value{text-align:left;min-height:1.3em}
}
@media (max-width:1000px){
  .mbox b{white-space:nowrap;min-width:0}
  .mquick button{min-width:0;padding:0}
}
@media (max-width:380px){
  .mpm{width:38px;height:42px}
  .mbox b{font-size:18px}
  .mquick button{font-size:14px}
}
@media (max-width:380px){body.mlite #timeRow .fld{font-size:15px;padding-left:10px;padding-right:8px}}
@media (max-width:600px){
  #planOut .row{flex-wrap:wrap;align-items:flex-start}
  #planOut .row>.grow{flex:1 1 0;min-width:0}
  #planOut .row>.btn{flex:1 1 100%;margin:4px 0 0}
}

/* v51.1 : bloc Home Assistant du Garage sur une ligne */
.gha .gha-t{flex:1 1 180px;min-width:0;line-height:1.45}
.gha>.btn{flex:none;align-self:center;margin:0;min-height:36px}

/* ===== v53 : Aperçu, tuiles, semaine, état de santé ===== */
.ahead{gap:12px;flex-wrap:wrap}
.atiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin:14px 0 18px}
.atile{display:flex;flex-direction:column;gap:4px;min-height:96px;padding:14px 16px;border:1px solid var(--line);border-radius:18px;background:var(--surface);color:var(--text);text-align:left;font:inherit;cursor:pointer}
button.atile:hover{border-color:var(--field-line)}
button.atile:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.atile.wide{grid-column:span 2}
.atile .at{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text3)}
.atile .av{font-family:var(--f-title);font-size:22px;font-weight:700;line-height:1.2;display:flex;align-items:center;gap:8px}
.atile .as{font-size:13px;color:var(--text2)}
.atile.off{opacity:.55}
.atiles.org .atile{cursor:default}
.actl{display:flex;align-items:center;gap:8px;margin-top:6px;flex-wrap:wrap}
.actl .iconbtn{width:40px;height:40px;font-size:16px}
.actl .iconbtn[disabled]{opacity:.35;cursor:default}
.adot{width:12px;height:12px;border-radius:999px;display:inline-block;flex:none;border:1px solid var(--field-line)}
.adot.blue{background:var(--t-blue)}.adot.white{background:var(--t-white)}.adot.red{background:var(--t-red)}
.abar{height:8px;border-radius:999px;background:var(--sep);overflow:hidden}
.abar i{display:block;height:100%;background:var(--green)}
.aweek{display:flex;flex-direction:column;gap:12px}
.agrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.wtable{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.wrow{display:grid;grid-template-columns:minmax(90px,.8fr) minmax(0,1.6fr) minmax(140px,1fr);gap:10px;align-items:center;padding:10px 12px;border-bottom:1px solid var(--sep)}
.wrow:last-child{border-bottom:0}
.wrow.on{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.wday{display:flex;flex-direction:column}
.wday small{color:var(--text3);font-size:12px}
.wred{font-size:11px;font-weight:700;color:var(--danger)}
.wdec{display:flex;flex-direction:column;gap:2px;min-width:0}
.wgo{font-weight:700;color:var(--accent)}
.wno{color:var(--text3)}
.wdet{font-size:13px;color:var(--text2)}
.wkmc{display:flex;flex-direction:column;gap:2px;font-size:12px}
.wkmc .unit input{min-height:40px}
.wsum{margin:0;font-weight:700}
.sohest{display:flex;flex-direction:column;gap:6px;margin-top:6px;padding:10px 12px;border:1px dashed var(--field-line);border-radius:12px}
.sohest .btn{align-self:flex-start;margin:0}
@media (max-width:600px){
  .atiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .atile{min-height:88px;padding:12px}
  .atile .av{font-size:19px}
  .wrow{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"d k" "x x"}
  .wday{grid-area:d}.wkmc{grid-area:k}.wdec{grid-area:x}
}
.side-nav button[data-tab=apercu]{--c:#b48cff}
.atiles{grid-auto-flow:row dense}

@media (max-width:1000px) and (pointer:coarse){.fld,input[type=text],input[type=number],input[type=time],input[type=date],input[type=search],input[type=email],select,textarea{font-size:16px}}
/* Suggestions d'adresses (v64) */
.geowrap{position:relative}
.geosug{position:absolute;left:0;right:0;top:100%;z-index:60;margin-top:4px;display:flex;flex-direction:column;gap:2px;padding:6px;border-radius:12px;background:var(--surface);border:1px solid var(--field-line);box-shadow:0 12px 30px rgba(0,0,0,.35);max-height:300px;overflow:auto}
.geosug button{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:1px;border:0;background:transparent;color:var(--text);padding:8px 10px;border-radius:8px;cursor:pointer;font:inherit}
.geosug button:hover,.geosug button.on{background:var(--surface2)}
.geosug b{font-size:14px;font-weight:600}.geosug span{font-size:12px;color:var(--text2)}
.geosug .hint{margin:4px 8px}
/* Transfert par QR code mis en avant */
.obsync{display:flex;gap:10px;align-items:flex-start;margin:14px 0 0;padding:10px 12px;border-radius:12px;background:var(--surface2);font-size:13.5px;line-height:1.45}
.obsync .ic{flex:none}
.obsec{margin:12px 0 4px}
.synclead{margin:0 0 10px}

/* v68 : rappels de choix (véhicule, contrat) et onboarding */
.pickhint{color:var(--yellow)}
.obneed{margin:8px 0 0;color:var(--yellow)}
#obNext[disabled]{opacity:.45;cursor:not-allowed}

/* v71 · lien direct vers une nouveauté et toast « Nouveau » */
.news-item.news-hl{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-t);animation:newsHl 1.6s ease-out}
@keyframes newsHl{0%{box-shadow:0 0 0 8px var(--accent-t)}100%{box-shadow:0 0 0 3px var(--accent-t)}}
.news-toast{position:fixed;z-index:40;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom,0px));width:min(560px,calc(100% - 24px));display:flex;align-items:center;gap:10px;padding:10px 10px 10px 14px;border-radius:16px;background:var(--surface);border:1px solid var(--field-line);border-left:3px solid var(--accent);box-shadow:0 10px 30px rgba(0,0,0,.35);animation:newsIn .35s ease-out}
.news-toast-k{flex:none;font:800 11px var(--f-text);text-transform:uppercase;letter-spacing:.06em;color:var(--on-accent);background:var(--accent);border-radius:999px;padding:3px 8px}
.news-toast-t{flex:1;min-width:0;font-size:14px;font-weight:600;line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.news-toast .btn{flex:none}
.news-toast-x{flex:none;width:32px;height:32px;border-radius:50%;border:0;background:transparent;color:var(--text3);font-size:20px;line-height:1;cursor:pointer}
@keyframes newsIn{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}
@media (max-width:1000px){.news-toast{bottom:auto;top:calc(70px + env(safe-area-inset-top,0px));animation-name:newsInTop}}
@keyframes newsInTop{from{opacity:0;transform:translate(-50%,-12px)}to{opacity:1;transform:translate(-50%,0)}}
@media (prefers-reduced-motion:reduce){.news-toast,.news-item.news-hl{animation:none}}

/* v81 : cibles tactiles d'au moins 44 px sur écran tactile, sans changer l'apparence */
@media (pointer:coarse){
  .i{position:relative}
  .i::after{content:"";position:absolute;inset:-11px}
  label.check{min-height:44px;align-items:center}
  label.check input[type=checkbox]{width:22px;height:22px}
  .leaflet-touch .leaflet-bar a{width:44px;height:44px;line-height:44px;font-size:22px}
}
/* v81 : fondu au bord droit d'une rangée qui défile, tant qu'il reste quelque chose à voir */
.fade-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent)}

/* v81 : sauvegarde chiffrée et déménagement */
.sauvcode{font:700 clamp(16px,5.2vw,22px)/1.2 var(--f-title);letter-spacing:.04em;white-space:nowrap;padding:12px 14px;margin:10px 0;border-radius:12px;background:var(--surface2);border:1px dashed var(--accent);text-align:center;overflow-x:auto;user-select:all}
.sauvcode.masked{color:var(--text2)}
#sauvCard .row{flex-wrap:wrap;gap:8px;margin:8px 0}
#sauvCard .note{margin:10px 0;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--accent) 12%,var(--surface2));line-height:1.45}
.sauvrest{margin-top:10px}.sauvrest summary{cursor:pointer;font-weight:700;padding:6px 0;min-height:32px}
.sauvrest .fld,.demenbox .fld{flex:1 1 200px;text-transform:uppercase;letter-spacing:.05em}
.demenbar{position:relative;z-index:30;background:color-mix(in srgb,var(--accent) 22%,var(--surface));border-bottom:1px solid var(--line);padding:10px 14px;padding-top:calc(10px + env(safe-area-inset-top,0px))}
.demenin{max-width:1200px;margin:0 auto;display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;line-height:1.4}
.demenin .row{gap:8px;margin-left:auto}
.demendlg{position:fixed;inset:0;z-index:2100;background:rgba(5,7,15,.72);display:grid;place-items:center;padding:16px}
.demenbox{background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:18px;max-width:520px;width:100%;max-height:90vh;overflow:auto;padding:20px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.demenbox h2{margin:0 0 8px;font:700 22px/1.25 var(--f-title)}
.demenbox ol{padding-left:20px;line-height:1.5}.demenbox li{margin:8px 0}
.demenbox .row{flex-wrap:wrap;gap:8px;margin-top:12px}
.demenbar.eve{background:color-mix(in srgb,#ffc23d 26%,var(--surface))}