/* Styles propres aux pages annuaire par métier.
   Fichier séparé pour ne pas alourdir style.css chargé sur tout le site.
   Mobile-first : une seule colonne par défaut. */

.crumbs {
  margin: 0 0 14px;
  font-size: .86rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.crumbs a { color: var(--muted, #8a93a6); text-decoration: none; }
.crumbs a:hover { color: var(--turquoise, #20B8B0); text-decoration: underline; }
.crumbs span { color: var(--ink, #e8eaf0); }

.seo-texte { margin-top: 8px; }
.seo-texte h2 {
  font-size: 1.14rem;
  margin: 22px 0 8px;
  line-height: 1.35;
}
.seo-texte h2:first-child { margin-top: 0; }
.seo-texte p {
  margin: 0 0 12px;
  font-size: .97rem;
  line-height: 1.7;
}

.seo-lies {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.seo-lie {
  display: block;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .08);
  text-decoration: none;
  transition: border-color .18s, background .18s;
}
.seo-lie:hover {
  border-color: rgba(32, 184, 176, .45);
  background: rgba(32, 184, 176, .06);
}
.seo-lie strong {
  display: block;
  margin-bottom: 4px;
  font-size: .98rem;
  line-height: 1.35;
  color: var(--ink, #e8eaf0);
}
.seo-lie span { display: block; line-height: 1.55; }

@media (min-width: 700px) {
  .seo-lies { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .seo-lies { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seo-texte h2 { font-size: 1.24rem; }
}