/* Atelia — composants « plateforme » (chantier Deliveroo, 26/09 ; cahier §2.1 et §2.2).
   Trois composants, rendus par js/ui.js, réutilisés partout :
   · .pf-badge   — pastille de couleur + nom écrit (UI.badgePlateforme) : la couleur ne porte
                   jamais seule le sens ;
   · .pf-filtre  — puces « Toutes · Uber Eats · Deliveroo » (UI.filtrePlateforme) ;
   · .pf-cac     — « côte à côte + Total » (UI.coteACote) : lignes étiquetées quand la place
                   manque (téléphone, tuile étroite), colonnes Uber Eats | Deliveroo | Total quand
                   le bloc a la place (820 et 1280 px). Total en gras, toujours en dernier.
   Couleurs : uniquement les jetons de css/tokens.css (--uber, --uber-trait, --deliveroo).
   Toutes les classes sont préfixées « pf- » : aucun sélecteur existant n'est touché, donc rien
   ne change à l'écran tant qu'un écran ne rend pas ces composants. */

/* ---------------------------------------------------------------- pastille de couleur */
.pf-point {
  display: inline-block; flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--na);
  /* liseré discret : la pastille reste visible sur fond clair et sur fond coloré */
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--navy) 22%, transparent);
}
.pf-uber .pf-point, .pf-point.pf-uber { background: var(--uber); }
.pf-deliveroo .pf-point, .pf-point.pf-deliveroo { background: var(--deliveroo); }

/* ---------------------------------------------------------------- badge plateforme */
.pf-badge {
  display: inline-flex; align-items: center; gap: 6px; vertical-align: middle;
  max-width: 100%; white-space: nowrap;
  padding: 2px 9px 2px 7px; border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--ink);
  font-family: var(--font); font-size: 12px; font-weight: 700; line-height: 1.4;
}
.pf-badge .pf-nom { overflow: hidden; text-overflow: ellipsis; }
.pf-badge .pf-suffixe { color: var(--ink-2); font-weight: 600; }
.pf-badge.pf-alerte { border-color: var(--rouge-bd); background: var(--rouge-bg); }
.pf-badge.pf-alerte .pf-suffixe { color: var(--rouge); }
.pf-badges { display: inline-flex; flex-wrap: wrap; gap: 4px 6px; vertical-align: middle; }
/* app du restaurateur : texte plus grand (lisibilité d'abord) */
.fr-root .pf-badge { font-size: 13px; padding: 3px 10px 3px 8px; }

/* restaurant absent d'une plateforme (case de tableau) : grisé, distinct de « — » (non mesuré) */
.pf-absent { color: var(--na); font-size: 12px; font-weight: 600; font-style: italic; white-space: nowrap; }

/* ---------------------------------------------------------------- filtre plateforme */
.pf-filtre { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; max-width: 100%; }
.pf-filtre .pf-puce {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
  font-family: var(--font); font-size: 12px; font-weight: 600; line-height: 1.3;
  padding: 6px 12px; border-radius: 20px; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.pf-filtre .pf-puce:hover { background: var(--surface-2); }
.pf-filtre .pf-puce.on { background: var(--accent); border-color: var(--accent); color: var(--surface); }
.pf-filtre .pf-puce.on .pf-point { box-shadow: 0 0 0 1.5px var(--surface); }
.pf-filtre .pf-puce:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* app du restaurateur : même gabarit que les puces de période (.fr-chip) */
.fr-root .pf-filtre { gap: 8px; }
.fr-root .pf-filtre .pf-puce { font-size: 14px; font-weight: 700; color: var(--navy); padding: 9px 15px; min-height: 40px; border-radius: 22px; }
.fr-root .pf-filtre .pf-puce.on { color: var(--surface); }

/* ---------------------------------------------------------------- côte à côte + Total
   Structure : .pf-cac (hôte, conteneur de requêtes) > .pf-cac-g (grille) > .pf-cac-col × n.
   Par défaut (et sans prise en charge des requêtes de conteneur) : lignes étiquetées, le libellé
   à gauche, la valeur à droite. Colonnes quand l'hôte est assez large. */
.pf-cac { container-type: inline-size; width: 100%; min-width: 0; }
.pf-cac-g { display: flex; flex-direction: column; }
.pf-cac-col {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 5px 0; border-top: 1px solid var(--line-2); min-width: 0;
}
.pf-cac-col:first-child { border-top: 0; padding-top: 0; }
.pf-cac-lb { display: flex; align-items: center; min-height: 23px; color: var(--ink-2); font-size: 12.5px; font-weight: 600; min-width: 0; flex-shrink: 0; }
/* Corrections 27/09 (mineurs-divers-01, UX-console-autres-11) : dans une tuile étroite, c'est la VALEUR
   qui passe à la ligne (la mention « partiel » descend sous le montant, alignée à droite), jamais le
   badge qui se coupe en « Deliver… ». Les montants gardent leur espace insécable. */
.pf-cac-v {
  color: var(--ink); font-size: 16px; font-weight: 700; text-align: right;
  font-variant-numeric: tabular-nums; min-width: 0;
}
.pf-cac-lignes .pf-badge { flex: 0 0 auto; }
/* Et quand même un montant seul (espaces insécables) ne tient pas à côté du badge, la valeur passe sous
   le badge, calée à droite, au lieu de déborder de la tuile. */
.pf-cac-lignes .pf-cac-col { flex-wrap: wrap; }
.pf-cac-lignes .pf-cac-v { flex: 1 1 min-content; }
/* Même comportement pour la disposition en lignes par défaut (hôte étroit, sans « colonnes » imposées). */
@container (max-width: 379.98px) {
  .pf-cac:not(.pf-cac-colonnes) .pf-cac-col { flex-wrap: wrap; }
  .pf-cac:not(.pf-cac-colonnes) .pf-cac-v { flex: 1 1 min-content; }
}
.pf-cac-total .pf-cac-lb { color: var(--ink); font-weight: 800; }
.pf-cac-total .pf-cac-v { font-weight: 800; }
.pf-cac-partiel { color: var(--ink-2); font-size: 12px; font-weight: 700; font-style: italic; white-space: nowrap; }
.pf-cac-notes { margin-top: 6px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.pf-cac-notes div + div { margin-top: 2px; }
.pf-cac.grand .pf-cac-v { font-size: 19px; }
.fr-root .pf-cac-lb { font-size: 13.5px; min-height: 26px; }
.fr-root .pf-cac-v { font-size: 17px; }
.fr-root .pf-cac.grand .pf-cac-v { font-size: 21px; }

/* colonnes : Uber Eats | Deliveroo | Total (ou deux colonnes sans Total) */
@container (min-width: 380px) {
  .pf-cac:not(.pf-cac-lignes) .pf-cac-g.n2, .pf-cac:not(.pf-cac-lignes) .pf-cac-g.n3 { display: grid; column-gap: 0; }
  .pf-cac:not(.pf-cac-lignes) .pf-cac-g.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-cac:not(.pf-cac-lignes) .pf-cac-g.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pf-cac:not(.pf-cac-lignes) .pf-cac-g.n2 .pf-cac-col, .pf-cac:not(.pf-cac-lignes) .pf-cac-g.n3 .pf-cac-col {
    flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 4px;
    padding: 0 12px; border-top: 0; border-left: 1px solid var(--line-2);
  }
  .pf-cac:not(.pf-cac-lignes) .pf-cac-g.n2 .pf-cac-col:first-child, .pf-cac:not(.pf-cac-lignes) .pf-cac-g.n3 .pf-cac-col:first-child { border-left: 0; padding-left: 0; }
  .pf-cac:not(.pf-cac-lignes) .pf-cac-g.n2 .pf-cac-v, .pf-cac:not(.pf-cac-lignes) .pf-cac-g.n3 .pf-cac-v { text-align: left; white-space: normal; }
  /* une seule plateforme : libellé au-dessus, valeur dessous, comme une colonne */
  .pf-cac:not(.pf-cac-lignes) .pf-cac-g.n1 .pf-cac-col { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 4px; }
  .pf-cac:not(.pf-cac-lignes) .pf-cac-g.n1 .pf-cac-v { text-align: left; white-space: normal; }
}
/* disposition imposée « colonnes » (tableaux de bord larges), quelle que soit la largeur.
   Corrections 27/09 · vague C (UX-S6-b-8) : justify-content: flex-start, comme la règle @container ; sinon le
   space-between de base poussait en bas de la case le montant d'une colonne sans « partiel ». */
.pf-cac.pf-cac-colonnes .pf-cac-g.n2, .pf-cac.pf-cac-colonnes .pf-cac-g.n3 { display: grid; column-gap: 0; }
.pf-cac.pf-cac-colonnes .pf-cac-g.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pf-cac.pf-cac-colonnes .pf-cac-g.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pf-cac.pf-cac-colonnes .pf-cac-col { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 4px; padding: 0 12px; border-top: 0; border-left: 1px solid var(--line-2); }
.pf-cac.pf-cac-colonnes .pf-cac-col:first-child { border-left: 0; padding-left: 0; }
.pf-cac.pf-cac-colonnes .pf-cac-v { text-align: left; white-space: normal; }
.pf-cac.pf-cac-colonnes .pf-cac-g.n1 .pf-cac-col { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 4px; }

/* Finition (UX-console-autres-05, demande E-campagnes-finance) : Finance › « Versements &
   réconciliation » sous plusieurs plateformes (lignes tr[data-wf] qui portent un .pf-cac-lignes ; le
   tableau Uber Eats seul n'en porte pas et ne change pas). En tableau (≥ 640 px, sans .en-cartes) :
   · les cellules se mesurent à leur contenu (container-type normal : un conteneur de requêtes en
     largeur rend la cellule compressible à zéro et le tableau la réduit jusqu'à couper chaque ligne) ;
   · « partiel » reste sur la ligne du montant (valeur insécable) ; quand la colonne manque de place,
     c'est la valeur entière qui passe sous le badge, calée à droite (même repli que les tuiles) ;
   · marges serrées à 10 px (précédent « serre », UX-console-releves-01) et colonnes PDV et Statut à
     leur largeur minimale, pour laisser la place aux trois colonnes de montants. */
@media (min-width: 640px) {
  [data-surface="console"] .tbl.empile:not(.en-cartes):has(tr[data-wf] .pf-cac-lignes) th,
  [data-surface="console"] .tbl.empile:not(.en-cartes):has(tr[data-wf] .pf-cac-lignes) td { padding-left: 10px; padding-right: 10px; }
  [data-surface="console"] .tbl.empile:not(.en-cartes):has(tr[data-wf] .pf-cac-lignes) th:first-child,
  [data-surface="console"] .tbl.empile:not(.en-cartes):has(tr[data-wf] .pf-cac-lignes) th:last-child { width: 1px; }
  [data-surface="console"] .tbl.empile:not(.en-cartes) tr[data-wf] td .pf-cac.pf-cac-lignes { container-type: normal; }
  [data-surface="console"] .tbl.empile:not(.en-cartes) tr[data-wf] td .pf-cac-lignes .pf-cac-col { gap: 4px; }
  [data-surface="console"] .tbl.empile:not(.en-cartes) tr[data-wf] td .pf-cac-lignes .pf-cac-v { white-space: nowrap; }
}

/* légende des états (« — » non mesuré, « absent » de la plateforme) */
.pf-legende { color: var(--muted); font-size: 12px; line-height: 1.45; }

/* ---------------------------------------------------------------- app du restaurateur (lot 2 APP, 26/09)
   Règles AJOUTÉES pour js/franchise.js ; elles ne visent que des classes nouvelles (fr-pf…) ou des
   composants pf- posés dans l'app : un restaurant sur Uber Eats seul n'en rend aucun. */
.fr-root .fr-pfbar { margin: 10px 0 2px; }
.fr-root .fr-pfbar-etat { margin: 14px 0 0; }
.fr-root .fr-pfligne { margin-top: 6px; line-height: 1; }
.fr-root .fr-pfsous { margin-top: 2px; color: var(--muted-text); font-size: 12px; font-weight: 600; }
.fr-root .fr-pfsep { margin-top: 12px; }
.fr-root .fr-tile .pf-cac, .fr-root .fr-phare .pf-cac { margin-top: 6px; }
.fr-root .fr-tilebtn .pf-cac { text-align: left; }
.fr-root .fr-pfbloc { margin-top: 10px; }
.fr-root .fr-pfbloc-l { margin-bottom: 4px; color: var(--ink-2); font-size: 13.5px; font-weight: 700; }
.fr-root .fr-pfconv + .fr-pfconv { margin-top: 12px; }
.fr-root .fr-pfhist { margin-top: 6px; line-height: 1.45; }
.fr-root .fr-pfnote { margin: 6px 2px 0; }
.fr-root .fr-majpf + .fr-majpf { margin-top: 4px; }
.fr-root .fr-majpf .pf-badge { margin: 0 2px; }
.fr-root .fr-cardtitle .pf-badge { margin-left: 4px; }
/* carte Remboursements de l'Accueil : les blocs côte à côte prennent toute la largeur du texte */
.fr-root .fr-acte .fr-tpf { flex: 1 1 auto; min-width: 0; }
.fr-root .fr-acte .fr-tpf > .pf-cac { margin: 2px 0 6px; }
/* alerte critique : le badge garde son gabarit (la carte met ses <span> en bloc) */
.fr-root .fr-critique .pf-badge { display: inline-flex; flex: 0 0 auto; margin: 0; }
.fr-root .fr-critique .pf-badge span { display: inline-block; margin-top: 0; font-size: inherit; line-height: inherit; color: inherit; }
.fr-root .fr-critique .pf-badge .pf-point { display: inline-block; }
.fr-root .fr-pfnoteline { margin-top: 4px; color: var(--ink-2); font-size: 13.5px; line-height: 1.45; }
.fr-root .fr-pfnoteline b { color: var(--navy); font-weight: 700; }
.fr-root .fr-pfregle { color: var(--muted-text); font-size: 12.5px; font-weight: 600; }
.fr-root .fr-pfpart { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; }
.fr-root .fr-pfpart-i { display: inline-flex; align-items: center; gap: 6px; color: var(--muted-text); font-size: 12.5px; font-weight: 600; }