/* ---- pages MOBILE : template compact (3 appareils en largeur, marges minimales, polices réduites) ----
   Une page « mobile » utilise ce gabarit quel que soit l'écran qui l'affiche ; une page « desktop » garde les tuiles larges.
   Les règles sont préfixées par .pgwrap.mobile (plus spécifiques que celles de tuiles.css) et chargées en dernier. */

/* cadre : sur un écran de bureau la page mobile est montrée dans un « téléphone » étroit ; sur un vrai téléphone, plein écran sans cadre */
.pgwrap.mobile { max-width:400px; padding:6px; border-radius:22px; }
@media (max-width:700px) { .pgwrap.mobile { padding:0; max-width:none; } }
.pgwrap.mobile .pg { --n:3; --gap:5px; --rr:.86; --cw:max(80px, calc((100cqw - 2 * var(--gap) - 2px) / 3)); }

/* sections : pas de cadre (sauf en édition, pour repérer les sections) ; titre fin en petites capitales */
.pgwrap.mobile .pg:not(.editing) .sec.boxed::before { display:none; }
.pgwrap.mobile .pg:not(.editing) .sec.colored > .sec-title { color:var(--sc, var(--muted)); }
.pgwrap.mobile .sec > .sec-title { left:2px; font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }

/* tuile : marges réduites au minimum, emplacements (en-tête / titre / pied) plus courts */
.pgwrap.mobile .tile, .pgwrap.mobile .tile.thermo, .pgwrap.mobile .tile.wind { --head:38px; --foot:17px; padding:6px 6px 5px; border-radius:12px; box-shadow:none; }
.pgwrap.mobile .tile.on { box-shadow:none; }
.pgwrap.mobile .tile .tfoot { display:flex; height:var(--foot); }                                  /* la règle « petite hauteur » de tuiles.css masquerait le pied */
.pgwrap.mobile .tile .thead { height:30px; }
.pgwrap.mobile .tile svg.bulb { width:26px; height:26px; }
.pgwrap.mobile .tile .tname { font-size:.74rem; line-height:1.15; font-weight:600; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pgwrap.mobile .tile .tnamebox { padding:0; justify-content:flex-end; }
.pgwrap.mobile .tile .tstate { font-size:.62rem; padding-right:0; }
.pgwrap.mobile .tile:not(.offline):not(.fail):not(.pending) .tstate { display:none; }                /* le texte d'état n'apparaît que pour une situation particulière */

/* valeurs : sans pictogramme ni tendance ni âge ; une seule pastille (la secondaire) */
.pgwrap.mobile .tile.thermo svg.thermo { display:none; }
.pgwrap.mobile .tile.thermo .tval { font-size:1.3rem; }
.pgwrap.mobile .tile.thermo .tval small { font-size:.6rem; margin-left:1px; }
.pgwrap.mobile .tile .tage, .pgwrap.mobile .tile .tpill.ter, .pgwrap.mobile .tile .wdir, .pgwrap.mobile .tile .vsince { display:none; }
.pgwrap.mobile .tile.thermo .trow, .pgwrap.mobile .tile.wind .wrow { padding-right:20px; gap:4px; }
.pgwrap.mobile .tile .tpills .tpill, .pgwrap.mobile .tile .tpill { font-size:.6rem; padding:0 5px; max-width:100%; }
.pgwrap.mobile .tile .spark { height:70%; opacity:.4; }

/* vent : petit compas */
.pgwrap.mobile .tile.wind svg.compass { width:25px; height:25px; }
.pgwrap.mobile .tile.wind .tval { font-size:1.15rem; }
.pgwrap.mobile .tile.wind .tval small { font-size:.58rem; }

/* vanne */
.pgwrap.mobile .tile.valve .vstate { font-size:1rem; }
.pgwrap.mobile .tile.valve .vbtn { font-size:.62rem; padding:1px 7px; }
.pgwrap.mobile .tile.valve svg.vicon { width:20px; height:20px; }

/* pastille « i » et témoin d'état : minuscules, mais avec une zone de toucher élargie */
.pgwrap.mobile .tile .tmore { width:18px; height:18px; right:3px; top:3px; opacity:.7; }
.pgwrap.mobile .tile .tmore svg { width:11px; height:11px; }
.pgwrap.mobile .tile .tmore::after { content:""; position:absolute; inset:-8px; }
.pgwrap.mobile .tile .tbadge { top:5px; right:24px; width:14px; height:14px; }
.pgwrap.mobile .tile .tbadge svg { width:13px; height:13px; }
.pgwrap.mobile .pgc.empty { border-radius:12px; font-size:1.2rem; }
.pgwrap.mobile .tile.valve .vbtn { display:none; }                                              /* la tuile entière se touche : pas de bouton qui masquerait le titre */
/* tendance (si elle est choisie pour la case) : flèches seules « 1h ▲  24h ▼ » sous la valeur ; l'écart exact est dans l'infobulle */
.pgwrap.mobile .tile .chips { display:flex; flex-wrap:nowrap; gap:7px; margin:1px 0 0; }
.pgwrap.mobile .tile .chip { font-size:.58rem; padding:0; border:0; background:none; white-space:nowrap; }
/* page mobile verrouillée : pas de zoom, pas de sélection, et un message à la place du contenu en paysage */
body.mlock { touch-action:pan-x pan-y; -webkit-text-size-adjust:100%; text-size-adjust:100%; overscroll-behavior:none; }
#rotateMsg { display:none; }
@media (orientation:landscape) and (pointer:coarse) and (max-height:540px) {
  body.mlock #rotateMsg { position:fixed; inset:0; z-index:200; display:grid; place-items:center; background:var(--bg); text-align:center; color:var(--muted); }
  body.mlock #rotateMsg svg { width:56px; height:56px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
  body.mlock #rotateMsg p { margin:10px 0 0; font-weight:600; }
}