/* ==========================================================
   Member area: login and cockpit
   ========================================================== */
.login{
  min-height:100vh;
  display:grid;place-items:center;
  padding:32px 16px;
  background:var(--mint);
}
.login__card{
  width:100%;max-width:420px;
  background:var(--white);
  border-radius:var(--radius);
  box-shadow:0 18px 50px rgba(27,58,52,.12);
  padding:36px 32px;
}
.login__title{margin:28px 0 4px;font-size:26px;font-weight:800;color:var(--navy)}
.login__intro{color:var(--muted);margin-bottom:22px}
.login__form{display:grid;gap:16px}
.login__form label{display:grid;gap:6px;font-weight:600;font-size:14.5px;color:var(--navy)}
.login__form input[type="email"],
.login__form input[type="password"]{
  font:inherit;font-weight:500;
  padding:12px 14px;
  border:1.5px solid var(--line);border-radius:10px;
  color:var(--navy);
}
.login__form input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(58,154,99,.18)}
.login__remember{display:flex!important;align-items:center;gap:8px;font-weight:500!important;color:var(--ink)!important}
.login__form .btn{justify-content:center;border:0;cursor:pointer;font-family:inherit}
.login__form .btn:disabled{opacity:.6;cursor:wait}
.login__status{padding:10px 14px;border-radius:10px;background:#fdecec;color:#9b2c2c;font-size:14.5px}
.login__help{margin-top:22px;text-align:center;color:var(--muted);font-size:14.5px}
.login__help a{color:var(--green);font-weight:700}
.login__success{padding:12px 14px;border-radius:10px;background:var(--mint);color:var(--green-dark);font-weight:600;margin-bottom:18px}
.login__done-btn{width:100%;justify-content:center}

/* ---------- cockpit ---------- */
.cockpit{background:var(--soft);min-height:100vh}
.cockpit__bar{background:var(--white);border-bottom:1px solid var(--line)}
.cockpit__bar-inner{
  margin:0 auto;padding:12px clamp(24px,10.5vw,200px);
  display:flex;align-items:center;gap:20px;
}
.cockpit__member{margin-left:auto;color:var(--muted);font-size:14.5px}
/* With the admin menu, the e-mail no longer fits in the bar of mid-size screens */
@media (max-width:1200px){.cockpit__member{visibility:hidden;width:0;overflow:hidden}}
/* The administration takes the width of the screen, with a margin on each side: 200 px on a large screen, less on a small one */
.cockpit__content{margin:0 auto;padding:28px clamp(24px,10.5vw,200px)}
.cockpit__block{background:var(--white);border-radius:var(--radius);padding:24px;box-shadow:0 6px 20px rgba(27,58,52,.06)}
.cockpit__block label{margin-right:12px}
.cockpit button{font-family:inherit;cursor:pointer}
/* styles.css removes the border of button.btn: keep the outline of ghost buttons */
.cockpit button.btn--ghost{border:1.5px solid var(--green)}

/* ---------- administration ---------- */
.admin__status{padding:12px 16px;border-radius:10px;margin:0 0 18px;font-weight:600}
.admin__status.is-ok{background:var(--mint);color:var(--green-dark)}
.admin__status.is-error{background:#fdecec;color:#9b2c2c}
.admin__add{margin-bottom:20px}
.admin__subtitle{margin:0 0 4px;font-size:18px;color:var(--navy)}
.admin__hint{color:var(--muted);font-size:14.5px;margin-bottom:14px}
.admin__form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 16px}
.admin__form label{display:grid;gap:4px;font-weight:600;font-size:14px;color:var(--navy);margin:0}
.admin__form input[type="text"],.admin__form input[type="email"],.admin__toolbar input{
  font:inherit;font-weight:500;padding:10px 12px;
  border:1.5px solid var(--line);border-radius:10px;color:var(--navy);
}
.admin__form input:focus,.admin__toolbar input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(58,154,99,.18)}
.admin__form input.admin__npa{width:90px}
.admin__check{display:flex!important;align-items:center;gap:8px;padding-bottom:10px}
.admin__toolbar{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.admin__toolbar input{flex:1;max-width:420px}
.admin__count{color:var(--muted);font-size:14.5px}
.admin__table-wrap{overflow-x:auto}
.admin__table{width:100%;border-collapse:collapse;font-size:14.5px}
.admin__table th{text-align:left;color:var(--muted);font-weight:600;padding:10px 12px;border-bottom:1.5px solid var(--line)}
.admin__table td{padding:12px;border-bottom:1px solid var(--line);vertical-align:middle}
.admin__table td:last-child{white-space:nowrap}
.admin__empty{color:var(--muted);text-align:center}
.admin__name{font-weight:700;color:var(--ink,#14213d)}
.admin__email{color:var(--muted);font-size:13.5px;overflow-wrap:anywhere}
.admin__badges{margin-top:6px}
.admin__badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12.5px;font-weight:700;margin:2px 4px 2px 0}
.admin__badge.is-active{background:var(--mint);color:var(--green-dark)}
.admin__badge.is-pending{background:#fff4d6;color:#8a6200}
.admin__badge.is-admin{background:#e3effa;color:#1f5f94}
.admin__action{
  font:inherit;font-size:13.5px;font-weight:700;
  padding:7px 12px;margin:2px 6px 2px 0;border-radius:999px;
  background:var(--soft);color:var(--navy);border:1.5px solid var(--line)!important;
}
.admin__action:hover{background:#eef2ec}
.admin__action.is-primary{background:var(--yellow);border-color:var(--yellow)!important}
.admin__action.is-primary:hover{background:var(--yellow-dark)}
.admin__action.is-danger{color:#9b2c2c}
.admin__action.is-danger:hover{background:#fdecec}

.admin__nav{display:flex;gap:4px;margin-left:12px}
.admin__nav a{white-space:nowrap;padding:8px 14px;border-radius:999px;font-weight:700;font-size:14.5px;color:var(--muted);text-decoration:none}
.admin__nav a:hover{background:var(--soft);color:var(--navy)}
.admin__nav a[aria-current="page"]{background:var(--mint);color:var(--green-dark)}

/* ---------- tariffs ---------- */
.tariff__tabs{display:flex;gap:6px;margin-bottom:16px}
.tariff__tab{font:inherit;font-weight:700;font-size:14.5px;padding:8px 18px;border-radius:999px;border:1.5px solid var(--line);background:var(--white);color:var(--muted)}
.tariff__tab.is-active{background:var(--navy);border-color:var(--navy);color:#fff}
.tariff__toolbar{flex-wrap:wrap}
.tariff__toolbar input,.tariff__toolbar select,.tariff__fields select,.tariff__fields input:not([type=checkbox]),.tariff__slot input{
  font:inherit;font-weight:500;padding:9px 12px;
  border:1.5px solid var(--line);border-radius:10px;color:var(--navy);background:var(--white);
}
.tariff__toolbar select{min-width:240px}
.tariff__toolbar .tariff__npa-filter{flex:none;width:110px;min-width:0}
.tariff__new{margin-left:auto}
.tariff__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px}
.tariff__empty{grid-column:1/-1;padding:32px 0}
.tariff__card{border:1.5px solid var(--line);border-radius:var(--radius);padding:18px;display:flex;flex-direction:column;gap:10px}
.tariff__head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.tariff__head .admin__badges{margin:0;flex-shrink:0}
.tariff__name{margin:0;font-size:17px;color:var(--navy)}
.tariff__meta{margin:0;color:var(--muted);font-size:14px}
.tariff__meta strong{color:var(--navy)}
.tariff__npa{margin:-4px 0 0;color:var(--muted);font-size:13.5px;overflow-wrap:anywhere}
.tariff__npa strong{color:var(--navy);font-weight:600}
.tariff__slots{width:100%;border-collapse:collapse;font-size:13.5px}
.tariff__slots th{text-align:left;color:var(--muted);font-weight:600;padding:4px 6px;border-bottom:1px solid var(--line)}
.tariff__slots td{padding:5px 6px;border-bottom:1px solid var(--soft)}
.tariff__price{font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums;text-align:right}
.tariff__slots th:last-child{text-align:right}
.tariff__actions{margin-top:auto}
.tariff__dynamic{display:grid;gap:4px;padding:10px 12px;border-radius:10px;background:var(--soft);font-size:13.5px;color:var(--ink)}
.tariff__dynamic p{margin:0}
.tariff__dynamic-days{font-weight:700;color:var(--navy)}
.tariff__dynamic-error{color:#9b2c2c}
#dynamic-editor code{background:var(--soft);padding:1px 5px;border-radius:5px}
.tariff__dialog,.admin__dialog{width:min(760px,calc(100% - 32px));max-height:calc(100% - 48px);border:0;border-radius:var(--radius);padding:24px;box-shadow:0 24px 60px rgba(27,58,52,.25)}
.tariff__dialog::backdrop,.admin__dialog::backdrop{background:rgba(27,58,52,.45)}
.tariff__fields{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;margin:16px 0 12px}
.tariff__fields label{display:grid;gap:4px;font-weight:600;font-size:14px;color:var(--navy);margin:0}
.tariff__wide{grid-column:1/-1}
.tariff__slots-title{margin:14px 0 2px;font-size:15.5px;color:var(--navy)}
.tariff__slot{background:var(--soft);border-radius:12px;padding:12px;margin-bottom:10px;display:grid;gap:10px}
.tariff__slot-times{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px}
.tariff__slot-field{display:grid;gap:4px;font-weight:600;font-size:13px;color:var(--navy);margin:0!important}
.tariff__slot .slot-price{width:130px}
.tariff__slot-remove{margin-left:auto}
.tariff__pickers{display:flex;flex-wrap:wrap;gap:4px}
.tariff__pick{margin:0!important;cursor:pointer}
.tariff__pick input{position:absolute;opacity:0;pointer-events:none}
.tariff__pick span{display:inline-block;padding:4px 9px;border-radius:999px;font-size:12.5px;font-weight:700;background:var(--white);border:1.5px solid var(--line);color:var(--muted)}
.tariff__pick input:checked+span{background:var(--mint);border-color:var(--green);color:var(--green-dark)}
.tariff__pick input:focus-visible+span{outline:2px solid var(--green);outline-offset:1px}
.tariff__dialog .admin__status,.admin__dialog .admin__status{margin:12px 0 0}
.admin__dialog{width:min(560px,calc(100% - 32px))}
.admin__fields{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;margin:16px 0 12px}
.admin__fields label{display:grid;gap:4px;font-weight:600;font-size:14px;color:var(--navy);margin:0}
.admin__fields input[type="text"],.admin__fields input[type="email"]{
  font:inherit;font-weight:500;padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;color:var(--navy);
}
.admin__fields input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(58,154,99,.18)}
.admin__fields .admin__check{align-self:end}
.admin__wide{grid-column:1/-1}
.admin__dialog-footer{display:flex;justify-content:flex-end;gap:12px;margin-top:18px}
/* Import of measurements (Pilote export) */
.admin__file{display:grid;gap:6px;font-weight:600;font-size:14px;color:var(--navy)}
.admin__progress{margin:12px 0 0;font-size:14px;color:var(--muted)}
.admin__import{margin-top:14px;max-height:340px;overflow:auto;font-size:14px}
.admin__import p{margin:0 0 8px;font-weight:600;color:var(--navy)}
.admin__import table{width:100%;border-collapse:collapse}
.admin__import th,.admin__import td{padding:6px 8px;border-bottom:1px solid #e4ece7;text-align:right;white-space:nowrap}
.admin__import th:first-child,.admin__import td:first-child{text-align:left}
.admin__import thead th{position:sticky;top:0;background:#fff;color:var(--muted);font-weight:600}
.admin__import tfoot td{font-weight:700;border-bottom:0}
.admin__import ul{margin:10px 0 0;padding-left:18px;color:#b3261e;font-size:13px}
.tariff__footer{display:flex;justify-content:flex-end;gap:12px;margin-top:18px}

@media (max-width:600px){
  .login__card{padding:28px 20px}
  .cockpit__bar-inner,.cockpit__content{padding-left:16px;padding-right:16px}
  .cockpit__bar-inner .logo__text small{display:none}
  .cockpit__bar-inner{flex-wrap:wrap;gap:10px}
  .admin__nav{order:3;width:100%;margin:0}
  .tariff__grid{grid-template-columns:1fr}
  .tariff__fields{grid-template-columns:1fr}
  .tariff__toolbar select{min-width:0;flex:1}
  .tariff__toolbar .tariff__npa-filter{width:90px}
  .tariff__new{margin-left:0;width:100%;justify-content:center}
  .tariff__dialog,.admin__dialog{padding:18px}
  .admin__fields{grid-template-columns:1fr}
}
.tariff__url{overflow-wrap:anywhere;font-size:13px}

/* Chart of the last 2 days of a price source */
.price-chart{min-width:0}
.price-chart__readout{margin:0 0 4px;font-size:13px;color:var(--muted);min-height:18px}
.price-chart__readout.is-active{color:var(--navy);font-weight:700}
.price-chart svg{display:block;touch-action:pan-y}
.price-chart__grid{stroke:var(--line);stroke-width:1}
.price-chart__midnight{stroke:#cfd8d2;stroke-width:1;stroke-dasharray:3 3}
.price-chart__axis{font-size:11px;fill:var(--muted)}
.price-chart__line{fill:none;stroke:var(--green);stroke-width:2;stroke-linejoin:round}
.price-chart__now{stroke:var(--yellow-dark);stroke-width:2}
.price-chart__cross{stroke:var(--navy);stroke-width:1;stroke-opacity:.35}
.price-chart__dot{fill:var(--green);stroke:#fff;stroke-width:2}

/* ---------- Simulator (admin/simulator.html) ---------- */
.sim__head .admin__hint{max-width:880px}
.sim__layout{display:grid;grid-template-columns:minmax(300px,370px) minmax(0,1fr);gap:20px;align-items:start;margin-top:16px}
.sim__scenario{display:grid;gap:14px;position:sticky;top:12px;max-height:calc(100vh - 24px);overflow:auto;padding-right:4px}
.sim__panel{background:var(--white);border-radius:16px;padding:16px 18px;box-shadow:0 6px 20px rgba(27,58,52,.06);display:grid;gap:10px}
.sim__panel h2{display:flex;align-items:center;gap:10px;margin:0;font-size:16px;font-weight:800;color:#14213d;cursor:pointer;user-select:none}
/* A panel folds down to its title (its state kept on the device) */
.sim__fold{flex:none;display:grid;place-items:center;width:26px;height:26px;margin-left:4px;padding:0;border:0;border-radius:8px;background:none;
  color:#8a99ab;cursor:pointer}
.sim__fold:hover{background:#f0f4f2;color:#14213d}
.sim__fold svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
.sim__panel.is-collapsed .sim__fold svg{transform:rotate(-90deg)}
.sim__panel.is-collapsed > :not(h2){display:none!important}
/* Folded: a short summary of what is chosen instead of the name */
.sim__panel{grid-template-columns:minmax(0,1fr);min-width:0}
.sim__panel h2{min-width:0}
.sim__summary{min-width:0;flex:1;font-size:12.5px;font-weight:600;color:#6b7c76;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sim__panel:not(.is-collapsed) .sim__summary,.sim__panel.is-collapsed .sim__name{display:none}
.sim__panel.is-collapsed .sim__fold{margin-left:4px!important}
.sim__panel label{display:grid;gap:4px;font-size:13px;font-weight:600;color:#43564f}
.sim__panel input,.sim__panel select{font:inherit;font-size:14px;padding:7px 10px;border:1px solid #d9e1e8;border-radius:10px;background:#fff;color:#14213d;min-width:0}
.sim__panel input:focus,.sim__panel select:focus{outline:2px solid rgba(58,154,99,.35);border-color:var(--green)}
.sim__fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;transition:opacity .2s ease}
.sim__fields.is-off,.sim__range.is-off{opacity:.35;pointer-events:none}
.sim__fields .sim__check{grid-column:1 / -1}
.sim__check{display:flex!important;align-items:center;gap:8px}
.sim__check input{width:16px;height:16px;flex:none}
.sim__plan{padding:10px 12px;border-radius:12px;background:#eef8f2;border:1px solid #bfe6cd;color:#1d4d3c!important;line-height:1.4}
.sim__unit{display:flex;align-items:center;gap:6px;font-size:13px;color:#6b7c76}
.sim__unit input{flex:1;width:100%}
.sim__pair input{width:56px;flex:1}
.sim__range output{float:right;font-weight:800;color:#14213d}
.sim__range input{padding:0;accent-color:var(--green)}
.sim__dot{width:12px;height:12px;border-radius:4px;flex:none}
.sim__dot.is-day{background:#14213d}
.sim__dot.is-house{background:#ef7d2c}
.sim__dot.is-battery{background:#1fa152}
.sim__dot.is-car{background:#2b7cf6}
.sim__dot.is-cloud{background:#9aa6b2}
.sim__dot.is-charger{background:#1d4d3c}
.sim__fields .sim__wide{grid-column:1 / -1}
.sim__panel [hidden]{display:none!important}
.sim__charger-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.sim__known{margin:0;display:flex;flex-wrap:wrap;gap:6px}
.sim__known span{padding:5px 11px;border-radius:99px;background:#eef6f1;color:#1d4d3c;font-size:13px;font-weight:700}
/* The car, as on the "Véhicule électrique" page */
.sim__vcard{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid #e6ecf1;border-radius:14px;background:#fff;transition:background .3s ease,border-color .3s ease}
.sim__vcard.is-charging{background:linear-gradient(110deg,#e9f8ef,#f6fcf8);border-color:#a8e2bd}
.sim__vcard.is-plugged{background:linear-gradient(110deg,#eef6ff,#f7fbff);border-color:#b9d6fb}
.sim__vcard-art{flex:none;width:96px}
.sim__vcard-art svg{display:block;width:100%;height:auto}
.sim__vcard-text{flex:1;min-width:0;display:grid;justify-items:start;gap:2px}
.sim__vcard-text b{font-size:15px;font-weight:800;color:#14213d;overflow-wrap:anywhere}
.sim__vcard-text span{font-size:12.5px;color:#6b7c76}
.sim__vcard-text em{margin-top:2px;padding:2px 9px;border-radius:99px;background:#eef1f4;color:#6b7c76;font-size:12px;font-weight:700;font-style:normal}
.sim__vcard.is-charging em{background:#dff5e7;color:#1a8a46}
.sim__vcard.is-plugged em{background:#e1eeff;color:#1f6fe5}
.sim__vcard-side{flex:none;display:grid;justify-items:end;gap:3px}
.sim__vcard-side b{font-size:17px;font-weight:800;color:#14213d;font-variant-numeric:tabular-nums}
.sim__vbattery{position:relative;display:block;width:32px;height:15px;border:2px solid #14213d;border-radius:4px;padding:1px}
.sim__vbattery::after{content:"";position:absolute;right:-5px;top:3px;width:3px;height:5px;border-radius:0 2px 2px 0;background:#14213d}
.sim__vbattery i{display:block;height:100%;width:0;border-radius:2px;background:#1fa152;transition:width .25s ease,background .25s ease}
.sim__switch{margin-left:auto;position:relative;display:inline-block!important;width:40px;height:22px}
.sim__switch input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer;z-index:1}
.sim__switch span{position:absolute;inset:0;border-radius:99px;background:#cfd8df;transition:background .2s ease}
.sim__switch span::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .2s ease}
.sim__switch input:checked + span{background:var(--green)}
.sim__switch input:checked + span::after{transform:translateX(18px)}
.sim__consumers,.sim__clouds{display:grid;gap:8px}
.sim__row{display:grid;grid-template-columns:minmax(0,1fr) 92px minmax(0,1fr) 26px;gap:6px;align-items:center;padding:8px;border-radius:12px;background:#f7f9fb}
.sim__row [data-key="name"]{grid-column:1 / 4;font-weight:700}
.sim__row:not(.is-cloud) .sim__remove{grid-column:4;grid-row:1}
.sim__row.is-cloud{grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr) minmax(0,1fr) 26px;font-size:13px;color:#6b7c76}
.sim__row input{padding:6px 8px;font-size:13px}
/* A charge range of the car: its times, its current (the "Plages" mode only) and the level at its end */
.sim__row.is-car{grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr) 26px}
.sim__row.is-car .sim__unit{grid-column:span 2}
.sim__row.is-car .sim__remove{grid-column:5;grid-row:1}
.sim__row.is-departure .sim__unit{grid-column:auto}
.sim__days{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:4px}
.sim__days button{min-width:32px;padding:3px 6px;border:1px solid #d9e1e8;border-radius:8px;background:#fff;font:inherit;font-size:12px;
  font-weight:700;color:#6b7c76;cursor:pointer}
.sim__days button[aria-pressed="true"]{border-color:#2f9e57;background:#eaf7ef;color:#1d4d3c}
.sim__remove{width:26px;height:26px;border-radius:8px;border:0;background:#f1f4f6;color:#6b7c76;font-size:16px;line-height:1}
.sim__remove:hover{background:#fde8e5;color:#c0392b}
.sim__presets{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12.5px;color:#6b7c76}
.sim__presets button,.sim__add{border:1px dashed #b9c6cf;background:#fff;border-radius:99px;padding:4px 10px;font-size:12.5px;font-weight:700;color:#43564f}
.sim__presets button:hover,.sim__add:hover{border-color:var(--green);color:var(--green)}
.sim__add{justify-self:start}
.sim__info{margin:0;font-size:12.5px;color:#6b7c76;line-height:1.45}
.sim__ranges{grid-column:1 / -1;display:grid;gap:6px;padding-top:6px;border-top:1px solid #eef1f4}
.sim__ranges-title{font-size:13px;font-weight:700;color:#14213d}
.sim__ranges-title small{font-weight:500;color:#6b7c76}
.sim__ranges > div{display:grid;gap:6px}
.sim__sources{margin:0;padding-left:16px;display:grid;gap:3px;font-size:12px;color:#6b7c76;line-height:1.4}
.sim__sources:empty{display:none}
.sim__name{font-size:12.5px;font-weight:600;color:#6b7c76}

.sim__stage{display:grid;gap:16px;min-width:0;container-type:inline-size}
.sim__player{display:grid;grid-template-columns:auto auto 1fr;gap:10px 24px;align-items:center;padding:16px 20px;border-radius:16px;color:#fff;
  background:linear-gradient(120deg,#1d4d3c,#2a7a55);box-shadow:0 10px 24px rgba(29,77,60,.25)}
.sim__clock span{display:block;font-size:30px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.sim__clock small{font-size:12.5px;opacity:.8}
.sim__controls{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.sim__controls button{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;border:0;background:rgba(255,255,255,.16);color:#fff}
.sim__controls button:hover{background:rgba(255,255,255,.28)}
.sim__controls svg{width:20px;height:20px;fill:currentColor;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round}
.sim__controls .sim__play{width:52px;height:52px;border-radius:50%;background:#fff;color:#1d4d3c}
.sim__controls .sim__play:hover{background:#eaf6ef}
.sim__controls .sim__play svg{width:24px;height:24px}
.sim__controls select{font:inherit;font-size:13px;padding:7px 10px;border-radius:10px;border:0;background:rgba(255,255,255,.16);color:#fff}
.sim__controls select option{color:#14213d}
.sim__timeline{grid-column:1 / -1;width:100%;accent-color:#f6c83b}
.sim__price{display:grid;padding-left:24px;border-left:1px solid rgba(255,255,255,.25)}
.sim__price b{font-size:24px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1}
.sim__price small{font-size:12px;opacity:.8}
.sim__flowcard{padding:18px 20px}
/* The charging modes of the HEMS, and the highest price it buys the grid at */
.sim__cars{display:grid;gap:8px}
.sim__car-item{border:1px solid #e3eaef;border-radius:14px;background:#fff}
.sim__car-item.is-active{border-color:#cfe0d6}
.sim__car-row{display:flex;align-items:center;flex-wrap:wrap;gap:2px 8px;width:100%;padding:11px 14px;border:0;background:none;font:inherit;
  text-align:left;cursor:pointer}
.sim__car-row::after{content:"›";margin-left:6px;font-size:18px;color:#8a99ab;transition:transform .2s ease}
.sim__car-item.is-active .sim__car-row::after{transform:rotate(90deg)}
.sim__car-row b{font-size:14.5px;font-weight:800;color:#14213d}
.sim__car-row small{font-size:12.5px;font-weight:600;color:#8a99ab}
.sim__car-soc{display:inline-flex;align-items:center;gap:8px;margin-left:auto}
.sim__car-soc b{font-size:14px}
.sim__car-row .sim__car-summary{order:3;flex-basis:100%;color:#6b7c76}
.sim__car-settings{display:grid;gap:10px;padding:0 14px 14px}
.sim__modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.sim__modes button{padding:9px 8px;border:1px solid #d9e1e8;border-radius:12px;background:#fff;font:inherit;font-size:13px;font-weight:700;
  color:#3d4f6b;cursor:pointer;text-align:center}
.sim__modes button:hover{border-color:#9fd3b2}
.sim__modes button.is-active{border-color:#2f9e57;background:#eaf7ef;color:#1d4d3c;box-shadow:inset 0 0 0 1px #2f9e57}
.sim__maxprice{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px 10px}
.sim__maxprice .sim__ranges-title{grid-column:1 / -1}
.sim__maxprice[hidden]{display:none!important}
.sim__auto{padding:4px 10px;border:1px solid #d9e1e8;border-radius:8px;background:#fff;font:inherit;font-size:12.5px;font-weight:700;color:#6b7c76;cursor:pointer}
.sim__auto[aria-pressed="true"]{border-color:#2b7cf6;background:#e3edfe;color:#1f5fc9}
.sim__maxprice input[type=range]{width:100%;accent-color:#2b7cf6}
.sim__maxprice.is-auto input[type=range],.sim__maxprice.is-auto output{opacity:.4}
.sim__maxprice output{font-weight:800;color:#14213d;font-variant-numeric:tabular-nums;white-space:nowrap}
.sim__fields input[readonly]{background:#f2f5f7;color:#5d6d7e}
.sim__smart{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px;align-items:end;padding:12px;border-radius:12px;
  background:#f4f9ff;border:1px solid #d7e8fb}
.sim__smart .sim__info{grid-column:1 / -1;margin:0}
.sim__smart[hidden],#sim-smart-price[hidden]{display:none!important}
.sim__flowrow{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:stretch}
.sim__flowrow .sim__flowcard{display:flex;flex-direction:column;justify-content:center}
.sim__savings{display:flex;flex-direction:column}
.sim__savings .saving{flex:1;margin-top:8px}
.sim__saving-costs{width:100%;margin:14px 0 0;display:grid;grid-template-columns:1fr auto;gap:4px 12px;font-size:13px}
.sim__saving-costs dt{color:#5d6d7e}
.sim__saving-costs dd{margin:0;font-weight:700;color:#14213d;text-align:right;font-variant-numeric:tabular-nums}
@container (max-width:900px){.sim__flowrow{grid-template-columns:minmax(0,1fr)}}
/* ---------- the savings ring (copied from cockpit.css) ---------- */
.saving{container-type:inline-size;display:flex;flex-direction:column;align-items:center;padding:20px 16px 16px;
  border-radius:18px;background:radial-gradient(circle at 50% 30%,#ffffff 0,#f2faf5 70%)}
.saving__chart{position:relative;width:min(210px,70cqw);aspect-ratio:1}
.saving__donut{display:block;width:100%;height:100%;overflow:visible}
.saving__track{fill:none;stroke:#e3ede6;stroke-width:13}
.saving__arc{fill:none;stroke-width:13;stroke-linecap:round;transition:opacity .2s ease,stroke-width .2s ease}
.saving__arc.is-dim{opacity:.25}
.saving__arc.is-focus{stroke-width:16}
.saving__center{position:absolute;inset:18%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  border-radius:50%;background:#fff;box-shadow:0 6px 20px rgba(29,43,51,.08)}
.saving__center span{font-size:12px;font-weight:600;color:#6b7b8c;letter-spacing:.02em}
.saving__center strong{margin:2px 0;font-size:clamp(20px,8.5cqw,28px);font-weight:800;color:#14213d;letter-spacing:-.02em;white-space:nowrap;line-height:1.1}
.saving__trend{margin-top:12px;padding:4px 12px;border-radius:99px;font-size:13px;font-weight:700;color:#5d6d7e;background:#eef2f5;text-align:center}
.saving__trend:empty{display:none}
.saving__trend.is-up{color:#1f8a4c;background:#e3f5e9}
.saving__trend.is-down{color:#b45309;background:#fff0dc}
.saving__parts{list-style:none;width:100%;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.saving__part{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;padding:12px 6px 10px;
  border-radius:14px;background:#fff;border:1px solid #e8eef0;box-shadow:0 3px 10px rgba(29,43,51,.04);cursor:default;
  transition:transform .2s ease,box-shadow .2s ease}
.saving__part::before{content:"";position:absolute;left:18%;right:18%;top:0;height:3px;border-radius:0 0 3px 3px;background:var(--part)}
.saving__part:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(29,43,51,.08)}
.saving__icon{display:grid;place-items:center;width:34px;height:34px;margin-bottom:4px;border-radius:50%;color:var(--part);background:var(--part-soft)}
.saving__icon svg{width:20px;height:20px}
.saving__part b{font-size:clamp(13px,4.6cqw,16px);font-weight:800;color:#14213d;white-space:nowrap}
.saving__part span{font-size:12.5px;font-weight:600;color:#3d4f6b}
.saving__part small{font-size:11.5px;font-weight:700;color:var(--part);filter:brightness(.8)}
.saving__part.is-empty{opacity:.55}
.saving__part.is-empty b{color:#7b8794}
/* ---------- the diagram of the home page (copied from cockpit.css) ---------- */
/* The diagram scales with the card (sizes in cqw); below 560px the card version is shown instead */
.flow-wrap{container-type:inline-size;margin-top:14px}
.diagram{position:relative;aspect-ratio:1000/440}
.diagram__house{position:absolute;left:24%;top:-1%;width:52%;height:auto}
/* Links to the house: a pale track and dots moving along it (direction set by is-reverse), grey and still at 0 W */
.diagram__links{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.link path{fill:none;stroke-linecap:round;stroke-linejoin:round}
/* White halo: the dots stay visible over the trees of the picture */
.link{filter:drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1.5px #fff)}
.link__track{stroke-width:6;opacity:.3;transition:stroke .3s ease,opacity .3s ease}
.link__flow{stroke-width:7;stroke-dasharray:0 22;animation:link-flow 1.1s linear infinite}
.link.is-reverse .link__flow{animation-direction:reverse}
.link.is-solar path{stroke:#f5b400}
.link.is-vehicle path,.link.is-battery path{stroke:#1fa152}
.link.is-grid path{stroke:#3b82f6}
.link.is-house path{stroke:#f26a1b}
.link.is-idle .link__flow,.link.is-disabled .link__flow{display:none}
.link.is-idle .link__track,.link.is-disabled .link__track{stroke:#b9c3ce;opacity:.45}
.diagram__hub{fill:#fff;stroke:#1f8a4c;stroke-width:4;filter:drop-shadow(0 0 6px rgba(31,138,76,.45))}
@keyframes link-flow{to{stroke-dashoffset:-22}}
@media (prefers-reduced-motion:reduce){.link__flow{animation:none}}
.diagram__card{position:absolute;display:flex;align-items:center;gap:1.4cqw;padding:1.4cqw 1.6cqw;border-radius:1.8cqw;
  border:1px solid;box-shadow:0 .8cqw 2.4cqw rgba(29,43,51,.07);transition:filter .3s ease,opacity .3s ease}
.diagram__card img{width:5.2cqw;height:5.2cqw;object-fit:contain;flex:none}
.diagram__text{min-width:0;line-height:1.25}
.diagram__text span{display:block;font-size:max(10.5px,1.45cqw);font-weight:600;color:#14213d;line-height:1.2}
.diagram__text strong{display:block;font-size:max(17px,2.9cqw);font-weight:800;color:#14213d;white-space:nowrap}
.diagram__text small{display:block;font-size:max(9.5px,1.2cqw);color:#5d6d7e}
.diagram__state{display:block;font-size:max(10.5px,1.45cqw);font-weight:600;color:#1f8a4c}
.diagram__state:empty,.diagram__text small:empty{display:none}
.diagram__battery{display:flex;flex-direction:column;align-items:center;gap:.6cqw}
.diagram__battery em{font-style:normal;font-size:max(10.5px,1.5cqw);font-weight:800;color:#1f8a4c;white-space:nowrap}
.diagram__card.is-solar{left:3%;top:4%;width:26.5%;background:#fffaf0;border-color:#fde3b5}
.diagram__card.is-vehicle{left:70.5%;top:4%;width:26.5%;background:#f4f9ff;border-color:#d7e8fb}
.diagram__card.is-battery{left:3%;top:50%;width:25.5%;background:#f2fbf5;border-color:#c9ecd5}
.diagram__card.is-house{left:37%;top:54%;width:26%;background:#fff8ef;border-color:#fde6c8}
.diagram__card.is-grid{left:71.5%;top:50%;width:25.5%;background:#f7faff;border-color:#dbe7f7}
/* A box at 0 W, or the battery when the member has none: greyed out */
.diagram__card.is-idle,.diagram__card.is-disabled,.flow-m__card.is-idle,.flow-m__card.is-disabled{filter:grayscale(1);opacity:.5}

.sim__card{background:#fff;border-radius:16px;padding:16px 18px;box-shadow:0 6px 20px rgba(27,58,52,.06);min-width:0}
.sim__card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.sim__card-head h2{margin:0;font-size:16px;font-weight:800;color:#14213d}
.sim__legend{display:flex;flex-wrap:wrap;gap:4px 14px;margin:0;padding:0;list-style:none;font-size:12.5px;color:#43564f}
.sim__legend li{display:flex;align-items:center;gap:6px}
.sim__legend i{width:12px;height:12px;border-radius:3px}
.sim__legend{margin-top:10px;gap:6px 20px;font-size:13px}
.sim__legend i{border-radius:50%}
.sim__legend .is-sun{background:#f5b400;box-shadow:0 0 0 3px rgba(245,180,0,.2)}
.sim__legend .is-house{background:#f26a1b;box-shadow:0 0 0 3px rgba(242,106,27,.18)}
.sim__legend .is-battery{background:#1fa152;box-shadow:0 0 0 3px rgba(31,138,76,.18)}
.sim__legend .is-import{width:26px;border-radius:4px;background:repeating-linear-gradient(45deg,#2f9e57 0 3px,#8ab83a 3px 6px,#e8b21f 6px 9px,#ef7d2c 9px 12px,#d9443a 12px 15px)}
.sim__legend .is-price{width:20px;height:2px;border-radius:0;background:repeating-linear-gradient(90deg,#8a99ab 0 4px,transparent 4px 7px)}
.sim__legend .is-soc{width:20px;height:3px;border-radius:0;background:#7c4dff}
.sim__chart{position:relative}
.sim__chart svg{display:block;width:100%;height:auto;overflow:visible;user-select:none}
.sim__tooltip{position:absolute;top:8px;z-index:2;min-width:190px;padding:10px 12px;border-radius:12px;background:#fff;
  border:1px solid #e3e9ee;box-shadow:0 10px 26px rgba(29,43,51,.14);font-size:12.5px;color:#3d4f6b;pointer-events:none}
.sim__tooltip[hidden]{display:none}
.sim__tooltip b{display:block;margin-bottom:4px;font-size:13px;color:#14213d}
.sim__tooltip div{display:flex;justify-content:space-between;gap:14px}
.sim__tooltip i{display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:50%}
.sim__tooltip em{font-style:normal;font-weight:700;color:#14213d;font-variant-numeric:tabular-nums}
.sim__chart text{font-family:inherit;font-size:11.5px;fill:#8a99ab}
.sim__bottom{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
.sim__plan-card{grid-column:1 / -1}
.sim__qplan{position:relative;max-height:420px;overflow:auto;border-radius:10px}
.sim__qplan table{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
.sim__qplan thead th{position:sticky;top:0;z-index:1;padding:8px 10px;background:#fff;border-bottom:1px solid #e3eaef;text-align:right;font-size:12px;
  font-weight:700;color:#6b7c76;vertical-align:bottom}
.sim__qplan thead th:nth-child(-n+2){text-align:left}
.sim__qplan th small{font-weight:600;color:#9aa6b2}
.sim__qplan td{padding:7px 8px;border-bottom:1px solid #f1f4f6;text-align:right;color:#14213d;vertical-align:top;white-space:nowrap}
.sim__qplan td:nth-child(-n+2){text-align:left}
.sim__qplan td:first-child{font-weight:800}
.sim__qplan td:nth-child(2){white-space:normal;min-width:150px;width:45%}
.sim__qplan tbody tr{cursor:pointer}
.sim__qplan tbody tr:hover{background:#f5f8fa}
.sim__qplan .sim__chips{display:flex;flex-wrap:wrap;gap:4px}
.sim__qplan .sim__chip{padding:2px 9px;border-radius:99px;font-size:12px;font-weight:700;white-space:nowrap}
.sim__qplan .sim__chip.is-car{background:#e3edfe;color:#1f5fc9}
.sim__qplan .sim__chip.is-battery{background:#e1f5e8;color:#1a7a40}
.sim__qplan .sim__chip.is-grid{background:#fdecd8;color:#a3570c}
.sim__qplan .sim__chip.is-solar{background:#fff3cc;color:#8a6a00}
.sim__qplan .sim__chip.is-discharge{background:#fde4e2;color:#b2382e}
.sim__qplan .sim__chip.is-none{background:#f1f4f6;color:#8a99ab}
.sim__gauge{margin-bottom:14px}
.sim__gauge-row{display:flex;height:22px;border-radius:6px;overflow:hidden;cursor:pointer}
.sim__gauge-row.is-car{height:8px;margin-top:3px;border-radius:4px;background:#eef1f4}
.sim__gauge-row i{flex:1 1 0;min-width:0}
.sim__gauge-row i.is-current{box-shadow:inset 0 0 0 2px #14213d}
.sim__gauge-hours{position:relative;height:16px;margin-top:4px;font-size:11px;color:#8a99ab}
.sim__gauge-hours span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.sim__gauge-hours span:first-child{transform:none}
.sim__gauge-legend{display:flex;flex-wrap:wrap;gap:4px 14px;margin:6px 0 0;padding:0;list-style:none;font-size:12.5px;color:#43564f}
.sim__gauge-legend li{display:inline-flex;align-items:center;gap:6px}
.sim__gauge-legend i{width:12px;height:12px;border-radius:3px}
.sim__qplan .sim__act{display:block;margin-top:3px;font-size:12px;font-weight:600;color:#43564f}
.sim__qplan .sim__why{display:block;font-size:12px;color:#6b7c76}
.sim__qplan .is-forecast td:nth-child(4){font-style:italic;color:#6b7c76}
.sim__qplan .is-ahead{color:#1a8a46;font-weight:700}
.sim__qplan .is-behind{color:#c0392b;font-weight:700}
.sim__qplan .is-current{background:#eef8f2}
.sim__qplan .sim__plan-split td{padding:4px 10px;background:#f7f9fb;font-size:12px;font-weight:700;color:#6b7c76;text-align:left}
.sim__compare{width:100%;border-collapse:collapse;font-size:13.5px}
.sim__compare th,.sim__compare td{padding:9px 10px;text-align:right;border-bottom:1px solid #eef1f4}
.sim__compare thead th{font-size:12.5px;color:#6b7c76}
.sim__compare thead th.is-shown{color:#1d4d3c}
.sim__compare tbody th{text-align:left;font-weight:600;color:#43564f}
.sim__compare td{font-weight:700;color:#14213d;font-variant-numeric:tabular-nums}
.sim__compare td.is-best{color:#1a8a46;background:#eef8f2}
.sim__compare td.is-bad{color:#c0392b}
@media (max-width:1200px){
  .sim__bottom{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  .sim__layout{grid-template-columns:minmax(0,1fr)}
  .sim__scenario{position:static;max-height:none;overflow:visible}
}
@media (max-width:560px){
  .sim__player{grid-template-columns:minmax(0,1fr)}
  .sim__controls{justify-content:flex-start}
}

/* ---------- Simulator, "Bornes virtuelles": the members' stations with a virtual car plugged in ---------- */
.vcharge{margin-top:20px}
.vcharge .sim__card-head{display:block}
.vcharge .admin__hint{margin:4px 0 0}
.vcharge__layout{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:18px;margin-top:12px}
.vcharge__list{display:grid;gap:8px;align-content:start;margin:0;padding:0;list-style:none}
.vcharge__list button{display:grid;gap:2px;width:100%;padding:10px 12px;border:1px solid #e3e9ee;border-radius:12px;background:#fff;
  font:inherit;text-align:left;cursor:pointer}
.vcharge__list button:hover{border-color:#9fd3b2}
.vcharge__list button.is-active{border-color:#2f9e57;background:#eaf7ef;box-shadow:inset 0 0 0 1px #2f9e57}
.vcharge__list b{font-size:14px;color:#14213d}
.vcharge__list span{font-size:13px;color:#3d4f6b}
.vcharge__list small{font-size:12px;color:#6b7b8c}
.vcharge__list em{justify-self:start;margin-top:3px;padding:1px 8px;border-radius:99px;font-size:11px;font-style:normal;font-weight:700;
  color:#6b7b8c;background:#eef2f6}
.vcharge__list em.is-live{color:#1f8a4c;background:#e3f5ea}
.vcharge__empty{font-size:13px;color:#6b7b8c}
.vcharge__main{min-width:0;display:grid;gap:12px;align-content:start}
.vcharge__main[hidden],.vcharge [data-only][hidden]{display:none}
.vcharge__controls{display:grid;gap:10px}
.vcharge__tabs{display:inline-flex;justify-self:start;padding:3px;border-radius:12px;background:#eef2f6}
.vcharge__tabs button{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border:0;border-radius:9px;background:none;
  font:inherit;font-size:13px;font-weight:700;color:#3d4f6b;cursor:pointer}
.vcharge__tabs button.is-active{background:#fff;color:#14213d;box-shadow:0 1px 4px rgba(20,33,61,.12)}
.vcharge__tabs button i{width:7px;height:7px;border-radius:50%;background:#1f8a4c}
.vcharge__fields{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 16px}
.vcharge__fields label{display:grid;gap:4px;font-size:13px;font-weight:600;color:#3d4f6b}
.vcharge__fields input{font:inherit;font-size:14px;padding:6px 10px;border:1px solid #d9e1e8;border-radius:10px;background:#fff;color:#14213d}
.vcharge__fields input[type=number]{width:90px}
.vcharge__modes{grid-template-columns:repeat(3,auto)}
.vcharge__status{margin:0;font-size:13px;color:#5d6d7e}
.vcharge__tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px}
.vcharge__tiles div{display:grid;gap:2px;padding:9px 12px;border-radius:12px;background:#f6f8fa}
.vcharge__tiles span{font-size:12px;font-weight:600;color:#6b7b8c}
.vcharge__tiles b{font-size:16px;font-weight:800;color:#14213d;font-variant-numeric:tabular-nums}
.vcharge__chart{position:relative}
.vcharge__tooltip{position:absolute;top:8px;z-index:2;min-width:190px;padding:10px 12px;border-radius:12px;background:#fff;
  box-shadow:0 8px 24px rgba(20,33,61,.18);font-size:12.5px;pointer-events:none}
.vcharge__tooltip[hidden]{display:none}
.vcharge__tooltip b{display:block;margin-bottom:4px;color:#14213d}
.vcharge__tooltip p{display:flex;justify-content:space-between;gap:12px;margin:2px 0;color:#5d6d7e}
.vcharge__tooltip strong{color:#14213d;font-variant-numeric:tabular-nums}
.vcharge__tooltip .vcharge__why{display:block;margin-top:6px;color:#1f5fc9}
.vcharge__decision{display:grid;gap:3px;margin-top:10px;padding:12px 16px;border-radius:14px;background:#eef5ff;border-left:4px solid #2b7cf6}
.vcharge__decision b{font-size:20px;font-weight:800;color:#1f5fc9}
.vcharge__decision span{font-size:13px;color:#3d4f6b}
.vcharge__decision.is-buying{background:#fff4ef;border-left-color:#d9443a}
.vcharge__decision.is-buying b{color:#b8352c}
.vcharge__decision.is-off{background:#f6f8fa;border-left-color:#c9d3dc}
@media (max-width:900px){
  .vcharge__layout{grid-template-columns:minmax(0,1fr)}
  .vcharge__modes{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* The communes of a tariff: one "NPA Nom" per line */
.tariff__fields textarea{font:inherit;font-weight:500;padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;color:var(--navy);resize:vertical;min-height:90px}
.tariff__fields textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(58,154,99,.18)}
.tariff__fields label small{font-weight:500;color:#5d6b7a}