/* Page métier courte : pilote de ligne (pilote-de-ligne.html, en/pilote-de-ligne.html). Complète css/metier.css.
   Pièces propres à la page : bloc de l'appli (.p-appli), écran du téléphone (.p-ecran-tel), trois captures (.p-ecrans). */

/* L'appli : icône, nom, sous-titre */
.p-appli { display: flex; align-items: center; gap: .85rem; margin: 0 0 1.5rem; }
.p-appli img { flex: none; width: 3.5rem; height: 3.5rem; border-radius: 22%; box-shadow: 0 0 0 1px var(--line), var(--shadow); }
.p-appli b { display: block; font-size: 1.15rem; line-height: 1.2; }
.p-appli span span { display: block; color: var(--muted); font-size: .92rem; }

/* L'écran du téléphone du héros : capture posée sous l'encoche (--tel-safe, css/tel.css) */
.p-ecran-tel { padding-top: var(--tel-safe, 30px); background: #EEF1F6; }
.p-ecran-tel img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* Les trois écrans : défilement horizontal sur téléphone, trois colonnes dès la tablette */
.p-ecrans-section h2 { margin-bottom: 1.5rem; font-size: clamp(1.5rem, 4vw, 2.2rem); }
.p-ecrans { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(12rem, 72%); gap: 1.25rem; margin: 0; padding: .25rem .25rem 1rem; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; }
.p-ecran { min-width: 0; scroll-snap-align: start; }
.p-ecran img { display: block; width: 100%; height: auto; aspect-ratio: 600 / 1298; border-radius: 22px; background: #EEF1F6; box-shadow: 0 0 0 1px var(--line), var(--shadow); }
.p-ecran h3 { margin: 1rem 0 .3rem; font-size: 1.15rem; }
.p-ecran p { color: var(--muted); font-size: .95rem; }

@media (min-width: 768px) {
  .p-ecrans { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; padding-bottom: .25rem; }
}