/*
 * « 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; }

/* Questions fréquentes : une ligne par question, la réponse s'ouvre au toucher */
.pcg-faq { max-width: 44rem; border-bottom: 1px solid var(--rule); }
.pcg-question { border-top: 1px solid var(--rule); }
.pcg-question summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 8px 0; font-size: 1.0625rem; line-height: 1.35; font-weight: 600; color: var(--white); cursor: pointer; list-style: none; }
.pcg-question summary::-webkit-details-marker { display: none; }
.pcg-question summary { text-wrap: balance; }
.pcg-question summary::after { content: "+"; flex: none; width: 24px; text-align: center; font-size: 1.5rem; font-weight: 400; line-height: 1; color: var(--blue); }
.pcg-question[open] summary::after { content: "\2212"; }
.pcg-question summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.pcg-question p { margin: 0 0 16px; font-size: 1rem; line-height: 1.5; color: var(--pcv-doux); }

@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; }
}