/* Pont de migration vers le Design System (étape 7). Chargé après styles.css et ds.css, sur tous les espaces (Console, B2B, référent, employé).
   La classe ds-pont est posée sur <html> dans chaque page d'entrée.
   1. Les anciens jetons (--bg, --fg, --accent…) pointent sur les jetons --ds-* : mode clair et sombre suivent ds.css.
   2. Les anciens composants encore présents dans les écrans (.card, .btn, .chip, .fld, table, .notice…) prennent l'aspect de leur équivalent .ds-*.
   Ce fichier rétrécit à chaque écran migré vers le balisage .ds-* ; il disparaît quand plus aucun écran de la Console n'utilise les anciennes classes.
   Aucune nouvelle variante ici : elles vont dans ds.css. */
html.ds-pont:root{
  --bg:var(--ds-page);--surface:var(--ds-survol);--panel:var(--ds-carte);--line:var(--ds-bordure-douce);--line-strong:var(--ds-bordure);
  --fg:var(--ds-texte);--muted:var(--ds-texte-2);
  --accent:var(--ds-accent);--accent-ink:var(--ds-accent-sur);--accent-soft:var(--ds-accent-teinte);--link:var(--ds-accent-fort);
  --mark:var(--ds-imperso);--mark-ink:var(--ds-imperso-sur);
  --ok:var(--ds-succes);--ok-bg:var(--ds-succes-fond);--warn:var(--ds-alerte);--warn-bg:var(--ds-alerte-fond);--crit:var(--ds-danger);--crit-bg:var(--ds-danger-fond);--info-bg:var(--ds-info-fond);
  --scrim:var(--ds-voile);--shadow:var(--ds-ombre-1);
  --font:var(--ds-font);--display:var(--ds-font);--mono:var(--ds-mono);--r:var(--ds-r-carte);
}
.ds-pont body{padding-inline:0;background:var(--ds-page);color:var(--ds-texte);font:400 1rem/1.5rem var(--ds-font)}
.ds-pont #app.app{max-width:none}
.ds-pont :focus-visible{outline:2px solid var(--ds-focus);outline-offset:2px}

/* coquille */
.ds-pont .pl-app{min-height:100vh}
.ds-pont .pl-app>.ds-app-corps{flex:1}
.ds-pont .ds-app-page{max-width:90rem}
.ds-pont .ds-entete h1{margin:0}
.ds-pont .pl-intro{margin:0;color:var(--ds-texte-2);max-width:80ch;font:400 .875rem/1.25rem var(--ds-font)}
.ds-pont .pl-outils{justify-content:flex-start;align-items:center}
.ds-pont .pl-outils .sp{flex:1}
.ds-pont .tbsel{display:flex;align-items:center;gap:var(--ds-e8);color:var(--ds-texte-2);font:500 .875rem/1.25rem var(--ds-font)}
.ds-pont .tbsel select,.ds-pont .tbsel input{min-height:var(--ds-champ);padding:0 var(--ds-e12);border:1px solid var(--ds-bordure)!important;border-radius:var(--ds-r-champ)!important;background:var(--ds-carte);color:var(--ds-texte)}
.ds-pont .ds-tabs{margin:0}
.ds-pont h2{font:600 1.125rem/1.625rem var(--ds-font);letter-spacing:0}
.ds-pont h3{font:600 1rem/1.5rem var(--ds-font)}
.ds-pont .sub{color:var(--ds-texte-2)}

/* cartes et tuiles */
.ds-pont .card{border-color:var(--ds-bordure-douce);border-radius:var(--ds-r-carte)}
.ds-pont .tiles{gap:var(--ds-e16)}
.ds-pont .tile{padding:var(--ds-e16);border-radius:var(--ds-r-carte)}
.ds-pont .tile small{font:500 .75rem/1rem var(--ds-font);color:var(--ds-texte-2)}
.ds-pont .tile b{font:700 1.75rem/2.25rem var(--ds-font)}
.ds-pont .tile:hover{border-color:var(--ds-bordure-douce)}

/* boutons (.btn = ds-btn, .btn.sec = ds-btn sec) */
.ds-pont .btn{min-height:var(--ds-bouton);padding:0 var(--ds-e16);border:1px solid transparent;border-radius:var(--ds-r-champ);font:600 .875rem/1.25rem var(--ds-font);letter-spacing:0;text-transform:none;background:var(--ds-accent);color:var(--ds-accent-sur)}
.ds-pont .btn:hover{background:var(--ds-accent-fort);color:var(--ds-carte)}
.ds-pont .btn.sec{background:var(--ds-carte);color:var(--ds-texte);border-color:var(--ds-bordure)}
.ds-pont .btn.sec:hover{background:var(--ds-survol);color:var(--ds-texte)}
.ds-pont .btn.danger{background:var(--ds-danger);color:var(--ds-carte)}
.ds-pont .btn.danger:hover{background:var(--ds-danger);color:var(--ds-carte);text-decoration:underline}
.ds-pont .btn.sm{min-height:32px;padding:0 var(--ds-e12)}
.ds-pont .btn[disabled]{background:var(--ds-bordure-douce);color:var(--ds-texte-2);border-color:transparent;opacity:1}
.ds-pont .lnk{color:var(--ds-accent-fort)}
.ds-pont .icb{border-radius:var(--ds-r-champ);color:var(--ds-accent-fort)}

/* tableaux (= ds-table) */
.ds-pont .ds-table th{border-block:0}
.ds-pont .ds-table tbody th{border-top:1px solid var(--ds-bordure-douce)}
.ds-pont table:not(.ds-table) th{font:600 .875rem/1.25rem var(--ds-font);text-transform:none;letter-spacing:0;color:var(--ds-texte);background:var(--ds-survol);border-block:1px solid var(--ds-bordure-douce)}
.ds-pont .pt th{padding:var(--ds-e8) var(--ds-e12);font:600 .875rem/1.25rem var(--ds-font);text-transform:none;letter-spacing:0;color:var(--ds-texte)}
.ds-pont table:not(.ds-table) td{padding:var(--ds-e8) var(--ds-e12);border-bottom-color:var(--ds-bordure-douce)}
.ds-pont tbody tr:hover{background:var(--ds-survol)}
.ds-pont .pt td small{font-size:.75rem;line-height:1rem}

/* pastilles (= ds-badge) : la forme reste, en plus de la couleur et du mot */
.ds-pont .chip{border-radius:var(--ds-r-pastille);padding:2px 10px 2px 8px;font:600 .75rem/1rem var(--ds-font);border:1px solid currentColor}
.ds-pont .chip.mute{background:var(--ds-carte);color:var(--ds-texte-2)}
.ds-pont .chip.info{color:var(--ds-info)}
.ds-pont .stp2{border-radius:var(--ds-r-pastille);font:600 .75rem/1rem var(--ds-font);border:1px solid currentColor;min-height:24px}
.ds-pont .stp2.ok,.ds-pont .stp2.todo{border-color:currentColor}
.ds-pont .fchip{border-radius:var(--ds-r-pastille);letter-spacing:0;font:600 .875rem/1.25rem var(--ds-font);min-height:32px;border:1px solid var(--ds-bordure);color:var(--ds-texte)}
.ds-pont .fchip[aria-pressed="true"]{background:var(--ds-accent-teinte);color:var(--ds-accent-fort);border-color:var(--ds-accent)}
.ds-pont .dot.warn{background:var(--ds-alerte)}

/* champs : étiquette au-dessus, plus d'étiquette flottante (= ds-champ / ds-input) */
.ds-pont .fld{display:flex;flex-direction:column;gap:var(--ds-e4)}
.ds-pont .fld label{position:static;order:-1;background:none;padding:0;font:600 .875rem/1.25rem var(--ds-font);color:var(--ds-texte);text-transform:none;letter-spacing:0}
.ds-pont .fld input,.ds-pont .fld select,.ds-pont .fld textarea{min-height:var(--ds-champ);padding:0 var(--ds-e12);border:1px solid var(--ds-bordure);border-radius:var(--ds-r-champ);background:var(--ds-carte);color:var(--ds-texte);font:400 1rem/1.5rem var(--ds-font)}
.ds-pont .fld textarea{padding-block:var(--ds-e8);min-height:6rem}
.ds-pont .fld input:focus,.ds-pont .fld select:focus,.ds-pont .fld textarea:focus{border-color:var(--ds-focus);box-shadow:none;outline:2px solid var(--ds-focus);outline-offset:0}
.ds-pont .fld input[aria-invalid="true"],.ds-pont .fld select[aria-invalid="true"]{border:2px solid var(--ds-danger);box-shadow:none}
.ds-pont .fld .err{color:var(--ds-danger);font:500 .75rem/1rem var(--ds-font);margin:0}
.ds-pont .fld .hint{color:var(--ds-texte-2);font:400 .75rem/1rem var(--ds-font);margin:0}
.ds-pont .fgrid,.ds-pont .pgrid{gap:var(--ds-e16)}
.ds-pont .plsel{border-color:var(--ds-bordure);border-radius:var(--ds-r-champ);min-height:var(--ds-champ)}
.ds-pont .seg{border:1px solid var(--ds-bordure);border-radius:var(--ds-r-champ)}
.ds-pont .seg button{color:var(--ds-texte);min-height:32px}
.ds-pont .seg button[aria-pressed="true"]{background:var(--ds-accent-teinte);color:var(--ds-accent-fort);font-weight:600}

/* bandeaux (= ds-alert) */
.ds-pont .notice{border:1px solid var(--ds-info);border-radius:var(--ds-r-carte);background:var(--ds-info-fond);color:var(--ds-texte);font:400 .875rem/1.25rem var(--ds-font);padding:var(--ds-e12) var(--ds-e16)}
.ds-pont .notice>svg{color:var(--ds-info)}
.ds-pont .notice.warn{border-color:var(--ds-alerte);background:var(--ds-alerte-fond)}
.ds-pont .notice.warn>svg{color:var(--ds-alerte)}
.ds-pont .notice.crit{border-color:var(--ds-danger);background:var(--ds-danger-fond)}
.ds-pont .notice.crit>svg{color:var(--ds-danger)}

/* listes maître-détail, onglets de fiche, jauges, code */
.ds-pont .ml{border-radius:var(--ds-r-carte);overflow:hidden}
.ds-pont .ml .hd{font:600 .75rem/1rem var(--ds-font);text-transform:none;letter-spacing:0}
.ds-pont .mi{min-height:var(--ds-cible)}
.ds-pont .mi .c{white-space:nowrap}
.ds-pont .ptab{background:none;gap:var(--ds-e8);border-bottom:1px solid var(--ds-bordure-douce)}
.ds-pont .ptab button{min-height:var(--ds-cible);padding:0 var(--ds-e16);font:400 .875rem/1.25rem var(--ds-font);color:var(--ds-texte)}
.ds-pont .ptab button[aria-current]{font-weight:600;color:var(--ds-accent-fort);border-bottom-color:var(--ds-accent)}
.ds-pont .meter,.ds-pont .mt{height:8px;border:0;border-radius:4px;background:var(--ds-bordure-douce)}
.ds-pont .code2,.ds-pont pre.code{border-radius:var(--ds-r-champ);border-color:var(--ds-bordure-douce)}
.ds-pont .preview-frame{border:1px solid var(--ds-bordure-douce);border-radius:var(--ds-r-carte)}

/* fenêtres, panneaux, menus, messages */
.ds-pont .panel{border:0;border-left:1px solid var(--ds-bordure-douce);box-shadow:var(--ds-ombre-2)}
.ds-pont .panel h2{font:700 1.375rem/1.875rem var(--ds-font);letter-spacing:0}
.ds-pont .pfoot{background:var(--ds-page)}
.ds-pont .modal{border:1px solid var(--ds-bordure-douce);border-radius:var(--ds-r-carte);box-shadow:var(--ds-ombre-2)}
.ds-pont .mnu,.ds-pont .drop{border:1px solid var(--ds-bordure-douce);border-radius:var(--ds-r-carte);box-shadow:var(--ds-ombre-1);padding:var(--ds-e4)}
.ds-pont .mnu button,.ds-pont .drop button{min-height:var(--ds-cible);padding:0 var(--ds-e12);border-radius:var(--ds-r-champ);font:400 .875rem/1.25rem var(--ds-font)}
.ds-pont .mnu button:hover,.ds-pont .drop button:hover{background:var(--ds-survol)}
.ds-pont .toast{background:var(--p-gris-900);color:var(--p-gris-0);border:0;border-radius:var(--ds-r-carte);box-shadow:var(--ds-ombre-1);font:400 .875rem/1.25rem var(--ds-font)}
.ds-pont .ds-menu-liste{z-index:30}
.ds-pont .ftr{border-top:1px solid var(--ds-bordure-douce);padding-inline:var(--ds-e24)}

/* portail B2B et espace référent : onglets, sous-onglets, bannière d'impersonation, pied de page */
.ds-pont .ds-app-onglets{padding-inline:var(--ds-e16)}
.ds-pont .ds-tabs .tabref{margin-left:auto;color:var(--ds-accent-fort);font-weight:600}
.ds-pont .subnav{display:flex;flex-wrap:wrap;gap:var(--ds-e8);margin:0}
.ds-pont .subnav button{min-height:var(--ds-cible);padding:0 var(--ds-e16);border:1px solid var(--ds-bordure);border-radius:var(--ds-r-pastille);background:var(--ds-carte);color:var(--ds-texte);font:500 .875rem/1.25rem var(--ds-font);cursor:pointer;display:inline-flex;align-items:center;gap:var(--ds-e8)}
.ds-pont .subnav button[aria-current]{background:var(--ds-accent-teinte);color:var(--ds-accent-fort);border-color:var(--ds-accent);font-weight:600}
.ds-pont .ds-imperso{position:sticky;top:0;z-index:35}
.ds-pont .ds-app-tete .seg{margin:0}
.ds-pont .ds-app-tete .fld{min-width:12rem}
.ds-pont .ds-app-tete small{font:500 .875rem/1.25rem var(--ds-font);color:var(--ds-texte-2)}
.ds-pont .ds-marque span{font-weight:700}
.ds-pont .ds-app>.ftr{padding-inline:var(--ds-e16)}
.ds-pont .shell{background:none;border:0;padding:0}
.ds-pont .ds-app-page>*{margin-top:0;margin-bottom:0}
.ds-pont .ds-app-page>.card+.card{margin-top:0}

/* espace employé : page centrée, lisible sur téléphone comme sur PC */
.ds-pont .ds-app-page.empapp{width:100%;max-width:62rem;margin-inline:auto}
.ds-pont .ds-app-page.empapp .prod{min-width:0}
.ds-pont .ds-app-page.empapp .mini{border-radius:var(--ds-r-champ)}
.ds-pont .plate{border-color:var(--ds-bordure)}
.ds-pont .brand{text-transform:none;font:700 1rem/1.5rem var(--ds-font);letter-spacing:0;font-stretch:normal}
.ds-pont .brand i{border-radius:var(--ds-r-champ);font-family:var(--ds-font)}
.ds-pont .av{background:var(--ds-accent-teinte);color:var(--ds-accent-fort);font-family:var(--ds-font)}
.ds-pont .mi{min-height:var(--ds-cible)}