/* Outil · Consommation (Power use), id conso : seulement ce qui lui est propre (le reste vient de app/kit.css).
   Préfixe des classes : co-
   À gauche : la puissance totale, le courant, la part d'une prise, par jour, par mois ; la jauge (la part d'une prise,
   repère à 80 %) ; l'info ; le lien vers Prises du monde. À droite : le pays et le prix du kWh, le catalogue (puces par
   famille), ton matériel (zone de hauteur fixe : quantité, watts, heures par jour). */
.co .outil-fixe { align-items: stretch; }
.co-carte { display: flex; flex-direction: column; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--filet-doux); padding: 6px 18px 4px; }
.co-grand { display: flex; justify-content: space-between; align-items: center; gap: 12px; height: 76px; border-bottom: 1px solid var(--filet-doux); }
.co-grand span { font: var(--repere); letter-spacing: .1em; color: var(--texte2); white-space: nowrap; }
.co-grand b { font: 700 clamp(26px, 7vw, 34px)/1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--peche); white-space: nowrap; }
.co-rangee { cursor: default; height: 44px; align-items: center; }
.co-rangee:last-child { border-bottom: 0; }
.co-rangee:hover .nom { color: var(--papier); }
.co-rangee .val { font-variant-numeric: tabular-nums; }
.co-rangee .val[data-etat="charge"], .co-rangee .val[data-etat="trop"] { color: var(--peche); }
.co-jauge { position: relative; height: 8px; border-radius: 4px; background: rgba(242, 240, 235, .1); }
.co-jauge i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--papier); transition: width .4s var(--courbe), background .4s var(--courbe); }
.co-jauge i[data-etat="charge"], .co-jauge i[data-etat="trop"] { background: var(--orange); }
.co-jauge b { position: absolute; left: 80%; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--texte2); }
.co-info { flex: none; height: 2lh; margin: 0; overflow: hidden; }
.co-actions { display: flex; justify-content: center; }

.co-deux { display: grid; grid-template-columns: 1.5fr 1fr; gap: 12px; align-items: end; }
.co-champ { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.co select.saisie { appearance: none; -webkit-appearance: none; cursor: pointer; color: var(--papier); font: 500 15px/1.2 var(--corps); min-height: 48px;
  background-image: linear-gradient(45deg, transparent 50%, var(--texte2) 50%), linear-gradient(-45deg, transparent 50%, var(--texte2) 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.co-catalogue { display: flex; flex-direction: column; gap: 8px; }
.co-famille { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }   /* une ligne par famille, qui défile de côté (le kit les met sur plusieurs lignes sur ordinateur) */
.co-famille::-webkit-scrollbar { display: none; }
.co-famille .puce:disabled { opacity: .3; cursor: default; }
.co-liste { height: 300px; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 6px; }
.co-ligne { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto 76px 86px 30px; gap: 8px; align-items: center; min-height: 52px; padding: 0 4px 0 14px;
  border-radius: 12px; box-shadow: inset 0 0 0 1px var(--filet-doux); }
.co-nom { font: 500 13.5px/1.25 var(--corps); color: var(--papier); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.co-qte { display: flex; align-items: center; gap: 2px; }
.co-qte b { min-width: 20px; text-align: center; font: 600 14px/1 var(--mono); font-variant-numeric: tabular-nums; }
.co-mini { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: none; display: grid; place-items: center; cursor: pointer; color: var(--texte2); font: 400 17px/1 var(--corps); }
.co-mini:hover { color: var(--papier); background: rgba(242, 240, 235, .06); }
.co-mini svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.co-petit { position: relative; display: block; }
.co-petit input { width: 100%; height: 36px; border: 0; outline: none; border-radius: 10px; background: var(--encre); box-shadow: inset 0 0 0 1px var(--filet);
  padding: 0 30px 0 8px; text-align: right; color: var(--papier); font: 600 13px/1 var(--mono); font-variant-numeric: tabular-nums; }
.co-petit input:focus { box-shadow: inset 0 0 0 1.5px var(--papier); }
.co-petit i { position: absolute; right: 7px; top: 50%; translate: 0 -50%; font: 500 9.5px/1 var(--mono); font-style: normal; color: var(--texte2); pointer-events: none; }
.co-petit:last-of-type input { padding-right: 34px; }
.co-vide { margin: 40px 0; text-align: center; font: var(--valeur); letter-spacing: .06em; color: var(--texte2); }
@media (max-width: 959px) { .co .outil-defile > :nth-child(2), .co .outil-defile > :nth-child(3) { order: -1; } }
@media (max-width: 420px) { .co-ligne { grid-template-columns: minmax(0, 1fr) auto 30px; grid-template-areas: "nom qte x" "w h h"; padding: 8px 4px 8px 12px; row-gap: 6px; }
  .co-nom { grid-area: nom; } .co-qte { grid-area: qte; } .co-suppr { grid-area: x; } .co-petit:nth-of-type(1) { grid-area: w; } .co-petit:nth-of-type(2) { grid-area: h; } }