/* Le convoyage, natif Le Fil (js/convoyage/ : feuille de route de terrain, écran de direction, écran « Hors réseau » ; la carte posée sous les chiffres clés d'un séjour est en css/fil-moment.css).
   Préfixe fcv-, jetons --f-* de css/fil.css. Kit du budget (css/fil-budget.css : .fb, .fb-carte, .fb-bouton, .fb-feuille…) ; ce fichier ne porte que ce qui est propre au convoyage.
   C'est un écran de TERRAIN (téléphone, une main, parfois sans réseau) : cibles de 44 px et plus (le pointage Présent / Absent : 56 px), l'heure du rendez-vous en grand, la couleur dit
   l'essentiel (sapin = présent / reçu, brique = absent / allergie, ambre = ce qui attend ou demande un appel). Sept tailles de texte (12, 14, 16, 18, 24, 30, 64), filets plutôt qu'ombres,
   aucun effet. Remplace css/convoyage.css (classique, préfixe conv-, supprimé). Les feuilles (.fb-voile) sont posées dans <body> : elles héritent des jetons de <html>. */

.fcv [hidden] { display: none !important; }
.fcv-etat { min-width: 0; }

/* ---------- Bandeaux d'état : hors réseau (information), pointages en attente (appelle une action), réseau de retour ---------- */
.fcv-bandeau { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; padding: 10px 14px; background: var(--f-surface); border: 1px solid var(--f-filet); border-left-width: 4px; border-radius: 14px; font: 400 14px/1.4 Inter, system-ui, sans-serif; }
.fcv-horsligne { border-left-color: var(--f-encre-3); }
.fcv-file { border-left-color: var(--f-attention); }
.fcv-hr-reseau { border-left-color: var(--f-fait); }
.fcv-file-txt { flex: 1 1 auto; font-weight: 600; }

/* ---------- Tête ---------- */
.fcv-tete { padding: 4px 0 12px; min-width: 0; }
.fcv-titre { margin: 0; font: 600 24px/1.25 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }
.fcv-jour { color: var(--f-encre-2); font-weight: 400; }
.fcv-sous { margin: 4px 0 0; color: var(--f-encre-2); font: 400 14px/1.4 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }
.fcv-retour { margin: 0 0 4px; }
.fcv-voirtout { width: 100%; margin-top: 12px; }
.fcv-sens { margin: 0 0 8px; }
.fcv-sens-titre.fb-sous-titre { margin: 8px 0; }
.fcv-cartes { display: grid; gap: 12px; min-width: 0; }
.fcv-vide { padding: 4px 0; }

/* ---------- Carte d'un trajet : l'étape en cours porte un filet d'encre ---------- */
.fb-carte.fcv-carte { padding: 0; min-width: 0; }   /* pas d'overflow:hidden : le compteur des enfants colle en haut (sticky) */
.fb-carte.fcv-carte.fcv-centre { padding: 16px; }
.fcv-carte.est-encours { border-color: var(--f-encre); }
.fcv-carte.est-termine { background: var(--f-surface-2); }
.fcv-carte.est-termine .fcv-carte-titre { color: var(--f-encre-2); font-weight: 500; }
.fcv-carte-tete { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; min-height: 64px; margin: 0; padding: 12px 16px; background: transparent; border: 0; border-radius: 24px; color: var(--f-encre); font: inherit; text-align: left; cursor: pointer; }
:root [data-app] .fcv button.fcv-carte-tete { min-height: 64px; }
.fcv-carte-tete:hover { background: var(--f-surface-2); }
.fcv-num-etape { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--f-encre-3); border-radius: 50%; font: 600 14px/1 Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.fcv-carte.est-encours .fcv-num-etape { background: var(--f-encre); border-color: var(--f-encre); color: var(--f-fond); }
.fcv-carte-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fcv-carte-titre { font: 600 16px/1.3 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }
.fcv-fleche { color: var(--f-encre-3); font-weight: 400; }
.fcv-carte-sous { color: var(--f-encre-2); font: 400 14px/1.4 Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.fcv-carte-droite { display: flex; align-items: center; gap: 8px; }
.fcv-carte-cpt { font: 600 16px/1.3 Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.fcv-carte.est-encours .fcv-tag { background: var(--f-encre); border-color: var(--f-encre); color: var(--f-fond); }
.fcv-tag-fini { color: var(--f-encre-2); }
.fcv-chev { width: 1em; color: var(--f-encre-3); text-align: center; }
.fcv-nonrelie { margin: 0 16px 12px; padding: 10px 12px; border-left: 3px solid var(--f-attention); border-radius: 10px; background: var(--f-surface-2); font: 400 14px/1.45 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }
@media (max-width: 420px) {
  .fcv-carte-tete { grid-template-columns: auto minmax(0, 1fr); }
  .fcv-carte-droite { grid-column: 1 / -1; justify-content: flex-end; margin-top: -6px; }
}

/* ---------- Corps d'une carte ouverte : à gauche le trajet (où, quand, avec qui), à droite les enfants (sur écran large) ---------- */
.fcv-corps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 16px; border-top: 1px solid var(--f-filet); }
.fcv-col-g, .fcv-col-d { display: grid; gap: 14px; align-content: start; min-width: 0; }
.fcv-reste { display: grid; min-width: 0; }
@media (min-width: 900px) {
  .fcv-corps { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 24px; }
  .fcv-reste { grid-column: 1 / -1; }
  .fcv-voirtout { width: auto; min-width: 280px; }
}

/* ---------- Le rendez-vous, en gros ---------- */
.fcv-rdv { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; background: var(--f-surface-2); border: 1px solid var(--f-filet); border-radius: 18px; min-width: 0; }
.fcv-rdv-lib, .fcv-rdv-jour { color: var(--f-encre-2); font: 500 14px/1.3 Inter, system-ui, sans-serif; }
.fcv-rdv-heure { font: 600 64px/1 Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.fcv-rdv-lieu { font: 600 18px/1.3 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }
.fcv-rdv-ville { color: var(--f-encre-2); font: 400 14px/1.4 Inter, system-ui, sans-serif; }
.fcv-centre .fcv-rdv { margin-top: 10px; }
.fcv-meta { margin-top: 10px; }

.fcv-transport { display: grid; gap: 2px; }
.fcv-transport-ligne { margin: 0; font: 400 16px/1.4 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }
.fcv-horaires { color: var(--f-encre-2); font-size: 14px; }
.fcv-code { margin: 0; color: var(--f-encre-2); font: 400 12px/1.4 Inter, system-ui, sans-serif; }

/* ---------- Qui : chef de convoi et accompagnants ---------- */
.fcv-equipe { display: grid; gap: 6px; min-width: 0; }
.fcv-role { color: var(--f-encre-2); font: 500 12px/1.4 Inter, system-ui, sans-serif; }
.fcv-nom { font-weight: 600; overflow-wrap: anywhere; }
.fcv-accomp { display: grid; }
.fcv-pers { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 52px; padding: 4px 0; border-top: 1px solid var(--f-filet); }
.fcv-equipe > .fcv-pers { border-top: 0; }
.fcv-pers-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fcv-num { color: var(--f-encre-2); font: 400 14px/1.3 Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; }

/* Appeler : lien-bouton de 44 px au moins (pouce) */
.fcv-tel { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--f-filet); border-radius: 14px; background: var(--f-surface); color: var(--f-encre); font: 500 14px/1.2 Inter, system-ui, sans-serif; text-decoration: none; }
.fcv-tel:hover { background: var(--f-surface-2); }
.fcv-tel .fcv-num { color: inherit; }
.fcv-tel-ligne { margin-left: auto; }
.fcv-tel-txt { white-space: nowrap; }
.fcv-tel-suite { display: none; }
@media (min-width: 900px) { .fcv-tel-suite { display: inline; } }

/* Chef, dernier trajet de l'aller : l'assistance transport à l'arrivée */
.fcv-assistance { display: grid; gap: 10px; justify-items: start; padding: 12px 14px; border: 1px solid var(--f-attention); border-radius: 14px; background: var(--f-surface-2); }
.fcv-assistance-txt { margin: 0; font: 400 16px/1.5 Inter, system-ui, sans-serif; }
.fcv-code-assistance { padding: 0 6px; border: 1px solid var(--f-attention); border-radius: 8px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- Les enfants du trajet : compteur commun, une ligne par enfant, pointage à deux gros boutons ---------- */
.fcv-enfants { display: grid; gap: 8px; min-width: 0; }
.fcv-enfants-tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 8px 0; background: var(--f-surface); border-bottom: 1px solid var(--f-filet); }
@media (max-width: 899px) { .fcv-enfants-tete { position: sticky; top: 68px; z-index: 5; } }
.fcv-enfants-titre { margin: 0; font: 600 16px/1.3 Inter, system-ui, sans-serif; }
.fcv-compteur { padding: 2px 10px; border: 1px solid var(--f-filet); border-radius: 10px; font: 600 16px/1.3 Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.fcv-compteur-abs { color: var(--f-urgent); font: 600 14px/1.3 Inter, system-ui, sans-serif; }
.fcv-liste-enfants { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }

.fcv-enfant { display: grid; gap: 8px; min-width: 0; padding: 12px; background: var(--f-surface); border: 1px solid var(--f-filet); border-left-width: 4px; border-radius: 14px; }
.fcv-enfant > * { min-width: 0; }
.fcv-enfant.est-present { border-left-color: var(--f-fait); background: color-mix(in srgb, var(--f-fait) 10%, var(--f-surface)); }
.fcv-enfant.est-absent { border-left-color: var(--f-urgent); background: color-mix(in srgb, var(--f-urgent) 8%, var(--f-surface)); }
.fcv-enfant.est-attente { border-left-style: dashed; }
.fcv-enfant-nom { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.fcv-enfant-nom .fcv-nom { font: 600 18px/1.3 Inter, system-ui, sans-serif; }
.fcv-age { color: var(--f-encre-2); font: 400 14px/1.3 Inter, system-ui, sans-serif; }
.fcv-enfant-liens { display: flex; flex-wrap: wrap; gap: 8px; }
.fcv-pastilles { display: flex; flex-wrap: wrap; gap: 6px; }
.fcv-pas-allergie { border-color: var(--f-urgent); color: var(--f-urgent); }
.fcv-pas-attention, .fcv-pas-signalement { border-color: var(--f-attention); color: var(--f-attention); }
.fcv-txts { display: grid; gap: 2px; }
.fcv-terrain-txt { margin: 0; color: var(--f-encre-2); font: 400 14px/1.45 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }
.fcv-allergie-txt { color: var(--f-encre); font-weight: 500; }
.fcv-pointage { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fcv-geste { min-height: 56px; padding: 0 12px; border: 1px solid var(--f-encre-3); border-radius: 14px; background: var(--f-surface); color: var(--f-encre); font: 600 16px/1.2 Inter, system-ui, sans-serif; cursor: pointer; touch-action: manipulation; }
:root [data-app] .fcv button.fcv-geste { min-height: 56px; }
.fcv-geste:active { transform: scale(.98); }
.fcv-geste-present:hover { border-color: var(--f-fait); }
.fcv-geste-absent:hover { border-color: var(--f-urgent); }
.fcv-geste-present.est-actif { border-color: var(--f-fait); background: color-mix(in srgb, var(--f-fait) 16%, var(--f-surface)); color: var(--f-fait); }
.fcv-geste-absent.est-actif { border-color: var(--f-urgent); background: color-mix(in srgb, var(--f-urgent) 14%, var(--f-surface)); color: var(--f-urgent); }
.fcv-statut { margin: 0; color: var(--f-encre-2); font: 400 14px/1.4 Inter, system-ui, sans-serif; }
.fcv-enfant.est-attente .fcv-statut { color: var(--f-attention); font-weight: 600; }
.fcv-absent-rappel { display: grid; gap: 8px; justify-items: start; padding: 10px 12px; border-left: 3px solid var(--f-attention); border-radius: 10px; background: var(--f-surface-2); }
.fcv-absent-txt { margin: 0; font: 400 14px/1.5 Inter, system-ui, sans-serif; }
@media (min-width: 900px) {
  .fcv-enfant { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 16px; }
  .fcv-enfant > .fcv-pastilles, .fcv-enfant > .fcv-txts, .fcv-enfant > .fcv-statut, .fcv-enfant > .fcv-absent-rappel { grid-column: 1 / -1; }
  .fcv-enfant > .fcv-pointage { grid-column: 2; grid-row: 1 / span 2; grid-template-columns: repeat(2, minmax(120px, 1fr)); }
}

/* ---------- Le reste, à un clic ---------- */
.fcv-details { border-top: 1px solid var(--f-filet); }
.fcv-details-titre { display: flex; align-items: center; min-height: 48px; font: 600 16px/1.3 Inter, system-ui, sans-serif; cursor: pointer; }
.fcv-liste { margin: 0; padding: 0 0 12px; list-style: none; display: grid; gap: 8px; }
.fcv-liste li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font: 400 16px/1.4 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }
.fcv-contact-role { color: var(--f-encre-2); font: 500 12px/1.4 Inter, system-ui, sans-serif; }
.fcv-noms { flex: 0 0 100%; color: var(--f-encre-2); font-size: 14px; }

/* ---------- Écran de direction : transport aller / retour et participants ---------- */
.fcv-pile { display: grid; gap: 12px; align-items: start; min-width: 0; }
@media (min-width: 1000px) { .fcv-pile { grid-template-columns: minmax(340px, 440px) minmax(0, 1fr); gap: 20px; } }
.fcv-form { display: grid; gap: 14px; }
.fcv-form .fb-sous-titre { margin: 4px 0 0; }
.fcv-form .fb-formulaire { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fcv-form .fb-actions--bas { margin-top: 4px; }
.fcv-note-ok { color: var(--f-fait); }
.fcv-count { color: var(--f-encre-2); font-weight: 500; }
.fcv-plist { margin: 4px 0 0; padding: 0; list-style: none; }
.fcv-prow { display: grid; gap: 8px; min-width: 0; padding: 14px 0; border-top: 1px solid var(--f-filet); }
.fcv-prow:first-child { border-top: 0; }
.fcv-prow-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fcv-pname { min-width: 0; font: 600 16px/1.3 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }
.fcv-prow-link { flex: none; }
.fcv-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.fcv-badge[data-etat="attention"] { border-color: var(--f-attention); color: var(--f-attention); }
.fcv-badge[data-etat="ok"] { border-color: var(--f-fait); color: var(--f-fait); }
.fcv-remarque { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; min-width: 0; }
.fcv-remarque-txt { flex: 1 1 12rem; min-width: 0; margin: 0; padding: 0; border: 0; background: transparent; color: var(--f-encre-2); font: 400 14px/1.45 Inter, system-ui, sans-serif; text-align: left; white-space: pre-wrap; overflow-wrap: anywhere; }
button.fcv-remarque-txt { padding: 10px 0; cursor: pointer; }
:root [data-app] .fcv button.fcv-remarque-txt { min-height: 44px; }
.fcv-remarque-txt.est-depliable:hover { color: var(--f-encre); }
.fcv-remarque-ajout { padding-inline: 0; }
.fcv-bascules { display: flex; flex-wrap: wrap; gap: 8px; }
.fcv-bascule { min-height: 48px; padding: 0 16px; border: 1px solid var(--f-filet); border-radius: 14px; background: var(--f-surface); color: var(--f-encre-2); font: 500 14px/1.2 Inter, system-ui, sans-serif; cursor: pointer; touch-action: manipulation; }
:root [data-app] .fcv button.fcv-bascule { min-height: 48px; }
.fcv-bascule:hover { background: var(--f-surface-2); }
.fcv-bascule[aria-pressed="true"] { border-color: var(--f-encre-3); background: var(--f-surface-2); color: var(--f-encre); }
.fcv-bascule[data-bascule="recu"][aria-pressed="true"] { border-color: var(--f-fait); background: color-mix(in srgb, var(--f-fait) 12%, var(--f-surface)); color: var(--f-fait); }

/* ---------- Démarrage à froid sans réseau : la liste des feuilles gardées sur le téléphone ---------- */
.fcv-hr-zone:empty { display: none; }
.fcv-hr-contenu, .fcv-hr-feuille { display: grid; gap: 12px; min-width: 0; }
.fcv-hr-liste { gap: 8px; }
.fcv-hr-sejour { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 12px 16px; background: var(--f-surface); border: 1px solid var(--f-filet); border-radius: 24px; color: var(--f-encre); font: inherit; text-align: left; cursor: pointer; }
:root [data-app] .fcv button.fcv-hr-sejour { min-height: 64px; }
.fcv-hr-sejour:hover { background: var(--f-surface-2); }
.fcv-hr-reessayer { justify-self: start; margin-top: 4px; }
[data-app] .fcv-hr .fcv-feuille { padding: 0; }
.fcv-hr-recharger { flex: none; }

@media (prefers-reduced-motion: reduce) { .fcv-geste:active { transform: none; } }