/*
 * « Comment ça marche » de Penta Com (mobile/penta-com-guide.php). S'ajoute à penta-com-accueil.css :
 * une étape = une capture de l'appli dans un cadre, puis son explication. Grille de 8 pt, sans ombre ni dégradé.
 */
.pcg-etapes { display: grid; gap: 32px; margin: 0; padding: 24px 0; border-top: 1px solid var(--rule); list-style: none; }
.pcg-etape { display: grid; gap: 16px; }
.pcg-ecran { max-width: 360px; width: 100%; margin: 0 auto; border: 1px solid var(--rule); border-radius: 24px; background: var(--ink2); overflow: hidden; }
.pcg-ecran img { display: block; width: 100%; height: auto; }
.pcg-titre { margin: 4px 0 8px; font-family: 'Bebas Neue', 'Barlow Condensed', 'Arial Narrow', sans-serif; font-weight: 400; font-size: 2rem; line-height: 1; text-transform: uppercase; color: var(--white); }
.pcg-texte .pcv-texte { max-width: 34rem; }
.pcv-icone { text-decoration: none; }

@media (min-width: 760px) {
    .pcg-etapes { gap: 64px; padding: 48px 0; }
    .pcg-etape { grid-template-columns: 360px minmax(0, 1fr); gap: 48px; align-items: center; }
    .pcg-etape:nth-child(even) { grid-template-columns: minmax(0, 1fr) 360px; }
    .pcg-etape:nth-child(even) .pcg-ecran { order: 2; }
    .pcg-ecran { margin: 0; }
    .pcg-titre { font-size: 2.5rem; }
}