/* =====================================================================
   metiers.css — les pages de présentation par métier (référencement)
   ---------------------------------------------------------------------
   Elles reprennent la vitrine (vitrine.css, sombre d'abord, claire avec
   html.theme-clair posé par theme.js) ; ici, seulement ce qu'elles ont
   en plus : le fil d'Ariane, la grille des fonctions, l'image du plan,
   les liens vers les autres métiers et le pied de page.
   ===================================================================== */
@font-face{font-family:"Plus Jakarta Sans";src:url("./polices/jakarta-var.woff2") format("woff2-variations");
  font-weight:200 800;font-style:normal;font-display:swap}
html,body{margin:0}
.mt-fil{font-size:13.5px;color:var(--vt-fg3);margin-bottom:-4px}
#vitrine .mt-fil a{color:var(--vt-fg2);text-decoration:none}
#vitrine .mt-fil a:hover{text-decoration:underline}
.mt-grille{display:grid;gap:12px}
.mt-fonc{border-radius:18px;background:var(--vt-surf);border:1px solid var(--vt-trait2);padding:20px 20px 18px;display:grid;gap:6px;align-content:start}
.mt-fonc b{font-size:17px;color:var(--vt-fg);letter-spacing:-.01em}
.mt-fonc p{color:var(--vt-fg2);font-size:15px}
.mt-image img{width:100%;height:auto;border-radius:20px;border:1px solid var(--vt-trait);box-shadow:var(--vt-ombre);background:var(--vt-surf2)}
.mt-liens{display:flex;flex-wrap:wrap;gap:10px}
#vitrine .mt-lien{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;
  border:1px solid var(--vt-trait2);background:var(--vt-surf);color:var(--vt-fg);font-weight:650;font-size:15px;text-decoration:none}
#vitrine .mt-lien:hover{border-color:var(--vt-or);color:var(--vt-or)}
.mt-pied{border-top:1px solid var(--vt-trait);padding:26px 0 34px;font-size:14px}
.mt-pied .vt-large{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center}
#vitrine .mt-pied a{color:var(--vt-fg2)}
.mt-pied span{color:var(--vt-fg3);margin-left:auto}
@media (min-width:720px){ .mt-grille{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1000px){ .mt-grille{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:720px){ .mt-pied span{margin-left:0;width:100%} }