/* Guides d'Eyno (capture-ecran-mac.html…) : un article lisible, dans le cadre commun (socle.css, pages.css).
   Mêmes blocs que les articles de Bloomwise : fil d'Ariane, date et temps de lecture, « À retenir », sommaire,
   corps en H2/H3, FAQ, appel à l'action. */

/* Le texte de l'article tient dans une colonne de lecture, alignée sur la marge comme les ouvertures */
.article { max-width: 720px; }
.article + .article { margin-top: var(--spacing-56); }
.article h2 { margin: 0 0 var(--spacing-16); }
.article h3 { margin: var(--spacing-24) 0 8px; font: var(--font-weight-regular) 22px/1.25 var(--font-acidgrotesk); letter-spacing: -.01em; color: var(--encre); }
.article p, .article li { color: var(--ardoise); font-size: 17px; line-height: 1.6; }
.article p { margin: 0; }
.article p + p, .article ul + p, .article p + ul { margin-top: 12px; }
.article ul { margin: 0; padding-left: 1.2em; }
.article li + li { margin-top: 6px; }
.article b { color: var(--encre); font-weight: 500; }
.article a { color: var(--encre); text-decoration: underline; text-underline-offset: 3px; }
code { font: .9em/1.5 ui-monospace, "SF Mono", Menlo, monospace; background: var(--nuage); padding: 1px 6px; border-radius: 6px; color: var(--encre); overflow-wrap: anywhere; }

/* Une touche du clavier */
kbd { display: inline-block; min-width: 1.7em; padding: 1px 7px; border-radius: 7px; background: var(--papier); box-shadow: inset 0 0 0 1px var(--filet-fort), 0 1px 0 var(--filet-fort);
  font: var(--font-weight-medium) .88em/1.5 var(--font-inter); color: var(--encre); text-align: center; white-space: nowrap; }

/* En tête d'article : le fil d'Ariane au-dessus, la date et le temps de lecture sous le chapeau */
.fil { display: flex; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--encre-50); margin: 0; }
.fil a { color: var(--encre-50); text-decoration: none; }
.fil a:hover { color: var(--encre); }
.infos { margin: 0; font-size: 13.5px; color: var(--encre-50); }

/* « À retenir » : le résumé qui se suffit à lui-même, celui que reprennent Google et les IA */
.retenir { max-width: 720px; background: var(--papier); border-radius: var(--radius-cards); padding: var(--card-padding) 28px; box-shadow: inset 0 0 0 1px var(--filet); }
.retenir h2 { margin: 0 0 12px; font: var(--font-weight-medium) var(--text-micro-label)/var(--leading-micro-label) var(--font-inter); letter-spacing: 2.64px; text-transform: uppercase; color: var(--encre-50); }
.retenir ul { margin: 0; padding-left: 1.2em; }
.retenir li { color: var(--encre); font-size: 16px; line-height: 1.55; }
.retenir li + li { margin-top: 8px; }

/* Le sommaire : des liens vers chaque partie */
.sommaire { max-width: 720px; margin-top: var(--spacing-24); }
.sommaire p { margin: 0 0 8px; font-size: 13.5px; color: var(--encre-50); }
.sommaire ol { margin: 0; padding-left: 1.3em; columns: 2; column-gap: 32px; }
.sommaire li { font-size: 15px; line-height: 1.5; break-inside: avoid; margin-bottom: 6px; color: var(--encre-50); }
.sommaire a { color: var(--encre); text-decoration: none; }
.sommaire a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Les raccourcis : une ligne par geste, les touches à gauche */
.raccourcis { margin: var(--spacing-24) 0 0; border-radius: var(--radius-cards); background: var(--papier); box-shadow: inset 0 0 0 1px var(--filet); overflow: hidden; }
.raccourcis div { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 6px 24px; padding: 16px var(--card-padding); align-items: baseline; }
.raccourcis div + div { box-shadow: inset 0 1px 0 var(--filet); }
.raccourcis dt { display: flex; gap: 5px; flex-wrap: wrap; align-items: baseline; }
.raccourcis dd { margin: 0; color: var(--ardoise); font-size: 15.5px; line-height: 1.5; }
.raccourcis dd b { color: var(--encre); font-weight: 500; }

/* Une capture de l'app, droite, avec sa légende */
.capture { margin: var(--spacing-24) 0 0; max-width: 820px; }
.capture img { display: block; width: 100%; height: auto; border-radius: var(--radius-cards); box-shadow: inset 0 0 0 1px var(--filet), 0 30px 80px -50px rgba(60,60,110,.45); }
.capture figcaption { margin-top: 12px; font-size: 14px; color: var(--encre-50); }

/* Le passage sur Eyno Draw : un panneau blanc, l'icône de l'app en tête */
.encart { background: var(--papier); border-radius: var(--radius-product-panels); padding: 40px; box-shadow: inset 0 0 0 1px var(--filet), 0 30px 90px -50px #e77fb0; }
.encart .tete { display: flex; align-items: center; gap: 14px; margin-bottom: var(--spacing-16); }
.encart .tete img { width: 56px; height: 56px; }
.encart .tete p { margin: 0; font-size: 14px; color: var(--encre-50); }
.encart .etapes { margin-top: var(--spacing-24); }
.encart .suite { margin-top: var(--spacing-24); }
.encart .boutons { margin-top: var(--spacing-24); }

@media (max-width: 900px) {
  .raccourcis div { grid-template-columns: minmax(0, 1fr); }
  .encart { padding: 24px 18px; }
  .retenir { padding: 18px; }
  .sommaire ol { columns: 1; }
}
/* Une image carrée (la roue de Convert) : moins large, pour ne pas occuper tout l'écran */
.capture.carree { max-width: 560px; }
/* Pages produit (eyno-paper.html…) : l'icône de l'app au-dessus du titre */
.produit-tete { display: flex; align-items: center; gap: 14px; }
.produit-tete img { width: 64px; height: 64px; }
.produit-tete p { margin: 0; font-size: 14px; color: var(--encre-50); }