/* Orientation par metier (2026-11-03) : liste et fiche, conçues d'abord pour le telephone.
   S'appuie sur les variables --ann-* de annuaire-v2.css (classe .ann). */
.met-page { display: block; max-width: 1000px; margin: 0 auto; padding: 0 0 28px; }
.met-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.met-page .ann-fil { margin: 6px 0 10px; font-size: 13px; color: var(--ann-gris); overflow-wrap: anywhere; }

/* ----- liste ----- */
.met-entete { padding: 16px; }
.met-entete h1 { margin: 0 0 6px; font-size: 24px; line-height: 1.2; }
.met-recherche { margin: 12px 0 0; }
.met-recherche input[type=search] { display: block; width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid #c9d0d8; border-radius: 10px;
	font: 16px Arial, Helvetica, sans-serif; background: #fff; color: var(--ann-texte); -webkit-appearance: none; appearance: none; }
.met-recherche input[type=search]:focus { border-color: var(--ann-bleu); outline: none; box-shadow: 0 0 0 3px rgba(26, 115, 184, .18); }

.met-lettres { display: flex; gap: 8px; margin: 12px -16px; padding: 4px 16px 8px; overflow-x: auto; -webkit-overflow-scrolling: touch;
	scroll-snap-type: x proximity; position: sticky; top: 0; z-index: 5; background: rgba(246, 248, 251, .96); backdrop-filter: blur(4px); }
.met-lettres::-webkit-scrollbar { display: none; }
.met-lettre { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; min-width: 46px; min-height: 46px; padding: 0 14px; justify-content: center;
	border: 1px solid var(--ann-bord); border-radius: 999px; background: #fff; color: var(--ann-texte); font-weight: bold; font-size: 16px; scroll-snap-align: start; }
.ann a.met-lettre { color: var(--ann-texte); }
.met-lettre span { font-size: 12px; font-weight: normal; color: var(--ann-gris); }
.met-lettre-on, .ann a.met-lettre-on { background: var(--ann-bleu); border-color: var(--ann-bleu); color: #fff; }
.met-lettre-on span { color: rgba(255, 255, 255, .85); }
.met-lettre-vide { opacity: .35; background: transparent; }

.met-groupe { margin: 0 0 22px; }
.met-groupe-titre { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; padding: 0 0 6px; border-bottom: 2px solid var(--ann-bleu);
	font-size: 26px; line-height: 1; color: var(--ann-bleu-fonce); }
.met-groupe-titre span { font-size: 13px; font-weight: normal; color: var(--ann-gris); }
.met-nb { margin: 4px 0 10px; color: var(--ann-gris); font-size: 14px; }
.met-grille { display: grid; grid-template-columns: 1fr; gap: 10px; }
.ann a.met-carte { display: flex; flex-direction: column; gap: 5px; padding: 14px 16px; background: #fff; border: 1px solid var(--ann-bord);
	border-left: 4px solid var(--ann-bleu); border-radius: var(--ann-rayon); color: var(--ann-texte); }
.ann a.met-carte:hover, .ann a.met-carte:focus-visible { border-color: var(--ann-bleu); box-shadow: 0 4px 14px rgba(15, 79, 134, .12); text-decoration: none; }
.met-carte-nom { font-size: 17px; font-weight: bold; line-height: 1.3; color: var(--ann-bleu-fonce); }
.met-carte-texte { font-size: 14px; line-height: 1.5; color: var(--ann-gris); }
.met-carte-suite { margin-top: auto; padding-top: 4px; font-size: 14px; font-weight: bold; color: var(--ann-bleu); }
.met-liens { margin: 20px 0 0; font-size: 14px; line-height: 1.9; color: var(--ann-gris); overflow-wrap: anywhere; }

/* ----- fiche ----- */
.met-tete { padding: 18px 16px; background: linear-gradient(135deg, #eaf3fb 0%, #fdf3e7 100%); border: 1px solid var(--ann-bord); border-radius: 14px; }
.met-etiquette { margin: 0 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--ann-gris); }
.met-fiche h1 { margin: 0 0 10px; font-size: 28px; line-height: 1.15; color: var(--ann-bleu-fonce); overflow-wrap: anywhere; }
.met-resume { font-size: 17px; line-height: 1.6; color: var(--ann-texte); }
.met-resume p { margin: 0 0 8px; }
.met-faits { display: flex; gap: 8px; margin: 14px -16px 0; padding: 0 16px 2px; list-style: none; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.met-faits::-webkit-scrollbar { display: none; }
.met-faits li { flex: 0 0 auto; }
.ann .met-faits a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 1px solid var(--ann-bord); border-radius: 999px; background: #fff;
	color: var(--ann-bleu-fonce); font-size: 14px; font-weight: bold; white-space: nowrap; }
.met-faits span { padding: 1px 7px; border-radius: 999px; background: var(--ann-bleu-pale); font-size: 12px; }

.met-corps { margin: 14px 0 0; display: flex; flex-direction: column; gap: 10px; }
.met-rubrique { background: #fff; border: 1px solid var(--ann-bord); border-radius: var(--ann-rayon); scroll-margin-top: 70px; }
.met-rubrique summary { display: flex; flex-direction: column; gap: 2px; min-height: 56px; padding: 12px 44px 12px 16px; position: relative; cursor: pointer; list-style: none; }
.met-rubrique summary::-webkit-details-marker { display: none; }
.met-rubrique summary::after { content: ""; position: absolute; right: 18px; top: 50%; width: 9px; height: 9px; margin-top: -6px; border-right: 2px solid var(--ann-bleu);
	border-bottom: 2px solid var(--ann-bleu); transform: rotate(45deg); transition: transform .15s; }
.met-rubrique[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.met-rub-titre { font-size: 18px; font-weight: bold; color: var(--ann-bleu-fonce); }
.met-rub-aide { font-size: 13px; color: var(--ann-gris); }
.met-texte { padding: 0 16px 16px; font-size: 16px; line-height: 1.65; overflow-wrap: anywhere; }
.met-texte p { margin: 0 0 10px; }
.met-texte ul, .met-texte ol { margin: 0 0 10px; padding-left: 22px; }
.met-texte li { margin: 0 0 4px; }
.met-etabs { padding: 4px 0 0; }
.met-etabs-titre { margin: 0; padding: 12px 16px 6px; font-size: 18px; color: var(--ann-bleu-fonce); }
.met-etab-liste { margin: 0; padding: 0; list-style: none; }
.met-etab-liste li { border-top: 1px solid var(--ann-bord); }
.ann .met-etab-liste a { display: flex; flex-direction: column; gap: 3px; min-height: 56px; padding: 12px 16px; color: var(--ann-texte); }
.met-etab-nom { font-weight: bold; color: var(--ann-bleu); overflow-wrap: anywhere; }
.met-etab-meta { font-size: 13px; color: var(--ann-gris); }
.met-etab-meta em { font-style: normal; padding: 1px 8px; border-radius: 999px; background: var(--ann-bleu-pale); font-size: 12px; font-weight: bold; }

.met-voisins { margin: 24px 0 0; }
.met-voisins h2 { margin: 0 0 10px; font-size: 20px; color: var(--ann-texte); }
.met-pn { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 20px 0 0; }
.ann .met-pn a { display: flex; flex-direction: column; gap: 2px; min-height: 56px; padding: 10px 14px; background: #fff; border: 1px solid var(--ann-bord); border-radius: var(--ann-rayon);
	font-weight: bold; color: var(--ann-bleu-fonce); overflow-wrap: anywhere; }
.ann .met-pn small { font-weight: normal; font-size: 12px; color: var(--ann-gris); }
.ann .met-pn-suiv { text-align: right; grid-column: 2; }

/* ----- tablette et ordinateur ----- */
@media (min-width: 640px) {
	.met-grille { grid-template-columns: 1fr 1fr; }
	.met-entete h1 { font-size: 28px; }
}
@media (min-width: 900px) {
	.met-grille { grid-template-columns: 1fr 1fr 1fr; }
	.met-lettres { position: static; flex-wrap: wrap; overflow: visible; margin: 12px 0; padding: 0; background: none; backdrop-filter: none; }
	.met-faits { flex-wrap: wrap; margin: 14px 0 0; padding: 0; overflow: visible; }
	.met-fiche h1 { font-size: 34px; }
	.met-tete { padding: 24px 28px; }
	.met-rubrique summary { cursor: default; pointer-events: none; padding-right: 16px; }
	.met-rubrique summary::after { display: none; }
	.met-texte { padding: 0 20px 20px; }
}
@media (prefers-reduced-motion: reduce) { .met-rubrique summary::after { transition: none; } }