/* =============================================================
   Page Features
   Tout le vocabulaire vient des blocs pg-* de components.css. Il ne
   reste ici que ce qu'un bloc partage ne peut pas savoir: le format
   des captures d'ecran et les gouttieres propres a cette page.
   ============================================================= */

/* Une capture est un ecran de telephone: laissee a 100% de sa colonne
   elle ferait deux ecrans de haut et ecraserait le texte a cote. */
.feat-shot {
  max-width: 260px;
  margin: 0 auto;
}

/* Le hero montre une illustration, plus une capture: elle peut prendre
   plus de place qu'un ecran de telephone. */
.feat-shot.feat-illus { max-width: 420px; }

/* Les points d'accroche du hero sont un rappel, pas le corps de la
   page: meme filet, mais un pas plus serre. */
.feat-points li { padding: 16px 0; }
.feat-points b { font-size: 17px; }

/* pg-cols n'a pas de gouttiere verticale (il suppose des listes qui
   se suivent). Ici les colonnes sont des blocs de texte: quand elles
   s'empilent en mobile il leur faut de l'air. */
.feat-duo { row-gap: clamp(32px, 4vw, 52px); }

/* Une liste filetee qui suit un paragraphe de .pg-copy doit respirer
   comme un paragraphe de plus. */
.feat-duo .pg-list { margin-top: 22px; }

/* Le lien secondaire de la cloture: un bouton, pas un paragraphe. */
.pg-cta-alt { margin-top: 24px; }

@media (max-width: 920px) {
  .feat-shot { max-width: 220px; }
  .feat-shot.feat-illus { max-width: 340px; }
}

/* Titre de section et illustration cote a cote: le bloc garde la marge
   basse du pg-head, le pg-head lui-meme n'en a plus. */
.feat-headsplit { margin-bottom: clamp(36px, 4vw, 60px); }
.feat-headsplit .pg-head,
.feat-headsplit .pg-illus { margin-bottom: 0; }