/* Pages d'exemples par métier (exemple-<métier>.html), en plus de style.css : direction « Plaque », peu de texte.
   Fabriquées par « node bonjour-voisin.mjs exemples-metiers » (lib/pages-exemples.mjs). */
.ex-tete{padding:40px 0 8px;background:var(--feuille)}
.ex-etiquette{display:inline-block;margin:0 0 14px;padding:4px 10px 3px;border:1.5px solid var(--email);border-radius:3px;color:var(--email);font:600 .95rem/1.2 var(--plaque);letter-spacing:.06em;text-transform:uppercase}
.ex-tete h1{margin-bottom:14px}
.ex-tete .chapeau{margin-bottom:0}
.ex-ecrans{padding:32px 0 56px;background:var(--feuille)}
.ex-grille{display:grid;gap:32px;align-items:end}
@media (min-width:900px){.ex-grille{grid-template-columns:1fr auto;gap:40px}}
.ex-grille figure{margin:0}
.ex-grille figcaption{margin-top:10px;color:var(--gris);font-size:.97rem}
.ex-ordinateur img{width:100%;height:auto;border:1px solid var(--filet);border-top:22px solid var(--fond)}
.ex-telephone{justify-self:center}
.ex-telephone figcaption{text-align:center}
@media (max-width:899px){.ex-ordinateur{order:2}.ex-telephone{order:1}}
.ex-points{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:0;border-top:1px solid var(--filet);max-width:44rem}
.ex-points li{padding:14px 0;border-bottom:1px solid var(--filet);font-weight:600}
.ex-note{margin:20px 0 0;color:var(--gris);max-width:44rem}
.ex-autres{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:0 24px}
.ex-autres a,.ex-autres span{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
.ex-autres span{color:var(--gris)}