/* =========================================================================
   Hub — thème CLAIR, façon Echo Hub.

   Les couleurs sont écrites en dur, pas en variables CSS. Ce n'est pas un
   oubli : les variables CSS ne sont arrivées que dans Safari 9.1, et la
   version exacte de l'iPad 2 n'a pas pu être vérifiée. Un thème qui ne
   s'affiche pas du tout serait un écran blanc au mur ; la répétition de
   quelques codes hexadécimaux est un prix dérisoire à côté.

   Palette :
     fond          #eceef2      tuile          #ffffff
     texte         #1c1c1e      atténué        #6e6e78
     très atténué  #a3a3ad      filet          rgba(0,0,0,.07)
     bleu #0071e3   vert #2ba84a   orange #f08c00   rouge #e5342c
   ========================================================================= */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0; height: 100%;
  overflow: hidden;                 /* l'écran ne défile jamais : il tient */
}

body {
  background: #eceef2;
  color: #1c1c1e;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
  user-select: none;
  /* Empêche le rebond élastique d'iOS, qui découvrirait du blanc sous la page. */
  position: fixed; width: 100%;
}

/* ---------- barre du haut ---------- */
#barre {
  height: 46px; padding: 0 18px;
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-box-align: center; -webkit-align-items: center; align-items: center;
}
#barre .titre { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
#barre .espace { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; }
#barre .date { font-size: 14px; color: #6e6e78; margin-right: 14px; }
#barre .heure { font-size: 15px; font-weight: 600; }

#barre .bouton {
  margin-left: 10px; padding: 5px 12px;
  font-size: 13px; font-weight: 500; color: #0071e3;
  border: 0; background: rgba(0,113,227,.10); border-radius: 14px;
  font-family: inherit; cursor: pointer;
}
#barre .bouton.plein { background: #0071e3; color: #fff; }

/* Un point discret quand une source affiche des données périmées. */
#alerte {
  display: none; margin-left: 10px; font-size: 12px; color: #f08c00;
}
#alerte.visible { display: inline; }

/* ---------- la grille ---------- */
#grille {
  position: relative;
  margin: 0 14px;
}

.tuile {
  position: absolute;
  background: #ffffff;
  border-radius: 20px;
  padding: 14px 16px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 6px 18px rgba(0,0,0,.05);
  -webkit-transition: -webkit-transform .18s ease, box-shadow .18s ease;
  transition: transform .18s ease, box-shadow .18s ease;
}

/* Une tuile mise en avant : la météo du moment, façon carte colorée. */
.tuile.accent { background: #0071e3; color: #fff; }
.tuile.accent .etiquette,
.tuile.accent .sous { color: rgba(255,255,255,.72); }

.etiquette {
  font-size: 10px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: #a3a3ad;
  margin-bottom: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.valeur {
  font-size: 34px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.05;
}
.valeur.moyenne { font-size: 26px; }
.valeur.petite  { font-size: 19px; letter-spacing: -0.015em; }

.sous { font-size: 12px; color: #6e6e78; margin-top: 4px; line-height: 1.35; }

.ligne {
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-box-align: center; -webkit-align-items: center; align-items: center;
  font-size: 13px;
  padding: 2px 0;
}
.ligne .gauche { width: 42px; color: #6e6e78; -webkit-flex: none; flex: none; }
.ligne .milieu {
  -webkit-box-flex: 1; -webkit-flex: 1; flex: 1;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.ligne .droite { color: #6e6e78; -webkit-flex: none; flex: none; margin-left: 8px; }

.pastille {
  width: 9px; height: 9px; border-radius: 50%;
  -webkit-flex: none; flex: none; margin-right: 8px;
}

.icone { font-size: 26px; line-height: 1; }

/* Marqueur de donnée périmée, dans le coin de la tuile concernée. */
.perime {
  position: absolute; top: 10px; right: 12px;
  font-size: 10px; color: #f08c00;
}

/* États colorés — CO₂, bobines, alertes. */
.vert   { color: #2ba84a; }
.orange { color: #f08c00; }
.rouge  { color: #e5342c; }

/* Barres de répartition et anneaux */
.barre-fond {
  height: 6px; background: rgba(0,0,0,.07); border-radius: 3px; overflow: hidden;
  margin-top: 5px;
}
.barre-part { height: 6px; background: #0071e3; border-radius: 3px; }

/* Message d'un widget qui n'a rien à montrer : jamais un carré vide. */
.vide { font-size: 13px; color: #a3a3ad; margin-top: 6px; }

/* ---------- mode édition ---------- */
body.edition .tuile {
  -webkit-animation: fremir .28s infinite alternate ease-in-out;
  animation: fremir .28s infinite alternate ease-in-out;
}
@-webkit-keyframes fremir {
  from { -webkit-transform: rotate(-0.35deg); }
  to   { -webkit-transform: rotate(0.35deg); }
}
@keyframes fremir {
  from { transform: rotate(-0.35deg); }
  to   { transform: rotate(0.35deg); }
}

/* L'animation est coupée sur la tuile qu'on déplace : elle doit suivre le
   doigt exactement, pas frémir sous lui. */
body.edition .tuile.saisie {
  -webkit-animation: none; animation: none;
  box-shadow: 0 8px 30px rgba(0,0,0,.18);
  opacity: .92;
  z-index: 50;
}

/* Boutons posés sur chaque tuile en mode édition. */
.commande {
  position: absolute; width: 26px; height: 26px; border-radius: 13px;
  border: 0; padding: 0; font-family: inherit;
  font-size: 15px; line-height: 26px; text-align: center;
  color: #fff; display: none; z-index: 10;
}
body.edition .commande { display: block; }
.commande.retirer { top: 6px; left: 6px; background: #e5342c; }
.commande.moins   { bottom: 6px; right: 38px; background: rgba(0,0,0,.42); }
.commande.plus    { bottom: 6px; right: 6px;  background: rgba(0,0,0,.42); }

/* L'emplacement visé pendant un déplacement. */
#fantome {
  position: absolute; display: none;
  border: 2px dashed rgba(0,113,227,.5);
  background: rgba(0,113,227,.06);
  border-radius: 20px; z-index: 1;
}

/* ---------- panneaux (catalogue, réglages) ---------- */
#voile {
  display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.28); z-index: 100;
}
#voile.ouvert { display: block; }

.panneau {
  position: absolute; top: 50%; left: 50%;
  width: 620px; max-width: 92%; max-height: 82%;
  margin: -240px 0 0 -310px;
  background: #f6f7f9; border-radius: 22px;
  overflow: auto; -webkit-overflow-scrolling: touch;
  padding: 20px 22px 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.panneau h2 { font-size: 19px; font-weight: 600; margin: 0 0 4px; }
.panneau p.aide { font-size: 13px; color: #6e6e78; margin: 0 0 16px; }
.panneau h3 {
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: #a3a3ad; margin: 18px 0 8px;
}

.choix {
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-flex-wrap: wrap; flex-wrap: wrap;
}
.choix button {
  -webkit-flex: none; flex: none;
  width: 138px; margin: 0 8px 8px 0; padding: 10px 12px;
  background: #fff; border: 1px solid rgba(0,0,0,.07); border-radius: 14px;
  font-family: inherit; font-size: 13px; text-align: left; color: #1c1c1e;
}
.choix button .d { display: block; font-size: 11px; color: #a3a3ad; margin-top: 2px; }

.champ {
  display: -webkit-box; display: -webkit-flex; display: flex;
  -webkit-box-align: center; -webkit-align-items: center; align-items: center;
  margin-bottom: 10px;
}
.champ label { width: 150px; font-size: 13px; color: #6e6e78; -webkit-flex: none; flex: none; }
.champ input {
  -webkit-box-flex: 1; -webkit-flex: 1; flex: 1;
  font-family: inherit; font-size: 14px; color: #1c1c1e;
  background: #fff; border: 1px solid rgba(0,0,0,.10); border-radius: 10px;
  padding: 8px 10px; -webkit-appearance: none;
}
.panneau .actions { margin-top: 18px; text-align: right; }
.panneau .actions button {
  font-family: inherit; font-size: 14px; font-weight: 500;
  padding: 9px 18px; border: 0; border-radius: 16px; margin-left: 8px;
  background: rgba(0,0,0,.06); color: #1c1c1e;
}
.panneau .actions button.plein { background: #0071e3; color: #fff; }

/* ---------- mode nuit ---------- */
/* Un écran clair allumé dans une pièce sombre éclaire toute la cuisine. La
   nuit, le Hub bascule sur une horloge presque noire — ce qui règle aussi la
   rémanence, un écran fixe pendant des mois finissant par garder l'empreinte
   de ses tuiles. */
body.nuit { background: #000; color: #fff; }
body.nuit #barre, body.nuit #grille { display: none; }

#nuit {
  display: none;
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  -webkit-box-align: center; -webkit-align-items: center; align-items: center;
  -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center;
  -webkit-box-orient: vertical; -webkit-flex-direction: column; flex-direction: column;
}
body.nuit #nuit { display: -webkit-box; display: -webkit-flex; display: flex; }
#nuit .h { font-size: 84px; font-weight: 200; letter-spacing: -0.03em; color: #48484e; }
#nuit .j { font-size: 15px; color: #303036; margin-top: 6px; }

/* ---------- écran de code ---------- */
#code {
  display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: #eceef2; z-index: 200;
  -webkit-box-align: center; -webkit-align-items: center; align-items: center;
  -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center;
  -webkit-box-orient: vertical; -webkit-flex-direction: column; flex-direction: column;
}
#code.ouvert { display: -webkit-box; display: -webkit-flex; display: flex; }
#code p { font-size: 15px; color: #6e6e78; margin: 0 0 14px; }
#code input {
  font-family: inherit; font-size: 22px; text-align: center; letter-spacing: .18em;
  width: 220px; padding: 12px; border: 1px solid rgba(0,0,0,.12);
  border-radius: 14px; background: #fff; -webkit-appearance: none;
}