/* ---- onglet Pages : grille d'appareils ---- */
:root { --on-soft: color-mix(in srgb, var(--on) 16%, transparent); --bad-soft: color-mix(in srgb, var(--bad) 12%, transparent); }
.pgwrap { container-type:inline-size; margin:8px auto 0; }
.pgwrap.mobile { max-width:400px; padding:14px; border:1px solid var(--line); border-radius:28px; background:color-mix(in srgb, var(--panel) 40%, var(--bg)); }
/* La page est une grille de blocs identiques : chaque rangee est une bande (titre des sections qui y commencent, 0 si aucune) suivie d'une rangee de blocs.
   Une section occupe ces pistes mais ses propres rangees restent a ecartement regulier (espace vide en bas si une bande intermediaire la rallonge). L'affichage reproduit exactement le dessin : les blocs
   se reduisent seulement pour tenir dans la largeur (jamais moins de 110 px, la page defile alors horizontalement). */
.pgwrap { container-type:inline-size; margin:8px auto 0; overflow-x:auto; padding:0 6px 6px; }
.pg { --gap:20px; --n:8; --cw:min(230px, max(110px, calc((100cqw - 12px - (var(--n) - 1) * var(--gap)) / var(--n)))); display:grid; grid-template-columns:repeat(var(--n), var(--cw)); column-gap:var(--gap); row-gap:0; justify-content:start; position:relative; padding:6px 0 0; }
.pgwrap.mobile .pg { --n:2; }
/* section : titre + grille de blocs ; elle occupe --s colonnes de la page */
.sec { position:relative; display:grid; grid-template-columns:repeat(var(--s), var(--cw)); column-gap:var(--gap); grid-auto-rows:calc(var(--cw) * var(--rr, .78) + var(--gap)); align-content:start; padding-top:var(--bh, 0px); grid-column:calc(var(--sx) + 1) / span var(--s); grid-row:var(--pr0) / span var(--prs); min-width:0; }
.sec.boxed::before { content:""; position:absolute; inset:-5px -5px auto -5px; height:calc(var(--bh, 0px) + var(--rows) * (var(--cw) * var(--rr, .78) + var(--gap)) - var(--gap) + 10px); border:1px solid var(--line); border-radius:9px; background:color-mix(in srgb, var(--panel) 38%, transparent); pointer-events:none; }
.sec.colored.boxed::before { background:color-mix(in srgb, var(--sc) 15%, transparent); border-color:color-mix(in srgb, var(--sc) 42%, var(--line)); }
/* titre : dans la bande au-dessus de la premiere rangee de blocs */
.sec > .sec-title { position:absolute; left:4px; top:calc(var(--bh, 0px) / 2 - 10px); z-index:3; display:flex; align-items:center; gap:6px; max-width:calc(100% - 8px); height:21px; font-size:.95rem; font-weight:700; line-height:21px; color:var(--text); text-transform:none; letter-spacing:0; }
.pgdot { grid-column:calc(var(--c) + 1); grid-row:var(--gr); margin-bottom:var(--gap); display:grid; place-items:center; pointer-events:none; }
.pgdot::before { content:""; width:5px; height:5px; border-radius:50%; background:color-mix(in srgb, var(--muted) 45%, transparent); }
.sec-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sec-grip, .sec-gear { cursor:grab; color:var(--muted); font-size:.85rem; line-height:1; padding:0 1px; user-select:none; border:0; background:none; min-height:0; }
.sec-gear { cursor:pointer; }
.sec.dragging { opacity:.4; }
.sec-ghost { position:absolute; z-index:5; pointer-events:none; border:2px dashed var(--on); border-radius:9px; background:color-mix(in srgb, var(--on) 12%, transparent); }
.sec-ghost.bad { border-color:var(--bad); background:color-mix(in srgb, var(--bad) 12%, transparent); }
.pgc { grid-column:calc(var(--c) + 1) / span var(--w); grid-row:var(--gr) / span var(--gs); margin-bottom:var(--gap); min-width:0; min-height:0; }
.pgc.empty { border:1.5px dashed var(--line); border-radius:18px; background:none; color:var(--muted); font-size:1.6rem; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; }
.pg:not(.editing) .pgc.empty { display:none; }
.pgc.empty:hover { border-color:var(--on); color:var(--on); }
.pgc.over { outline:2px solid var(--on); outline-offset:2px; }
.tile { position:relative; width:100%; height:100%; min-height:0; border:1px solid var(--line); background:var(--panel); border-radius:18px; padding:14px 13px 12px; display:flex; flex-direction:column; justify-content:space-between; text-align:left; color:var(--text); font:inherit; cursor:pointer; transition:background .25s,border-color .25s,box-shadow .25s,transform .1s,opacity .25s; overflow:hidden; }
.tile:active { transform:scale(.97); }
.tile svg.bulb { width:46px; height:46px; stroke:var(--muted); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; transition:stroke .25s,fill .25s,filter .25s; }
.tile .tname { font-weight:600; margin:0; overflow-wrap:anywhere; }
.tile .tstate { font-size:.82rem; color:var(--muted); min-height:1.2em; }
.tile.on { background:linear-gradient(160deg,var(--on-soft),var(--panel) 70%); border-color:color-mix(in srgb,var(--on) 55%,var(--line)); box-shadow:0 0 28px -8px var(--on); }
.tile.on svg.bulb { stroke:var(--on); fill:var(--on-soft); filter:drop-shadow(0 0 6px var(--on)); }
.tile.on .tstate { color:var(--on); }
.tile .tbadge { position:absolute; top:12px; right:38px; width:22px; height:22px; display:none; align-items:center; justify-content:center; }
.tile .tbadge svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.tile.pending { cursor:progress; animation:breathe 1.4s ease-in-out infinite; }
.tile.pending .tbadge { display:flex; color:var(--on); }
.tile.pending .tbadge::before { content:""; width:18px; height:18px; border-radius:50%; border:2.5px solid currentColor; border-right-color:transparent; animation:spin .8s linear infinite; }
.tile.pending .tbadge svg { display:none; }
.tile.fail { border-color:var(--bad); background:linear-gradient(160deg,var(--bad-soft),var(--panel) 70%); }
.tile.fail .tbadge { display:flex; color:var(--bad); }
.tile.fail .tstate { color:var(--bad); font-weight:600; }
.tile.ro { cursor:default; }
.tile.offline { border-style:dashed; opacity:.6; }
.tile.offline .tbadge { display:flex; color:var(--muted); }
.tile.offline.on { background:var(--panel); border-color:var(--line); box-shadow:none; }
.tile.offline.on svg.bulb { stroke:var(--muted); fill:none; filter:none; }
.tile.missing { border-style:dashed; color:var(--muted); cursor:default; }
.tile .tmore { position:absolute; right:6px; top:6px; width:26px; height:26px; border-radius:50%; border:1px solid var(--line); background:var(--bg); color:var(--muted); cursor:pointer; padding:0; display:flex; align-items:center; justify-content:center; opacity:.8; }
.tile .tmore svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.pgc[draggable="true"] .tile { cursor:grab; }
@keyframes breathe { 50% { border-color:var(--on); } }
@keyframes spin { to { transform:rotate(360deg); } }
@media (max-width:700px) {
  .pgwrap.mobile { border:0; padding:0; background:none; border-radius:0; max-width:none; }
}
}
dialog { border:1px solid var(--line); border-radius:18px; background:var(--panel); color:var(--text); padding:18px; width:min(560px,94vw); max-height:90vh; overflow:auto; }
dialog::backdrop { background:rgba(0,0,0,.5); }
dialog h3 { margin:0 0 10px; }
dialog form.edit { border:0; padding:0; }
dialog select, dialog input[type=text], dialog input[type=number] { background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:6px 8px; width:100%; }
.pgtools { display:flex; flex-wrap:wrap; gap:8px; align-items:end; margin:8px 0; }
.pgtools label { font-size:.75rem; color:var(--muted); display:grid; gap:2px; }
.pgtools input, .pgtools select { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:6px 8px; }
.tile.thermo { cursor:pointer; gap:2px; }
.tile.thermo .trow { min-width:0; display:flex; align-items:center; gap:8px; }
.tile.thermo svg.thermo { width:30px; height:30px; stroke:var(--tc,var(--muted)); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.tile.thermo .tval { font-size:clamp(1.5rem,4.2vw,1.9rem); white-space:nowrap; font-weight:700; line-height:1; letter-spacing:-.02em; color:var(--tc,var(--text)); }
.tile.thermo .tval small { font-size:.9rem; font-weight:600; margin-left:3px; color:var(--muted); }
.tile.thermo .tstate { min-height:0; font-size:.75rem; }
.chips { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
.chip, .tinfo { font-size:.72rem; padding:2px 8px; border-radius:999px; border:1px solid var(--line); color:var(--muted); white-space:nowrap; }
.chip.up { color:var(--bad); border-color:color-mix(in srgb,var(--bad) 40%,var(--line)); } .chip.down { color:var(--blue); border-color:color-mix(in srgb,var(--blue) 40%,var(--line)); }
[hidden] { display:none !important; }
/* tuile Vanne d'arrosage */
.tile.valve .vstate { font-size:clamp(1.2rem,3.6vw,1.5rem); }
.tile.valve .vsince { font-size:.75rem; color:var(--muted); margin-top:4px; }
.tile.valve.open { background:linear-gradient(160deg,color-mix(in srgb,var(--blue,#3b82f6) 16%,var(--panel)),var(--panel) 70%); border-color:color-mix(in srgb,var(--blue,#3b82f6) 55%,var(--line)); }
.valvedlg { display:flex; flex-direction:column; gap:10px; max-width:340px; }
#valveDlg { border:1px solid var(--line); border-radius:14px; background:var(--panel); color:var(--text); padding:16px; }
#valveDlg::backdrop { background:rgba(0,0,0,.45); }
.tile.valve .vbtn { font:inherit; font-size:.8rem; font-weight:600; padding:5px 12px; border-radius:999px; border:1px solid color-mix(in srgb,var(--blue,#3b82f6) 55%,var(--line)); background:color-mix(in srgb,var(--blue,#3b82f6) 12%,var(--panel)); color:var(--blue,#3b82f6); cursor:pointer; }
.tile.valve .vbtn.close { border-color:color-mix(in srgb,var(--bad) 55%,var(--line)); background:color-mix(in srgb,var(--bad) 10%,var(--panel)); color:var(--bad); }