/* =============================================================================
   onglets-formation.css — permis-de-exploitation.com
   Samy 13/09/2026 : selecteur de formation des pages departement et region
   (onglets_formation.php). Deux variantes affichees ensemble pour comparaison :
   .pof (onglets pleine largeur) et .pof-coin (menu compact en haut a droite).
   Meme dessin que les onglets de la page ville V2 et que l'accueil : fond gris clair,
   element actif blanc en relief, duree en gros chiffre, accent rouge de marque.
   Prefixe pof- verifie libre dans les feuilles du site. Retour arriere : retirer
   les appels dans les gabarits (la feuille n'est chargee que par ces appels).
   ============================================================================= */
.pof, .pof *, .pof-coin, .pof-coin * { box-sizing: border-box; float: none; }
.pof, .pof-coin { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: #111827; text-align: left; }
.pof-masque { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Variante A : onglets ---- */
.pof { clear: both; margin: 6px 0 22px; }
.pof .pof-titre { font-size: 14px; font-weight: 600; letter-spacing: .02em; color: #7A8496; margin: 0 0 10px; padding: 0; }
.pof .pof-liste { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 6px; list-style: none; background: #F3F4F7; border-radius: 16px; }
.pof .pof-liste li { margin: 0; padding: 0; list-style: none; border: 0; }
.pof a.pof-onglet { display: flex; align-items: center; gap: 12px; height: 100%; padding: 11px 13px; border-radius: 12px; color: #4B5566; text-decoration: none; background: transparent; border: 0; transition: background .16s ease, box-shadow .16s ease; }
.pof a.pof-onglet:hover { background: rgba(255, 255, 255, .72); color: #111827; text-decoration: none; }
.pof a.pof-onglet:focus-visible { outline: 2px solid #e62117; outline-offset: -2px; }
.pof .pof-duree { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 13px; background: #fff; box-shadow: inset 0 0 0 1px #E3E6EC; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1; color: #7A8496; }
.pof .pof-duree strong { font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1; color: #111827; margin-bottom: 3px; }
.pof .pof-texte { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pof .pof-nom { font-size: 14px; font-weight: 700; line-height: 1.25; color: #111827; }
.pof .pof-infos { font-size: 12.5px; line-height: 1.3; color: #7A8496; }
.pof a.pof-onglet.pof-actif { background: #fff; box-shadow: 0 1px 2px rgba(17, 24, 39, .10), 0 0 0 1px rgba(17, 24, 39, .04), 0 8px 20px rgba(17, 24, 39, .06); }
.pof a.pof-onglet.pof-actif .pof-duree { background: #e62117; box-shadow: 0 4px 10px rgba(230, 33, 23, .28); color: rgba(255, 255, 255, .88); }
.pof a.pof-onglet.pof-actif .pof-duree strong { color: #fff; }

/* ---- Variante B : menu compact en haut a droite ---- */
.pof-coin { display: flex; justify-content: flex-end; margin: 0 0 8px; position: relative; z-index: 20; }
.pof-menu { position: relative; }
.pof-menu > summary { list-style: none; display: inline-flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; background: #fff; border: 1px solid #E3E6EC; border-radius: 999px; box-shadow: 0 1px 2px rgba(17, 24, 39, .06); cursor: pointer; font-size: 14px; line-height: 1.2; color: #111827; user-select: none; }
.pof-menu > summary::-webkit-details-marker { display: none; }
.pof-menu > summary:hover { border-color: #C9CED8; }
.pof-menu > summary:focus-visible { outline: 2px solid #e62117; outline-offset: 2px; }
.pof-menu-etiquette { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #7A8496; padding-left: 8px; }
.pof-menu-choix { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.pof-mini { display: inline-flex; align-items: baseline; justify-content: center; min-width: 34px; height: 28px; padding: 0 6px; border-radius: 8px; background: #e62117; color: #fff; font-size: 15px; font-weight: 800; line-height: 28px; }
.pof-mini small { font-size: 10px; font-weight: 700; margin-left: 1px; }
.pof-chevron { width: 8px; height: 8px; border-right: 2px solid #7A8496; border-bottom: 2px solid #7A8496; transform: rotate(45deg); margin: -3px 2px 0 2px; transition: transform .2s ease; }
.pof-menu[open] .pof-chevron { transform: rotate(-135deg); margin-top: 3px; }
.pof-menu > ul { position: absolute; right: 0; top: calc(100% + 6px); width: 330px; max-width: 86vw; margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid #E8EAF0; border-radius: 14px; box-shadow: 0 12px 32px rgba(17, 24, 39, .14); }
.pof-menu > ul li { margin: 0; padding: 0; list-style: none; border: 0; }
.pof-menu > ul a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; color: #111827; text-decoration: none; }
.pof-menu > ul a:hover { background: #F7F8FA; text-decoration: none; }
.pof-menu > ul a .pof-mini { background: #F3F4F7; color: #111827; }
.pof-menu > ul a.pof-actif { background: #FDF0EE; }
.pof-menu > ul a.pof-actif .pof-mini { background: #e62117; color: #fff; }
.pof-menu-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pof-menu-nom { font-size: 14px; font-weight: 600; line-height: 1.25; }
.pof-menu-infos { font-size: 12px; color: #7A8496; }

/* ---- Petits ecrans ---- */
@media (max-width: 991px) {
	.pof .pof-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.pof { margin: 4px 0 14px; }
	.pof .pof-titre { font-size: 12px; margin-bottom: 6px; }
	.pof .pof-liste { display: flex; gap: 6px; padding: 4px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
	.pof .pof-liste::-webkit-scrollbar { display: none; }
	.pof .pof-liste li { flex: 0 0 auto; scroll-snap-align: center; }
	.pof a.pof-onglet { width: 212px; min-height: 64px; padding: 8px 10px; gap: 9px; }
	.pof .pof-duree { width: 44px; height: 44px; font-size: 8.5px; letter-spacing: .03em; }
	.pof .pof-duree strong { font-size: 19px; }
	.pof .pof-nom { font-size: 13px; line-height: 1.2; }
	.pof .pof-nb { display: none; }
	.pof-coin { justify-content: flex-start; }
	.pof-menu > ul { left: 0; right: auto; }
	.pof-menu > summary { font-size: 13px; }
}

/* Le cadre .txtdetail du site colore et souligne tous ses liens (theme.css) : le menu B est dedans. */
.txtdetail .pof-coin .pof-menu > ul a,
.txtdetail .pof-coin .pof-menu > ul a:hover,
.txtdetail .pof-coin .pof-menu > ul a:focus { color: #111827; border-bottom: 0; text-decoration: none; }
.txtdetail .pof-coin .pof-menu > ul a:hover .pof-menu-nom { color: #e62117; }
.pof a.pof-onglet, .pof a.pof-onglet:hover { border-bottom: 0; }