/* ---------------------------------------------------------------------------
   RCP Solaire — jetons de couleur.
   Theme sombre unique : les pas de la palette de series sont choisis pour ce
   fond precis, ce n'est pas l'inversion automatique d'un theme clair.
   --------------------------------------------------------------------------- */
:root {
    color-scheme: dark;

    --page: #090909;
    --surface-1: #1a1a19;
    --surface-2: #242423;
    --ink: #ffffff;
    --ink-2: #c3c2b7;
    --muted: #898781;
    --rule: #2c2c2a;
    --axis: #383835;
    --border: rgba(255, 255, 255, .10);

    /* deux series du decompte */
    --solar: #e0a63a;
    --grid: #3987e5;

    /* batterie : deux sens d'un meme flux, hors palette des compteurs pour ne pas
       changer de sens quand un compteur est ajoute */
    --batt-in: #9a7bf0;
    --batt-out: #17b3a3;

    /* series par compteur (slots 1 a 6, ordre fixe) */
    --s1: #3987e5;
    --s2: #d95926;
    --s3: #199e70;
    --s4: #c98500;
    --s5: #9a7bf0;
    --s6: #008300;

    --good: #0ca30c;
    --warn: #fab219;
    --bad: #d03b3b;

    /* Filets marques : ligne de total des tableaux. Jamais --ink, qui vaut ici du
       blanc pur et transformerait un filet en barre lumineuse. */
    --tile-rule: #6a6862;

    --radius: 14px;
    --radius-sm: 9px;
    --shadow: none;
    /* Sur fond sombre une ombre portee ne detache plus rien : un biseau interne
       prend le relais, sans quoi tuiles et cartes se fondent dans la page. */
    --tile-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 10px 24px rgba(0, 0, 0, .45);

    --gap: 22px;
    --pad: 28px;
}

* {
    box-sizing: border-box;
}

/* hidden doit l'emporter sur les display des composants (modale, legende...) */
[hidden] {
    display: none !important;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    background: var(--page);
    color: var(--ink);
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4 {
    margin: 0;
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* ------------------------------------------------------------------ topbar */

.topbar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px var(--pad);
    padding-top: max(10px, env(safe-area-inset-top));
    background: var(--surface-1);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.brand {
    display: flex;
    align-items: center;
    gap: 9px;
    font-weight: 650;
    font-size: 16px;
    color: var(--ink);
}

.brand svg {
    color: var(--solar);
    flex: none;
}

.topbar-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 4px;
}

.user {
    color: var(--ink-2);
    font-size: 13px;
    padding: 0 4px;
}

.inline {
    display: inline;
    margin: 0;
}

/* bandeau temps reel : une ligne a lui seul, defilable au doigt */
.live-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    background: var(--surface-2);
    border-radius: 999px;
    padding: 4px 11px;
}

.live-item b {
    color: var(--ink);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* l'heure et la meteo, sur une seule pastille a cote de l'etat de la passerelle */
.live-meta {
    color: var(--muted);
    gap: 5px;
}

.live-meta b {
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.live-sep {
    opacity: 0.5;
}

.wx-icon {
    font-size: 14px;
    line-height: 1;
}

/* sur un ecran etroit, les trois pastilles passent a la ligne plutot que de deborder */
.head-tools-live {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

.live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--muted);
    flex: none;
}

.live-dot.is-on {
    background: var(--good);
}

.live-dot.is-off {
    background: var(--bad);
}

/* ------------------------------------------------------------------ onglets */

.stickhead {
    background: var(--surface-1);
}

/* sur grand ecran, onglets et filtres collent ensemble : la periode reste
   toujours a portee de main pendant qu'on parcourt les tableaux */
@media (min-width: 761px) {
    .stickhead {
        position: sticky;
        top: 0;
        z-index: 18;
    }
}

.tabs {
    display: flex;
    gap: 2px;
    padding: 0 var(--pad);
    background: var(--surface-1);
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    scrollbar-width: none;
}

.tabs::-webkit-scrollbar {
    display: none;
}

.tab {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--ink-2);
    font: inherit;
    font-size: 14px;
    font-weight: 550;
    padding: 13px 16px 11px;
    cursor: pointer;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.tab:hover {
    color: var(--ink);
}

.tab.is-active {
    color: var(--ink);
    border-bottom-color: var(--solar);
}

.tab-ico {
    color: var(--muted);
    font-size: 13px;
    line-height: 1;
}

.tab.is-active .tab-ico {
    color: var(--solar);
}

/* libelle court : reserve au doigt */
.tab-txt-sm {
    display: none;
}

/* ----------------------------------------------------------------- filtres */

.filters {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    flex-wrap: wrap;
    padding: 14px var(--pad);
    background: var(--surface-1);
    border-bottom: 1px solid var(--border);
}

.filter-group {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

/* les intitules de periode sont plus longs que « Du » ou « Au » : sans largeur
   minimale, le menu se refermait sur « Mois précédent » coupe */
#period {
    min-width: 152px;
}

.filter-actions {
    margin-left: auto;
}

.chip {
    appearance: none;
    /* --border a 10 % se lisait comme du texte, pas comme un bouton */
    border: 1px solid var(--axis);
    background: transparent;
    color: var(--ink-2);
    padding: 7px 13px;
    border-radius: 999px;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s, color .12s, border-color .12s;
}

.chip:hover {
    background: var(--surface-2);
    color: var(--ink);
}

.chip.is-active {
    background: var(--ink);
    color: var(--surface-1);
    border-color: var(--ink);
}

.field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: var(--muted);
    min-width: 0;
}

.field > span {
    padding-left: 2px;
}

.field input,
.field select {
    font: inherit;
    font-size: 15px;
    color: var(--ink);
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 7px 10px;
    min-height: 38px;
    max-width: 100%;
}

/* Une case a cocher dans un formulaire en grille : le libelle passe a droite, et la case
   s'aligne sur le bas des champs voisins plutot que de flotter au milieu de sa cellule. */
.field-check {
    flex-direction: row;
    align-items: center;
    gap: 9px;
    align-self: end;
    min-height: 38px;
}

.field-check input {
    accent-color: var(--good);
    width: 16px;
    height: 16px;
    min-height: 0;
    cursor: pointer;
}

.field-check > span {
    font-size: 13px;
    color: var(--ink-2);
    padding-left: 0;
}

.field input:focus-visible,
.field select:focus-visible,
.chip:focus-visible,
.tab:focus-visible,
.btn:focus-visible {
    outline: 2px solid var(--grid);
    outline-offset: 2px;
}

.btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid var(--border);
    background: var(--surface-1);
    color: var(--ink);
    padding: 8px 14px;
    border-radius: 8px;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    text-decoration: none;
    min-height: 38px;
    white-space: nowrap;
}

.btn:hover {
    background: var(--surface-2);
}

.btn-ghost {
    border-color: transparent;
    background: transparent;
    color: var(--ink-2);
}

.btn-ghost:hover {
    background: var(--surface-2);
    color: var(--ink);
}

.btn-primary {
    background: var(--ink);
    color: var(--surface-1);
    border-color: var(--ink);
}

.btn-primary:hover {
    opacity: .9;
    background: var(--ink);
}

/* -------------------------------------------------------------------- page */

.page {
    /* pleine largeur : les tableaux du decompte gagnent a s'etaler, et les blocs
       de texte gardent leur propre limite de lisibilite (max-width en ch) */
    max-width: none;
    margin: 0 auto;
    padding: var(--pad);
    padding-bottom: max(var(--pad), env(safe-area-inset-bottom));
}

.page.is-loading {
    opacity: .55;
    transition: opacity .15s;
}

.panel {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

.alert {
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    font-size: 14px;
    margin-bottom: var(--gap);
}

.alert-warn {
    background: color-mix(in srgb, var(--warn) 14%, var(--surface-1));
    color: var(--ink);
}

.alert-bad {
    background: color-mix(in srgb, var(--bad) 12%, var(--surface-1));
    color: var(--ink);
}

.alert-ok {
    background: color-mix(in srgb, var(--good) 12%, var(--surface-1));
    color: var(--ink);
}

/* ------------------------------------------------------------------- tuiles */

.tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
}

.tile {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 20px;
    box-shadow: var(--tile-shadow);
    min-width: 0;
}

.tile h2 {
    font-size: 11px;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--muted);
}

.tile-gauge {
    display: flex;
    align-items: center;
    gap: 14px;
}

.tile-txt {
    min-width: 0;
    flex: 1;
}

.tile-gauge .gauge {
    flex: none;
}

/* Les chiffres sont le sujet de l'application : chasse fixe pour qu'ils s'alignent
   d'une tuile a l'autre, approche resserree pour qu'ils se tiennent comme un nombre
   et non comme une suite de caracteres. */
.hero {
    margin: 10px 0 4px;
    font-size: 38px;
    line-height: 1.02;
    font-weight: 600;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

.hero-sm {
    font-size: 27px;
    letter-spacing: -0.02em;
}

.tile-hero .hero {
    font-size: 46px;
}

.tile-sub {
    margin: 0;
    font-size: 13px;
    color: var(--ink-2);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* ces deux sous-titres portent du texte suivi, pas des pastilles :
   la mise en ligne flex y couperait les phrases */
#k-total-sub,
#k-cost-sub {
    display: block;
}

.tile-note {
    display: block;
    color: var(--muted);
    font-size: 12px;
}

.swatch {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    display: inline-block;
    flex: none;
    /* la pastille ne colle pas au texte qu'elle annonce */
    margin-right: 6px;
}

/* le sous-total du pot commun ferme le groupe « reparti au millieme » */
.rt tr.gap-sum td {
    border-top: 1px solid var(--rule);
    color: var(--ink);
}

/* solaire et reseau l'un sous l'autre, alignes sur leur pastille */
.share-mix {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 8px;
}

.swatch-solar {
    background: var(--solar);
}

.swatch-grid {
    background: var(--grid);
}

/* ------------------------------------------------------------------- cartes */

.card {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--tile-shadow);
    min-width: 0;
}

.card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.card-head h2 {
    font-size: 17px;
    letter-spacing: -0.015em;
}

.card-sub {
    margin: 3px 0 0;
    font-size: 13px;
    color: var(--muted);
    max-width: 70ch;
}

.legend {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--ink-2);
}

.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.legend-swatch {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex: none;
    display: inline-block;
}

.head-tools {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.chip-sm {
    padding: 5px 11px;
    font-size: 12px;
}

.btn-sm {
    padding: 6px 11px;
    font-size: 12.5px;
    min-height: 32px;
}

/* deux blocs cote a cote, qui passent l'un sous l'autre quand la place manque */
.split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}

.split-2-3 {
    grid-template-columns: minmax(240px, 2fr) minmax(280px, 3fr);
}

.split-col {
    min-width: 0;
}

/* un graphique seul sur toute la largeur de la carte, sous une rangee de deux */
.chart-row {
    min-width: 0;
    margin-top: 24px;
}

.split-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

/* titres de graphique : assez grands pour se detacher de la legende posee a cote */
.split-head h3,
.split-title {
    font-size: 15px;
    color: var(--ink);
    font-weight: 600;
}

.split-title {
    margin-bottom: 8px;
}

.sub-head {
    font-size: 13px;
    margin: 22px 0 10px;
    color: var(--ink-2);
    font-weight: 600;
}

/* ------------------------------------------------------------- graphiques */

.chart {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.chart svg {
    display: block;
}

/* Les secteurs et les barres sont focalisables au clavier et ouvrent une infobulle :
   sans contour, on ne sait pas a quoi elle se rapporte. */
.chart :focus-visible {
    outline: 2px solid var(--grid);
    outline-offset: 1px;
    border-radius: 2px;
}

.chart-empty {
    padding: 36px 0;
    text-align: center;
    color: var(--muted);
    font-size: 14px;
}

/* anneau de repartition : le dessin, puis la legende chiffree */
.donut {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.donut-svg {
    flex: none;
}

/* survol : la part visee reste vive, les autres s'effacent — la lecture se fait
   sans chercher la couleur dans la legende */
.donut-seg {
    cursor: pointer;
    transition: opacity .15s, filter .15s;
}

.donut-svg:hover .donut-seg,
.donut-svg:focus-within .donut-seg {
    opacity: .35;
}

.donut-svg .donut-seg:hover,
.donut-svg .donut-seg:focus {
    opacity: 1;
    filter: brightness(1.12);
}

.donut-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1 1 190px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-size: 13px;
}

.donut-legend li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 6px;
}

.donut-legend li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.dl-key {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--ink-2);
    min-width: 0;
}

.dl-val {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.dl-val b {
    font-weight: 650;
    color: var(--ink);
}

.dl-abs {
    display: block;
    font-size: 11.5px;
    color: var(--muted);
}

.gauge svg {
    display: block;
}

/* ------------------------------------------------------------ flux en direct */

.flow {
    display: flex;
    justify-content: center;
    overflow-x: auto;
    scrollbar-width: none;
}

.flow svg {
    display: block;
}

/* Les tirets avancent dans le sens du flux : c'est ce mouvement, pas la couleur,
   qui dit qu'il se passe quelque chose en ce moment. */
.flow-link.is-live {
    stroke-dasharray: 7 11;
    animation: flow-dash 1.1s linear infinite;
}

@keyframes flow-dash {
    to {
        stroke-dashoffset: -36;
    }
}

@media (prefers-reduced-motion: reduce) {
    .flow-link.is-live {
        animation: none;
    }
}

/* ------------------------------------------------------------------ encadre */

/* Le filet gauche distingue l'encadre (un chiffre isole a lire) de la keybox
   (une liste de valeurs de contexte), qui partagent sinon exactement la meme forme. */
.callout {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-left: 4px solid var(--axis);
    border-radius: var(--radius-sm);
    padding: 15px 15px 15px 19px;
}

.callout.is-warn {
    background: color-mix(in srgb, var(--warn) 12%, var(--surface-1));
}

.callout-fig {
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.callout-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
}

.callout-txt {
    margin: 3px 0 0;
    font-size: 13px;
    color: var(--ink-2);
    max-width: 80ch;
}

.callout-more {
    color: var(--muted);
}

/* --------------------------------------------------------- charges communes */

.keybox {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 15px 17px;
}

.keybox-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
}

.keybox-values {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin-top: 8px;
}

.key-item {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    font-size: 14px;
    color: var(--ink);
}

.key-item b {
    font-size: 17px;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

.key-item .key-unit {
    font-size: 11.5px;
    color: var(--muted);
}

.keybox-sub {
    margin-top: 10px;
    font-size: 12.5px;
    color: var(--ink-2);
}

.owner-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
    margin-bottom: 4px;
}

.owner-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    background: var(--surface-1);
    border-top: 3px solid var(--s1);
    min-width: 0;
}

.owner-card .owner-name {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    font-weight: 650;
    font-size: 14px;
    color: var(--ink);
}

.owner-card .owner-mille {
    font-size: 11.5px;
    color: var(--muted);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Repere du boitier : discret, mais toujours la quand on doit remonter au cablage */
.owner-card .owner-ref {
    margin-top: 3px;
    font-size: 11px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

/* Montants compares d'une carte a l'autre : sans chiffres tabulaires ils dansent */
.owner-card .owner-total {
    margin: 8px 0 2px;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

.owner-card .owner-cur {
    font-size: 14px;
    color: var(--ink-2);
    font-weight: 500;
    margin-left: 3px;
}

/* Un bloc = une lecture du montant. L'intitule dit ce qui est decompose, et la
   derniere ligne rappelle le total sur lequel le bloc boucle : sans cela, deux
   blocs a la suite se lisent comme une seule addition. */
.owner-card .owner-group {
    margin-top: 10px;
}

.owner-card .owner-group-label {
    display: block;
    font-size: 10.5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
}

/* Petit tableau croise dans la carte : l'energie en colonnes, l'origine en lignes.
   Tout tient sur une ligne par poste — un intitule qui se coupe en deux ferait
   perdre l'alignement des montants, seul interet du tableau. */
.owner-card .owner-matrix {
    width: 100%;
    margin-top: 6px;
    border-collapse: collapse;
    font-size: 12px;
    color: var(--ink-2);
    table-layout: fixed;
}

.owner-card .owner-matrix th,
.owner-card .owner-matrix td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.owner-card .owner-matrix th {
    font-weight: 600;
    font-size: 10.5px;
    letter-spacing: 0.02em;
    color: var(--muted);
    text-align: right;
    padding: 0 0 4px;
    border-bottom: 1px solid var(--rule);
}

.owner-card .owner-matrix th:first-child {
    text-align: left;
}

/* la pastille de couleur reste collee a son intitule, en tete de colonne */
.owner-card .owner-matrix th .swatch {
    width: 8px;
    height: 8px;
    margin-right: 4px;
}

.owner-card .owner-matrix td {
    padding: 3px 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.owner-card .owner-matrix td:first-child {
    text-align: left;
    padding-right: 10px;
    color: var(--muted);
}

.owner-card .owner-matrix tfoot td {
    border-top: 1px solid var(--rule);
    padding-top: 4px;
    color: var(--ink);
    font-weight: 600;
}

.owner-card .owner-matrix tfoot td:first-child {
    color: var(--ink);
}

.owner-card .owner-sum {
    margin-top: 3px;
    padding-top: 3px;
    border-top: 1px solid var(--rule);
    color: var(--ink);
}

.owner-card .owner-split {
    font-size: 12.5px;
    color: var(--ink-2);
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.owner-card .owner-split span {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

/* le montant colle a droite, meme quand la ligne porte une pastille de couleur */
.owner-card .owner-split b {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    margin-left: auto;
    padding-left: 10px;
}

.owner-card .owner-mix {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 12px;
    color: var(--ink-2);
}

/* barre solaire / réseau, avec 2px de surface entre les deux segments */
.owner-card .mix-bar {
    display: flex;
    height: 7px;
    border-radius: 4px;
    overflow: hidden;
    gap: 2px;
    margin-bottom: 5px;
}

.owner-card .mix-bar span {
    display: block;
    border-radius: 2px;
}

.owner-card .mix-line {
    display: flex;
    align-items: center;
    gap: 6px;
}

.owner-card .mix-line b {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* d'ou vient ce solaire : son compteur, ou sa part des communs */
.owner-card .mix-sub {
    margin: -2px 0 2px 18px;
    font-size: 11.5px;
    color: var(--muted);
}

.owner-card .owner-kwh {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--rule);
    font-size: 12px;
    color: var(--muted);
}

/* --------------------------------------------------------------- tableaux */

.table-view {
    margin-top: 12px;
}

.table-view summary {
    cursor: pointer;
    font-size: 13px;
    color: var(--ink-2);
    padding: 6px 0;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Chevron dessine en CSS : le marqueur natif change d'un navigateur a l'autre */
.table-view summary::-webkit-details-marker {
    display: none;
}

.table-view summary::before {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg);
    transition: transform .15s;
    flex: none;
}

.table-view[open] summary::before {
    transform: rotate(45deg);
}

.table-view summary:hover {
    color: var(--ink);
}

/* Barre de defilement visible ici, contrairement au reste de l'app : sur un tableau
   a huit colonnes, rien d'autre n'indique qu'il reste des colonnes a droite. */
.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 14px;
    scrollbar-width: thin;
    scrollbar-color: var(--axis) transparent;
}

.table-wrap::-webkit-scrollbar {
    height: 6px;
}

.table-wrap::-webkit-scrollbar-thumb {
    background: var(--axis);
    border-radius: 999px;
}

.table-wrap::-webkit-scrollbar-track {
    background: transparent;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

th, td {
    text-align: right;
    padding: 9px 10px;
    border-bottom: 1px solid var(--rule);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

th:first-child, td:first-child {
    text-align: left;
    font-variant-numeric: normal;
}

thead th {
    color: var(--muted);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 1px solid var(--axis);
}

tbody tr:hover {
    background: var(--surface-2);
}

/* La ligne la plus importante d'un decompte envoye aux coproprietaires : elle doit
   se voir au premier coup d'oeil, y compris imprimee en noir et blanc. */
tfoot td {
    background: var(--surface-2);
    font-weight: 650;
    font-size: 14px;
    border-top: 2px solid var(--tile-rule);
    border-bottom: none;
    padding-top: 11px;
    padding-bottom: 11px;
}

td .dot {
    width: 9px;
    height: 9px;
    border-radius: 3px;
    display: inline-block;
    margin-right: 7px;
    vertical-align: baseline;
}

td .unit {
    color: var(--muted);
}

.month-head td {
    background: var(--surface-2);
    font-weight: 650;
    color: var(--ink);
}

.month-row td:first-child {
    padding-left: 26px;
}

/* la ligne de l'ecart non mesure : presente au meme titre que les compteurs,
   mais visiblement d'une autre nature */
.gap-row td {
    color: var(--ink-2);
    background: var(--surface-2);
}

.row-note {
    display: block;
    font-size: 11.5px;
    color: var(--muted);
    padding-left: 16px;
}

/* tableau intitule / valeur : deux colonnes, l'intitule peut revenir a la ligne */
table.kv td:first-child,
table.kv th:first-child {
    white-space: normal;
}

table.kv td:last-child {
    width: 1%;
}

/* ------------------------------------------------------------ page methode */

.panel-doc .card p {
    font-size: 14px;
    color: var(--ink-2);
    max-width: 80ch;
}

.panel-doc .note {
    font-size: 13px;
    color: var(--muted);
    border-left: 2px solid var(--rule);
    padding-left: 12px;
}

.steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 22px;
    counter-reset: step;
}

.steps > li {
    border-left: 2px solid var(--rule);
    padding-left: 16px;
}

.steps h3 {
    font-size: 14.5px;
    margin-bottom: 4px;
}

.bullets {
    margin: 10px 0;
    padding-left: 20px;
    font-size: 14px;
    color: var(--ink-2);
    max-width: 80ch;
}

.bullets li {
    margin-bottom: 10px;
}

.mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    background: var(--surface-2);
    border-radius: 5px;
    padding: 1px 6px;
}

/* les formules : le nom a gauche, l'expression a droite, empilees si besoin */
.formulas {
    margin: 0;
    display: flex;
    flex-direction: column;
}

.formulas > div {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) minmax(0, 2.2fr);
    gap: 8px 20px;
    padding: 12px 0;
    border-bottom: 1px solid var(--rule);
}

.formulas > div:last-child {
    border-bottom: none;
}

.formulas dt {
    font-weight: 600;
    font-size: 14px;
    color: var(--ink);
}

.formulas dd {
    margin: 0;
    min-width: 0;
}

.formulas code {
    display: inline-block;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--ink);
    background: var(--surface-2);
    border-radius: 6px;
    padding: 3px 8px;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.formulas dd span {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: var(--muted);
}

@media (max-width: 760px) {
    .formulas > div {
        grid-template-columns: 1fr;
        gap: 6px;
    }
}

/* ---------------------------------------------------------------- tooltip */

.tooltip {
    position: fixed;
    z-index: 100;
    pointer-events: none;
    background: var(--surface-1);
    color: var(--ink);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .16);
    padding: 10px 12px;
    font-size: 13px;
    min-width: 150px;
    max-width: min(280px, calc(100vw - 24px));
}

.tooltip .tt-title {
    font-weight: 650;
    margin-bottom: 6px;
}

.tooltip .tt-row {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: space-between;
}

.tooltip .tt-row span:last-child {
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

.tooltip .tt-key {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ink-2);
}

.tooltip .tt-total {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--rule);
    font-weight: 600;
}

/* ------------------------------------------------------------------ modale */

.modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 32px 12px;
    overflow-y: auto;
    z-index: 60;
}

.modal-card {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    width: min(760px, 100%);
    box-shadow: 0 24px 64px rgba(0, 0, 0, .3);
}

.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.modal-card h3 {
    font-size: 14px;
    margin-top: 24px;
}

.grid-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    margin-top: 14px;
}

.form-actions {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.form-msg {
    font-size: 13px;
    color: var(--ink-2);
}

.period-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.period-row input[type=time] {
    width: 120px;
}

.period-row input[type=number] {
    width: 100px;
}

.period-row input {
    font: inherit;
    font-size: 15px;
    color: var(--ink);
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 7px 10px;
}

.period-row .sep {
    color: var(--muted);
    font-size: 13px;
}

/* La zone admin porte trois sujets sans rapport — prix, releves, facturation : ils se
   partagent une modale plus large plutot que de s'empiler sur dix sections. */
.modal-wide {
    width: min(1040px, 100%);
    padding: 22px 24px 26px;
}

.modal-title h2 {
    font-size: 19px;
    letter-spacing: -0.01em;
}

.modal-sub {
    margin-top: 3px;
    font-size: 13px;
    color: var(--muted);
}

/* Interrupteur a trois positions plutot qu'une barre d'onglets : la modale a deja des
   onglets au-dessus d'elle, et deux barres soulignees se confondraient. */
.mtabs {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    width: fit-content;
    max-width: 100%;
    margin: 16px 0 22px;
    padding: 3px;
    background: var(--page);
    border: 1px solid var(--border);
    border-radius: 999px;
}

.mtab {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--ink-2);
    font: inherit;
    font-size: 13.5px;
    font-weight: 550;
    padding: 7px 18px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s ease, color .12s ease;
}

.mtab:hover {
    color: var(--ink);
}

.mtab.is-active {
    color: var(--ink);
    background: var(--surface-2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

/* Chaque section porte un filet : de loin, le panneau se lit comme une liste de
   sujets et non comme un formulaire continu. */
.modal-card h3 {
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.mtab-panel > h3:first-child,
.mtab-panel > .mini-tiles:first-child + h3 {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.mtab-panel > .mini-tiles:first-child {
    margin-top: 0;
}

.modal-wide .modal-head {
    align-items: flex-start;
}

/* Un lot par carte, comme dans la vue Facturation : sur un telephone, une ligne de
   tableau a huit colonnes ne se remplit pas. La couleur du liseré est celle que le
   compteur porte partout ailleurs. */
.lots {
    display: grid;
    gap: 12px;
    margin-bottom: 4px;
}

.lot-row {
    border: 1px solid var(--border);
    border-top: 3px solid var(--s1);
    border-radius: var(--radius);
    background: var(--surface-1);
    padding: 14px 16px 16px;
    min-width: 0;
}

.lot-head {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

/* Le nom du lot est celui qui s'affiche partout : il se distingue du destinataire,
   qui ne sert qu'a l'adresse de la facture. */
.lot-name {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1 1 200px;
    min-width: 0;
}

/* L'ordre vaut pour toute l'application : il se pose ici, devant le nom. */
.lot-order {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 0 0 68px;
}

.lot-order > span,
.lot-name > span {
    font-size: 11px;
    font-weight: 550;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--muted);
}

.lot-order input {
    text-align: center;
}

.lot-head input {
    font: inherit;
    font-size: 15px;
    font-weight: 650;
    color: var(--ink);
    background: var(--page);
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 6px 9px;
    width: 100%;
    min-width: 0;
}

/* Le nom se modifie sur place : discret au repos, franc des qu'on le vise. */
.lot-head input:hover {
    border-color: var(--border);
}

.lot-head input:focus-visible {
    outline: none;
    border-color: var(--solar);
}

.lot-tag {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.lot-row .grid-form {
    margin-top: 12px;
    gap: 10px;
}

.lot-row.is-muted {
    opacity: .72;
}

.lot-note {
    margin-top: 10px;
    font-size: 12px;
    color: var(--muted);
}

/* Reperes techniques du compteur : lisibles quand on les cherche, discrets sinon. */
.lot-id {
    margin-top: 8px;
    font-size: 11.5px;
    color: var(--muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    word-break: break-all;
}

/* Historique des factures : une ligne par emission, qu'on deroule. */
.hist-head td {
    cursor: pointer;
    user-select: none;
}

.hist-head:hover td {
    color: var(--ink);
}

.hist-head:focus-visible td {
    outline: 2px solid var(--solar);
    outline-offset: -2px;
}

.caret {
    display: inline-block;
    width: 14px;
    color: var(--muted);
}

.hist-meta {
    font-weight: 400;
    color: var(--ink-2);
    margin-left: 8px;
    font-size: 12.5px;
}

/* L'annulation se pose au bout de la ligne d'emission, loin du chevron. */
.hist-act {
    float: right;
    margin-left: 12px;
}

/* Coche d'encaissement, dans la liste des factures emises. */
.paid {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    white-space: nowrap;
}

.paid input {
    accent-color: var(--good);
    width: 15px;
    height: 15px;
    cursor: pointer;
}

.paid span {
    font-size: 12.5px;
    color: var(--ink-2);
}

/* Etat court : adresse d'un lot, etat d'une facture. */
.pill {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--ink-2);
    white-space: nowrap;
}

.pill.is-ok {
    color: var(--good);
}

.pill.is-warn {
    color: var(--warn);
}

.pill.is-bad {
    color: var(--bad);
}

/* Recapitulatif de la periode, au-dessus du tableau d'emission. */
.mini-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin: 14px 0 16px;
}

.mini-tile {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-1);
    padding: 12px 14px;
    min-width: 0;
}

.mini-tile h4 {
    font-size: 10.5px;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--muted);
}

.mini-tile .mini-val {
    margin-top: 6px;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

.mini-tile .mini-sub {
    margin-top: 2px;
    font-size: 12px;
    color: var(--ink-2);
}

/* ------------------------------------------------------------------ footer */

.foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: 12.5px;
    padding: 20px 2px 8px;
}

.foot-copy {
    white-space: nowrap;
}

/* ------------------------------------------------------------------- login */

.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px;
}

.login-card {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow);
    padding: 36px 28px;
    width: min(400px, 100%);
    text-align: center;
}

.login-mark {
    color: var(--solar);
    margin-bottom: 10px;
}

.login-card h1 {
    font-size: 22px;
}

.login-sub {
    margin: 6px 0 22px;
    color: var(--muted);
    font-size: 13.5px;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
}

.login-form label {
    font-size: 12px;
    color: var(--muted);
    margin-top: 10px;
}

.login-form input {
    font: inherit;
    font-size: 16px;
    padding: 11px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface-1);
    color: var(--ink);
}

.login-form input:focus-visible {
    outline: 2px solid var(--grid);
    outline-offset: 2px;
}

.login-form button {
    margin-top: 20px;
    padding: 12px;
    border-radius: 8px;
    border: none;
    background: var(--ink);
    color: var(--surface-1);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.login-card .alert {
    margin-bottom: 12px;
    text-align: left;
}

/* =========================================================== adaptations */

@media (max-width: 980px) {
    .split-2-3 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    :root {
        --pad: 14px;
        --gap: 14px;
    }

    .topbar {
        gap: 8px;
        padding-bottom: 8px;
    }

    /* l'heure et la meteo tiennent sur une pastille qui peut se replier :
       « mercredi 13 aout 14:32 · Partiellement nuageux » deborde d'un telephone */
    .head-tools-live {
        justify-content: flex-start;
    }

    .live-meta {
        white-space: normal;
    }

    /* au doigt, seuls les onglets restent en haut : la barre de filtres
       prendrait un tiers de l'ecran.
       Les cinq vues tiennent en une grille plein ecran : un defilement
       horizontal sans barre visible cachait les deux derniers onglets, et
       rien n'indiquait qu'il fallait pousser la rangee du doigt. */
    .tabs {
        position: sticky;
        top: 0;
        z-index: 18;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 0;
        padding: 0;
        overflow-x: visible;
    }

    /* icone au-dessus du libelle : la colonne fait ~70 px, pas assez pour
       les deux cote a cote */
    .tab {
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        padding: 9px 3px 7px;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: -0.01em;
        min-width: 0;
        min-height: 52px;
    }

    .tab-ico {
        font-size: 16px;
    }

    .tab-txt {
        display: none;
    }

    .tab-txt-sm {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .user {
        display: none;
    }

    .card {
        padding: 16px 14px;
    }

    .card-head {
        margin-bottom: 10px;
    }

    .head-tools {
        align-items: flex-start;
        width: 100%;
    }

    .filters {
        gap: 12px;
        padding: 12px var(--pad);
    }

    .dates {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
        gap: 10px;
    }

    /* la periode, le jour et le compteur prennent la ligne entiere : « Du » et « Au »
       restent cote a cote, comme les deux bornes d'une meme plage */
    #field-period,
    #field-day,
    #field-meter {
        grid-column: 1 / -1;
    }

    .filter-actions {
        margin-left: 0;
        width: 100%;
    }

    .filter-actions .btn {
        flex: 1;
    }

    .tiles {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 10px;
    }

    .tile {
        padding: 13px 14px;
    }

    .hero {
        font-size: 28px;
    }

    .hero-sm {
        font-size: 22px;
    }

    .tile-hero .hero {
        font-size: 32px;
    }

    .split {
        gap: 18px;
    }

    .donut {
        gap: 14px;
    }

    /* Au doigt, une carte par ligne. Deux colonnes de 160 px ecrasaient le montant,
       les deux blocs de decomposition et le tableau croise ; en pleine largeur, chaque
       poste tient sur sa ligne avec son montant aligne a droite. */
    .owner-cards {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .owner-card {
        padding: 14px 16px 16px;
    }

    .owner-card .owner-total {
        font-size: 32px;
    }

    /* la carte prend toute la largeur : le tableau croise respire */
    .owner-card .owner-matrix {
        max-width: 340px;
    }
}

/* Ecran tres etroit : la meteo garde son icone et sa temperature, le libelle
   sauterait a la ligne pour rien a cote de la date. */
@media (max-width: 420px) {
    #wx-label {
        display: none;
    }
}

/* Tableaux : au-dessous de cette largeur, une ligne devient une fiche.
   Chaque cellule affiche son intitule, porte par l'attribut data-l. */
@media (max-width: 640px) {
    .table-wrap {
        overflow-x: visible;
    }

    table.rt,
    table.rt tbody,
    table.rt tfoot,
    table.rt tr,
    table.rt td {
        display: block;
        width: 100%;
    }

    table.rt thead {
        display: none;
    }

    table.rt tr {
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 4px 12px;
        margin-bottom: 10px;
        background: var(--surface-1);
    }

    table.rt tbody tr:hover {
        background: var(--surface-1);
    }

    table.rt td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 14px;
        text-align: right;
        white-space: normal;
        padding: 7px 0;
        border-bottom: 1px solid var(--rule);
    }

    table.rt td::before {
        content: attr(data-l);
        color: var(--muted);
        font-size: 12px;
        font-variant-numeric: normal;
        text-align: left;
        flex: none;
    }

    table.rt td:last-child {
        border-bottom: none;
    }

    table.rt td:first-child {
        font-weight: 650;
        font-size: 14.5px;
        color: var(--ink);
        padding-top: 10px;
    }

    table.rt td:first-child::before {
        content: none;
    }

    table.rt tfoot tr {
        background: var(--surface-2);
    }

    table.rt .month-head td:first-child {
        background: none;
    }

    table.rt .month-head {
        background: var(--surface-2);
    }

    table.rt .month-row td:first-child {
        padding-left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
    }
}