/* Portail de l'aquarium : page des invités, connexion et administration. Clair ou sombre selon l'appareil. */
:root {
  --fond: #f3f5f7;
  --carte: #ffffff;
  --texte: #1b2430;
  --doux: #5b6672;
  --bord: #d8dde3;
  --accent: #1d64d8;
  --accent-texte: #ffffff;
  --vert: #17733a;
  --vert-fond: #dcf5e3;
  --orange: #8a5a00;
  --orange-fond: #fff1cc;
  --rouge: #b42318;
  --rouge-fond: #fde6e4;
  --gris-fond: #e8ebef;
  /* Courbes : trois premières teintes de la palette de référence (dataviz), validées sur la carte blanche */
  --serie-1: #2a78d6;
  --serie-2: #eb6834;
  --serie-3: #1baf7a;
  --serie-4: #eda100;
  --grille: #e3e6ea;
  --axe: #c3c8cf;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #0f1419;
    --carte: #19212a;
    --texte: #e6edf3;
    --doux: #98a4b0;
    --bord: #2c3640;
    --accent: #4c93f5;
    --accent-texte: #0f1419;
    --vert: #4cc26f;
    --vert-fond: #132a1b;
    --orange: #e0a63a;
    --orange-fond: #2c2210;
    --rouge: #ff6b61;
    --rouge-fond: #331614;
    --gris-fond: #252d36;
    /* mêmes teintes, pas sombres, validés sur la carte #19212a */
    --serie-1: #3987e5;
    --serie-2: #d95926;
    --serie-3: #199e70;
    --serie-4: #c98500;
    --grille: #2a333d;
    --axe: #3f4955;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
h1 { font-size: 1.35rem; margin: 0; }
h2 { font-size: 1.1rem; margin: 0 0 .6rem; }
h3 { font-size: 1rem; margin: 0 0 .4rem; }
a { color: var(--accent); }

main { max-width: 40rem; margin: 0 auto; padding: 0 1rem 2.5rem; }
main.etroit { max-width: 26rem; padding-top: 2rem; }
main.large { max-width: 64rem; }
main.etroit h1 { margin-bottom: 1rem; text-align: center; }

.entete {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem;
  max-width: 40rem; margin: 0 auto; padding: 1rem;
}
.entete.large { max-width: 64rem; }
.qui { display: flex; align-items: center; gap: .5rem; color: var(--doux); margin: 0; }

.carte {
  background: var(--carte); border: 1px solid var(--bord); border-radius: 12px;
  padding: 1rem; margin: 0 0 1rem;
}

/* Liaison avec le bac */
.liaison { margin: 0 0 1rem; padding: .55rem .8rem; border-radius: 10px; background: var(--gris-fond); color: var(--doux); }
.liaison.en-ligne { background: var(--vert-fond); color: var(--vert); }
.liaison.hors-ligne { background: var(--orange-fond); color: var(--orange); }

/* État pour les invités */
#carte-etat { text-align: center; }
.badge {
  display: inline-block; margin: 0; padding: .35rem 1.1rem; border-radius: 999px; font-weight: 700; font-size: 1.15rem;
  background: var(--gris-fond); color: var(--doux);
}
.badge.normal { background: var(--vert-fond); color: var(--vert); }
.badge.probleme { background: var(--orange-fond); color: var(--orange); }
.badge.securite { background: var(--rouge-fond); color: var(--rouge); }
.raison { margin: .6rem 0 0; font-weight: 600; }
.alerte { margin: .6rem 0 0; padding: .6rem .8rem; border-radius: 10px; background: var(--rouge-fond); color: var(--rouge); }

/* Mesures */
.eau { display: flex; flex-direction: column; align-items: center; margin-bottom: .8rem; }
.eau .libelle { color: var(--doux); }
.eau .valeur { font-size: 2.6rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.details { margin: 0; display: grid; grid-template-columns: 1fr; gap: .1rem; }
.details > div { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; border-top: 1px solid var(--bord); }
.details dt { color: var(--doux); }
.details dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
body.hors-ligne #mesures, body.hors-ligne #carte-etat { opacity: .45; }

/* Réglages */
.aide { color: var(--doux); font-size: .92rem; margin: 0 0 .6rem; }
.saisie { display: flex; align-items: center; gap: .4rem; }
.saisie input { width: 5.5rem; text-align: center; }
.unite { color: var(--doux); min-width: 1.6rem; }
.ligne-reglage { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .4rem 1rem; margin: 0 0 .6rem; }
.ligne-reglage label { flex: 1 1 8rem; }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.actions form { margin: 0; }

input, select, button { font: inherit; color: inherit; }
input, select {
  background: var(--fond); border: 1px solid var(--bord); border-radius: 8px; padding: .5rem .6rem; min-height: 2.6rem;
}
input:disabled, select:disabled { opacity: .55; }
button {
  min-height: 2.6rem; padding: .45rem 1rem; border-radius: 8px; border: 1px solid var(--bord);
  background: var(--gris-fond); cursor: pointer;
}
button.pas { width: 2.6rem; padding: 0; font-size: 1.3rem; font-weight: 700; }
button.principal { background: var(--accent); border-color: var(--accent); color: var(--accent-texte); font-weight: 600; }
button.danger { color: var(--rouge); }
button.lien { background: none; border: none; color: var(--accent); padding: 0; min-height: 0; text-decoration: underline; }
button:disabled { opacity: .5; cursor: default; }

.formulaire { display: flex; flex-direction: column; gap: .45rem; }
.formulaire label { color: var(--doux); }
.formulaire button[type="submit"] { align-self: flex-start; margin-top: .4rem; }
.case { display: flex; align-items: center; gap: .5rem; color: var(--texte) !important; }
.case input { min-height: 0; width: 1.15rem; height: 1.15rem; }
fieldset { border: 1px solid var(--bord); border-radius: 8px; margin: 0; padding: .5rem .8rem .7rem; }
legend { color: var(--doux); padding: 0 .3rem; }
.bornes { display: flex; flex-wrap: wrap; gap: .4rem 1rem; }
.bornes input { width: 4.8rem; margin-left: .3rem; }

.message { margin: .6rem 0 0; min-height: 1.2em; }
.message:empty { display: none; }
.message.erreur { color: var(--rouge); }
.message.succes { color: var(--vert); }
.note { color: var(--doux); font-size: .88rem; margin-top: 1.5rem; }

/* Administration : onglets et liste des comptes */
.onglets {
  display: flex; flex-wrap: wrap; gap: .4rem; max-width: 40rem; margin: 0 auto 1rem; padding: 0 1rem;
}
.onglets.large { max-width: 64rem; }
.onglets a {
  padding: .45rem .9rem; border-radius: 999px; border: 1px solid var(--bord); background: var(--carte);
  color: var(--texte); text-decoration: none;
}
.onglets a.actif { background: var(--accent); border-color: var(--accent); color: var(--accent-texte); font-weight: 600; }
.liste-comptes { list-style: none; margin: 0; padding: 0; }
.liste-comptes li + li { margin-top: .5rem; }
.ligne-compte {
  display: flex; flex-direction: column; gap: .15rem; padding: .7rem .8rem; border: 1px solid var(--bord);
  border-radius: 10px; color: var(--texte); text-decoration: none;
}
.ligne-compte:hover, .ligne-compte:focus { border-color: var(--accent); }
.ligne-compte .nom { font-weight: 700; }
.ligne-compte .aide { margin: 0; }
.ligne-compte.suspendu { opacity: .65; }

/* Courbes */
.filtres { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0 0 .6rem; }
.filtres button { border-radius: 999px; padding: .35rem .9rem; min-height: 2.3rem; background: var(--carte); }
.filtres button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-texte); font-weight: 600; }
.courbes { display: grid; grid-template-columns: 1fr; gap: 0 1rem; }
.courbe h2 { margin-bottom: .3rem; }
.courbe canvas { display: block; width: 100%; height: 190px; touch-action: pan-y; }
.courbe canvas:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.courbes.chargement canvas { opacity: .5; }
.legende { list-style: none; display: flex; flex-wrap: wrap; gap: .2rem 1.1rem; margin: 0 0 .4rem; padding: 0; font-size: .92rem; }
.legende li { display: flex; align-items: center; gap: .35rem; }
.legende .cle { display: inline-block; width: 16px; height: 2px; border-radius: 1px; }
.legende .cle-1 { background: var(--serie-1); }
.legende .cle-2 { background: var(--serie-2); }
.legende .cle-3 { background: var(--serie-3); }
.legende .cle-4 { background: var(--serie-4); }
.legende .valeur { font-variant-numeric: tabular-nums; }
.legende .valeur.absente { font-weight: 400; color: var(--doux); }
.legende .nom { color: var(--doux); }
.table-vue { margin-top: .4rem; }
.table-vue summary { cursor: pointer; color: var(--doux); font-size: .9rem; }
.table-vue .tableau { max-height: 18rem; overflow-y: auto; }
@media (min-width: 64rem) {
  .courbes { grid-template-columns: 1fr 1fr; }
}

/* Administration */
.compte.suspendu { opacity: .65; }
.etiquette { font-size: .8rem; font-weight: 600; padding: .1rem .5rem; border-radius: 999px; background: var(--gris-fond); color: var(--doux); }
.adresse, .mdp { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; word-break: break-all; }
.mdp { font-size: 1.4rem; }
.tableau { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th, td { text-align: left; padding: .35rem .5rem; border-top: 1px solid var(--bord); vertical-align: top; }
th { color: var(--doux); font-weight: 600; }
td:first-child { white-space: nowrap; font-variant-numeric: tabular-nums; }

@media (min-width: 40rem) {
  .details { grid-template-columns: 1fr 1fr; column-gap: 1.5rem; }
}