html:has(.eco-grille) { scrollbar-gutter: stable; }
.eco-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e4); align-items: start; }
.eco-principal { display: flex; flex-direction: column; gap: var(--e3); min-width: 0; }
.eco-cote { min-width: 0; }
@media (min-width: 1100px) {
  .eco-grille { grid-template-columns: minmax(0, 1fr) 272px; }
  .eco-cote { position: sticky; top: var(--e4); }
}
.eco-outils { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e3); }
.eco-outils .segments button { white-space: nowrap; }
.eco-nav { display: inline-flex; align-items: center; justify-content: center; gap: var(--e2); flex: 1 1 auto; }
.eco-nav-lib {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  flex: none; width: 19.5em; height: 40px; text-align: center;
  font-size: var(--t-sous); font-weight: 700; color: var(--ink);
}
.eco-nav-sem { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.25; }
.eco-ici {
  display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none;
  color: var(--acc); font: inherit; font-size: var(--t-label); font-weight: 650; line-height: 1.2; cursor: pointer;
}
.eco-ici:hover { text-decoration: underline; text-underline-offset: 2px; }
.eco-ici:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: 4px; }
.eco-menus { display: flex; flex-wrap: wrap; gap: var(--e2); }
.eco-deroule { position: relative; }
.eco-btn-f {
  display: inline-flex; align-items: center; gap: var(--e2); height: 36px; max-width: 100%; padding: 0 var(--e3) 0 var(--e4);
  border-radius: var(--pill); border: 1px solid var(--bord); background: var(--surface-2);
  color: var(--ink-2); font: inherit; font-size: var(--t-donnee); cursor: pointer;
  transition: border-color var(--tr-vif) var(--doux), color var(--tr-vif) var(--doux);
}
.eco-btn-f:hover, .eco-btn-f[aria-expanded="true"] { border-color: var(--acc-trait); color: var(--ink); }
.eco-btn-f b { display: inline-flex; align-items: center; gap: 3px; color: var(--ink); font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eco-btn-f .eco-pt { width: 8px; height: 11px; }
.eco-pop {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; max-width: calc(100vw - 32px);
  display: flex; flex-direction: column; gap: var(--e2); padding: var(--e3);
  border-radius: var(--r-lg); background: var(--surface-pleine); border: 1px solid var(--bord-fort); box-shadow: var(--om-3);
}
.eco-pop-dev { width: 424px; }
.eco-pop-imp { width: 230px; }
.eco-menus .eco-deroule:last-child .eco-pop { left: auto; right: 0; }
.eco-pop-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e2); padding: 2px 2px var(--e1); }
.eco-pop-rac { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--pill); background: var(--surface); border: 1px solid var(--bord); }
.eco-pop-rac button {
  height: 26px; padding: 0 var(--e3); border-radius: var(--pill); border: 0; background: transparent;
  color: var(--ink-3); font: inherit; font-size: var(--t-label); font-weight: 650; cursor: pointer;
}
.eco-pop-rac button:hover { color: var(--ink); }
.eco-pop-rac button[aria-checked="true"] { background: var(--acc-voile); color: var(--acc); box-shadow: inset 0 0 0 1px var(--acc-trait); }
.eco-pop-devs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.eco-opt-dev {
  position: relative; display: flex; align-items: center; gap: var(--e2); min-width: 0; padding: var(--e2) 26px var(--e2) var(--e2);
  border-radius: var(--r-md); border: 1px solid var(--bord); background: var(--surface);
  color: var(--ink-3); font: inherit; text-align: left; cursor: pointer;
  transition: border-color var(--tr-vif) var(--doux), background var(--tr-vif) var(--doux), color var(--tr-vif) var(--doux);
}
.eco-opt-dev:hover { border-color: var(--bord-fort); color: var(--ink-2); }
.eco-opt-dev .instr-ico.eco-ico { width: 22px; height: 22px; margin: 0; flex: none; opacity: .45; filter: saturate(.4); transition: opacity var(--tr-vif) var(--doux), filter var(--tr-vif) var(--doux); }
.eco-opt-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.eco-opt-txt b { font-size: var(--t-donnee); font-weight: 700; }
.eco-opt-txt small { font-size: var(--t-micro); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eco-opt-dev[aria-checked="true"] { border-color: var(--acc-trait); background: var(--acc-voile); color: var(--ink); }
.eco-opt-dev[aria-checked="true"] .instr-ico.eco-ico { opacity: 1; filter: none; }
.eco-opt-dev .eco-coche { position: absolute; top: 6px; right: 6px; width: 15px; height: 15px; }
.eco-opt-imp {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e3); padding: 7px var(--e2) 7px var(--e3);
  border-radius: var(--r-md); border: 1px solid transparent; background: transparent; font: inherit; cursor: pointer;
}
.eco-opt-imp:hover { background: var(--surface-3); }
.eco-opt-imp[aria-checked="false"] .eco-pil { opacity: .45; filter: saturate(.3); }
.eco-opt-imp[aria-checked="true"] { border-color: var(--bord); background: var(--surface); }
.eco-pil {
  display: inline-flex; align-items: center; height: 22px; padding: 0 var(--e3); border-radius: var(--pill);
  border: 1px solid transparent; font-size: var(--t-label); font-weight: 700; letter-spacing: .01em; white-space: nowrap;
}
.eco-pil-3 { background: var(--impact-fort-voile); border-color: var(--impact-fort-trait); color: var(--impact-fort-txt); }
.eco-pil-2 { background: var(--impact-moyen-voile); border-color: var(--impact-moyen-trait); color: var(--impact-moyen-txt); }
.eco-pil-1 { background: var(--impact-faible-voile); border-color: var(--impact-faible-trait); color: var(--impact-faible-txt); }
.eco-pil-0 { background: var(--impact-ferie-voile); border-color: var(--impact-ferie-trait); color: var(--impact-ferie-txt); }
.eco-pt { display: inline-block; flex: none; width: 11px; height: 12px; border-radius: 2px 4px 2px 2px; }
.eco-pt.eco-imp-3, .eco-traits .eco-imp-3 { background: var(--impact-fort); }
.eco-pt.eco-imp-2, .eco-traits .eco-imp-2 { background: var(--impact-moyen); }
.eco-pt.eco-imp-1, .eco-traits .eco-imp-1 { background: var(--impact-faible); }
.eco-pt.eco-imp-0, .eco-traits .eco-imp-0 { background: var(--impact-ferie); }
.eco-badge {
  display: inline-flex; align-items: center; height: 20px; padding: 0 var(--e2);
  border-radius: var(--pill); background: var(--acc-voile); color: var(--acc);
  font-size: var(--t-micro); font-weight: 700; white-space: nowrap; letter-spacing: 0; text-transform: none; vertical-align: 2px;
}
.eco-heure { white-space: nowrap; font-weight: 650; color: var(--ink); }
.eco-fait { display: none; }
.eco-passe .eco-fait { display: inline-flex; margin-left: 5px; color: var(--ink-3); vertical-align: -1px; }
.eco-etat {
  display: flex; align-items: center; width: fit-content; height: 20px; padding: 0 6px; margin-top: 4px;
  border-radius: var(--pill); background: var(--acc); color: var(--sur-acc);
  font-size: var(--t-micro); font-weight: 700; white-space: nowrap;
}
.eco-etat:empty { display: none; }
.eco-dev { white-space: nowrap; }
.eco-dev > b { font-weight: 650; vertical-align: middle; }
.instr-ico.eco-ico { display: inline-block; width: 20px; height: 20px; margin-right: var(--e2); vertical-align: middle; }
.instr-ico.eco-ico > .drap { inset: 0; }
.eco-monde { color: var(--ink-2); }
.eco-titre { color: var(--ink); }
.eco-publie { font-weight: 700; color: var(--ink); }
.eco-lb { display: none; }
.eco-plan {
  display: inline-flex; align-items: center; height: 18px; padding: 0 var(--e2); margin-left: 4px;
  border-radius: var(--pill); background: var(--acc-voile); color: var(--acc);
  font-size: var(--t-micro); font-weight: 650; white-space: nowrap; vertical-align: 1px; cursor: default;
}
.eco-semaine { padding: 0; gap: 0; overflow: hidden; }
.eco-t { font-size: var(--t-donnee); }
.eco-t thead th { padding: var(--e3) 10px; -webkit-backdrop-filter: none; backdrop-filter: none; }
.eco-t td { padding: 7px 10px; height: 38px; }
.eco-t tbody { border-top: 2px solid var(--bord-fort); }
.eco-t thead + tbody { border-top: 0; }
.eco-t tbody tr:last-child td { border-bottom: 0; }
.eco-t tbody:not(:last-child) tr:last-child td { border-bottom: 1px solid var(--bord); }
.eco-jt { display: none; }
.eco-t .eco-c-j { width: 84px; white-space: nowrap; vertical-align: top; padding-top: 10px; }
.eco-jn { display: block; font-weight: 700; color: var(--ink); line-height: 1.2; }
.eco-jm { display: block; font-size: var(--t-label); color: var(--ink-3); }
.eco-t .eco-c-h { width: 76px; }
.eco-t .eco-c-d { width: 96px; }
.eco-t .eco-c-i, .eco-t td.eco-impact { width: 88px; text-align: center; }
.eco-t .eco-c-n { width: 96px; }
.eco-t .eco-g.eco-auj td.eco-c-j { box-shadow: inset 3px 0 0 0 var(--acc); }
.eco-t .eco-g.eco-auj .eco-jn { color: var(--acc); }
.eco-t .eco-passe td:not(.eco-c-j) { opacity: .45; }
.eco-t .eco-passe td.eco-c-j { opacity: 1; }
.eco-t .eco-prochaine td:not(.eco-c-j) { background: var(--acc-voile); }
.eco-t .eco-prochaine td.eco-heure { box-shadow: inset 3px 0 0 var(--acc); }
.eco-t .eco-prochaine .eco-titre { font-weight: 650; }
.eco-t .eco-vide-l td { color: var(--ink-3); height: 40px; }
.eco-t tbody tr.eco-vide-l:hover { background: transparent; }
.eco-bande { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--e2); }
.eco-case-j {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; padding: 10px var(--e3) 11px;
  border-radius: var(--r-md); border: 1px solid var(--bord); background: var(--surface);
  color: var(--ink); font: inherit; text-align: left; cursor: pointer;
  transition: border-color var(--tr-vif) var(--doux), box-shadow var(--tr) var(--doux);
}
.eco-case-j:hover { border-color: var(--bord-fort); }
.eco-case-j.eco-passee { opacity: .62; }
.eco-case-j.eco-auj { border-color: var(--acc-trait); }
.eco-case-j[aria-pressed="true"] { opacity: 1; background: var(--grad-carte); box-shadow: var(--verre-bord), var(--om-2), inset 0 0 0 1.5px var(--acc); }
.eco-cj { display: flex; align-items: baseline; gap: 6px; width: 100%; }
.eco-cj small { font-size: var(--t-label); color: var(--ink-3); font-weight: 650; text-transform: uppercase; letter-spacing: .08em; }
.eco-cj b { font-size: var(--t-sous); letter-spacing: -.01em; }
.eco-cj .eco-badge { margin-left: auto; height: 17px; padding: 0 6px; }
.eco-traits { display: flex; flex-wrap: wrap; gap: 3px; min-height: 12px; }
.eco-traits i { width: 5px; height: 12px; border-radius: 2px; }
.eco-cn { font-size: var(--t-label); color: var(--ink-3); font-weight: 600; min-height: 1.2em; }
.eco-journee.eco-auj { box-shadow: var(--verre-bord), var(--om-2), inset 0 0 0 1px var(--acc-trait); }
.eco-frise { position: relative; display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.eco-frise::before { content: ""; position: absolute; left: 83px; top: 14px; bottom: 14px; width: 2px; border-radius: 2px; background: var(--bord-fort); }
.eco-fr {
  position: relative; display: grid; grid-template-columns: 66px 36px minmax(0, 1fr) auto; align-items: start; gap: 0 4px;
  padding: 10px 0; border-bottom: 1px solid var(--bord);
}
.eco-fr:last-child { border-bottom: 0; }
.eco-fr-h { font-size: var(--t-corps); padding-top: 1px; }
.eco-fr-pt {
  position: relative; z-index: 1; justify-self: center; margin-top: 5px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--c-imp, var(--ink-4)); box-shadow: 0 0 0 4px var(--surface-pleine);
}
.eco-fr-3 { --c-imp: var(--impact-fort); } .eco-fr-2 { --c-imp: var(--impact-moyen); } .eco-fr-1 { --c-imp: var(--impact-faible); } .eco-fr-0 { --c-imp: var(--impact-ferie); }
.eco-fr-c { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.eco-fr-c .eco-titre { margin: 0; font-weight: 600; line-height: 1.35; }
.eco-fr-m { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--e3); margin: 0; font-size: var(--t-label); color: var(--ink-3); }
.eco-fr-m .instr-ico.eco-ico { width: 16px; height: 16px; margin-right: 6px; }
.eco-fr-n { display: flex; gap: var(--e4); margin: 0; padding-left: var(--e3); }
.eco-fr-n div { display: flex; flex-direction: column; align-items: flex-end; }
.eco-fr-n dt { font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 650; }
.eco-fr-n dd { margin: 0; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--ink); }
.eco-fr.eco-passe > * { opacity: .5; }
.eco-fr.eco-passe .eco-fr-pt { opacity: 1; background: var(--ink-4); }
.eco-fr.eco-prochaine { border-radius: var(--r-sm); background: linear-gradient(90deg, var(--acc-voile), transparent 75%); }
.eco-fr.eco-prochaine .eco-fr-pt { box-shadow: 0 0 0 3px var(--surface-pleine), 0 0 0 5px var(--acc); }
.eco-fr.eco-prochaine .eco-titre { font-weight: 700; }
.eco-fr-maint { position: relative; display: grid; grid-template-columns: 66px 36px minmax(0, 1fr); align-items: center; gap: 0 4px; padding: 4px 0; }
.eco-fr-maint .eco-fr-h { font-size: var(--t-label); font-weight: 700; color: var(--acc); }
.eco-fr-maint i { position: relative; z-index: 1; justify-self: center; width: 10px; height: 10px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 0 4px var(--acc-voile); }
.eco-fr-maint > span:last-child { display: flex; align-items: center; gap: var(--e2); font-size: var(--t-label); font-weight: 700; color: var(--acc); text-transform: uppercase; letter-spacing: .1em; }
.eco-fr-maint > span:last-child::after { content: ""; flex: 1; border-top: 1.5px dashed var(--acc-trait); }
.eco-rien { margin: 0; color: var(--ink-3); font-size: var(--t-donnee); }
.eco-suite {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--e3); width: 100%; margin-top: var(--e2); padding: var(--e3) var(--e4);
  border-radius: var(--r-md); border: 1px solid var(--acc-trait); background: var(--acc-brume);
  color: var(--ink-2); font: inherit; font-size: var(--t-donnee); text-align: left; cursor: pointer;
}
.eco-suite:hover { border-color: var(--acc); }
.eco-suite .lb { width: 100%; }
.eco-suite b { color: var(--ink); font-weight: 650; }
.eco-suite .instr-ico.eco-ico { margin-right: 0; }
.eco-suite-dans { font-size: var(--t-label); font-weight: 700; color: var(--acc); }
.eco-taux { width: 100%; border-collapse: collapse; font-size: var(--t-donnee); }
.eco-taux th, .eco-taux td { padding: 9px 6px; border-bottom: 1px solid var(--bord); text-align: left; }
.eco-taux thead th {
  position: static; padding: 0 6px var(--e2); background: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  font-size: var(--t-label); font-weight: 650; color: var(--ink-3);
}
.eco-taux .num { text-align: right; }
.eco-taux tr:last-child td { border-bottom: 0; }
.eco-taux td b { font-weight: 700; color: var(--ink); }
@media (max-width: 640px) {
  .eco-nav { order: -1; width: 100%; justify-content: space-between; align-items: flex-start; }
  .eco-nav-lib { flex: 1; width: auto; min-width: 0; height: auto; min-height: 40px; font-size: var(--t-corps); }
  .eco-nav-sem { white-space: normal; }
  .eco-menus { width: 100%; }
  .eco-menus .eco-deroule:last-child .eco-pop { left: auto; right: 0; }
  .eco-t thead, .eco-t .eco-c-j { display: none; }
  .eco-t, .eco-t tbody, .eco-t tr { display: block; }
  .eco-t tbody { border-top: 0; }
  .eco-t tr.eco-jt { display: block; }
  .eco-t tr.eco-jt th {
    display: flex; align-items: center; gap: var(--e2); padding: var(--e3) var(--e4) 6px; text-align: left;
    font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 700;
    background: var(--surface-2); border-bottom: 1px solid var(--bord); position: static;
  }
  .eco-t tr.eco-ligne {
    display: grid; grid-template-columns: 46px auto auto minmax(0, 1fr); grid-template-areas: "h t t t" "h d i ." "h u p a";
    align-items: center; gap: 4px var(--e3); padding: 9px var(--e4); border-bottom: 1px solid var(--bord);
  }
  .eco-t tr.eco-ligne td { display: block; padding: 0; border: 0; height: auto; width: auto; background: none; }
  .eco-t tbody:not(:last-child) tr.eco-ligne:last-child td { border-bottom: 0; }
  .eco-t tr.eco-ligne.eco-prochaine td:not(.eco-c-j) { background: none; }
  .eco-t tr.eco-ligne td.eco-c-j { display: none; }
  .eco-t tr.eco-ligne.eco-prochaine { background: var(--acc-voile); box-shadow: inset 3px 0 0 var(--acc); }
  .eco-t tr.eco-ligne.eco-prochaine td.eco-heure { box-shadow: none; }
  .eco-t .eco-ligne .eco-heure { grid-area: h; align-self: start; }
  .eco-passe .eco-heure .eco-fait { display: flex; margin: 3px 0 0; }
  .eco-t .eco-ligne .eco-impact { grid-area: i; text-align: left; }
  .eco-t .eco-ligne .eco-titre { grid-area: t; font-weight: 600; }
  .eco-t .eco-ligne .eco-dev { grid-area: d; font-size: var(--t-label); }
  .eco-t .eco-ligne .eco-dev .instr-ico.eco-ico { width: 15px; height: 15px; margin-right: 5px; }
  .eco-t .eco-ligne .eco-publie { grid-area: u; }
  .eco-t .eco-ligne .eco-prevu { grid-area: p; }
  .eco-t .eco-ligne .eco-avant { grid-area: a; }
  .eco-t .eco-ligne .eco-publie, .eco-t .eco-ligne .eco-prevu, .eco-t .eco-ligne .eco-avant { font-size: var(--t-label); color: var(--ink-2); text-align: left; }
  .eco-t .eco-ligne .eco-publie { color: var(--ink); }
  .eco-t .eco-lb { display: inline; color: var(--ink-3); font-weight: 500; }
  .eco-t tr.eco-vide-l { display: block; }
  .eco-t tr.eco-vide-l td { display: block; border: 0; }
  .eco-t tr.eco-vide-l td.eco-c-j { display: none; }
  .eco-t tr.eco-vide-l td + td { height: auto; padding: var(--e2) var(--e4); }
  .eco-t tr.eco-vide-l td + td:empty { display: none; }
  .eco-bande { display: flex; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 4px; }
  .eco-case-j { flex: 0 0 86px; scroll-snap-align: start; padding: var(--e2) 9px; }
  .eco-cj .eco-badge { display: none; }
  .eco-frise::before { left: 63px; }
  .eco-fr { grid-template-columns: 46px 30px minmax(0, 1fr); grid-template-areas: "h p c" ". . n"; }
  .eco-fr-h { grid-area: h; font-size: var(--t-donnee); }
  .eco-fr-pt { grid-area: p; }
  .eco-fr-c { grid-area: c; }
  .eco-fr-n { grid-area: n; padding: 4px 0 0; }
  .eco-fr-n div { align-items: flex-start; }
  .eco-fr-maint { grid-template-columns: 46px 30px minmax(0, 1fr); }
}