/* Les PORTES d'un séjour (lot N1 de la refonte « navigation par portes », spec docs/specs/2026-10-16-navigation-portes-design.md) : sur la page du séjour (js/fil/maintenant.js), dans le second niveau du menu
   latéral du bureau (js/fil/coquille.js › secondNiveau) et dans l'onglet Centre. Préfixes fm- (page du séjour : suite de css/fil-maintenant.css), f- (coque) et fpo- ; jetons --f-* et --mv-* seulement, aucune couleur
   littérale (tests/charte.test.mjs). La couleur dit un état : sapin = prêt, rouge = critique, l'encre le reste ; jamais de lueur ni d'ombre colorée sur une carte. */

/* ---------- L'en-tête de la page : le séjour (qui s'ouvre sur la liste des séjours) et le menu ⋯ ---------- */
[data-interface="fil"] .fm-haut { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; margin: -4px 0 2px -6px; }
[data-interface="fil"] .fm-sejour { display: inline-flex; align-items: center; gap: 2px; min-width: 0; max-width: calc(100% - 52px); min-height: 44px; padding: 0 6px; border: 0; border-radius: 12px; background: none; color: var(--f-encre-2); font: 600 14px/1.2 Inter, system-ui, sans-serif; cursor: pointer; }
[data-interface="fil"] .fm-sejour:hover, [data-interface="fil"] .fm-sejour:focus-visible { color: var(--f-encre); background: var(--f-surface-2); }
[data-interface="fil"] .fm-sejour-nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-interface="fil"] .fm-sejour-g, [data-interface="fil"] .fm-sejour-g .fm-ico { width: 18px; height: 18px; flex: none; }
[data-interface="fil"] .fm-menu { position: relative; flex: none; }
[data-interface="fil"] .fm-menu-b { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -6px; border-radius: 12px; list-style: none; color: var(--f-encre-2); cursor: pointer; }
[data-interface="fil"] .fm-menu-b::-webkit-details-marker { display: none; }
[data-interface="fil"] .fm-menu-b .fm-ico { width: 24px; height: 24px; }
[data-interface="fil"] .fm-menu-b:hover, [data-interface="fil"] .fm-menu-b:focus-visible, [data-interface="fil"] .fm-menu[open] > .fm-menu-b { color: var(--f-encre); background: var(--f-surface-2); }
[data-interface="fil"] .fm-menu-liste { position: absolute; right: -6px; top: calc(100% + 2px); z-index: 40; display: grid; min-width: 220px; padding: 6px; background: var(--f-surface); border: 1px solid var(--f-filet); border-radius: 14px; box-shadow: 0 10px 28px color-mix(in srgb, var(--f-encre) 16%, transparent); }
[data-interface="fil"] .fm-menu-item { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: var(--f-encre); text-align: left; text-decoration: none; font: 500 15px/1.2 Inter, system-ui, sans-serif; cursor: pointer; }
[data-interface="fil"] .fm-menu-item:hover, [data-interface="fil"] .fm-menu-item:focus-visible { background: var(--f-surface-2); }

/* ---------- Les portes de la page : deux colonnes au téléphone, trois au bureau ---------- */
[data-interface="fil"] .fm-portes { margin: 24px 0 8px; }
[data-interface="fil"] .fm-portes-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 720px) { [data-interface="fil"] .fm-portes-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
[data-interface="fil"] .f-tuile.fm-porte { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "m t" "l l"; align-items: center; gap: 4px 10px; min-height: 84px; padding: 12px; border-radius: 18px; text-align: left; font-weight: 400; }
[data-interface="fil"] .fm-porte .fmv, [data-interface="fil"] .fm-porte > .f-ico { grid-area: m; }   /* `.fmv-hote` est `display: contents` : le dessin SVG est la cellule de la grille */
[data-interface="fil"] .fm-porte .fmv { width: 40px; height: 32px; }
[data-interface="fil"] .fm-porte > .f-ico { width: 32px; height: 32px; }
[data-interface="fil"] .fm-porte-tete { grid-area: t; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; min-width: 0; }
[data-interface="fil"] .fm-porte-ligne { grid-area: l; }
@media (min-width: 720px) {
  [data-interface="fil"] .f-tuile.fm-porte { grid-template-areas: "m t" "m l"; align-items: start; gap: 2px 12px; }
  [data-interface="fil"] .fm-porte .fmv { width: 48px; height: 38px; }
  [data-interface="fil"] .fm-porte > .f-ico { width: 38px; height: 38px; }
}
[data-interface="fil"] .fm-porte-nom { font: 600 15px/1.25 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }
[data-interface="fil"] .fm-porte .fm-etat { font: 600 12px/1.25 Inter, system-ui, sans-serif; }
[data-interface="fil"] .fm-porte-chiffre { color: var(--f-encre); font: 600 15px/1.25 Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
[data-interface="fil"] .fm-porte-ligne { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: var(--f-encre-2); font: 400 13px/1.35 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }
[data-interface="fil"] .fm-porte[data-etat="critique"] .fm-porte-ligne { color: var(--f-urgent); }
[data-interface="fil"] .fm-porte .fm-pastille-n { position: static; margin-left: auto; align-self: center; }
/* En préparation, les portes tiennent la seconde colonne de la page (js/fil/maintenant.js › data-fil-portes-ici) : au bureau large, deux par rangée à côté de « À traiter » */
@media (min-width: 1200px) {
  [data-interface="fil"] .fm-col > .fm-portes { margin-top: 0; }
  [data-interface="fil"] .fm-col > .fm-portes .fm-portes-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Le second niveau du menu latéral (bureau) : le séjour ouvert, ses portes ---------- */
@media (min-width: 900px) {
  [data-interface="fil"] .f-navigation .f-portes { display: grid; gap: 1px; margin: 0 0 8px 20px; padding-left: 10px; border-left: 1px solid var(--f-filet); }
  [data-interface="fil"] .f-navigation .f-portes .f-lien { min-height: 36px; padding: 5px 10px; border: 0; border-radius: 10px; color: var(--f-encre-2); font-size: 14px; }
  [data-interface="fil"] .f-navigation .f-portes .f-portes-nom { min-height: 40px; color: var(--f-encre); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; line-height: 30px; }
  [data-interface="fil"] .f-navigation .f-portes .f-porte { justify-content: space-between; }
  [data-interface="fil"] .f-navigation .f-portes .f-lien[aria-current="page"] { background: var(--f-surface-2); color: var(--f-encre); font-weight: 600; }
  [data-interface="fil"] .f-porte-etat { flex: none; width: 7px; height: 7px; border-radius: 50%; background: transparent; }
  [data-interface="fil"] .f-porte-etat--pret { background: var(--f-fait); }
  [data-interface="fil"] .f-porte-etat--a-faire { background: var(--f-encre-3); }
  [data-interface="fil"] .f-porte-etat--critique { background: var(--f-urgent); }
}

/* ---------- La ligne de contexte de l'en-tête (« ‹ Colo des Cimes · 13 → 20 oct. », vers la page du séjour) : au bureau, une cible de 24 px au moins (18 avant),
   sans rien déplacer — la marge rend ce que la marge intérieure ajoute (le haut de la grille du planning en dépend) ---------- */
@media (min-width: 900px) {
  [data-interface="fil"] .fh-contexte { padding: 3px 4px; margin: -3px 0 1px -8px; border-radius: 8px; }
}

/* ---------- L'onglet Centre (Logistique) et le lien des fichiers (Documents) ---------- */
[data-interface="fil"] .fce-onglet-pied { margin: 12px 0 0; }
[data-interface="fil"] .fpo-fichiers { padding: 0 16px 24px; }