/*
 * F4IOZ site — TellusMe's presentation page (directhf/PageTellusMe.kt): the head, four cards, the screenshots. On one
 * desktop screen the page never scrolls (the screenshots' frame does); stacked on a phone.
 */
.tlm { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.tlm .card { margin-bottom: 0; }
.tlm-hero h1 { margin: 0 0 4px; font-size: 30px; }
.tlm-accroche { margin: 0 0 4px; font-size: 16px; }
.tlm-hero p { max-width: 900px; }
.tlm-hero .actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.tlm-grille { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.tlm-cartes { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.tlm-carte h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 16px; }
.tlm-carte h2 .ico { width: 20px; height: 20px; stroke: var(--accent); stroke-width: 1.8; }
.tlm-carte p { margin: 0; color: var(--text-dim); font-size: 14px; }
.tlm-captures { min-height: 0; }
.tlm-cap-corps { overflow: auto; padding: 10px 12px; min-height: 0; flex: 1; display: grid; gap: 12px; }
.tlm-cap-corps figure { margin: 0; }
.tlm-cap-corps img { display: block; width: 100%; height: auto; border-radius: var(--r-s); border: 1px solid var(--border); }
.tlm-cap-corps figcaption { margin-top: 4px; font-size: 12.5px; color: var(--text-dim); }
@media (min-width: 1100px) and (min-height: 640px) {
  body.ecran-tlm .tlm { flex: 1; min-height: 0; }
  body.ecran-tlm .tlm-grille { flex: 1; min-height: 0; grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr); }
  body.ecran-tlm .tlm-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); min-height: 0; }
  body.ecran-tlm .tlm-carte { overflow: auto; }
}
@media (max-width: 1099px) {
  .tlm-cap-corps { max-height: 600px; }
}