/* BSF — style Moniteur et Verre, thèmes sombre (.pl) et clair (.pl.clair). Charte 41, identite/web/bsf.css.
   Les valeurs viennent toutes de tokens.json : le bloc des jetons et les @media sont régénérés par generer-css.ps1.
   Les règles ne lisent que var(--jeton). */
/* jetons:debut - généré par web/generer-css.ps1 depuis tokens.json (charte 41), ne pas modifier à la main */
.pl{
  --vert-bloc:#0E7C66;
  --vert-signal:#5CCFB0;
  --vert-lumiere:#A9F0DC;
  --attention-lumiere:#F8D79A;
  --critique-lumiere:#FFC4BA;
  --encre:#0D1B1E;
  --acier:#52625F;
  --brume:#DCE5E2;
  --blanc-clinique:#F4F7F6;
  --surface:#0D1B1E;
  --surface-relief:#15262A;
  --filet:#3A5055;
  --filet-controle:#6A8085;
  --texte:#E8EFED;
  --texte-second:#B5C6C3;
  --action:#5CCFB0;
  --action-survol:#7DDBC1;
  --action-presse:#9BE4D0;
  --action-fin:#A9F0DC;
  --vert-doux:#12392F;
  --sur-action:#0D1B1E;
  --attention:#F0B44C;
  --attention-doux:#3A2A0B;
  --critique:#FF8A7A;
  --critique-doux:#431712;
  --deconnecte:#C9D6D2;
  --deconnecte-doux:#243539;
  --etat-panne:#FFA295;
  --etat-panne-doux:#431712;
  --etat-panne-filet:rgba(255, 138, 122, 0.45);
  --etat-a-regarder:#F0B44C;
  --etat-a-regarder-doux:#3A2A0B;
  --etat-a-regarder-filet:rgba(240, 180, 76, 0.35);
  --etat-conforme:#9ED88F;
  --etat-conforme-doux:#19321B;
  --etat-non-juge:#B5C6C3;
  --etat-non-juge-doux:#243539;
  --destructif:#FF8A7A;
  --destructif-filet:rgba(255, 138, 122, 0.55);
  --destructif-plein:#B42318;
  --destructif-plein-survol:#C4352A;
  --sur-destructif:#FFFFFF;
  --focus:#5CCFB0;
  --discret:#8B9F9C;
  --fond:#071113;
  --grille:rgba(92, 207, 176, 0.05);
  --halo:rgba(14, 124, 102, 0.55);
  --halo-2:rgba(92, 207, 176, 0.14);
  --halo-3:rgba(14, 124, 102, 0.32);
  --verre:rgba(18, 36, 40, 0.55);
  --verre-filet:rgba(232, 239, 237, 0.09);
  --verre-reflet:rgba(232, 239, 237, 0.20);
  --filet-ligne:rgba(232, 239, 237, 0.06);
  --survol:rgba(232, 239, 237, 0.07);
  --actif:rgba(92, 207, 176, 0.18);
  --champ:rgba(7, 17, 19, 0.5);
  --ombre-fenetre:0 1px 2px rgba(0, 0, 0, 0.40), 0 8px 24px rgba(0, 0, 0, 0.40);
  --halo-action:0 6px 18px rgba(92, 207, 176, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  --halo-action-survol:0 8px 26px rgba(92, 207, 176, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  --halo-action-presse:0 3px 10px rgba(92, 207, 176, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  --ombre-verre:0 12px 32px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --lueur-chiffre:0 0 18px rgba(92, 207, 176, 0.5);
  --lueur-trace:0 0 4px rgba(92, 207, 176, 0.75);
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-6:24px;
  --space-8:32px;
  --space-12:48px;
  --radius-s:4px;
  --radius-m:8px;
  --radius-l:14px;
  --radius-xl:22px;
  --largeur-carte:26rem;
  --largeur-vue:80rem;
  --largeur-texte:34em;
  --flou-verre:18px;
  --duree-survol:150ms;
  --tour-symbole:1600ms;
  --tour-notification:4000ms;
  --respiration:2000ms;
  --tour-reduit:6000ms;
  --densite-controle:40px;
  --densite-petit:32px;
  --densite-ligne:44px;
  --densite-puce:32px;
  --densite-espace:8px;
  --densite-ecart:24px;
  --densite-marge:8px;
  --famille-titre:Manrope, "Segoe UI", system-ui, sans-serif;
  --famille-texte:"IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --famille-donnee:"IBM Plex Mono", Consolas, ui-monospace, monospace;
  --affiche-taille:48px;
  --affiche-interligne:52px;
  --affiche-graisse:800;
  --affiche-approche:-0.02em;
  --titre-1-taille:30px;
  --titre-1-interligne:36px;
  --titre-1-graisse:800;
  --titre-1-approche:-0.015em;
  --titre-2-taille:22px;
  --titre-2-interligne:28px;
  --titre-2-graisse:600;
  --titre-2-approche:-0.01em;
  --chiffre-taille:36px;
  --chiffre-interligne:42px;
  --chiffre-graisse:800;
  --chiffre-approche:0em;
  --affiche-mobile-taille:32px;
  --affiche-mobile-interligne:36px;
  --affiche-mobile-graisse:800;
  --affiche-mobile-approche:-0.02em;
  --titre-1-mobile-taille:26px;
  --titre-1-mobile-interligne:32px;
  --titre-1-mobile-graisse:800;
  --titre-1-mobile-approche:-0.015em;
  --titre-2-mobile-taille:20px;
  --titre-2-mobile-interligne:26px;
  --titre-2-mobile-graisse:600;
  --titre-2-mobile-approche:-0.01em;
  --chiffre-mobile-taille:32px;
  --chiffre-mobile-interligne:38px;
  --chiffre-mobile-graisse:800;
  --chiffre-mobile-approche:0em;
  --chiffre-grand-taille:64px;
  --chiffre-grand-interligne:68px;
  --chiffre-grand-graisse:800;
  --chiffre-grand-approche:-0.03em;
  --titre-3-taille:16px;
  --titre-3-interligne:24px;
  --titre-3-graisse:600;
  --titre-3-approche:0em;
  --corps-taille:16px;
  --corps-interligne:24px;
  --corps-graisse:400;
  --corps-approche:0em;
  --corps-dense-taille:14px;
  --corps-dense-interligne:21px;
  --corps-dense-graisse:400;
  --corps-dense-approche:0em;
  --etiquette-taille:12px;
  --etiquette-interligne:16px;
  --etiquette-graisse:600;
  --etiquette-approche:0.08em;
  --donnee-taille:13px;
  --donnee-interligne:20px;
  --donnee-graisse:400;
  --donnee-approche:0em;
  --donnee-forte-taille:13px;
  --donnee-forte-interligne:20px;
  --donnee-forte-graisse:500;
  --donnee-forte-approche:0em;
}
.pl.clair,.pl .pl-papier{
  --vert-lumiere:#2FA88A;
  --attention-lumiere:#D9822F;
  --critique-lumiere:#DE5A4C;
  --surface:#F4F7F6;
  --surface-relief:#FFFFFF;
  --filet:#C9D6D2;
  --filet-controle:#7D908C;
  --texte:#0D1B1E;
  --texte-second:#52625F;
  --action:#0E7C66;
  --action-survol:#0B6A57;
  --action-presse:#095848;
  --action-fin:#11836C;
  --vert-doux:#E7F5F1;
  --sur-action:#FFFFFF;
  --attention:#B45309;
  --attention-doux:#FDF4E8;
  --critique:#B42318;
  --critique-doux:#FBE4E1;
  --deconnecte:#0D1B1E;
  --deconnecte-doux:#E3E9E7;
  --etat-panne:#B42318;
  --etat-panne-doux:#FBE4E1;
  --etat-panne-filet:rgba(180, 35, 24, 0.30);
  --etat-a-regarder:#9D4808;
  --etat-a-regarder-doux:#FDF4E8;
  --etat-a-regarder-filet:rgba(180, 83, 9, 0.30);
  --etat-conforme:#2E6B34;
  --etat-conforme-doux:#E8F3E6;
  --etat-non-juge:#52625F;
  --etat-non-juge-doux:#E3E9E7;
  --destructif:#B42318;
  --destructif-filet:rgba(180, 35, 24, 0.55);
  --focus:#0E7C66;
  --discret:#5B6B68;
  --fond:#EEF4F2;
  --grille:rgba(14, 124, 102, 0.07);
  --halo:rgba(92, 207, 176, 0.38);
  --halo-2:rgba(92, 207, 176, 0.18);
  --halo-3:rgba(14, 124, 102, 0.14);
  --verre:rgba(255, 255, 255, 0.66);
  --verre-filet:rgba(13, 27, 30, 0.08);
  --verre-reflet:rgba(255, 255, 255, 0.95);
  --filet-ligne:rgba(13, 27, 30, 0.07);
  --survol:rgba(13, 27, 30, 0.05);
  --actif:rgba(14, 124, 102, 0.12);
  --champ:rgba(255, 255, 255, 0.8);
  --ombre-fenetre:0 1px 2px rgba(13, 27, 30, 0.08), 0 8px 24px rgba(13, 27, 30, 0.08);
  --halo-action:0 6px 18px rgba(14, 124, 102, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  --halo-action-survol:0 8px 26px rgba(14, 124, 102, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  --halo-action-presse:0 3px 10px rgba(14, 124, 102, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  --ombre-verre:0 1px 2px rgba(13, 27, 30, 0.06), 0 10px 28px rgba(13, 27, 30, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --lueur-chiffre:0 0 16px rgba(92, 207, 176, 0.55);
  --lueur-trace:0 0 3px rgba(92, 207, 176, 0.8);
}
@media (pointer: coarse){
  .pl{
    --densite-controle:44px;
    --densite-petit:44px;
    --densite-ligne:48px;
    --densite-puce:44px;
    --densite-espace:12px;
    --densite-ecart:24px;
    --densite-marge:12px;
  }
}
/* jetons:fin */

.pl{
  color:var(--texte);
  font-family:var(--famille-texte);
  font-size:var(--corps-dense-taille);line-height:var(--corps-dense-interligne);
  box-sizing:border-box;
  background-color:var(--fond);
  background-image:
    radial-gradient(680px 440px at 10% -4%,var(--halo),transparent 70%),
    radial-gradient(520px 380px at 94% 16%,var(--halo-2),transparent 70%),
    radial-gradient(760px 440px at 55% 112%,var(--halo-3),transparent 70%);
  position:relative;isolation:isolate;
}
/* La grille se fond depuis les halos : elle ne couvre jamais l'écran d'un bord à l'autre. */
.pl::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(var(--grille) 1px,transparent 1px),linear-gradient(90deg,var(--grille) 1px,transparent 1px);
  background-size:24px 24px;
  -webkit-mask-image:radial-gradient(760px 520px at 10% -4%,#000,transparent 75%),radial-gradient(700px 480px at 60% 110%,#000,transparent 75%);
  mask-image:radial-gradient(760px 520px at 10% -4%,#000,transparent 75%),radial-gradient(700px 480px at 60% 110%,#000,transparent 75%);
}
.pl *{box-sizing:border-box}
.pl a{color:var(--action)}
:where(.pl a){transition:color var(--duree-survol) ease-out}
.pl a:hover{color:var(--action-survol)}
.pl a:active{color:var(--action-presse)}

/* Surfaces */
.pl-verre{background:var(--verre);-webkit-backdrop-filter:blur(var(--flou-verre)) saturate(140%);backdrop-filter:blur(var(--flou-verre)) saturate(140%);border:1px solid var(--verre-filet);border-top-color:var(--verre-reflet);box-shadow:var(--ombre-verre);border-radius:var(--radius-l)}
.pl-verre-mobile{border-radius:var(--radius-xl)}
/* La page prend toute la largeur de la fenêtre ; seuls se bornent un formulaire (.pl-colonne), une carte seule (.pl-seule) et un paragraphe. */
.pl-page{padding:var(--densite-ecart) var(--space-6) 24px;display:flex;flex-direction:column;gap:var(--densite-ecart)}
.pl-colonne{max-width:var(--largeur-vue)}
/* Carte seule d'une page sans navigation (connexion, appairage, amorçage, erreur) : largeur-carte, centrée. */
.pl-seule{width:100%;max-width:var(--largeur-carte);margin-left:auto;margin-right:auto}
.pl-lisible{max-width:var(--largeur-texte)}

/* Lumière : le chiffre clé et les courbes, en vert seulement */
.pl-lueur{color:var(--action);text-shadow:var(--lueur-chiffre)}
.pl-trace{filter:drop-shadow(var(--lueur-trace))}

/* Texte */
.pl-eti{font-size:var(--etiquette-taille);line-height:var(--etiquette-interligne);font-weight:var(--etiquette-graisse);letter-spacing:var(--etiquette-approche);text-transform:uppercase}
.pl-mono{font-family:var(--famille-donnee);font-variant-numeric:tabular-nums}
.pl-t1{margin:0;font-family:var(--famille-titre);font-weight:var(--titre-1-graisse);font-size:var(--titre-1-taille);line-height:var(--titre-1-interligne);letter-spacing:var(--titre-1-approche)}
.pl-t2{margin:0;font-family:var(--famille-titre);font-weight:var(--titre-2-graisse);font-size:var(--titre-2-taille);line-height:var(--titre-2-interligne);letter-spacing:var(--titre-2-approche)}
.pl-chiffre{font-family:var(--famille-titre);font-weight:var(--chiffre-graisse);font-size:var(--chiffre-taille);line-height:var(--chiffre-interligne);font-variant-numeric:tabular-nums}
.pl-chiffre-grand{font-family:var(--famille-titre);font-weight:var(--chiffre-grand-graisse);font-size:var(--chiffre-grand-taille);line-height:var(--chiffre-grand-interligne);letter-spacing:var(--chiffre-grand-approche);font-variant-numeric:tabular-nums}
/* Petite courbe d'une tuile : pleine largeur, 26 px ; trait de 1,8 px et point final de 5 px dans le SVG. */
.pl-courbe{display:block;width:100%;height:26px}
.pl-second{color:var(--texte-second)}
.pl-discret{color:var(--discret)}

/* En-tête */
.pl-tete{padding:16px var(--space-6) 0}
.pl-barre{display:flex;flex-wrap:nowrap;align-items:center;gap:18px;padding:8px 14px}
/* Le verre crée un contexte d'empilement : la barre passe au-dessus du contenu, son menu au-dessus des cartes. */
.pl-barre{position:relative;z-index:10}
.pl-logo{display:flex;align-items:center;gap:10px;font-family:var(--famille-titre);font-size:18px;letter-spacing:.02em;color:var(--texte);text-decoration:none}
.pl .pl-logo{color:var(--texte)}
.pl-logo b{font-weight:800}
.pl-logo span{font-weight:500;color:var(--action)}
.pl-nav{display:flex;flex-wrap:nowrap;gap:2px;flex:0 1 auto;overflow:hidden}
.pl .pl-nav a{white-space:nowrap}
.pl .pl-nav a{padding:var(--densite-marge) 12px;border-radius:var(--radius-m);color:var(--texte-second);text-decoration:none;transition:background-color var(--duree-survol) ease-out,color var(--duree-survol) ease-out}
.pl .pl-nav a:hover{background:var(--survol);color:var(--texte)}
.pl .pl-nav a.actif{background:var(--actif);color:var(--texte);font-weight:600}

/* Boutons */
.pl-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--densite-controle);padding:var(--densite-marge) 14px;border-radius:var(--radius-m);border:1px solid var(--filet-controle);background:transparent;color:var(--texte);font:inherit;text-decoration:none;cursor:pointer;transition:background-color var(--duree-survol) ease-out,border-color var(--duree-survol) ease-out}
.pl .pl-btn{color:var(--texte)}
.pl .pl-btn:hover{background:var(--survol);color:var(--texte)}
.pl .pl-btn-p{background:linear-gradient(to top right,var(--action),var(--action-fin));border-color:transparent;color:var(--sur-action);font-weight:600;box-shadow:var(--halo-action);transition:box-shadow var(--duree-survol) ease-out,filter var(--duree-survol) ease-out}
/* Le survol garde le dégradé : .pl .pl-btn:hover l'effacerait. */
.pl .pl-btn-p:hover{background:linear-gradient(to top right,var(--action),var(--action-fin));filter:brightness(1.06);box-shadow:var(--halo-action-survol);color:var(--sur-action)}
.pl .pl-btn-p:active{filter:brightness(.96);box-shadow:var(--halo-action-presse)}
/* Un seul bouton en lumière : un objet ouvert ou une feuille portent le leur, ceux de la page passent en secondaire. */
.pl:has(.pl-objet:not([hidden]),.pl-feuille:not([hidden])) .pl-btn-p:not(.pl-objet .pl-btn-p,.pl-feuille .pl-btn-p){background:transparent;border-color:var(--filet-controle);color:var(--texte);font-weight:inherit;box-shadow:none;filter:none}
.pl:has(.pl-objet:not([hidden]),.pl-feuille:not([hidden])) .pl-btn-p:not(.pl-objet .pl-btn-p,.pl-feuille .pl-btn-p):hover{background:var(--survol)}
.pl .pl-btn-destructif{border-color:var(--destructif-filet);color:var(--destructif)}
.pl .pl-btn-destructif:hover{background:var(--survol);color:var(--destructif)}
.pl .pl-btn-destructif-plein{background:var(--destructif-plein);border-color:transparent;color:var(--sur-destructif);font-weight:600}
.pl .pl-btn-destructif-plein:hover{background:var(--destructif-plein-survol);color:var(--sur-destructif)}
/* Bouton d'appel (« Contacter BSF », fenêtre du poste) : .pl-btn.pl-appel, neutre ; .att à regarder ; .crit en panne, pleine largeur au-dessus des autres gestes. Jamais vert, jamais en lumière. */
.pl .pl-appel.att,.pl .pl-appel.crit{font-weight:600}
.pl .pl-appel.att{border-color:var(--etat-a-regarder);background:var(--etat-a-regarder-doux);color:var(--etat-a-regarder)}
.pl .pl-appel.att:hover{background:var(--etat-a-regarder-doux);box-shadow:inset 0 0 0 100vmax var(--survol);color:var(--etat-a-regarder)}
.pl .pl-appel.crit{display:flex;width:100%;border-color:transparent;background:var(--destructif-plein);color:var(--sur-destructif)}
.pl .pl-appel.crit:hover{background:var(--destructif-plein-survol);color:var(--sur-destructif)}
.pl-appel>svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2.13;stroke-linecap:round;stroke-linejoin:round}
/* Désactivé : lisible, jamais estompé. */
.pl .pl-btn:disabled,.pl .pl-btn[aria-disabled="true"]{background:transparent;border-color:var(--filet);color:var(--texte-second);box-shadow:none;filter:none;cursor:default}
.pl-btn:focus-visible,.pl-nav a:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* États : couleur + forme + mot. Pleine : pas encore jugé (.pl-neutre) ; évidée : éteint ou injoignable (.pl-deco). */
.pl-etat{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.pl-etat:empty{gap:0}
.pl-etat::before{content:"";width:8px;height:8px;border-radius:2px;background:linear-gradient(to top right,currentColor,color-mix(in srgb,currentColor 80%,#FFFFFF));box-shadow:inset 0 1px 0 rgba(255,255,255,.35);flex:none}
.pl:not(.clair) .pl-ok::before{box-shadow:0 0 6px currentColor,inset 0 1px 0 rgba(255,255,255,.35)}
.pl-ok{color:var(--etat-conforme)}
.pl-att{color:var(--etat-a-regarder)}
/* Information : un fait sans geste attendu, neutre, jamais en couleur d'état (<span class="pl-info">). */
.pl-info{display:inline-flex;align-items:baseline;gap:7px;color:var(--texte-second)}
.pl-info::before{content:"i";flex:none;box-sizing:border-box;width:16px;height:16px;border:1.5px solid currentColor;border-radius:50%;font:600 11px/13px var(--famille-donnee);text-align:center;align-self:center}
.pl-crit{color:var(--etat-panne)}
.pl-crit::before{transform:rotate(45deg);width:7px;height:7px}
.pl-deco{color:var(--etat-non-juge)}
.pl-deco::before{background:transparent;border:1.5px solid currentColor;box-shadow:none}
.pl-neutre{color:var(--etat-non-juge)}
/* Compteur : un nombre ou « OK » en donnee 13 px, la couleur de son état sur sa teinte -doux (<span class="pl-compteur pl-att">3</span>) ; à côté d'une entrée de menu, il se pose à droite de la ligne (.pl-entree). */
.pl-compteur{display:inline-block;padding:2px 8px;border-radius:var(--radius-s);font-family:var(--famille-donnee);font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap}
.pl-compteur.pl-ok{background:var(--etat-conforme-doux)}
.pl-compteur.pl-att{background:var(--etat-a-regarder-doux)}
.pl-compteur.pl-crit{background:var(--etat-panne-doux)}
.pl-compteur.pl-neutre,.pl-compteur.pl-deco{background:var(--etat-non-juge-doux)}
.pl-entree{display:flex;align-items:center;gap:10px}
.pl-entree>.pl-compteur{margin-left:auto}

/* Lignes et tableaux */
.pl-ligne{transition:background-color var(--duree-survol) ease-out;border-radius:10px}
.pl-ligne:hover{background:var(--survol)}
.pl-tableau{width:100%;border-collapse:collapse}
.pl-tableau th{font-size:var(--etiquette-taille);line-height:var(--etiquette-interligne);font-weight:var(--etiquette-graisse);letter-spacing:var(--etiquette-approche);text-transform:uppercase;color:var(--texte-second);text-align:left;padding:6px 12px;border-bottom:1px solid var(--verre-filet);white-space:nowrap}
.pl-tableau td{padding:4px 12px;height:var(--densite-petit);border-bottom:1px solid var(--filet-ligne);vertical-align:middle}
.pl-tableau tr:last-child td{border-bottom:0}
.pl-tableau tbody tr{transition:background-color var(--duree-survol) ease-out}
.pl-tableau tbody tr:hover{background:var(--survol)}
/* Un lien dans une ligne survolée prend action-survol : action sur survol tombe sous 4,5:1 en clair. */
.pl .pl-tableau tbody tr:hover a:not(.pl-btn),.pl .pl-ligne:hover a:not(.pl-btn){color:var(--action-survol)}
.pl .pl-tableau tbody tr:hover a:not(.pl-btn):active,.pl .pl-ligne:hover a:not(.pl-btn):active{color:var(--action-presse)}
/* En-tête triable : un bouton, ou un lien sans script, qui garde le dessin de l'en-tête. */
.pl-tableau th button,.pl .pl-tableau th a{font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;background:none;border:0;padding:0;border-radius:var(--radius-s);cursor:pointer;transition:color var(--duree-survol) ease-out}
.pl-tableau th button:hover,.pl .pl-tableau th a:hover{color:var(--texte)}
.pl-tableau th button:focus-visible,.pl-tableau th a:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* Sens du tri : la colonne triée en texte, un chevron de 8 px en action, pointe en haut (croissant) ou en bas (décroissant). */
.pl-tableau th[aria-sort="ascending"],.pl-tableau th[aria-sort="descending"]{color:var(--texte)}
.pl-tableau th[aria-sort="ascending"]::after,.pl-tableau th[aria-sort="descending"]::after{content:"";display:inline-block;width:6px;height:6px;margin-left:6px;border-right:1.5px solid var(--action);border-bottom:1.5px solid var(--action);vertical-align:middle}
.pl-tableau th[aria-sort="ascending"]::after{transform:translateY(2px) rotate(-135deg)}
.pl-tableau th[aria-sort="descending"]::after{transform:translateY(-2px) rotate(45deg)}
.pl-num{text-align:right;font-family:var(--famille-donnee);font-variant-numeric:tabular-nums;white-space:nowrap}
.pl-defile{overflow-x:auto}

/* Champs et puces */
.pl-champ{min-height:var(--densite-controle);padding:var(--densite-marge) 12px;border-radius:var(--radius-s);border:1px solid var(--filet-controle);background:var(--champ);color:var(--texte);font:inherit}
.pl-champ::placeholder{color:var(--discret)}
/* Champ refusé : le mot orange et sa pastille, à côté ou dessous ; le contour ne change pas. */
.pl-champ:invalid,.pl-champ[aria-invalid="true"]{border-color:var(--filet-controle);box-shadow:none}
/* Code à saisir : 20 px, centré, espacé de 0,3 em ; la marge gauche grandit d'autant. */
.pl-code{font-family:var(--famille-donnee);font-size:20px;text-align:center;letter-spacing:.3em;padding-left:calc(12px + .3em)}
/* Valeur à recopier : sans script, elle se sélectionne entière d'un clic. */
.pl-recopier{font-family:var(--famille-donnee);font-weight:500;font-size:20px;line-height:28px;letter-spacing:.04em;font-variant-numeric:tabular-nums;-webkit-user-select:all;user-select:all;cursor:text}
.pl-puce{display:inline-flex;align-items:center;gap:6px;min-height:var(--densite-puce);padding:3px 12px;border-radius:var(--radius-m);border:1px solid var(--verre-filet);text-decoration:none;transition:background-color var(--duree-survol) ease-out}
.pl .pl-puce{color:var(--texte-second)}
.pl .pl-puce:hover{background:var(--survol)}
.pl .pl-puce.actif,.pl .pl-puce:has(input:checked){background:var(--actif);border-color:transparent;color:var(--texte);font-weight:600}
.pl-puce:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
.pl-puce .pl-nb{font-family:var(--famille-donnee);font-weight:400}

/* Barre du haut : champ de recherche poussé à droite, puis le bouton du menu du compte. */
.pl-recherche{flex:1 1 280px;max-width:560px;margin-left:auto;position:relative;display:flex}
.pl-recherche>svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--texte-second);pointer-events:none}
.pl-recherche .pl-champ{width:100%;padding-left:36px}
/* La loupe : le champ réduit à sa loupe, un carré de la barre ; touché, il s'ouvre au-dessus du reste, sur le fond opaque, ses résultats dessous. Au téléphone toujours (44 px) ; sur ordinateur quand le menu laisse au champ moins de 240 px (data-loupe, posé par le script). */
.pl-barre .pl-recherche[data-loupe]{flex:0 0 var(--densite-controle);min-width:0}
.pl-barre .pl-recherche[data-loupe]:not(:focus-within) .pl-champ{padding:0;color:transparent;caret-color:transparent;cursor:pointer}
.pl-barre .pl-recherche[data-loupe]:not(:focus-within) .pl-champ::placeholder{color:transparent}
.pl-barre .pl-recherche[data-loupe]:not(:focus-within) .pl-champ::-webkit-search-cancel-button{display:none}
.pl-barre .pl-recherche[data-loupe]:not(:focus-within)>svg{left:50%;transform:translate(-50%,-50%)}
.pl-barre .pl-recherche[data-loupe]:focus-within{position:absolute;top:0;bottom:0;right:var(--loupe-droite,64px);z-index:11;align-items:center;width:min(560px,calc(100% - var(--loupe-droite,64px) - var(--space-4)));max-width:none;margin:0;background:var(--fond)}
.pl-compte{position:relative;flex:none}
.pl-compte>button,.pl-compte>summary{list-style:none;width:var(--densite-controle);height:var(--densite-controle);border-radius:var(--radius-m);border:1px solid var(--verre-filet);background:transparent;color:var(--texte);font:600 13px/1 var(--famille-texte);cursor:pointer;display:grid;place-items:center;transition:background-color var(--duree-survol) ease-out}
.pl-compte>button:hover,.pl-compte>summary:hover{background:var(--survol)}
.pl-compte>summary::-webkit-details-marker{display:none}
.pl-compte[open]>summary{background:var(--actif)}
.pl-compte>summary .pl-initiales{width:100%;height:100%;background:transparent;color:inherit;font:inherit}
.pl-compte>button:focus-visible,.pl-compte>summary:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* Fenêtre flottante : menu du compte et bulle. surface-relief, filet, radius-m, ombre-fenetre. */
.pl-flottant{background:var(--surface-relief);border:1px solid var(--filet);border-radius:var(--radius-m);box-shadow:var(--ombre-fenetre)}
.pl-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:220px;padding:6px;display:flex;flex-direction:column;z-index:30}
.pl-menu .pl-menu-qui{padding:8px 10px 10px;border-bottom:1px solid var(--filet-ligne);margin-bottom:4px;display:flex;flex-direction:column}
.pl .pl-menu a,.pl-menu button{display:flex;align-items:center;gap:10px;min-height:var(--densite-controle);padding:var(--densite-marge) 10px;border-radius:var(--radius-s);color:var(--texte);text-decoration:none;background:none;border:0;font:inherit;text-align:left;cursor:pointer;transition:background-color var(--duree-survol) ease-out}
.pl .pl-menu a:hover,.pl-menu button:hover{background:var(--survol);color:var(--texte)}
.pl .pl-menu label{display:flex;align-items:center;gap:10px;min-height:var(--densite-controle);padding:var(--densite-marge) 10px;border-radius:var(--radius-s);color:var(--texte);cursor:pointer;transition:background-color var(--duree-survol) ease-out}
.pl .pl-menu label:hover{background:var(--survol)}
.pl-menu label input[type="radio"]{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.pl .pl-menu [aria-current="true"],.pl .pl-menu label:has(input:checked){background:var(--actif);font-weight:600}
.pl-menu a:focus-visible,.pl-menu button:focus-visible,.pl-menu label:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px}

/* Liste de choix : au-delà des puces, un <details> ; son <summary> a le dessin d'un champ et son chevron, le menu s'ouvre dessous, aligné à gauche. */
.pl-deroule{position:relative;display:inline-block}
.pl-deroule>summary{list-style:none;display:flex;align-items:center;gap:8px;min-height:var(--densite-controle);padding:var(--densite-marge) 12px;border-radius:var(--radius-s);border:1px solid var(--filet-controle);background:var(--champ);color:var(--texte);cursor:pointer}
.pl-deroule>summary::-webkit-details-marker{display:none}
.pl-deroule>summary::after{content:"";width:6px;height:6px;margin-left:auto;border-right:1.5px solid var(--texte-second);border-bottom:1.5px solid var(--texte-second);transform:translateY(-2px) rotate(45deg);flex:none}
.pl-deroule[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
.pl-deroule>summary:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.pl-deroule>.pl-menu{left:0;right:auto;max-height:320px;overflow:auto}

/* Titre de page : titre, puis ‹ étiquette › ; les gestes à droite, sur la même ligne. */
.pl-tete-page{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.pl-tete-page .pl-outils{margin-left:auto;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
/* Le titre et son résumé dessous, en texte-second. */
.pl-titre{display:flex;flex-direction:column;gap:4px;min-width:0}
.pl-titre>p{margin:0;color:var(--texte-second)}
/* Retour : au-dessus du titre, sur le fond nu, en texte-second (action n'y tient pas 4,5:1), son chevron Lucide de 16 px. */
.pl .pl-retour{display:inline-flex;align-items:center;gap:6px;min-height:var(--densite-controle);color:var(--texte-second);text-decoration:none;transition:color var(--duree-survol) ease-out}
.pl .pl-retour:hover{color:var(--texte)}
.pl-retour svg{width:16px;height:16px;flex:none}
.pl-retour:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--radius-s)}

/* Navigation ‹ étiquette › : deux flèches de 36 px et l'étiquette. */
.pl-nav-etiq{display:inline-flex;align-items:stretch;border:1px solid var(--filet-controle);border-radius:var(--radius-m);overflow:hidden;flex:none}
.pl .pl-nav-etiq a{display:grid;place-items:center;min-height:var(--densite-controle);color:var(--texte);text-decoration:none;transition:background-color var(--duree-survol) ease-out}
.pl .pl-nav-etiq a:hover{background:var(--survol);color:var(--texte)}
.pl .pl-nav-etiq .pl-fleche{width:var(--densite-controle);color:var(--texte-second)}
.pl-nav-etiq .pl-etiq{padding:0 14px;min-width:150px;font-weight:600;border-left:1px solid var(--filet-ligne);border-right:1px solid var(--filet-ligne);white-space:nowrap}

/* Onglets de page : soulignés d'un trait texte ; l'onglet ouvert porte aria-current. */
.pl-onglets-page{display:flex;gap:2px;border-bottom:1px solid var(--verre-filet)}
.pl .pl-onglets-page a{padding:var(--densite-espace) 12px;color:var(--texte-second);text-decoration:none;font-weight:500;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color var(--duree-survol) ease-out}
.pl .pl-onglets-page a:hover{color:var(--texte)}
.pl .pl-onglets-page a[aria-current="page"]{color:var(--texte);font-weight:600;border-bottom-color:var(--texte)}
/* Un onglet dont un réglage manque : la pastille de « à regarder », sans mot écrit (<span class="pl-etat pl-att"></span>) ; le mot va dans son nom accessible. */
.pl-onglets-page .pl-etat{margin-left:6px;vertical-align:middle}
.pl-onglets-page .pl-nb{font-family:var(--famille-donnee);color:var(--texte-second);margin-left:6px;font-weight:400}
/* Les onglets de page et, à leur droite, la recherche et le sélecteur de mois ; dessous sur téléphone. */
.pl-rangee-onglets{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 16px}
.pl-rangee-onglets>.pl-onglets-page{flex:1 1 auto;min-width:0}
.pl-rangee-onglets>.pl-outils{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-left:auto}

/* Liste dense : une seule colonne par défaut ; la page donne les siennes par --cols, posée sur la .pl-dense elle-même. */
.pl-dense{--cols:minmax(0,1fr);display:flex;flex-direction:column;padding:4px 0}
.pl-dense-tete,.pl-dense-ligne{display:grid;grid-template-columns:var(--cols);align-items:center;column-gap:16px;padding:0 14px}
.pl-dense-tete{min-height:var(--densite-petit);font-size:var(--etiquette-taille);line-height:var(--etiquette-interligne);font-weight:var(--etiquette-graisse);letter-spacing:var(--etiquette-approche);text-transform:uppercase;color:var(--texte-second);border-bottom:1px solid var(--verre-filet)}
.pl-dense-ligne{min-height:var(--densite-ligne);padding-top:2px;padding-bottom:2px;border-bottom:1px solid var(--filet-ligne);color:var(--texte);text-decoration:none;transition:background-color var(--duree-survol) ease-out}
.pl .pl-dense-ligne{color:var(--texte)}
.pl-dense-ligne:last-child{border-bottom:0}
.pl-dense-ligne:hover{background:var(--survol)}
.pl-dense-ligne.choisie{background:var(--actif)}
.pl-dense-ligne.ouverte{background:var(--actif);box-shadow:inset 3px 0 0 var(--texte-second)}
.pl-dense .pl-c{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-dense .pl-fort{font-weight:600}
.pl-dense .pl-date{font-family:var(--famille-donnee);font-size:var(--donnee-taille);color:var(--texte-second);white-space:nowrap}
/* Échéance passée : la date prend la couleur de l'attention. */
.pl-date.pl-att,.pl-dense .pl-date.pl-att{color:var(--etat-a-regarder)}
.pl-dense .pl-sous{display:block;color:var(--texte-second);font-size:13px;line-height:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-dense .pl-bout{display:flex;justify-content:flex-end;gap:8px}
.pl-dense .pl-bout .pl-btn,.pl-dense .pl-bout .pl-champ{min-height:var(--densite-petit);padding-top:2px;padding-bottom:2px}
/* Ligne qui mène à l'objet et porte un geste : la ligne n'est pas un lien ; son nom (.pl-etire) l'est, étiré sur toute la ligne, et les gestes passent au-dessus. */
.pl-dense-ligne:has(.pl-etire){position:relative}
.pl .pl-dense-ligne .pl-etire{color:inherit;text-decoration:none}
.pl-dense-ligne .pl-etire::after{content:"";position:absolute;inset:0}
.pl-dense-ligne .pl-etire:focus-visible{outline:0}
.pl-dense-ligne:has(.pl-etire:focus-visible){outline:2px solid var(--focus);outline-offset:-2px}
.pl-dense-ligne:has(.pl-etire) .pl-bout{position:relative;z-index:1}
/* Ligne de pied : un total, sur un filet verre-filet, en donnee-forte. */
.pl-dense-pied{display:grid;grid-template-columns:var(--cols);align-items:center;column-gap:16px;min-height:var(--densite-ligne);padding:2px 14px;border-top:1px solid var(--verre-filet);font-family:var(--famille-donnee);font-size:var(--donnee-forte-taille);line-height:var(--donnee-forte-interligne);font-weight:var(--donnee-forte-graisse);font-variant-numeric:tabular-nums}
.pl-dense-pied .pl-c{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Groupe : un titre en étiquette, son nombre, sa liste dense. */
.pl-groupe{display:flex;flex-direction:column}
.pl-groupe>h2{margin:0;display:flex;align-items:center;gap:10px;padding:var(--densite-espace) 14px 4px}
/* Un groupe qui porte un état pose sa pastille devant son titre : <span class="pl-etat pl-att"></span>. */
.pl-groupe>h2 .pl-nb{font-family:var(--famille-donnee);font-weight:400;letter-spacing:0;color:var(--texte-second)}
/* Liste datée : sous le titre du groupe, chaque jour a son titre (<h3 class="pl-jour">), sur un filet filet-ligne, au-dessus de ses lignes. */
.pl-jour{margin:0;padding:var(--densite-espace) 14px 2px;font-family:var(--famille-titre);font-size:14px;line-height:20px;font-weight:700;color:var(--texte);border-bottom:1px solid var(--filet-ligne)}
/* Histogramme : douze barres par mois, une ligne d'objectif pointillée en texte-second (l'orange est un geste), sa légende au-dessus à droite ; la barre vive, en action. */
.pl-barres{--piste:160px;position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:10px}
.pl-barres>div{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.pl-barres b{display:flex;align-items:flex-end;justify-content:center;width:100%;height:var(--piste)}
.pl-barres i{width:100%;max-width:44px;background:var(--vert-doux);border-top:2px solid var(--action);border-radius:6px 6px 2px 2px}
.pl-barres i.vive{background:var(--action);filter:drop-shadow(var(--lueur-trace))}
.pl-barres span{font-size:13px;line-height:16px;color:var(--texte-second)}
.pl-barres-objectif{position:absolute;inset:0 0 auto;height:var(--piste);pointer-events:none;text-decoration:none}
.pl-barres-objectif s{position:absolute;inset:auto 0 0;border-top:1px dashed var(--texte-second);text-decoration:none}
.pl-barres-objectif span{position:absolute;right:0;bottom:calc(100% + 18px)}
.pl-barres-objectif span::before{content:"";display:inline-block;width:16px;margin-right:6px;vertical-align:middle;border-top:1px dashed var(--texte-second)}

/* Case à cocher dessinée : 16 px, contour filet-controle, cochée en action. */
.pl-coche{appearance:none;-webkit-appearance:none;width:16px;height:16px;margin:0;border:1.5px solid var(--filet-controle);border-radius:var(--radius-s);background:var(--champ);display:grid;place-items:center;cursor:pointer}
.pl-coche:checked{background:var(--action);border-color:var(--action)}
.pl-coche:checked::after{content:"";width:8px;height:4px;border-left:2px solid var(--sur-action);border-bottom:2px solid var(--sur-action);transform:translateY(-1px) rotate(-45deg)}
.pl-coche:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* Barre de sélection : là tant qu'une ligne est cochée. */
/* Sans script : la liste et sa barre sont dans un .pl-avec-selection ; la barre suit la liste dans le HTML (le compteur lit les cases qui la précèdent) et se place au-dessus.
   Elle paraît dès qu'une case est cochée ; .pl-coches écrit leur nombre. */
.pl-avec-selection{display:flex;flex-direction:column;gap:12px;counter-reset:coches}
.pl-avec-selection .pl-coche:checked{counter-increment:coches}
.pl-avec-selection .pl-dense-tete .pl-coche:checked{counter-increment:none}
.pl-selection{display:none;order:-1;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:8px 14px;background:var(--actif);border-radius:var(--radius-m)}
.pl-avec-selection:has(.pl-coche:checked)>.pl-selection:not([hidden]){display:flex}
.pl-selection .pl-combien{font-weight:600;margin-right:auto}
.pl-coches::before{content:counter(coches);font-family:var(--famille-donnee);font-variant-numeric:tabular-nums}

/* Ligne de chiffres : les cases côte à côte, séparées d'un filet. */
.pl-chiffres{display:flex;flex-wrap:wrap;align-items:stretch;padding:0;overflow:hidden}
.pl-chiffres>*{flex:1 1 220px;display:flex;flex-direction:column;gap:2px;padding:var(--densite-espace) 14px;border-left:1px solid var(--filet-ligne)}
.pl-chiffres>:first-child{border-left:0}
/* Une case qui mène à sa page : survol commun ; le chiffre garde sa couleur. */
.pl .pl-chiffres>a{color:var(--texte);text-decoration:none;transition:background-color var(--duree-survol) ease-out}
.pl .pl-chiffres>a:hover{background:var(--survol);color:var(--texte)}
.pl .pl-chiffres>a .pl-second{color:var(--texte-second)}
.pl-chiffres>a:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.pl-chiffres .pl-v{font-family:var(--famille-titre);font-weight:800;font-size:var(--titre-2-taille);line-height:var(--titre-2-interligne);font-variant-numeric:tabular-nums}
.pl-jauge{height:6px;border-radius:3px;background:var(--filet-ligne);overflow:hidden;margin-top:6px}
.pl-jauge>i{display:block;height:100%;border-radius:3px;background:linear-gradient(to right,var(--action),var(--action-fin));filter:drop-shadow(var(--lueur-trace))}

/* Objet ouvert (.pl-objet, une .pl-verre) : à côté de son tiers, sous la ligne du titre et les onglets de la page, dans un .pl-ouvert.
   Le tiers (.pl-tiers) montre le rendu du document, sur un tiers de la largeur, ou la liste réduite (.pl-tiers.pl-reduite), sur un quart, entre 320 et 400 px ; l'objet prend le reste. L'ordre suit le HTML : BSF Gestion pose l'objet puis le tiers ;
   BSF Center et la vue du parc, le tiers (la liste) puis l'objet. Les deux tiennent dans la hauteur de la fenêtre, restent en place quand la page défile et défilent seuls. */
.pl-ouvert{display:flex;gap:var(--densite-ecart);align-items:flex-start}
.pl-objet,.pl-tiers{position:sticky;top:var(--space-4);max-height:calc(100dvh - 2 * var(--space-4));min-width:0}
.pl-objet{flex:2 1 0;display:flex;flex-direction:column}
.pl-tiers{flex:1 1 0;overflow:auto;display:flex;flex-direction:column;gap:16px}
.pl-tiers.pl-reduite{flex:0 0 clamp(320px,25%,400px)}
.pl-objet-tete{display:flex;align-items:flex-start;gap:12px;padding:12px 16px var(--densite-espace)}
.pl-objet-tete .pl-qui{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:4px}
.pl-objet .pl-onglets-page{padding:0 14px}
.pl-objet-corps{flex:1 1 auto;min-height:0;overflow:auto;padding:12px 16px 16px;display:flex;flex-direction:column;gap:var(--densite-ecart)}
.pl-derriere{pointer-events:none}
/* Fermés par l'attribut hidden : leur display l'écraserait. */
.pl-objet[hidden],.pl-feuille[hidden],.pl-voile[hidden],.pl-bulle[hidden],.pl-selection[hidden],.pl-recherche-liste[hidden]{display:none}

/* Rangée de gestes : le principal libellé, puis les gestes fréquents en boutons icônes (leur nom en aria-label et title, sans libellé déployé), « Plus d'actions » (.pl-autres), la croix. */
.pl-gestes{display:flex;flex-wrap:nowrap;align-items:center;gap:6px;flex:none}
.pl-gestes .pl-btn-p{margin-right:6px;white-space:nowrap}
.pl-gestes>.pl-btn-ico .lib{display:none}
.pl-fermer{width:var(--densite-controle);height:var(--densite-controle);display:grid;place-items:center;border-radius:var(--radius-m);border:1px solid var(--verre-filet);background:transparent;color:var(--texte-second);cursor:pointer;flex:none;transition:background-color var(--duree-survol) ease-out}
.pl .pl-fermer{color:var(--texte-second)}
.pl .pl-fermer:hover{background:var(--survol);color:var(--texte)}
.pl-fermer:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* Bouton icône : carré au repos, son nom accessible en aria-label ; au survol et au focus clavier, son libellé (.lib) se déploie et pousse ses voisins. */
.pl .pl-btn-ico{min-width:var(--densite-controle);height:var(--densite-controle);min-height:var(--densite-controle);padding:0 8px;gap:0;color:var(--texte-second);white-space:nowrap;transition:background-color var(--duree-survol) ease-out,color var(--duree-survol) ease-out}
.pl .pl-btn-ico:hover{color:var(--texte)}
.pl-btn-ico svg{width:18px;height:18px;flex:none}
.pl-btn-ico .lib{display:inline-block;max-width:0;overflow:hidden;vertical-align:middle;transition:max-width var(--duree-survol) ease-out,margin-left var(--duree-survol) ease-out}
.pl-btn-ico:hover .lib,.pl-btn-ico:focus-visible .lib{max-width:20em;margin-left:8px}
.pl .pl-btn-ico.pl-btn-destructif,.pl .pl-btn-ico.pl-btn-destructif:hover{color:var(--destructif)}
/* Petit, au bout d'une ligne : 30 px, icône de 14 px ; son libellé ne se déploie pas. */
.pl .pl-btn-ico.petit{min-width:var(--densite-petit);height:var(--densite-petit);min-height:var(--densite-petit);padding:0 6px}
.pl-btn-ico.petit svg{width:14px;height:14px}
.pl-btn-ico.petit .lib{display:none}
@media (hover:none){.pl-btn-ico .lib{display:none}}
@media (prefers-reduced-motion:reduce){.pl .pl-btn-ico,.pl-btn-ico .lib{transition:none}}
/* Plus d'actions : un <details class="pl-autres"> dont le <summary> est un bouton secondaire, son libellé puis son chevron (au téléphone, un bouton icône, trois points) ;
   son menu (.pl-menu.pl-flottant) s'ouvre dessous, aligné à droite. Le destructif y va en dernier (.pl-destructif, sous son filet) ; jamais le principal. */
.pl-autres{position:relative;flex:none}
.pl-autres>summary{list-style:none}
.pl-autres>summary::-webkit-details-marker{display:none}
.pl .pl-autres[open]>summary{background:var(--actif);color:var(--texte)}
.pl-autres>.pl-menu svg{width:16px;height:16px;flex:none;color:var(--texte-second)}
.pl-autres>.pl-menu{white-space:nowrap}
.pl-autres[open]>summary:not(.pl-btn-ico)>svg{transform:rotate(180deg)}
.pl .pl-autres>.pl-menu .pl-destructif,.pl .pl-autres>.pl-menu .pl-destructif:hover,.pl-autres>.pl-menu .pl-destructif svg{color:var(--destructif)}
.pl-autres>.pl-menu .pl-destructif{position:relative;margin-top:9px}
.pl-autres>.pl-menu .pl-destructif::before{content:"";position:absolute;left:0;right:0;top:-5px;height:1px;background:var(--filet-ligne)}

/* Lignes d'un document : la poignée (.pl-poignee, un bouton) en première colonne de 22 px (44 px au doigt), le bouton icône petit qui retire en dernière ; la page donne ses --cols. */
.pl-poignee{display:grid;place-items:center;width:22px;height:var(--densite-petit);padding:0;border:0;border-radius:var(--radius-s);background:none;color:var(--discret);cursor:grab;transition:color var(--duree-survol) ease-out}
.pl-poignee svg{width:14px;height:14px}
@media (pointer: coarse){.pl-poignee{width:44px}}
.pl-dense-ligne:hover .pl-poignee,.pl-poignee:focus-visible{color:var(--texte)}
.pl-poignee:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* La ligne prise par sa poignée flotte ; sa place d'arrivée est un trait action, sans lueur. */
.pl .pl-dense-ligne.glisse{background:var(--surface-relief);border-radius:var(--radius-m);outline:1px solid var(--filet);box-shadow:var(--ombre-fenetre);cursor:grabbing}
.pl-insertion{height:2px;margin:0 14px 0 50px;border-radius:1px;background:var(--action)}
/* Section : titre d'un groupe de lignes et son sous-total ; note : sur toute la largeur des colonnes, hors des totaux. */
.pl .pl-dense-ligne.section{background:var(--actif);border-bottom-color:var(--verre-filet)}
.pl-dense-ligne.section .pl-titre-section{font-family:var(--famille-titre);font-weight:800;font-size:15px;line-height:20px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-dense-ligne.section .pl-sous-total{font-family:var(--famille-donnee);font-size:var(--donnee-forte-taille);font-weight:var(--donnee-forte-graisse);font-variant-numeric:tabular-nums;text-align:right}
.pl-dense-ligne.note .pl-note{grid-column:2 / -2;color:var(--texte-second);white-space:normal}
/* Ajout : les petits boutons sous la dernière ligne, alignés sur le texte ; la ligne d'ajout vierge, un champ en tirets suivi de son bouton plus. */
.pl-ajouts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 14px 10px 50px}
.pl .pl-ajouts .pl-btn{min-height:var(--densite-petit);padding-top:2px;padding-bottom:2px;font-size:13px;gap:6px}
.pl-ajouts .pl-btn svg{width:16px;height:16px}
.pl-ligne-ajout{display:flex;align-items:center;gap:8px}
.pl-ligne-ajout .pl-champ{flex:1 1 auto;border-style:dashed}

/* Aperçu d'un document : son titre au-dessus, puis la feuille imprimée (.pl-papier), dans les valeurs claires quel que soit le thème. */
.pl-apercu{display:flex;flex-direction:column;align-items:center;gap:10px}
.pl-apercu>.pl-eti{align-self:stretch}
.pl-papier{width:100%;max-width:640px;aspect-ratio:210 / 297;overflow:hidden;background:var(--blanc-clinique);color:var(--texte);border:1px solid var(--filet);border-radius:var(--radius-s);box-shadow:var(--ombre-fenetre)}
/* Un e-mail : sans format de page ; en tête expéditeur, destinataire, objet ; ses pièces jointes en cadres filet. */
.pl-papier.courriel{aspect-ratio:auto}
.pl-papier .pl-pj{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid var(--filet);border-radius:var(--radius-m);font-family:var(--famille-donnee);font-size:13px}

/* Variable d'un modèle : un bloc dans le texte ; sans valeur dans l'aperçu (.vide), en « à regarder ». */
.pl-variable{display:inline-block;margin:0 1px;padding:1px 6px;border-radius:var(--radius-s);background:var(--vert-doux);color:var(--texte);font-family:var(--famille-donnee);font-size:13px;line-height:20px;white-space:nowrap}
.pl-variable.vide{background:var(--etat-a-regarder-doux);color:var(--etat-a-regarder)}

/* Liste de recherche (.pl-recherche-liste, une .pl-flottant) : dans le .pl-recherche, 8 px sous le champ, alignée à droite sur lui, sans voile. */
.pl-recherche-liste{position:absolute;right:0;top:calc(100% + 8px);z-index:30;width:min(880px,calc(100vw - 2 * var(--space-6)));display:grid;grid-template-columns:minmax(0,1fr) 320px;overflow:hidden;text-align:left}
.pl-resultats{max-height:640px;overflow:auto;padding:6px 10px 10px;border-right:1px solid var(--filet-ligne);display:flex;flex-direction:column;gap:6px}
.pl-resultats>section{display:flex;flex-direction:column;gap:2px}
.pl-resultats>section>.pl-eti{padding:6px 10px 4px;color:var(--texte-second)}
.pl-resultats .pl-nb{font-family:var(--famille-donnee);font-weight:400;letter-spacing:0;margin-left:6px}
.pl-resultats>section>p{margin:0;padding:4px 10px;color:var(--texte-second)}
.pl-resultat{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:var(--radius-m);text-decoration:none;transition:background-color var(--duree-survol) ease-out}
.pl .pl-resultat{color:var(--texte)}
.pl .pl-resultat:hover{background:var(--survol);color:var(--texte)}
.pl .pl-resultat[aria-selected="true"]{background:var(--actif);box-shadow:inset 3px 0 0 var(--texte-second)}
.pl-resultat:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.pl-resultat .pl-c{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.pl-resultat .pl-fort{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-resultat .pl-sous{font-size:13px;line-height:18px;color:var(--texte-second);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-resultat .pl-etat{flex:none}
.pl-recherche-liste mark{background:var(--vert-doux);color:inherit;border-radius:2px;padding:0 1px}
.pl-choisi{min-width:0;padding:16px 18px;display:flex;flex-direction:column;gap:14px}
.pl-raccourcis{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:6px 18px;padding:10px 20px;border-top:1px solid var(--filet-ligne);font-size:13px;color:var(--texte-second)}
.pl kbd{font-family:var(--famille-donnee);font-size:13px;padding:0 5px;margin-right:4px;border:1px solid var(--filet);border-radius:var(--radius-s)}

/* Bulle : sur place, sa pointe vers ce qu'elle concerne (--pointe : hauteur de la pointe, posée sur la .pl-bulle). */
.pl-bulle{--pointe:28px;position:absolute;z-index:25;width:420px;max-width:calc(100vw - 32px);padding:14px 16px 16px;display:flex;flex-direction:column;gap:12px}
.pl-bulle::before{content:"";position:absolute;width:12px;height:12px;background:var(--surface-relief);border-left:1px solid var(--filet);border-bottom:1px solid var(--filet);transform:rotate(45deg)}
.pl-bulle.pointe-g::before{left:-7px;top:var(--pointe)}
.pl-bulle.pointe-d::before{right:-7px;top:var(--pointe);transform:rotate(225deg)}
/* Placement à côté de l'objet (posé en position:relative) : .a-droite pointe à gauche, .a-gauche pointe à droite. */
.pl-bulle.a-droite{left:calc(100% + 12px);top:0}
.pl-bulle.a-gauche{right:calc(100% + 12px);top:0}
.pl-bulle.a-droite::before{left:-7px;top:var(--pointe)}
.pl-bulle.a-gauche::before{right:-7px;top:var(--pointe);transform:rotate(225deg)}
/* Bulle rapportée à la fenêtre (.fixe) : posée par le script de la page, enfant direct de .pl, hors de toute carte en verre (le flou du verre en ferait
   son repère et la couperait). Trop haute, son corps (.pl-bulle-corps) défile seul : la bulle garde sa pointe. */
.pl-bulle.fixe{position:fixed;z-index:40;max-height:calc(100dvh - 2 * var(--space-4))}
.pl-bulle-corps{min-height:0;overflow:auto;display:flex;flex-direction:column;gap:12px}

/* Choix à cliquer : puces en petit, une seule choisie (.actif). */
.pl-choix{display:flex;flex-wrap:wrap;gap:6px}
.pl-choix .pl-puce{min-height:var(--densite-puce);padding:3px 10px;background:transparent;font:inherit;cursor:pointer}
/* Sans script : chaque puce est un <label> autour de son bouton radio (un seul choix, caché) ou de sa case .pl-coche (plusieurs choix, visible). */
.pl-choix .pl-puce input[type="radio"]{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.pl-choix .pl-puce .pl-coche{width:14px;height:14px}
/* Champ et son libellé au-dessus. */
.pl-libelle{display:flex;flex-direction:column;gap:6px;min-width:0}
.pl-libelle>span{font-size:13px;font-weight:600;color:var(--texte-second)}
.pl-libelle .pl-champ{width:100%}

/* Termes : libellé à gauche, valeur à droite. */
.pl-termes{margin:0;display:grid;grid-template-columns:minmax(120px,190px) minmax(0,1fr)}
.pl-termes dt,.pl-termes dd{margin:0;padding:4px 0;border-bottom:1px solid var(--filet-ligne)}
.pl-termes dt{color:var(--texte-second)}

/* Initiales d'un client. */
.pl-initiales{width:28px;height:28px;border-radius:var(--radius-m);display:grid;place-items:center;flex:none;background:var(--vert-doux);color:var(--action);font:800 12px/1 var(--famille-titre);letter-spacing:.02em}
.pl-initiales.grand{width:40px;height:40px;font-size:14px}

/* Rail (écran moyen) et barre du bas (iPhone) : icône de 22 px au-dessus du nom en 13 px. */
.pl-rail{display:flex;flex-direction:column;gap:2px;padding:6px;width:84px;flex:none;position:sticky;top:var(--space-4);align-self:flex-start}
.pl-rail a,.pl-barre-bas a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border-radius:12px;font-size:13px;line-height:16px;text-align:center;text-decoration:none;transition:background-color var(--duree-survol) ease-out}
.pl .pl-rail a,.pl .pl-barre-bas a{color:var(--texte-second)}
.pl-rail a{padding:7px 2px}
.pl .pl-rail a:hover,.pl .pl-barre-bas a:hover{background:var(--survol);color:var(--texte)}
.pl .pl-rail a[aria-current="page"],.pl .pl-barre-bas a[aria-current="page"]{color:var(--texte);font-weight:600;background:var(--actif)}
.pl-rail a[aria-current="page"] svg,.pl-barre-bas a[aria-current="page"] svg{color:var(--texte)}
.pl-rail a,.pl-barre-bas a{min-width:0}
.pl-rail svg,.pl-barre-bas svg{width:22px;height:22px;flex:none}
/* Le nom dans un <span> : trop long, il finit par des points de suspension. */
.pl-rail a>span,.pl-barre-bas a>span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-rail a:focus-visible,.pl-barre-bas a:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.pl-barre-bas{position:fixed;left:0;right:0;bottom:0;z-index:20;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);padding:6px 6px max(22px,env(safe-area-inset-bottom));border-radius:var(--radius-xl) var(--radius-xl) 0 0;border-bottom:0}
.pl-barre-bas a{min-height:56px}

/* Feuille (iPhone) : depuis le bas, sur un voile du fond. */
.pl-feuille{position:fixed;left:0;right:0;bottom:0;z-index:30;border-radius:var(--radius-xl) var(--radius-xl) 0 0;border-bottom:0;padding:10px 16px 28px;display:flex;flex-direction:column;gap:12px;max-height:88%;overflow:auto}
.pl-feuille::before{content:"";align-self:center;width:40px;height:5px;border-radius:3px;background:var(--filet);flex:none}
.pl-voile{position:fixed;inset:0;z-index:29;background:color-mix(in srgb,var(--fond) 72%,transparent)}

/* Cadre d'une maquette : feuille, voile, barre du bas et bulle fixée s'y tiennent au lieu de la fenêtre. */
.pl-cadre{position:relative;overflow:hidden}
.pl-cadre .pl-feuille,.pl-cadre .pl-voile,.pl-cadre .pl-barre-bas,.pl-cadre .pl-bulle.fixe{position:absolute}

/* La navigation suit la largeur : barre du haut à partir de ecran-bureau, rail entre les deux, barre du bas sous ecran-tablette. */
/* Un logiciel qui a un rail le dit sur sa page (.pl-avec-rail) : ses pages quittent alors la barre du haut sous ecran-bureau. */
.pl-barre-bas{display:none}
.pl-avec-rail .pl-barre .pl-nav{display:none}
@media (width >= 64rem) /* ecran-bureau */{
  .pl-rail{display:none}
  .pl-avec-rail .pl-barre .pl-nav{display:flex}
}
/* Sous ecran-bureau : l'objet ouvert prend toute la largeur, sans tiers ; la liste de recherche, sans le résultat choisi. */
/* État d'une étape ou d'une tuile (.pl-st) : à venir sans pastille, en cours (pastille qui respire), fait (coche), en attente (grise pleine), à faire par vous, à regarder. */
.pl-st{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;font-size:13px}
.pl-st::before{content:"";width:8px;height:8px;border-radius:2px;flex:none;background:currentColor}
.pl-st-avenir{color:var(--discret)}.pl-st-avenir::before{display:none}
.pl-st-cours{color:var(--texte)}.pl-st-cours::before{animation:pl-respire var(--respiration) ease-in-out infinite}
.pl-st-fait{color:var(--etat-conforme)}.pl-st-fait::before{width:4px;height:8px;margin:0 2px 2px;border:solid currentColor;border-width:0 2px 2px 0;border-radius:0;background:none;transform:rotate(45deg)}
.pl-st-attente{color:var(--etat-non-juge)}
.pl .pl-st-vous{color:var(--texte);font-weight:600}.pl-st-vous::before{background:var(--etat-non-juge)}
.pl-st-att{color:var(--etat-a-regarder)}
@keyframes pl-respire{0%,100%{opacity:1}50%{opacity:.3}}

/* Section repliée : un <details class="pl-repli pl-verre"> ; le <summary> porte .t (titre en <b>, résumé), puis « 1 à faire », puis le chevron. */
.pl-repli{padding:0}
.pl-repli>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) auto 16px;align-items:center;gap:16px;min-height:var(--densite-ligne);padding:6px 18px;border-radius:var(--radius-l);transition:background-color var(--duree-survol) ease-out}
.pl-repli>summary::-webkit-details-marker{display:none}
.pl-repli>summary:hover{background:var(--survol)}
.pl-repli>summary:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.pl-repli>summary .t{display:flex;flex-direction:column;min-width:0}.pl-repli>summary .t b{font-weight:600}
.pl-repli>summary .t span{font-size:13px;color:var(--texte-second)}
.pl-repli>summary>svg{width:16px;height:16px;color:var(--texte-second)}
.pl-repli[open]>summary>svg{transform:rotate(180deg)}
.pl-repli>.pl-repli-corps{padding:4px 18px 18px;display:flex;flex-direction:column;gap:12px}

/* Plan du cabinet (.pl-plan, une .pl-verre), suivant le câblage déclaré : h2 (le titre, ses nombres en .pl-nb), puis les niveaux .pl-plan-niveau dans l'ordre
   (la box, ce qui y est branché, le serveur) et .pl-plan-pieces (des .pl-plan-piece : h3 avec le symbole de la pièce et .pl-nb, puis un .pl-plan-niveau).
   Un tronc de 1 px relie les niveaux à gauche ; la première bulle de chaque niveau s'y attache. Bulle d'un poste : a.pl-machine (.att, .crit, .cours) > .n, .pl-etat, .prise.
   Bulle d'un appareil : .pl-appareil (un <a> quand il a une interface web, title = son adresse) > svg (sa nature), .t (.n, .l), svg.lien (external-link). */
.pl-plan{padding:16px 18px 18px}
.pl-plan>h2{margin:0 0 12px;display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:var(--etiquette-taille);line-height:var(--etiquette-interligne);font-weight:var(--etiquette-graisse);letter-spacing:var(--etiquette-approche);text-transform:uppercase;color:var(--texte-second)}
.pl-plan .pl-nb{font-family:var(--famille-donnee);font-weight:400;letter-spacing:0;text-transform:none;color:var(--discret)}
.pl-plan-niveau,.pl-plan-pieces{position:relative;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;padding-left:18px}
.pl-plan-niveau+.pl-plan-niveau,.pl-plan-niveau+.pl-plan-pieces{margin-top:14px}
/* Le tronc : de la box jusqu'aux pièces ; la première bulle d'un niveau du réseau y est attachée par un trait court. */
.pl-plan>.pl-plan-niveau::before,.pl-plan>.pl-plan-pieces::before{content:"";position:absolute;left:6px;top:-14px;bottom:0;width:1px;background:var(--filet)}
.pl-plan>.pl-plan-niveau:first-of-type::before{top:20px}
.pl-plan>.pl-plan-pieces::before{bottom:auto;height:22px}
.pl-plan>.pl-plan-niveau>:first-child::before{content:"";position:absolute;left:-12px;top:20px;width:12px;height:1px;background:var(--filet)}
.pl-plan-pieces{gap:14px 12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr))}
.pl-plan-piece{display:flex;flex-direction:column;gap:6px;min-width:0}
.pl-plan-piece>h3{margin:0;display:flex;align-items:center;gap:6px;font-size:var(--etiquette-taille);line-height:var(--etiquette-interligne);font-weight:var(--etiquette-graisse);letter-spacing:var(--etiquette-approche);text-transform:uppercase;color:var(--texte-second);white-space:nowrap}
.pl-plan-piece>h3>svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:2.74;stroke-linecap:round;stroke-linejoin:round}
.pl-plan-piece>.pl-plan-niveau{padding-left:0;grid-template-columns:minmax(0,1fr)}
.pl-machine,.pl-appareil{position:relative;display:grid;align-items:center;column-gap:8px;min-width:0;padding:8px 10px;border-radius:var(--radius-m);border:1px solid var(--verre-filet);background:var(--champ);text-decoration:none;transition:background-color var(--duree-survol) ease-out}
.pl-machine{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n prise" "etat prise"}
.pl .pl-machine,.pl .pl-appareil{color:var(--texte)}
.pl a.pl-machine:hover,.pl a.pl-appareil:hover{background:var(--survol);color:var(--texte)}
.pl-machine:focus-visible,.pl-appareil:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.pl-machine .n{grid-area:n;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--famille-donnee);font-weight:500;font-size:13px;line-height:18px}
.pl-machine>.pl-etat{grid-area:etat;min-width:0;font-size:13px;line-height:18px;overflow:hidden}
.pl-machine .prise{grid-area:prise;font-family:var(--famille-donnee);font-size:13px;color:var(--discret);white-space:nowrap}
.pl-machine.att{border-color:var(--etat-a-regarder-filet)}
.pl-machine.crit{border-color:var(--etat-panne-filet)}
.pl-machine.cours>.pl-etat::before{animation:pl-respire var(--respiration) ease-in-out infinite}
.pl-appareil{grid-template-columns:16px minmax(0,1fr) auto}
.pl-appareil>svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;color:var(--texte-second)}
.pl-appareil>svg.lien{width:14px;height:14px;stroke-width:2.74;color:var(--action)}
.pl-appareil .t{display:flex;flex-direction:column;min-width:0}
.pl-appareil .n{font-weight:600;font-size:13px;line-height:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-appareil .l{font-size:13px;line-height:18px;color:var(--texte-second);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-appareil .l .pl-donnee{font-family:var(--famille-donnee)}

/* Page Cabinet de la vue du parc (.pl-cabinet) : le plan à gauche, un tiers ; la liste des problèmes en colonnes à droite, deux tiers. Sous ecran-bureau, l'un sous l'autre. */
.pl-cabinet{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:12px;align-items:start}
/* Ligne de comptes sous le titre : le nombre de machines en texte-second, puis un badge d'état par état présent. */
.pl-comptes{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin:0;color:var(--texte-second)}

/* Tuiles d'une fiche : .pl-tuiles > section (h3, .pl-tuiles-grille) ; .pl-tuile (.att, .avenir) : a.pl-tuile-nom, .pl-st, .pl-tuile-ligne, .pl-jauge, un .pl-btn.petit. */
.pl-tuiles{display:flex;flex-direction:column;gap:18px}
.pl-tuiles h3{margin:0 0 10px;padding-bottom:6px;border-bottom:1px solid var(--verre-filet);font-size:var(--etiquette-taille);line-height:var(--etiquette-interligne);font-weight:600;letter-spacing:var(--etiquette-approche);text-transform:uppercase;color:var(--texte)}
.pl-tuiles-grille{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.pl-tuile{position:relative;display:flex;flex-direction:column;gap:4px;min-height:72px;padding:10px 12px;border-radius:var(--radius-m);border:1px solid var(--verre-filet);background:var(--champ);transition:background-color var(--duree-survol) ease-out}
.pl-tuile:hover{background:var(--survol)}
.pl .pl-tuile-nom{font-weight:600;color:var(--texte);text-decoration:none}
.pl-tuile-nom::after{content:"";position:absolute;inset:0;border-radius:inherit}
.pl-tuile-nom:focus-visible{outline:0}.pl-tuile:has(.pl-tuile-nom:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
.pl-tuile-ligne{font-size:13px;line-height:18px;color:var(--texte-second)}
.pl-tuile .pl-btn{position:relative;z-index:1;align-self:flex-start;margin-top:4px}
.pl-tuile.att{border-color:var(--etat-a-regarder)}
/* L'état d'une tuile se dit par son contour : la pastille reste, le mot n'est pas répété à l'écran (il reste lu). */
.pl-tuile .pl-st-att{font-size:0;gap:0}
.pl .pl-tuile.avenir .pl-tuile-nom{color:var(--texte-second)}

/* Tuile de domaine : .pl-domaines (grille) > .pl-domaine (.att, .attente, .cours, .crit, .ouvert ; conforme sans classe) : un <svg> Lucide, puis .t (button.pl-domaine-nom aria-expanded, .pl-domaine-resume), puis .pl-marque (rien pour conforme).
   La tuile ouverte est suivie de ses .pl-points (une .pl-verre) : ils prennent la ligne suivante de la grille, les tuiles d'après remontent à leur rang. --icone : la taille de l'icône, sans unité (28 à 40). */
.pl-domaines{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));grid-auto-flow:row dense;gap:12px}
.pl-domaine{--icone:32;position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;align-items:start;padding:16px 18px;border-radius:var(--radius-l);border:1px solid color-mix(in srgb,var(--vert-lumiere) 12%,transparent);background:linear-gradient(to bottom,color-mix(in srgb,var(--vert-lumiere) 6%,transparent),color-mix(in srgb,var(--vert-lumiere) 1%,transparent));transition:transform var(--duree-survol) ease-out,background-color var(--duree-survol) ease-out,border-color var(--duree-survol) ease-out,box-shadow var(--duree-survol) ease-out}
.pl-domaine>svg,.pl-replie>svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.pl-domaine>svg{width:calc(var(--icone) * 1px);height:calc(var(--icone) * 1px);stroke-width:calc(38.4 / var(--icone));color:var(--etat-conforme)}
.pl-domaine.att>svg{color:var(--etat-a-regarder)}.pl-domaine.attente>svg{color:var(--etat-non-juge)}.pl-domaine.cours>svg{color:var(--texte)}.pl-domaine.crit>svg{color:var(--etat-panne)}
.pl-domaine>.t{display:flex;flex-direction:column;gap:2px;min-width:0}.pl .pl-domaine:has(>.pl-marque) .pl-domaine-nom{padding-right:92px}
.pl .pl-domaine-nom{all:unset;font-weight:700;color:var(--texte);cursor:pointer}
.pl-domaine-nom::after{content:"";position:absolute;inset:0;border-radius:inherit}
.pl-domaine:has(.pl-domaine-nom:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
.pl-domaine-resume{color:var(--texte-second);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.pl-marque{position:absolute;top:12px;right:14px;display:inline-flex;align-items:center;gap:6px;font:500 10px/14px var(--famille-donnee);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
/* La marque porte la pastille de son état : <span class="pl-marque pl-etat pl-att"> (« à regarder »), .pl-neutre (« pas encore jugé »), .pl-crit (la panne).
   « Intervention nécessaire » se pose dans le texte, sur sa propre ligne : sous le nom d'une tuile (.t>.pl-marque), sous la cause d'une ligne (.q>.pl-marque). */
.pl-domaine>.t>.pl-marque,.pl-point>.q>.pl-marque{position:static;display:flex;align-self:flex-start;margin:4px 0 2px;font:500 10px/14px var(--famille-donnee);letter-spacing:.08em}
.pl-point>.q>.pl-marque.pl-att{color:var(--etat-a-regarder)}
.pl-domaine.cours .pl-marque{color:var(--texte)}
.pl-domaine.cours .pl-marque::before{content:"";width:8px;height:8px;border-radius:2px;background:currentColor;animation:pl-respire var(--respiration) ease-in-out infinite}
@media (prefers-reduced-motion:no-preference){.pl-domaine:hover{transform:translateY(-2px)}}
@media (prefers-reduced-motion:reduce){.pl-domaine:hover{background-color:var(--survol)}}
.pl-domaine.ouvert{border-color:var(--vert-lumiere);box-shadow:0 0 24px color-mix(in srgb,var(--vert-lumiere) 18%,transparent)}
/* Les points d'une tuile ou d'un domaine replié ouverts : une ligne par point, le constat à gauche, son geste à droite. */
.pl-points{grid-column:1 / -1;padding:4px 18px}
.pl-point{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;align-items:center;min-height:var(--densite-ligne);padding:8px 0}
.pl-point+.pl-point{border-top:1px solid var(--filet-ligne)}
.pl-point>.pl-btn{min-height:var(--densite-petit);padding-top:2px;padding-bottom:2px;font-size:13px}
.pl-point>.q{display:flex;flex-direction:column;min-width:0}.pl-point>.q>b{font-weight:600}.pl-point>.q>span{font-size:13px;color:var(--texte-second)}
/* L'icône du sujet devant le point : 18 px, trait de 1,6 px, en texte-second. */
.pl-point:has(>svg){grid-template-columns:18px minmax(0,1fr) auto;column-gap:10px;align-items:start}
.pl-point>svg{width:18px;height:18px;margin-top:1px;fill:none;stroke:currentColor;stroke-width:2.13;stroke-linecap:round;stroke-linejoin:round;color:var(--texte-second)}
.pl-point:has(>svg)>.pl-btn{align-self:center}

/* Liste des problèmes en colonnes par gravité (BSF Sync, BSF Center) : .pl-gravites > .pl-gravite.pl-verre (.crit « Panne », .att « À regarder », .seul « Se fait seul »)
   > h2 (le mot, dans un .pl-etat pour Panne et À regarder ; son nombre en .pl-nb), puis un .pl-point par cause (.intervention quand il porte la marque) :
   svg du sujet, .q (b la cause, .pl-marque, span le constat, .pl-portee), un .pl-btn.petit. Une colonne sans ligne disparaît, les autres se partagent la largeur.
   .pl-interventions sur .pl-gravites (la puce « Interventions » choisie) ne garde que les lignes .intervention. */
.pl-gravites{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:12px;align-items:start}
.pl-gravite:not(:has(.pl-point)){display:none}
.pl-gravite{padding:0;overflow:hidden}
.pl-gravite>h2{margin:0;display:flex;align-items:center;gap:8px;min-height:var(--densite-ligne);padding:0 14px;border-bottom:1px solid var(--verre-filet);font-size:var(--etiquette-taille);line-height:var(--etiquette-interligne);font-weight:var(--etiquette-graisse);letter-spacing:var(--etiquette-approche);text-transform:uppercase;color:var(--texte-second)}
.pl-gravite>h2 .pl-nb{margin-left:auto;font-family:var(--famille-donnee);font-weight:400;letter-spacing:0;color:var(--texte-second)}
.pl-gravite .pl-point{grid-template-columns:18px minmax(0,1fr);padding:10px 14px 10px 17px;box-shadow:inset 3px 0 0 var(--etat-a-regarder)}
.pl-gravite .pl-point:not(:has(>svg)){grid-template-columns:minmax(0,1fr)}
.pl-gravite .pl-point>.pl-btn{grid-column:-2;justify-self:start;align-self:start;margin-top:8px;position:relative;z-index:1}
.pl-gravite.crit .pl-point{box-shadow:inset 3px 0 0 var(--etat-panne)}
.pl-gravite.seul .pl-point{box-shadow:inset 3px 0 0 var(--filet)}
.pl-gravite .pl-point:has(.pl-etire){position:relative}
.pl-gravite .pl-point:has(.pl-etire):hover{background:var(--survol)}
.pl .pl-gravite .pl-etire{color:inherit;text-decoration:none}
.pl-gravite .pl-etire::after{content:"";position:absolute;inset:0}
.pl-gravite .pl-etire:focus-visible{outline:0}
.pl-gravite .pl-point:has(.pl-etire:focus-visible){outline:2px solid var(--focus);outline-offset:-2px}
.pl-gravites.pl-interventions .pl-point:not(.intervention){display:none}
.pl-gravites.pl-interventions .pl-gravite:not(:has(.pl-point.intervention)){display:none}
/* BSF Gestion garde ses blocs empilés : .pl-problemes > .pl-groupe.pl-verre (h2, un .pl-point par cause, .crit pour une panne ; .avenir sans couleur d'état ; sa portée dans .q>.pl-portee), puis .pl-repli.pl-verre (« Informations », des .pl-info). */
.pl-problemes{display:flex;flex-direction:column;gap:12px}
.pl-problemes .pl-point{padding:8px 14px 8px 17px;box-shadow:inset 3px 0 0 var(--etat-a-regarder)}
.pl-problemes .pl-point.crit{box-shadow:inset 3px 0 0 var(--etat-panne)}
.pl-problemes .pl-point.avenir{box-shadow:inset 3px 0 0 var(--filet)}
.pl-point>.q>.pl-portee{font-family:var(--famille-donnee);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Rangée des conformes : .pl-conformes > h3 (« Conforme · n », le nombre en .pl-nb) puis .pl-replie (un bouton ; .avenir au bout, .ouvert). */
.pl-conformes{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.pl-conformes>h3{flex:1 1 100%;margin:0;font-size:var(--etiquette-taille);line-height:var(--etiquette-interligne);font-weight:var(--etiquette-graisse);letter-spacing:var(--etiquette-approche);text-transform:uppercase;color:var(--texte-second)}
.pl-conformes>h3 .pl-nb{font-family:var(--famille-donnee);font-weight:400;letter-spacing:0}
.pl-replie{display:inline-flex;align-items:center;gap:8px;min-height:var(--densite-puce);padding:4px 12px;border-radius:var(--radius-m);border:1px solid var(--verre-filet);background:var(--champ);color:var(--texte);font:inherit;cursor:pointer;transition:background-color var(--duree-survol) ease-out}
.pl-replie>svg{width:18px;height:18px;stroke-width:2.13;color:var(--etat-conforme)}
.pl .pl-replie:hover{background:var(--survol)}
.pl-replie:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.pl .pl-replie.ouvert{background:var(--actif);font-weight:600}
.pl-replie.avenir{border:1px dashed var(--filet-controle);color:var(--texte-second)}.pl-replie.avenir>svg{color:var(--texte-second)}

/* Bandeau de surveillance : .pl-surv (.cours pendant un travail, .crit quand le service se tait) > i.pl-surv-trait, puis .pl-surv-ligne (l'étape ; le mot de la panne dans un .pl-etat.pl-crit).
   Le trait est un masque : plat au repos, une pulsation qui le parcourt de gauche à droite pendant un travail. */
.pl-surv{display:flex;align-items:center;gap:10px;min-width:0;font-size:13px;line-height:18px;color:var(--texte-second)}
.pl-surv-trait{flex:none;width:64px;height:14px;filter:drop-shadow(var(--lueur-trace))}
.pl-barre .pl-surv-trait{width:48px}
.pl-surv-trait::before{content:"";display:block;height:100%;background:var(--action);-webkit-mask:linear-gradient(transparent calc(50% - .8px),#000 0 calc(50% + .8px),transparent 0);mask:linear-gradient(transparent calc(50% - .8px),#000 0 calc(50% + .8px),transparent 0)}
.pl-surv.cours .pl-surv-trait::before{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='14'%3E%3Cpath d='M0 7H24L27 3L31 12L35 1L38 9L40 7H64' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0/64px 14px repeat-x;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='14'%3E%3Cpath d='M0 7H24L27 3L31 12L35 1L38 9L40 7H64' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0/64px 14px repeat-x;animation:pl-bat var(--respiration) linear infinite}
.pl-surv.crit .pl-surv-trait{filter:none}.pl-surv.crit .pl-surv-trait::before{background:var(--etat-panne)}
.pl-surv-ligne{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@keyframes pl-bat{from{-webkit-mask-position:0 0;mask-position:0 0}to{-webkit-mask-position:64px 0;mask-position:64px 0}}

/* Assistant : .pl-assistant > .pl-question (.pl-choix-n, le titre, la phrase, le choix, .pl-question-pied) puis .pl-moniteur (.pl-surv, .pl-domaines). */
.pl-assistant{display:grid;grid-template-columns:400px minmax(0,1fr);gap:24px}
.pl-question,.pl-moniteur{display:flex;flex-direction:column;gap:16px;min-width:0}
.pl-choix-n{font-family:var(--famille-donnee);font-size:var(--donnee-taille);color:var(--texte-second)}
.pl-question-pied{margin-top:auto;display:flex;justify-content:flex-end;gap:8px}

/* Liste d'étapes (assistant de mise en service) : .pl-etapes > h4 et .pl-etape (.cours : l'étape en cours, .avenir) : .q (nom, .d), puis un .pl-st. */
.pl-etapes{display:flex;flex-direction:column}
.pl-etapes h4{margin:0;padding:12px 0 4px;font-size:var(--etiquette-taille);line-height:var(--etiquette-interligne);font-weight:600;letter-spacing:var(--etiquette-approche);text-transform:uppercase;color:var(--texte-second)}
.pl-etape{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:14px;align-items:start;min-height:40px;padding:8px 0;border-top:1px solid var(--filet-ligne)}
.pl-etape .q{display:flex;flex-direction:column;min-width:0}.pl-etape .q .d{font-size:13px;color:var(--texte-second)}
.pl .pl-etape.avenir .q>span:first-child{color:var(--texte-second)}
.pl-etape.cours{background:var(--actif);box-shadow:inset 3px 0 0 var(--texte-second);border-top-color:transparent;border-radius:var(--radius-m);padding-left:8px;padding-right:8px;margin:0 -8px}
@media (prefers-reduced-motion:reduce){.pl-st-cours::before,.pl-machine.cours>.pl-etat::before,.pl-domaine.cours .pl-marque::before,.pl-surv.cours .pl-surv-trait::before{animation-duration:var(--tour-reduit)}}

@media (width < 64rem) /* ecran-bureau */{
  .pl-tuiles-grille{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pl-cabinet{grid-template-columns:minmax(0,1fr)}
  .pl-assistant{grid-template-columns:minmax(0,1fr)}
  .pl-ouvert:has(.pl-objet:not([hidden]))>.pl-tiers{display:none}
  .pl-recherche-liste{grid-template-columns:minmax(0,1fr)}
  .pl-recherche-liste .pl-choisi{display:none}
  .pl-resultats{border-right:0}
}

/* Sous ecran-tablette : une colonne, gouttière space-4, titres mobiles, verre en radius-xl. */
@media (width < 40rem) /* ecran-tablette */{
  .pl-page,.pl-tete{padding-left:var(--space-4);padding-right:var(--space-4)}
  .pl-verre{border-radius:var(--radius-xl)}
  .pl-t1{font-size:var(--titre-1-mobile-taille);line-height:var(--titre-1-mobile-interligne)}
  .pl-t2{font-size:var(--titre-2-mobile-taille);line-height:var(--titre-2-mobile-interligne)}
  .pl-chiffre{font-size:var(--chiffre-mobile-taille);line-height:var(--chiffre-mobile-interligne)}
  .pl-rail{display:none}
  .pl-barre-bas{display:grid}
  .pl-dense-tete{display:none}
  .pl-dense-ligne{padding:8px 16px;column-gap:12px}
  .pl-chiffres>div{flex:1 1 0;min-width:0;padding:10px 12px}
  .pl-chiffres .pl-v{font-size:18px;line-height:24px}
  .pl-nav-etiq .pl-etiq{min-width:0;padding:0 12px}
  .pl-rangee-onglets>.pl-outils{flex:1 1 100%;margin-left:0}
  .pl-barres{gap:4px}
  /* Liste des problèmes : les colonnes l'une sous l'autre, dans le même ordre. */
  .pl-gravites{grid-auto-flow:row;grid-template-columns:minmax(0,1fr)}
  /* Rangée de gestes : sous le nom, ses boutons icônes passent à la ligne plutôt que de sortir de l'écran. */
  .pl-gestes{flex:1 1 auto;min-width:0;flex-wrap:wrap}
  /* Bouton à icône seule dans la tête de page : 44 px, son libellé reste dans son nom accessible. */
  .pl-tete-page .pl-outils [data-icone-seule]{flex:0 0 auto;width:44px;min-height:44px;padding:0;justify-content:center}
  .pl-tete-page .pl-outils [data-icone-seule]>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  /* La loupe du téléphone : le champ n'est que sa loupe ; touché, il prend le haut de l'écran sur le fond opaque. */
  .pl-barre .pl-recherche:not(:focus-within){flex:0 0 44px}
  .pl-barre .pl-recherche:not(:focus-within) .pl-champ{min-height:44px;padding:0;color:transparent;caret-color:transparent;cursor:pointer}
  .pl-barre .pl-recherche:not(:focus-within) .pl-champ::placeholder{color:transparent}
  .pl-barre .pl-recherche:not(:focus-within) .pl-champ::-webkit-search-cancel-button{display:none}
  .pl-barre .pl-recherche:not(:focus-within)>svg{left:50%;transform:translate(-50%,-50%)}
  .pl-barre .pl-recherche:focus-within{position:fixed;top:calc(var(--space-4) + env(safe-area-inset-top,0px));left:var(--space-4);right:var(--space-4);z-index:32;max-width:none;margin:0;border-radius:var(--radius-m);background:var(--fond);box-shadow:0 0 0 100vmax var(--fond)}
  .pl-barre .pl-recherche:focus-within .pl-recherche-liste{top:calc(var(--space-4) + 60px + env(safe-area-inset-top,0px))}
  /* Onglets de page : une seule ligne, qui défile de côté ; un onglet ne passe jamais à la ligne. */
  .pl-onglets-page{overflow-x:auto;scrollbar-width:none}
  .pl .pl-onglets-page a{flex:none;white-space:nowrap}
  /* Objet ouvert : l'écran entier, sur le fond opaque : la page derrière ne transparaît pas ; boutons icônes de 44 px. Liste de recherche : l'écran sous le champ, sans pied. */
  .pl-objet{position:fixed;inset:0;z-index:30;max-height:none;border-radius:0;border:0;box-shadow:none;background:var(--fond);-webkit-backdrop-filter:none;backdrop-filter:none}
  .pl-cadre .pl-objet{position:absolute}
  .pl-btn-ico:not(.petit) svg{width:20px;height:20px}
  .pl-btn-ico .lib{display:none}
  .pl-recherche-liste{position:fixed;left:0;right:0;top:calc(var(--space-12) + var(--space-8));bottom:0;width:auto;border-radius:var(--radius-xl) var(--radius-xl) 0 0;align-content:start}
  /* Le verre de la barre bornerait la liste (un backdrop-filter borne ses descendants fixes) : il perd son flou tant qu'elle est ouverte. Dans un cadre de maquette, le cadre la borne. */
  .pl-barre:has(.pl-recherche-liste:not([hidden])){-webkit-backdrop-filter:none;backdrop-filter:none}
  .pl-cadre:has(.pl-recherche-liste:not([hidden])){transform:translateZ(0)}
  .pl-resultats{max-height:none}
  .pl-raccourcis{display:none}
  /* Barre du bas fixée : la page garde la place dessous ; la barre de sélection flotte au-dessus d'elle. */
  .pl:has(.pl-barre-bas) .pl-page{padding-bottom:calc(104px + env(safe-area-inset-bottom))}
  .pl-avec-selection:has(.pl-coche:checked)>.pl-selection:not([hidden]){position:fixed;left:var(--space-4);right:var(--space-4);bottom:calc(88px + env(safe-area-inset-bottom));z-index:15;box-shadow:var(--ombre-fenetre)}
  .pl-cadre .pl-avec-selection:has(.pl-coche:checked)>.pl-selection:not([hidden]){position:absolute}
  /* Colonne large d'une liste : masquée ; la page redonne ses --cols. Un bouton principal .tel-secondaire passe en secondaire. */
  .pl-large{display:none}
  .pl .pl-btn-p.tel-secondaire{background:transparent;border-color:var(--filet-controle);color:var(--texte);font-weight:inherit;box-shadow:none;filter:none}
  .pl .pl-btn-p.tel-secondaire:hover{background:var(--survol)}
}