/* Même palette/typographie que la vitrine publique (voir
   Website/public/assets/style.css) — ce dossier client/ en est un
   sous-répertoire et doit rester visuellement indissociable du reste du
   site, contrairement à Website/admin/ (outil interne, habillage propre). */
:root {
  --ivoire: #FAF7F1;
  --ivoire-2: #F2ECE1;
  --or: #C08A3E;
  --or-clair: #E8C285;
  --or-fonce: #8F6528;
  --encre: #2E3138;
  --ardoise: #6E6A61;
  --sauge: #64806B;
  --terracotta: #B5714A;
  --jaune: #A9822E;
  --ligne: rgba(46,49,56,0.12);
  --danger: #a3352d;
  --font-display: 'Petrona', Georgia, serif;
  --font-body: 'Work Sans', -apple-system, sans-serif;

  /* En-tête toujours clair (voir Website/public/assets/style.css pour
     l'explication complète) — jamais redéfini dans les blocs sombres. */
  --entete-fond: #FAF7F1;
  --entete-texte: #2E3138;
  --entete-texte-attenue: #6E6A61;
  --entete-bordure: rgba(46,49,56,0.12);
  --entete-accent: #C08A3E;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ivoire: #201F1B;
    --ivoire-2: #29271F;
    --or: #E8B564;
    --or-clair: #F2CE93;
    --or-fonce: #C08A3E;
    --encre: #F3EEE4;
    --ardoise: #B8AF9F;
    --sauge: #8FAE97;
    --terracotta: #D69670;
    --jaune: #D6B15E;
    --ligne: rgba(243,238,228,0.14);
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--ivoire);
  color: var(--encre);
  font-family: var(--font-body);
  line-height: 1.6;
  font-size: 15px;
}

.enveloppe { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; margin: 0; color: var(--encre); }
p { margin: 0; color: var(--ardoise); }
a { color: inherit; }

/* --- En-tête : identique à la vitrine publique --- */
header.entete { border-bottom: 1px solid var(--entete-bordure); background: var(--entete-fond); }
.barre-nav { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 20px 0; gap: 12px 24px; }
.marque { display: flex; align-items: center; gap: 10px; }
.nav-droite { display: flex; align-items: center; gap: 20px; font-size: 14px; flex-wrap: wrap; }
.logo-entete { height: 64px; width: auto; display: block; }
@media (max-width: 480px) { .logo-entete { height: 48px; } .nav-droite { gap: 12px; font-size: 13px; } }
.langues { display: flex; gap: 6px; }
.langues a {
  font-family: var(--font-body); font-size: 13px; font-weight: 600; background: none;
  border: 1px solid var(--entete-bordure); color: var(--entete-texte-attenue);
  border-radius: 6px; padding: 5px 10px; text-decoration: none;
}
.langues a[aria-current="true"] { background: var(--entete-texte); color: var(--entete-fond); border-color: var(--entete-texte); }
.lien-portail { font-weight: 600; font-size: 14px; color: var(--entete-texte); text-decoration: none; border-bottom: 1px solid var(--entete-accent); padding-bottom: 2px; }

/* Sous-en-tête "domiciles" (plusieurs boîtiers par client) -- une rangée de
   pilules sous la nav principale, visible seulement si le client a plus
   d'un domicile (voir partiels/entete.php). */
.barre-domiciles { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 0 0 16px; }
.barre-domiciles-etiquette { font-size: 13px; font-weight: 600; color: var(--entete-texte-attenue); margin-right: 2px; }
.form-domicile { margin: 0; }
.pilule-domicile {
  font-family: var(--font-body); font-size: 13px; font-weight: 600; cursor: pointer;
  background: none; border: 1px solid var(--entete-bordure); color: var(--entete-texte-attenue);
  border-radius: 999px; padding: 6px 14px;
}
.pilule-domicile-active { background: var(--entete-accent); color: var(--entete-fond); border-color: var(--entete-accent); }

/* --- Cartes / sections --- */
.carte { max-width: 1080px; margin: 24px auto; padding: 24px 28px; background: var(--ivoire); border: 1px solid var(--ligne); border-radius: 14px; }
.carte h2 { font-size: 20px; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.liste { width: 100%; max-width: 720px; margin: 0; border-collapse: collapse; background: var(--ivoire); border: 1px solid var(--ligne); border-radius: 10px; overflow: hidden; }
.liste th, .liste td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--ligne); font-size: 14px; }
.liste th { font-size: 12px; color: var(--ardoise); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.liste tr:last-child td { border-bottom: none; }

/* Sous ~480px, une ligne de tableau (nom + état + seuil + actions, ou
   date + type + destinataire + message) ne tient plus côte à côte même en
   réduisant chaque contrôle — empilée en bloc "étiquette : valeur" plutôt
   que de forcer un défilement horizontal qu'une bonne partie des usagers ne
   découvrirait jamais. Nécessite un attribut data-label sur chaque <td>
   (voir ligneCapteurHtml()/chargerHistorique() dans capteurs.php et
   tableau-de-bord.php, et les tableaux rendus côté PHP). */
@media (max-width: 480px) {
  .liste thead { display: none; }
  .liste, .liste tbody, .liste tr, .liste td { display: block; width: 100%; }
  .liste { border: none; background: none; }
  .liste tr { border: 1px solid var(--ligne); border-radius: 10px; background: var(--ivoire); margin-bottom: 10px; padding: 4px 0; }
  .liste tr:last-child { margin-bottom: 0; }
  .liste td { border-bottom: none; padding: 6px 14px; }
  .liste td[data-label]::before {
    content: attr(data-label); display: block; font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.03em; color: var(--ardoise); margin-bottom: 2px;
  }
  .liste td:empty { display: none; }

}

.ligne-boutons { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.ligne-boutons form { margin: 0; }

/* --- Boutons / champs ---
   Chaque état (repos, survol, désactivé) a sa propre teinte tirée de la
   palette plutôt qu'un simple fondu d'opacité — un bouton désactivé ou
   survolé doit avoir l'air délibérément conçu, pas juste "éteint". */
.bouton, button {
  font-family: var(--font-body); font-weight: 600; font-size: 14px;
  padding: 10px 18px; border-radius: 8px; text-decoration: none; display: inline-block;
  border: 1px solid transparent; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
button { font-size: 14.5px; }

.bouton-principal, button { background: var(--encre); color: var(--ivoire); }
.bouton-principal:hover, button:hover { background: color-mix(in srgb, var(--encre) 82%, var(--or) 18%); }

.bouton-secondaire { background: color-mix(in srgb, var(--terracotta) 20%, var(--ivoire) 80%); border-color: color-mix(in srgb, var(--terracotta) 45%, transparent); color: color-mix(in srgb, var(--terracotta) 75%, var(--encre) 25%); }
.bouton-secondaire:hover { background: color-mix(in srgb, var(--terracotta) 32%, var(--ivoire) 68%); border-color: var(--terracotta); }

.bouton-annuler-action { background: color-mix(in srgb, var(--ardoise) 8%, transparent); border: 1px solid var(--ligne); color: var(--ardoise); }
.bouton-annuler-action:hover { background: color-mix(in srgb, var(--ardoise) 16%, transparent); }

/* Ambré plutôt que gris neutre : dans cette page, un bouton désactivé
   signale toujours la même chose (hub hors ligne) — la teinte "attention"
   porte ce sens au lieu de simplement paraître éteint. */
button:disabled, button:disabled:hover {
  background: color-mix(in srgb, var(--jaune) 18%, var(--ivoire) 82%);
  color: color-mix(in srgb, var(--jaune) 65%, var(--ardoise) 35%);
  border: 1px solid color-mix(in srgb, var(--jaune) 40%, transparent);
  cursor: not-allowed;
}

input[type="text"], input[type="email"], input[type="password"] {
  font-family: var(--font-body); font-size: 14.5px; padding: 10px 12px;
  border-radius: 8px; border: 1px solid var(--ligne); background: var(--ivoire);
  color: var(--encre);
}

.erreur { color: var(--danger); }
.info { color: var(--sauge); }
.erreur, .info { max-width: 720px; margin: 16px auto 0; padding: 0 24px; }

/* --- Page de connexion --- */
.page-connexion { display: flex; flex-direction: column; min-height: 100vh; }
.carte-connexion {
  background: var(--ivoire); border: 1px solid var(--ligne); border-radius: 14px;
  padding: 32px; width: 320px; margin: auto; display: flex; flex-direction: column; gap: 14px;
}
.carte-connexion h1 { font-size: 20px; margin: 0 0 6px; }
.carte-connexion label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ardoise); }

/* --- Statuts / historique --- */
.badge { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; vertical-align: middle; }
.badge-en-ligne { background: color-mix(in srgb, var(--sauge) 22%, transparent); color: var(--sauge); }
.badge-hors-ligne { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }
.badge-inconnu { background: var(--ivoire-2); color: var(--ardoise); }
.info-statut { color: var(--ardoise); font-size: 13.5px; margin: 8px 0 0; }

.carte-historique { border: 1px solid var(--ligne); border-radius: 10px; padding: 16px 18px; margin-bottom: 14px; background: var(--ivoire-2); }
.carte-historique:last-child { margin-bottom: 0; }
.entete-historique { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.entete-historique h3 { margin: 0; font-size: 16px; }
.valeur-courante { margin: 0 0 12px; font-size: 14px; }
.valeur-courante strong { color: var(--encre); }
.historique-corps p { font-size: 13.5px; margin-top: 10px; }
.liste-compacte { max-width: none; margin: 0; font-size: 13.5px; }
.liste-compacte th, .liste-compacte td { padding: 8px 12px; }

/* --- Renommage inline --- */
/* Même forme que .formulaire-seuil (champ + crochet de confirmation + ×) --
   voir la note plus bas sur .bouton-x. */
.formulaire-renommage { display: flex; align-items: center; gap: 6px; }

/* --- Tableau des capteurs (partiels/capteurs.php) --- */
/* Contrairement aux autres .liste (plafonnées à 720px), ce tableau a assez
   de colonnes pour profiter de toute la largeur de sa carte (jusqu'à 1080px,
   voir .carte) plutôt que de se retrouver comprimé/tronqué inutilement. */
.liste-capteurs { max-width: none; }
.liste-capteurs th, .liste-capteurs td { vertical-align: top; }
.liste-capteurs .badge { margin-top: 4px; }
.formulaire-seuil { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.ligne-historique td { background: var(--ivoire-2); }
.ligne-historique .historique-corps { padding: 4px 0; }

/* Boutons icône seuls (Enregistrer/Renommer/Historique) — remplacent des
   boutons texte trop larges pour tenir sur un écran de téléphone à côté du
   reste de la ligne. L'action reste annoncée via title/aria-label plutôt
   que du texte visible. */
.bouton-icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0; flex: none;
}
.bouton-icone svg { width: 18px; height: 18px; }

/* Crochet de confirmation (renommage, seuil) — sauge plein comme l'ancien
   gros bouton "Confirmer" texte qu'il remplace, pour rester le signal
   "action positive" bien reconnaissable même réduit à une icône. */
.bouton-confirmer-icone { background: var(--sauge); color: #fff; border-color: transparent; }
.bouton-confirmer-icone:hover { background: color-mix(in srgb, var(--sauge) 84%, black 16%); }

/* Petit × autonome (à côté du crochet de confirmation), le bouton suit le
   champ dans le flux plutôt que d'être superposé dedans (voir
   .formulaire-seuil et .formulaire-renommage dans partiels/capteurs.php).
   Même teinte terracotta que .bouton-secondaire — "annuler" reste une
   action secondaire, pas juste un × neutre. */
.bouton-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0; flex: none;
  background: color-mix(in srgb, var(--terracotta) 20%, var(--ivoire) 80%);
  border: 1px solid color-mix(in srgb, var(--terracotta) 45%, transparent);
  color: color-mix(in srgb, var(--terracotta) 75%, var(--encre) 25%);
  font-size: 20px; line-height: 1; cursor: pointer;
}
.bouton-x:hover { background: color-mix(in srgb, var(--terracotta) 32%, var(--ivoire) 68%); border-color: var(--terracotta); }

/* --- Constructeur de règles (regles.php) --- */
.carte-regle { border: 1px solid var(--ligne); border-radius: 10px; padding: 16px 18px; margin-bottom: 14px; background: var(--ivoire-2); }
.carte-regle:last-child { margin-bottom: 0; }
.carte-regle-entete { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.carte-regle-entete h3 { font-size: 16px; }
.carte-regle-condition { font-size: 13.5px; margin-bottom: 10px; }
.carte-regle-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.carte-regle-actions form { margin: 0; }
.badge-inactive { background: color-mix(in srgb, var(--ardoise) 18%, transparent); color: var(--ardoise); }
.formulaire-regle { display: flex; flex-direction: column; gap: 12px; max-width: 420px; }
.formulaire-regle label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ardoise); }
.formulaire-regle select { font-family: var(--font-body); font-size: 14.5px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--ligne); background: var(--ivoire); color: var(--encre); }