/* ==========================================================================
   Pharmetrics — feuille de style unique.

   Calée sur l'écran WEBDEV d'origine : ambiance BStrap (Bootstrap) relevée
   dans les CSS générées par WEBDEV (PHARMETRICS_WEB/BStrap220BStrapBStrap.css,
   AnalyseAudit_style0.css) — police Segoe UI, bleu #0275D8, barre de
   navigation #025AA5, texte #373A3C, bordures #DDDDDD, fond de page #F7F7F9
   (background_color 16381943 de la page AnalyseAudit, en BGR).

   La version précédente (style « maquette », IBM Plex, en-têtes noirs) est
   archivée dans docs/archive-v1/app.css.bak.
   ========================================================================== */

:root {
    --wd-bleu:        #0275D8;
    --wd-bleu-fonce:  #025AA5;
    --wd-bleu-nuit:   #014C8C;
    --wd-texte:       #373A3C;
    --wd-texte-doux:  #55595C;
    --wd-bord:        #DDDDDD;
    --wd-fond:        #F7F7F9;
    --wd-entete:      #ECEEEF;
    --wd-surface:     #FFFFFF;
    --wd-gris-fonce:  #505050;   /* GrisFoncé des lignes enfants */

    /* ColoriseCol : RVB(0,143,0) sur RVB(204,255,204) / RVB(255,38,0) sur RVB(255,205,203) */
    --wd-vert-txt:    #008F00;
    --wd-vert-fond:   #CCFFCC;
    --wd-rouge-txt:   #FF2600;
    --wd-rouge-fond:  #FFCDCB;

    /* iRougeFoncé / VertFoncé des synthèses (texte seul) */
    --wd-rouge-fonce: #8B0000;
    --wd-vert-fonce:  #006400;

    /* gstCoul.POURCENT_MB / POURCENT_EXPO : couleurs propres à chaque
       utilisateur dans WEBDEV (UTILISATEURS.COUL_*). Valeurs par défaut ici,
       à remplacer si l'on branche les préférences utilisateur. */
    --wd-fond-mb:     #F2BD77;   /* orangé de WEBDEV (%MB / %Expo, Audit Univers) */
    --wd-fond-expo:   #F2BD77;

    --pad: 10px;
}

/* ================================================================== socle */

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 13px;
    color: var(--wd-texte);
    background: var(--wd-fond);
}

#blazor-error-ui {
    display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000;
    background: #ffe8e8; padding: .7rem 1.25rem; box-shadow: 0 -1px 3px rgba(0,0,0,.2);
}

:focus-visible { outline: 2px solid var(--wd-bleu); outline-offset: 1px; }

/* ====================================================== mise en page (hauteurs)
   Chaîne de hauteurs continue depuis la fenêtre jusqu'à la grille : sans
   elle, Height="100%" sur un SfGrid ne vaut rien. .page porte header.entete
   ET main.contenu, d'où la colonne flex (cf. CLAUDE.md, ascenseur du
   navigateur autour de toute la page). */

.page {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* BarreNavigationModèle2 : bandeau bleu de 48 px. */
.entete {
    flex: 0 0 auto;
    height: 48px;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 0 14px;
    background: var(--wd-bleu-fonce);
    color: #fff;
}
.entete .marque { font-size: 13pt; font-weight: 700; letter-spacing: .02em; }
.entete nav { display: flex; gap: 4px; }
.entete nav a {
    color: #fff;
    text-decoration: none;
    font-size: 12pt;
    padding: 6px 12px;
    border-radius: 3px;
}
.entete nav a:hover,
.entete nav a.active { background: var(--wd-bleu-nuit); }

/* box-sizing: border-box + width: auto : main reçoit une largeur de 100 %
   ailleurs (gabarit / thème) ; en content-box, ses 10 px de marge intérieure
   s'y AJOUTAIENT — 20 px de trop, et tout l'écran débordait à droite
   (mesuré : main 2221 px pour une fenêtre de 2201). */
main.contenu {
    flex: 1 1 auto;
    box-sizing: border-box;
    width: auto !important;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    padding: 10px 10px 8px;      /* CelluleMain : x=10, y=58 sous le bandeau */
}

.ph-page {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
    overflow: hidden;
}

/* ============================================================== Tiroir1 */

.ph-tiroir {
    flex: 0 0 auto;
    background: var(--wd-surface);
    border: 1px solid var(--wd-bord);
    border-radius: 3px;
    box-shadow: 5px 5px 3px 0 rgba(192, 192, 192, .15);
    margin-bottom: 4px;
}

.ph-tiroir-titre {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 2px 4px 2px 6px;
}
.ph-tiroir-icone { color: var(--wd-bleu); font-size: 18px; width: 26px; text-align: center; }
.ph-tiroir-nom {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 11pt;
    font-weight: bold;
    color: var(--wd-bleu-nuit);
    white-space: nowrap;
    min-width: 200px;
}
.ph-tiroir-desc {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--wd-texte-doux);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ph-tiroir-fleche {
    width: 32px;
    height: 28px;
    border: 1px solid var(--wd-bord);
    border-radius: 3px;
    background: var(--wd-surface);
    color: var(--wd-bleu);
    cursor: pointer;
}
.ph-tiroir-fleche:hover { background: var(--wd-entete); }

/* Fiche repliable : max-height plutôt que display, pour animer comme le tiroir. */
.ph-tiroir-fiche {
    display: grid;
    /* Proportions des champs WEBDEV : nom 509, tranche 238, superficie 228, typologie 224. */
    grid-template-columns: 509fr 238fr 228fr 224fr;
    grid-template-areas:
        "nom  tca   sup  typo"
        "adr  cp    grp  grp"
        "adr2 ville .    .";
    gap: 6px 10px;
    padding: 0 10px;
    max-height: 0;
    overflow: hidden;
    transition: max-height .2s ease, padding .2s ease;
}
.ph-tiroir.ph-open .ph-tiroir-fiche { max-height: 140px; padding: 4px 10px 10px; }

.ph-c-nom   { grid-area: nom; }
.ph-c-tca   { grid-area: tca; }
.ph-c-sup   { grid-area: sup; }
.ph-c-typo  { grid-area: typo; }
.ph-c-adr   { grid-area: adr; }
.ph-c-cp    { grid-area: cp; max-width: 113px; }
.ph-c-grp   { grid-area: grp; max-width: 304px; }
.ph-c-adr2  { grid-area: adr2; }
.ph-c-ville { grid-area: ville; }

/* Champ de saisie façon Bootstrap. En lecture seule dans le tiroir. */
.ph-champ {
    font: inherit;
    font-size: 12px;
    color: var(--wd-texte);
    height: 25px;
    box-sizing: border-box;
    padding: 2px 6px;
    border: 1px solid #CCCCCC;
    border-radius: 3px;
    background: var(--wd-surface);
    min-width: 0;
}
.ph-champ[readonly] { background: #F4F4F4; }

/* =============================================================== boutons */

.ph-btn {
    font: inherit;
    font-size: 12px;
    height: 25px;
    padding: 0 10px;
    color: var(--wd-texte);
    background: var(--wd-surface);
    border: 1px solid #CCCCCC;
    border-radius: 3px;
    cursor: pointer;
    white-space: nowrap;
}
.ph-btn:hover:not([disabled]) { background: #E6E6E6; border-color: #ADADAD; }
.ph-btn[disabled] { opacity: .55; cursor: not-allowed; }

.ph-btn-primaire { color: #fff; background: var(--wd-bleu); border-color: var(--wd-bleu-fonce); }
.ph-btn-primaire:hover:not([disabled]) { background: var(--wd-bleu-fonce); }

/* Boutons icône 30 × 24 des coins de table. */
.ph-btn-icone { width: 30px; padding: 0; font-size: 14px; line-height: 1; }
.ph-btn-excel { color: #fff; background: #1D6F42; border-color: #145232; font-weight: 700; }
.ph-btn-excel:hover:not([disabled]) { background: #145232; }

/* Bouton segmenté (BS_TRIE, BS_Mode). */
.ph-segment { display: inline-flex; border: 1px solid #CCCCCC; border-radius: 3px; overflow: hidden; }
.ph-segment button {
    font: inherit; font-size: 12px;
    height: 23px; min-width: 30px; padding: 0 8px;
    border: none; border-right: 1px solid #CCCCCC;
    background: var(--wd-surface); color: var(--wd-texte);
    cursor: pointer;
}
.ph-segment button:last-child { border-right: none; }
.ph-segment button.ph-actif { background: var(--wd-bleu); color: #fff; }
.ph-segment-large button { min-width: 90px; height: 30px; }

/* ================================================================ onglets */

.ph-page > .e-tab {
    flex: 1 1 auto;
    min-height: 0;               /* indispensable, sinon flex déborde */
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--wd-surface);
    border: 1px solid var(--wd-bord);
    border-radius: 3px;
}
.ph-page > .e-tab > .e-tab-header { flex: 0 0 auto; }
.ph-page > .e-tab > .e-content {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}

/* Seul l'onglet actif s'affiche : sans le sélecteur .e-active, le display:flex
   écrase le display:none par lequel Syncfusion masque les onglets inactifs,
   et les contenus se retrouvent empilés (cf. CLAUDE.md). */
.ph-page > .e-tab > .e-content > .e-item { display: none; }

/* overflow-x: hidden — le défilement horizontal appartient à la grille
   (.e-gridcontent) ; overflow-y: auto en secours seulement. */
.ph-page > .e-tab > .e-content > .e-item.e-active {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

/* Onglets comme dans WEBDEV : chaque onglet encadré et séparé de ses voisins,
   texte bleu ; l'onglet actif en plein bleu, texte blanc gras, soudé au
   contenu par un filet bleu sous la barre. Sans capitales forcées. */
.ph-tabs.e-tab > .e-tab-header {
    background: var(--wd-fond);
    border-bottom: 2px solid var(--wd-bleu);
    padding: 4px 4px 0;
    min-height: 0;
}
.ph-tabs.e-tab > .e-tab-header .e-indicator { display: none; }
.ph-tabs.e-tab > .e-tab-header::before { border: none; }

.ph-tabs.e-tab > .e-tab-header .e-toolbar-item {
    margin: 0 2px 0 0;
    border: 1px solid #BFC7D1;
    border-bottom: none;
    border-radius: 3px 3px 0 0;
    background: #FFFFFF;
}
.ph-tabs.e-tab > .e-tab-header .e-toolbar-item .e-tab-wrap {
    height: 30px;
    padding: 0 12px;
    border: none;
    border-radius: 3px 3px 0 0;
}
.ph-tabs.e-tab > .e-tab-header .e-toolbar-item .e-tab-text {
    text-transform: none;
    font-size: 11pt;
    color: var(--wd-bleu);
}
.ph-tabs.e-tab > .e-tab-header .e-toolbar-item:not(.e-active):hover {
    background: #E8F1FB;
    border-color: var(--wd-bleu);
}
.ph-tabs.e-tab > .e-tab-header .e-toolbar-item.e-active {
    background: var(--wd-bleu);
    border-color: var(--wd-bleu);
}
.ph-tabs.e-tab > .e-tab-header .e-toolbar-item.e-active .e-tab-wrap { background: var(--wd-bleu); }
.ph-tabs.e-tab > .e-tab-header .e-toolbar-item.e-active .e-tab-text {
    color: #FFFFFF;
    font-weight: 700;
}

/* ============================================================ contenu d'onglet */

.ph-onglet {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    min-width: 0;
    padding: 8px 6px 6px;
    box-sizing: border-box;
}

/* Barre d'outils au-dessus d'une table : combos à gauche, boutons à droite. */
.ph-barre {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.ph-barre-droite { justify-content: flex-end; }
.ph-espace { flex: 1 1 auto; }
.ph-tri { display: inline-flex; align-items: center; gap: 3px; }

/* Les combos et boutons de coin de table sont poussés à droite. */
.ph-coin { display: inline-flex; gap: 8px; margin-left: auto; }

/* Ligne des cinq totaux de l'onglet Analyse (TOTAL_CA … TOTAL_STOCK_VALEUR, LIB_NB). */
.ph-ligne-totaux {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 196fr 186fr 196fr 186fr 214fr 160fr;
    gap: 10px;
    margin-bottom: 6px;
}
.ph-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    height: 25px;
    padding: 0 8px;
    border: 1px solid #CCCCCC;
    border-radius: 3px;
    background: #F4F4F4;
    min-width: 0;
    white-space: nowrap;
}
.ph-total label { font-size: 11px; color: var(--wd-texte-doux); overflow: hidden; text-overflow: ellipsis; }
.ph-total span  { font-weight: 600; font-variant-numeric: tabular-nums; }
.ph-total-nb    { justify-content: flex-end; background: transparent; border-color: transparent; }

.ph-erreur {
    flex: 0 0 auto;
    margin: 0 0 6px;
    padding: 6px 10px;
    color: #A94442;
    background: #F2DEDE;
    border: 1px solid #EBCCD1;
    border-radius: 3px;
}

/* ToastAffiche */
.ph-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000;
    padding: 10px 18px;
    color: #fff;
    background: rgba(55, 58, 60, .92);
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}

/* La grille prend toute la hauteur restante de l'onglet. */
.ph-grid-fill {
    flex: 1 1 auto;
    min-height: 260px;           /* plancher : une grille de 40 px est inutile */
    min-width: 0;
    max-width: 100%;
    display: flex;
    flex-direction: column;
}
.ph-grid-fill > .e-grid { flex: 1 1 auto; min-height: 0; max-width: 100%; }

/* ============================================ PopupCol (masquer les colonnes) */

.ph-popcol-ancre { position: relative; display: inline-block; }
.ph-popcol-voile { position: fixed; inset: 0; z-index: 900; }
.ph-popcol {
    position: absolute;
    right: 0;
    top: 28px;
    z-index: 901;
    width: 296px;
    max-height: 480px;
    display: flex;
    flex-direction: column;
    background: var(--wd-surface);
    border: 1px solid #808080;
    box-shadow: 2px 5px 5px 0 rgba(192, 192, 192, .30);
}
.ph-popcol-actions { display: flex; gap: 8px; padding: 4px; border-bottom: 1px solid var(--wd-bord); }
.ph-popcol-actions .ph-btn { width: 79px; }
.ph-popcol ul { list-style: none; margin: 0; padding: 4px 0; overflow-y: auto; }
.ph-popcol li label { display: flex; align-items: center; gap: 6px; padding: 3px 8px; cursor: pointer; }
.ph-popcol li:hover { background: var(--wd-entete); }

/* ========================================================= grilles (tables) */

.e-grid { font-family: inherit; }

/* En-têtes de colonnes façon table Bootstrap : fond gris clair, texte gras. */
.e-grid .e-gridheader,
.e-grid .e-headercell { background: var(--wd-entete) !important; }
.e-grid .e-headercell .e-headertext {
    color: var(--wd-texte) !important;
    font-size: 12px;
    font-weight: 700;
    text-transform: none;
    white-space: normal;
    line-height: 1.2;
}
.e-grid .e-headercell .e-headercelldiv { height: auto; min-height: 30px; padding-top: 4px; padding-bottom: 4px; }

/* Lignes resserrées : RowHeight="28" dans les grilles virtualisées doit
   suivre ce padding (cf. CLAUDE.md, densité des grilles). */
.e-grid .e-rowcell { padding: 3px 8px; font-size: 12px; line-height: 20px; }
.e-grid .e-rowcell.e-rightalign { font-variant-numeric: tabular-nums; }

.e-grid .e-altrow .e-rowcell { background: #F9F9F9; }
.e-grid .e-groupdroparea { display: none; }

/* Le défilement horizontal appartient à la grille, pas à la page. */
.e-grid .e-gridcontent { overflow-x: auto; }

/* ..PoliceGras sur la colonne de libellé (InitAudit). */
.e-grid td.e-rowcell.ph-col-gras { font-weight: 700; }

/* Étagère et Largeur : les deux seules colonnes saisissables de l'écran. */
.e-grid td.e-rowcell.ph-editable { background: #FFFDE7; }

/* Champ de saisie Étagère / Largeur (Audit Univers) : occupe toute la
   cellule, discret au repos, cadre bleu Bootstrap quand il a le focus. */
.e-grid td.e-rowcell.ph-editable { padding-top: 1px; padding-bottom: 1px; }
.ph-saisie {
    width: 100%;
    box-sizing: border-box;
    height: 24px;
    padding: 0 4px;
    font: inherit;
    font-size: 12px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--wd-texte);
    background: transparent;
    border: 1px solid #E3DDB8;
    border-radius: 2px;
}
.ph-saisie:hover { border-color: #C9BF85; background: #fff; }
.ph-saisie:focus {
    outline: none;
    background: #fff;
    border-color: var(--wd-bleu);
    box-shadow: 0 0 0 2px rgba(2, 117, 216, .25);
}

/* ------------------------------------------------ colorisations conditionnelles */

.e-grid td.e-rowcell.ph-txt-vert  { color: var(--wd-vert-fonce) !important; }
.e-grid td.e-rowcell.ph-txt-rouge { color: var(--wd-rouge-fonce) !important; }

.e-grid td.e-rowcell.ph-case-vert  { color: var(--wd-vert-txt) !important;  background: var(--wd-vert-fond) !important; }
.e-grid td.e-rowcell.ph-case-rouge { color: var(--wd-rouge-txt) !important; background: var(--wd-rouge-fond) !important; }

.e-grid td.e-rowcell.ph-fond-mb   { background: var(--wd-fond-mb) !important; }
.e-grid td.e-rowcell.ph-fond-expo { background: var(--wd-fond-expo) !important; }

/* ---------------------------------------------- lignes hiérarchiques et totaux */

/* Ligne parente (univers dans Synthèse Univers) : noir sur blanc. */
.e-grid .e-row.ph-row-parent .e-rowcell {
    color: #000;
    background: var(--wd-surface);
    font-weight: 600;
    cursor: pointer;
}
/* Lignes enfants : gris foncé, fond alterné RGB(240,240,230) / blanc. */
.e-grid .e-row.ph-row-enfant .e-rowcell     { color: var(--wd-gris-fonce); background: var(--wd-surface); }
.e-grid .e-row.ph-row-enfant-alt .e-rowcell { color: var(--wd-gris-fonce); background: #F0F0E6; }

/* Ligne TOTAL d'un laboratoire (Audit Univers) ou cumul de catégorie (TCD). */
.e-grid .e-row.ph-row-labo .e-rowcell { color: #000; font-weight: 600; }

/* GRAND TOTAL : fond noir, texte blanc (AfficheGrandTotal). */
.e-grid .e-row.ph-row-grandtotal .e-rowcell,
.e-grid .e-altrow.ph-row-grandtotal .e-rowcell {
    color: #fff !important;
    background: #000 !important;
    font-weight: 700;
}

/* Retrait des lignes enfants sous leur parent. */
.ph-retrait { padding-left: 22px; }

.ph-chevron { display: inline-block; width: 16px; color: var(--wd-texte-doux); }
.ph-chevron-btn {
    width: 18px;
    height: 18px;
    margin-right: 4px;
    padding: 0;
    border: none;
    background: none;
    color: var(--wd-texte-doux);
    cursor: pointer;
    font-size: 12px;
}
.ph-chevron-btn:hover { color: var(--wd-bleu); }

/* ===================================================== onglets graphiques */

.ph-graph-corps {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    /* T_DATA 366 px à gauche, deux graphiques de 422 px. */
    grid-template-columns: 366px minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
}
/* Graph Marge : table de 273 px, un seul graphique de 751 px. */
.ph-graph-corps.ph-graph-unique { grid-template-columns: 273px minmax(0, 1fr); }

.ph-graph-gauche {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
}

.ph-seuils {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-bottom: 8px;
}
.ph-seuils label { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--wd-texte-doux); }
.ph-seuils .ph-champ { width: 110px; text-align: right; }

/* Seul .ph-selwrap défile : min-height: 0 est ce qui permet à un enfant flex
   de se comprimer sous sa hauteur de contenu (cf. CLAUDE.md). */
.ph-selwrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    border: 1px solid var(--wd-bord);
}
.ph-seltable { width: 100%; border-collapse: collapse; font-size: 12px; table-layout: fixed; }
.ph-seltable th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 5px 6px;
    background: var(--wd-entete);
    color: var(--wd-texte);
    font-weight: 700;
    text-align: right;
    border-bottom: 1px solid var(--wd-bord);
}
.ph-seltable th.l { text-align: left; width: 48%; }
.ph-seltable td {
    padding: 3px 6px;
    text-align: right;
    white-space: nowrap;
    border-bottom: 1px solid #EEEEEE;
    font-variant-numeric: tabular-nums;
}
.ph-seltable td.l { text-align: left; overflow: hidden; text-overflow: ellipsis; }
.ph-seltable td.c { width: 22px; text-align: center; padding: 3px 0; }
.ph-seltable tbody tr:nth-child(even) td { background: #F9F9F9; }

.ph-chart {
    margin: 0;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--wd-bord);
    background: var(--wd-surface);
    padding: 6px 8px 8px;
}
.ph-chart figcaption {
    flex: 0 0 auto;
    font-weight: 700;
    font-size: 12px;
    text-align: center;
    margin-bottom: 4px;
}
.ph-chart .e-chart,
.ph-chart .e-accumulationchart { flex: 1 1 auto; min-height: 360px; }

/* ================================================================ responsive */

@media (max-width: 1200px) {
    .ph-ligne-totaux { grid-template-columns: repeat(3, 1fr); }
    .ph-graph-corps,
    .ph-graph-corps.ph-graph-unique { grid-template-columns: 1fr; }
    .ph-selwrap { max-height: 300px; }
}

/* Écran court ou mobile : défilement de page plutôt que trois lignes de grille. */
@media (max-height: 700px), (max-width: 768px) {
    .page, main.contenu, .ph-page { height: auto; overflow: visible; }
    .ph-page > .e-tab > .e-content > .e-item { height: auto; overflow: visible; }
    .ph-grid-fill { min-height: 420px; }
    .ph-tiroir-fiche { grid-template-columns: 1fr 1fr; grid-template-areas:
        "nom nom" "tca sup" "typo grp" "adr adr" "adr2 adr2" "cp ville"; }
    .ph-tiroir.ph-open .ph-tiroir-fiche { max-height: 320px; }
}

@media (max-width: 640px) {
    .ph-ligne-totaux { grid-template-columns: 1fr 1fr; }
    .e-grid { min-width: 900px; }
    .ph-page > .e-tab > .e-content { overflow-x: auto; }
}

@media print {
    .entete, .ph-barre, .ph-tiroir-fleche { display: none; }
    body { background: #fff; }
    .e-grid { min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .ph-tiroir-fiche { transition: none; }
}

/* ==========================================================================
   Écrans de gestion (gabarit Modele_Main2r et pages du menu)
   Connexion, barre de menus, listes + tiroir de détail, configuration,
   panels, assistant d'import. Même ambiance BStrap que l'écran d'analyse.
   ========================================================================== */

/* ------------------------------------------------- barre de menus du gabarit */
.entete .marque { display: inline-flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; }
.marque-logo { height: 32px; width: auto; }
.entete .menu { display: flex; align-items: center; gap: 4px; flex: 1 1 auto; }
.entete .menu a { color: #fff; text-decoration: none; font-size: 12pt; padding: 6px 12px; border-radius: 3px; }
.entete .menu a:hover, .entete .menu a.active { background: var(--wd-bleu-nuit); }

/* Sous-menu « Paramètres » et volet utilisateur : <details>, sans code. */
.menu-deroulant, .utilisateur { position: relative; }
.menu-deroulant > summary, .utilisateur > summary {
    list-style: none; cursor: pointer; color: #fff; font-size: 12pt;
    padding: 6px 12px; border-radius: 3px; user-select: none;
}
.menu-deroulant > summary::-webkit-details-marker, .utilisateur > summary::-webkit-details-marker { display: none; }
.menu-deroulant > summary::after { content: " ▾"; font-size: 9pt; }
.menu-deroulant[open] > summary, .menu-deroulant > summary:hover,
.utilisateur[open] > summary, .utilisateur > summary:hover { background: var(--wd-bleu-nuit); }
.menu-sous {
    position: absolute; top: 100%; left: 0; z-index: 950; min-width: 190px;
    display: flex; flex-direction: column; padding: 4px 0;
    background: var(--wd-surface); border: 1px solid var(--wd-bord);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}
.entete .menu-sous a { color: var(--wd-texte); font-size: 11pt; border-radius: 0; padding: 7px 16px; }
.entete .menu-sous a:hover { background: var(--wd-entete); color: var(--wd-bleu-nuit); }

.utilisateur { margin-left: auto; }
.utilisateur > summary { display: inline-flex; align-items: center; gap: 8px; }
.utilisateur-nom { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%;
    background: #fff; color: var(--wd-bleu-fonce); font-size: 11px; font-weight: 700; flex: 0 0 auto;
}
.avatar-grand { width: 56px; height: 56px; font-size: 18px; background: var(--wd-entete); }
.utilisateur-volet {
    position: absolute; right: 0; top: calc(100% + 4px); z-index: 950; width: 314px;
    display: grid; grid-template-columns: auto 1fr; gap: 10px 12px; align-items: center;
    padding: 14px; color: var(--wd-texte);
    background: var(--wd-surface); border: 1px solid var(--wd-bord); box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}
.utilisateur-volet .ph-btn { grid-column: 1 / -1; justify-self: center; text-decoration: none; line-height: 25px; }
.utilisateur-profil { font-size: 11px; color: var(--wd-texte-doux); }

/* ------------------------------------------------------------- connexion
   Reprend LoginMain : fond gris clair #ECEEEF, logo en tête, image des clés
   à gauche de la carte, champs à gauche et boutons à droite dans la carte
   (BT_GO bleu #0275D8, BT_FIRST vert #33CC66). */
/* Logo : version « -detoure » (fond blanc rendu transparent), l'original a un fond blanc plein. */
.cnx-page { min-height: 100%; background: #ECEEEF; }
.cnx-ecran {
    min-height: 100vh; box-sizing: border-box;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 18px; padding: 24px 16px;
}
.cnx-logo { width: 300px; max-width: 70vw; height: auto; }

.cnx-corps { display: flex; align-items: center; gap: 28px; }
.cnx-clef { width: 200px; height: 200px; flex: 0 0 auto; filter: drop-shadow(4px 8px 10px rgba(0, 0, 0, .18)); }

.cnx-cellule, .cnx-carte {
    background: #FFFFFF; border: 1px solid #DDDDDD; border-radius: 8px;
    box-shadow: 0 12px 30px rgba(55, 58, 60, .14);
    border-top: 4px solid var(--wd-bleu);
}
.cnx-cellule { width: 700px; max-width: calc(100vw - 32px); padding: 26px 32px 22px; box-sizing: border-box; }
.cnx-carte { width: 420px; max-width: calc(100vw - 32px); padding: 26px 30px 20px; box-sizing: border-box; }

.cnx-entete { margin: 0 0 4px; font-size: 19px; font-weight: 700; color: #1E3A6E; }
.cnx-sous-titre { margin: 0 0 18px; color: var(--wd-texte-doux); }
.cnx-cellule .cnx-entete { margin-bottom: 18px; }

.cnx-grille { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 26px; align-items: start; }
.cnx-saisies { display: flex; flex-direction: column; }
.cnx-champ { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; font-size: 12px; font-weight: 600; color: var(--wd-texte-doux); }
.cnx-champ .ph-champ { height: 36px; font-size: 14px; padding: 0 10px; border-radius: 4px; }
.cnx-champ .ph-champ:focus { outline: none; border-color: var(--wd-bleu); box-shadow: 0 0 0 3px rgba(2, 117, 216, .18); }
.cnx-icone-champ { position: relative; display: block; }
.cnx-icone-champ > span { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 14px; opacity: .55; pointer-events: none; }
.cnx-icone-champ .ph-champ { width: 100%; padding-left: 34px; box-sizing: border-box; }
.cnx-oubli { align-self: flex-end; font-size: 12px; color: var(--wd-bleu); text-decoration: none; }
.cnx-oubli:hover { text-decoration: underline; }

.cnx-boutons { display: flex; flex-direction: column; gap: 12px; padding-top: 20px; }
.cnx-go, .cnx-first {
    display: flex; align-items: center; justify-content: center; text-align: center;
    border: none; border-radius: 5px; color: #fff; cursor: pointer; text-decoration: none;
    font: inherit; box-shadow: 0 3px 8px rgba(0, 0, 0, .15); transition: transform .08s, filter .15s;
}
.cnx-go { height: 46px; font-size: 16px; font-weight: 700; background: #0275D8; }
.cnx-first { flex-direction: column; min-height: 46px; padding: 6px 10px; font-size: 11.5px; line-height: 1.35; background: #33CC66; }
.cnx-go:hover, .cnx-first:hover { filter: brightness(1.08); }
.cnx-go:active, .cnx-first:active { transform: translateY(1px); }

.cnx-bouton { width: 100%; height: 38px; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.cnx-lien { display: block; margin-top: 14px; text-align: center; font-size: 12px; color: var(--wd-bleu); }
.cnx-erreur { color: #A94442; background: #F2DEDE; border: 1px solid #EBCCD1; border-radius: 4px; padding: 8px 12px; margin: 14px 0 0; }
.cnx-info { color: #3C763D; background: #DFF0D8; border: 1px solid #D6E9C6; border-radius: 4px; padding: 8px 12px; }
.cnx-criteres { list-style: none; padding: 0; margin: 0 0 12px; font-size: 12px; }
.cnx-criteres .ok { color: var(--wd-vert-fonce); }
.cnx-criteres .ko { color: var(--wd-rouge-fonce); }
.cnx-pied { margin: 4px 0 0; font-size: 11px; color: #8A9199; }

@media (max-width: 1000px) {
    .cnx-clef { display: none; }
}
@media (max-width: 640px) {
    .cnx-grille { grid-template-columns: 1fr; gap: 6px; }
    .cnx-boutons { padding-top: 6px; }
    .cnx-cellule { padding: 20px; }
}
.ph-refus { padding: 40px; text-align: center; }

/* --------------------------------------------------- toast et modales */
.ph-toast { cursor: pointer; }
.ph-toast-ok { background: #2E7D32; }
.ph-toast-ko { background: #C62828; }

.ph-modale-voile {
    position: fixed; inset: 0; z-index: 1500;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, .35);
}
.ph-modale {
    width: 440px; max-width: calc(100% - 32px); max-height: calc(100% - 64px); overflow: auto;
    padding: 18px 20px; background: var(--wd-surface); border-radius: 4px; box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
}
.ph-modale-large { width: 720px; }
.ph-modale h2 { margin: 0 0 12px; font-size: 15px; color: var(--wd-bleu-nuit); }
.ph-modale-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

.ph-btn-danger { color: #A94442; }
.ph-btn-danger:hover:not([disabled]) { background: #F2DEDE; border-color: #EBCCD1; }
.ph-btn-haut { height: 48px; align-self: end; }
a.ph-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

.ph-note { font-size: 11.5px; color: var(--wd-texte-doux); margin: 6px 0; }
.ph-vide { color: var(--wd-texte-doux); font-style: italic; padding: 12px; }
.ph-nb { color: var(--wd-texte-doux); font-size: 11px; white-space: nowrap; }

/* Tableau HTML simple (tableau de bord, historique, référentiels, aperçu). */
.ph-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.ph-table th { background: var(--wd-entete); text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--wd-bord); position: sticky; top: 0; }
.ph-table td { padding: 4px 8px; border-bottom: 1px solid #EEEEEE; }
.ph-table tbody tr:nth-child(even) td { background: #F9F9F9; }
.ph-table .r { text-align: right; }
.ph-table .c { text-align: center; }

/* ------------------------------------------------------- tableau de bord */
.ph-tdb { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 12px; align-items: start; }
.ph-widget { background: var(--wd-surface); border: 1px solid var(--wd-bord); border-radius: 3px; box-shadow: 5px 5px 3px 0 rgba(192, 192, 192, .15); }
.ph-widget > header { padding: 8px 12px; font-weight: 700; color: var(--wd-bleu-nuit); border-bottom: 1px solid var(--wd-bord); }
.ph-widget > :not(header) { margin: 8px; }
.ph-horloge { text-align: center; padding: 18px 8px; }
.ph-horloge-heure { font-size: 40px; font-weight: 300; color: var(--wd-bleu-fonce); font-variant-numeric: tabular-nums; }
.ph-horloge-date { text-transform: capitalize; color: var(--wd-texte-doux); }

/* ------------------------------------------ liste + tiroir de détail */
.ph-liste-detail { display: grid; grid-template-columns: minmax(0, 1fr) 448px; gap: 10px; height: 100%; min-height: 0; }
.ph-liste {
    display: flex; flex-direction: column; min-height: 0; min-width: 0; padding: 8px;
    background: var(--wd-surface); border: 1px solid var(--wd-bord); border-radius: 3px;
}
.ph-recherche { width: 314px; height: 31px; }
.ph-compteur { font-variant-numeric: tabular-nums; color: var(--wd-texte-doux); white-space: nowrap; }
.ph-actions-ligne { display: inline-flex; gap: 4px; }
.ph-actions-ligne .ph-btn-icone { width: 26px; height: 23px; font-size: 12px; }

.ph-tiroir-detail {
    overflow-y: auto; min-height: 0; padding: 10px 14px;
    background: var(--wd-surface); border: 1px solid var(--wd-bord); border-radius: 3px;
}
.ph-fiche-entete { display: flex; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--wd-bord); margin-bottom: 8px; }
.ph-fiche-icone { font-size: 34px; color: var(--wd-bleu); }
.ph-fiche-titre { flex: 1 1 auto; font-size: 15px; font-weight: 700; color: var(--wd-bleu-nuit); }
.ph-fiche-id { color: var(--wd-texte-doux); font-size: 11px; }
fieldset.ph-fiche { border: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.ph-fiche label, .ph-form label { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--wd-texte-doux); }
.ph-fiche h3, .ph-form h3 { margin: 10px 0 2px; font-size: 12px; color: var(--wd-bleu-nuit); border-bottom: 1px solid var(--wd-entete); padding-bottom: 2px; }
.ph-fiche .ph-champ, .ph-form .ph-champ { width: 100%; }
.ph-fiche textarea.ph-champ, .ph-form textarea.ph-champ { height: auto; font-family: inherit; }
.ph-fiche fieldset[disabled] .ph-champ, fieldset.ph-fiche[disabled] .ph-champ { background: #F4F4F4; color: var(--wd-texte); }
.ph-fiche-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ph-fiche-3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 8px; }
.ph-fiche-actions { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.ph-champ-bouton { display: flex; gap: 4px; align-items: center; }
.ph-champ-bouton .ph-champ { flex: 1 1 auto; }
label.ph-interrupteur { flex-direction: row; align-items: center; gap: 8px; color: var(--wd-texte); font-size: 12px; }
.ph-couleurs { display: grid; grid-template-columns: 1fr auto auto; gap: 6px 10px; align-items: center; font-size: 12px; }
.ph-couleurs input[type="color"] { width: 40px; height: 26px; padding: 0; border: 1px solid #CCC; }

.ph-table-ref { margin-top: 12px; }
.ph-referentiels { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ph-ref-liste { max-height: 360px; overflow-y: auto; border: 1px solid var(--wd-bord); margin-top: 8px; }
.ph-ref-ligne { display: flex; align-items: center; gap: 6px; padding: 3px 6px; border-bottom: 1px solid #EEE; cursor: pointer; }
.ph-ref-ligne > span:first-child { flex: 1 1 auto; }
.ph-ref-ligne.ph-actif { background: #E8F1FB; }

/* ----------------------------------------------------------- configuration */
.ph-config { display: grid; grid-template-columns: 154px minmax(0, 1fr); gap: 10px; height: 100%; min-height: 0; }
.ph-config-menu {
    display: flex; flex-direction: column; gap: 4px; padding: 14px 6px;
    background: var(--wd-surface); border: 1px solid var(--wd-bord); border-radius: 3px;
}
.ph-config-menu > button { font: inherit; text-align: left; padding: 8px 10px; border: none; background: none; color: var(--wd-bleu); border-radius: 3px; cursor: pointer; }
.ph-config-menu > button:hover { background: var(--wd-entete); }
.ph-config-menu > button.ph-actif { background: var(--wd-bleu); color: #fff; font-weight: 700; }
.ph-config-valider { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.ph-config-zone { overflow-y: auto; padding: 8px 20px 20px; background: var(--wd-surface); border: 1px solid var(--wd-bord); border-radius: 3px; }
.ph-config-zone h2 { color: var(--wd-bleu-nuit); font-size: 16px; border-bottom: 1px solid var(--wd-bord); padding-bottom: 6px; }
.ph-form { display: flex; flex-direction: column; gap: 9px; max-width: 900px; }
.ph-form-etroit { max-width: 560px; }
.ph-form small { font-size: 10.5px; }
.ph-test { display: flex; gap: 8px; max-width: 500px; }

/* ---------------------------------------------------------------- à propos */
.ph-apropos { max-width: 1100px; margin: 0 auto; padding: 10px 20px; background: var(--wd-surface); border: 1px solid var(--wd-bord); border-radius: 3px; height: 100%; overflow-y: auto; box-sizing: border-box; }
.ph-apropos h1 { color: var(--wd-bleu-nuit); }
.ph-info-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ph-info-grille h2 { font-size: 14px; display: flex; align-items: center; gap: 8px; }
.ph-info-grille dl { display: grid; grid-template-columns: 170px 1fr; gap: 6px 12px; }
.ph-info-grille dt { color: var(--wd-texte-doux); }
.ph-info-grille dd { margin: 0; }
.ph-agent { word-break: break-all; font-size: 11px; }

/* ------------------------------------------------------------------ panels */
.ph-criteres { display: flex; flex-wrap: wrap; gap: 10px 14px; padding: 4px 10px 10px; align-items: end; }
.ph-criteres label { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--wd-texte-doux); }
.ph-criteres .ph-champ { width: 300px; }
.ph-onglet.ph-panel { flex-direction: row; gap: 8px; }
.ph-panel-choix { width: 259px; flex: 0 0 auto; display: flex; flex-direction: column; min-height: 0; }
.ph-panel-grille { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ph-coche { display: flex; align-items: center; gap: 6px; padding: 3px 6px; font-size: 12px; border-bottom: 1px solid #F0F0F0; cursor: pointer; }

/* -------------------------------------------------------- assistant d'import */
.ph-assistant { max-width: 1250px; margin: 0 auto; height: 100%; overflow-y: auto; padding: 0 4px; box-sizing: border-box; }
.ph-etapes { display: flex; list-style: none; padding: 0; margin: 0 0 10px; counter-reset: etape; }
.ph-etapes li {
    flex: 1 1 0; padding: 8px 10px; text-align: center; font-size: 12px; counter-increment: etape;
    background: var(--wd-surface); border: 1px solid var(--wd-bord); color: var(--wd-texte-doux);
}
.ph-etapes li::before { content: counter(etape) ". "; }
.ph-etapes li.ph-fait { color: var(--wd-vert-fonce); background: #F1F8F1; }
.ph-etapes li.ph-actif { color: #fff; background: var(--wd-bleu); border-color: var(--wd-bleu); font-weight: 700; }
.ph-etape { background: var(--wd-surface); border: 1px solid var(--wd-bord); border-radius: 3px; padding: 6px 18px 18px; }
.ph-etape h2 { font-size: 15px; color: var(--wd-bleu-nuit); }
.ph-etape-actions { display: flex; justify-content: space-between; margin-top: 16px; }
.ph-avertissement { color: #8A6D3B; background: #FCF8E3; border: 1px solid #FAEBCC; border-radius: 3px; padding: 8px 10px; }
.ph-depot {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    min-height: 130px; margin: 10px 0 20px; padding: 20px; cursor: pointer;
    border: 2px dashed #9DB8D6; border-radius: 6px; background: #F5F9FD; color: var(--wd-texte-doux);
}
.ph-depot:hover { border-color: var(--wd-bleu); }
.ph-depot { position: relative; }
.ph-depot input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.ph-depot-survol { border-color: var(--wd-bleu); background: #E3EFFB; color: var(--wd-bleu); }
.ph-apercu { max-height: 520px; overflow: auto; border: 1px solid var(--wd-bord); }
.ph-apercu td { white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.ph-non-affecte { color: var(--wd-texte-doux); font-style: italic; }
.ph-progression { color: var(--wd-bleu-nuit); font-weight: 600; }
.ph-succes { color: #3C763D; background: #DFF0D8; border: 1px solid #D6E9C6; border-radius: 3px; padding: 8px 10px; }
.ph-rapport { max-height: 420px; overflow-y: auto; padding: 10px; border: 1px solid var(--wd-bord); background: #FCFCFC; font-size: 12px; }

@media (max-width: 1200px) {
    .ph-liste-detail, .ph-tdb, .ph-config, .ph-info-grille { grid-template-columns: 1fr; height: auto; }
    .ph-tiroir-detail { max-height: none; }
}

/* Import produits : base complète (BASE_PRODUIT / GR_SUP_PRODUIT) ou import partiel. */
.ph-bandeau-base { border: 1px solid #F0AD4E; border-left: 4px solid #F0AD4E; background: #FCF8E3; border-radius: 4px; padding: 8px 12px; margin: 0 0 12px; }
.ph-bandeau-base p { margin: 0 0 6px; }
.ph-bandeau-partiel { border-left: 4px solid var(--wd-bleu); background: #EEF5FC; padding: 8px 12px; border-radius: 4px; margin: 0 0 12px; }
.ph-interrupteur-danger { color: #A94442; font-weight: 600; }

/* Correspondance des colonnes : champs à gauche, fiche de l'enregistrement courant à droite. */
.ph-corresp { display: grid; grid-template-columns: minmax(280px, 420px) minmax(0, 1fr); gap: 24px; align-items: start; }
.ph-corresp .ph-form-etroit { max-width: none; }
.ph-corresp-valeur { display: block; margin-top: 2px; color: var(--wd-texte-doux); font-weight: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-fiche-enreg { border: 1px solid #DDDDDD; border-radius: 4px; background: #FAFBFC; padding: 10px; position: sticky; top: 0; }
.ph-fiche-enreg .ph-table { width: 100%; }
.ph-fiche-enreg td:nth-child(2) { font-weight: 600; word-break: break-word; }
.ph-fiche-enreg tr.ph-col-affectee td { background: #E7F1FB; }
.ph-fiche-enreg tr.ph-col-affectee td:last-child { color: var(--wd-bleu); font-weight: 600; }
.ph-nav-enreg { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 10px; }
.ph-nav-enreg input { width: 90px; text-align: center; display: inline-block; margin: 0 4px; }
@media (max-width: 900px) { .ph-corresp { grid-template-columns: 1fr; } .ph-fiche-enreg { position: static; } }

/* Migration HFSQL */
.ph-page-gestion { max-width: 1300px; margin: 0 auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; height: 100%; box-sizing: border-box; }
.ph-page-gestion h1 { font-size: 19px; color: var(--wd-bleu-nuit); margin: 4px 0 0; }
.ph-migr-source { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 16px; }
.ph-migr-cols small { display: block; color: var(--wd-texte-doux); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 520px; }
.ph-migr-inactive td { color: #A0A6AD; }
.ph-migr-alerte { color: #A94442; font-weight: 600; }
@media (max-width: 760px) { .ph-migr-source { grid-template-columns: 1fr; } }

/* =================================================== touche de couleur (13/10/2026)
   Demande de Gilles : « égayer » tableaux et boutons. Bloc placé en fin de
   feuille pour surcharger les règles d'origine sans les réécrire ; les
   colorisations métier (ph-case-*, ph-txt-*, ph-fond-mb/expo, GRAND TOTAL
   noir) restent prioritaires grâce à leur !important. */
:root {
    --ph-entete-haut:  #EAF3FC;
    --ph-entete-bas:   #D3E5F8;
    --ph-entete-texte: #0F3F73;
    --ph-ligne-alt:    #F4F8FD;
    --ph-ligne-survol: #E3F0FC;
    --ph-ligne-active: #CDE3F8;
}

/* En-têtes des grilles Syncfusion et des tables simples */
.e-grid .e-gridheader { border-bottom: 2px solid var(--wd-bleu) !important; }
.e-grid .e-gridheader,
.e-grid .e-headercell { background: linear-gradient(var(--ph-entete-haut), var(--ph-entete-bas)) !important; }
.e-grid .e-headercell .e-headertext { color: var(--ph-entete-texte) !important; }
.e-grid .e-headercell:hover { background: linear-gradient(#DDEBFA, #C3DAF4) !important; }
.e-grid .e-sortfilterdiv, .e-grid .e-icon-ascending, .e-grid .e-icon-descending { color: var(--wd-bleu) !important; }

.ph-table th {
    background: linear-gradient(var(--ph-entete-haut), var(--ph-entete-bas));
    color: var(--ph-entete-texte);
    border-bottom: 2px solid var(--wd-bleu);
}
.ph-table tbody tr:nth-child(even) td { background: var(--ph-ligne-alt); }
.ph-table tbody tr:hover td { background: var(--ph-ligne-survol); }

/* Lignes : zébrage bleuté, survol et sélection colorés */
.e-grid .e-altrow .e-rowcell { background: var(--ph-ligne-alt); }
.e-grid .e-row:hover .e-rowcell:not(.ph-case-vert):not(.ph-case-rouge):not(.ph-fond-mb):not(.ph-fond-expo) { background: var(--ph-ligne-survol) !important; }
.e-grid .e-row .e-rowcell.e-active:not(.ph-case-vert):not(.ph-case-rouge) { background: var(--ph-ligne-active) !important; }
.e-grid .e-row.ph-row-grandtotal:hover .e-rowcell { background: #000 !important; }

/* Totaux de l'onglet Analyse : une couleur par indicateur */
.ph-total { border-left-width: 4px; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.ph-ligne-totaux .ph-total:nth-child(1) { border-left-color: #0275D8; background: #EEF5FD; }   /* CA */
.ph-ligne-totaux .ph-total:nth-child(2) { border-left-color: #17A2B8; background: #EBF8FA; }   /* UV */
.ph-ligne-totaux .ph-total:nth-child(3) { border-left-color: #28A745; background: #EDF8F0; }   /* marge */
.ph-ligne-totaux .ph-total:nth-child(4) { border-left-color: #F0AD4E; background: #FEF7EC; }   /* stock */
.ph-ligne-totaux .ph-total:nth-child(5) { border-left-color: #8E5CC9; background: #F5F0FB; }   /* stock valeur */
.ph-ligne-totaux .ph-total-nb { border-left-color: transparent; background: transparent; box-shadow: none; color: var(--wd-bleu-nuit); }

/* Boutons */
.ph-btn {
    color: var(--wd-bleu-nuit);
    background: linear-gradient(#FFFFFF, #EEF3F9);
    border-color: #BFD0E3;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(15, 63, 115, .08);
    transition: background .12s, border-color .12s, box-shadow .12s;
}
.ph-btn:hover:not([disabled]) { background: linear-gradient(#F4F9FF, #DCEAF9); border-color: #8FB3DA; }
.ph-btn:active:not([disabled]) { box-shadow: inset 0 1px 2px rgba(0, 0, 0, .12); }

.ph-btn-primaire { color: #fff; background: linear-gradient(#2C8BE0, #0268C2); border-color: #025AA5; }
.ph-btn-primaire:hover:not([disabled]) { background: linear-gradient(#1E7FD6, #025AA5); border-color: #014C8C; }

.ph-btn-danger { color: #fff; background: linear-gradient(#E0605A, #C9302C); border-color: #AC2925; }
.ph-btn-danger:hover:not([disabled]) { background: linear-gradient(#D9534F, #AC2925); border-color: #8B1F1C; }

.ph-btn-succes { color: #fff; background: linear-gradient(#4CBF63, #2E9E47); border-color: #23843A; }
.ph-btn-succes:hover:not([disabled]) { background: linear-gradient(#3FB257, #23843A); }

.ph-btn-excel { color: #fff; background: linear-gradient(#2A8A55, #1D6F42); border-color: #145232; }
.ph-btn-excel:hover:not([disabled]) { background: linear-gradient(#1D6F42, #145232); }

/* Les boutons icône « ✕ » des listes restent discrets mais rouges au survol. */
.ph-actions-ligne .ph-btn-danger { color: #C9302C; background: linear-gradient(#FFFFFF, #FBEDED); border-color: #E7B9B7; }
.ph-actions-ligne .ph-btn-danger:hover:not([disabled]) { color: #fff; background: linear-gradient(#E0605A, #C9302C); border-color: #AC2925; }

/* TCD : lignes de cumul par catégorie bien visibles, repliables. */
.e-grid .e-row.ph-row-tcd-cumul .e-rowcell {
    color: #0F3F73;
    font-weight: 700;
    background: linear-gradient(#E4EFFB, #D3E5F8) !important;
    border-top: 2px solid #8FB3DA !important;
}
.e-grid .e-row.ph-row-tcd-cumul:hover .e-rowcell { background: linear-gradient(#D8E8FA, #C3DAF4) !important; }
.ph-tcd-nb { margin-left: 6px; font-weight: 400; color: #55595C; font-size: 11px; }

/* Export des graphiques : boutons discrets en haut à droite de chaque figure
   (le titre est désormais dans le graphique, pour figurer dans l'export). */
.ph-chart figcaption { display: flex; justify-content: flex-end; margin-bottom: 0; }
.ph-graphe-export { display: inline-flex; align-items: center; gap: 4px; }
.ph-graphe-export-titre { color: var(--wd-texte-doux); font-size: 13px; margin-right: 2px; }
.ph-graphe-export .ph-btn { height: 22px; padding: 0 7px; font-size: 11px; font-weight: 600; }

/* Liste des audits : « Importer dans « nom » », nom raccourci s'il est long. */
.ph-btn-import { display: inline-flex; align-items: center; max-width: 360px; }
.ph-btn-import-nom { display: inline-block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; font-weight: 700; }

/* Tableau de bord : « Nos clients » sous l'horloge, colonne de droite. */
.ph-tdb > .ph-widget-large { grid-row: span 2; }
.ph-tdb > .ph-widget-clients { grid-column: 2; }
.ph-clients { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 14px 8px 18px; }
.ph-clients img { max-width: 220px; max-height: 90px; width: auto; height: auto; object-fit: contain; }
@media (max-width: 900px) { .ph-tdb > .ph-widget-clients { grid-column: auto; } .ph-tdb > .ph-widget-large { grid-row: auto; } }

/* Import en cours : roue + barre indéterminée (l'import est une seule
   transaction, pas de pourcentage fiable). */
.ph-import-encours {
    display: flex; align-items: center; gap: 16px; margin: 12px 0; padding: 14px 18px;
    border: 1px solid #BFD0E3; border-left: 4px solid var(--wd-bleu); border-radius: 4px;
    background: linear-gradient(#F4F9FF, #E6F0FB);
}
.ph-import-roue {
    flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
    border: 4px solid #CFE0F3; border-top-color: var(--wd-bleu); border-right-color: #28A745;
    animation: ph-tourne .9s linear infinite;
}
.ph-import-texte { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; }
.ph-import-texte b { color: var(--wd-bleu-nuit); font-size: 14px; }
.ph-import-texte small { color: var(--wd-texte-doux); }
.ph-import-barre { position: relative; height: 6px; border-radius: 3px; background: #D6E4F3; overflow: hidden; max-width: 460px; }
.ph-import-barre span {
    position: absolute; top: 0; left: -40%; width: 40%; height: 100%; border-radius: 3px;
    background: linear-gradient(90deg, var(--wd-bleu), #28A745);
    animation: ph-glisse 1.3s ease-in-out infinite;
}
@keyframes ph-tourne { to { transform: rotate(360deg); } }
@keyframes ph-glisse { 0% { left: -40%; } 100% { left: 100%; } }
@media (prefers-reduced-motion: reduce) {
    .ph-import-roue, .ph-import-barre span { animation-duration: 3s; }
}

/* Pictogrammes des univers (gestion des univers, camemberts par univers). */
.ph-picto-vignette {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%; background: #2C8BB8; overflow: hidden;
}
.ph-picto-vignette img { width: 18px; height: 18px; object-fit: contain; }
.ph-picto-envoi { position: relative; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.ph-picto-envoi input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.ph-picto-part { width: 30px; height: 30px; object-fit: contain; pointer-events: none; filter: drop-shadow(0 0 1px rgba(0, 0, 0, .25)); }
.ph-etiquette-part { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: #373A3C; white-space: nowrap; }
.ph-etiquette-picto { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto; }
.ph-etiquette-picto img { width: 18px; height: 18px; object-fit: contain; }
.ph-etiquette-part.ph-gauche { transform: translateX(-50%); flex-direction: row-reverse; }
.ph-etiquette-part.ph-droite { transform: translateX(50%); }
/* Ligne d'univers : la vignette est en tête, c'est le libellé qui prend la place
   (la règle « span:first-child » de .ph-ref-ligne étirait la vignette). */
.ph-ref-ligne > .ph-picto-vignette:first-child { flex: 0 0 26px; }
.ph-ref-ligne > .ph-picto-vignette + span { flex: 1 1 auto; }

/* Page de connexion : logo Pharmetrics et logos des deux clients sur une ligne (LoginMain). */
.cnx-logos { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 28px 56px; }
.cnx-clients { display: flex; align-items: center; gap: 36px; padding-left: 40px; border-left: 1px solid #D5DADF; }
.cnx-clients img { max-height: 92px; max-width: 220px; width: auto; height: auto; object-fit: contain; }
@media (max-width: 760px) {
    .cnx-clients { padding-left: 0; border-left: none; gap: 24px; }
    .cnx-clients img { max-height: 64px; max-width: 150px; }
}

/* Fiche utilisateur : logo de la page d'accueil. */
.ph-logo-utilisateur { display: flex; align-items: center; gap: 14px; }
.ph-logo-apercu { width: 180px; height: 90px; border: 1px dashed #BFD0E3; border-radius: 4px; display: flex; align-items: center; justify-content: center; background: #FAFBFC; }
.ph-logo-apercu img { max-width: 170px; max-height: 80px; object-fit: contain; }
.ph-logo-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
/* Menu : « TDB » remplacé par une maison (Accueil). */
.nav-accueil { display: inline-flex; align-items: center; justify-content: center; }
.nav-accueil svg { display: block; }

/* Photos de profil à la place des initiales. */
.avatar-photo { object-fit: cover; padding: 0; background: #fff; }
.ph-photo-apercu { width: 80px; height: 80px; font-size: 22px; flex: 0 0 auto; }