@charset "UTF-8";

/* =====================================================
   Design tokens v2 (Phase 1)
   ===================================================== */
:root {
    /* --- Design System Sinari (sinari-design-system/DESIGN-SYSTEM.md §7) ---
       Couche de marque officielle. Utilisee par les composants "marque"
       (badges de statut, etc.). N'ecrase pas les --omp-* existants. */
    --sn-primary: #4820CD;
    --sn-primary-dark: #3E1CAE;
    --sn-text-primary: #2E2941;
    --sn-text-secondary: #4B4D57;
    --sn-error: #D00700;
    --sn-error-alt: #B3261E;
    --sn-warning: #FF9900;
    --sn-success: #00B580;
    --sn-success-dark: #016A4C;
    --sn-info: #01487A;
    --sn-surface-light: #F0F2FF;
    --sn-surface-neutral: #DADADA;
    /* Pastilles de statut (badges) -- couches claires DS Sinari (fond + bordure) */
    --sn-badge-success-bg: #e0f5ee;
    --sn-badge-success-border: #b6e6d6;
    --sn-badge-warning-bg: #fff1db;
    --sn-badge-warning-border: #fad9a8;
    --sn-badge-danger-bg: #fbe0de;
    --sn-badge-danger-border: #f3bfbb;
    --sn-badge-info-bg: #e0eaf2;
    --sn-badge-info-border: #bcd2e2;
    --sn-badge-neutral-bg: #ececf2;
    --sn-badge-neutral-border: #d7d7e2;
    --sn-badge-primary-border: #c8cde9;
    --sn-font-primary: 'Roboto', sans-serif;

    /* --- Spacing scale --- */
    --omp-space-xs:  0.25rem;
    --omp-space-sm:  0.5rem;
    --omp-space-md:  0.75rem;
    --omp-space-lg:  1.25rem;
    --omp-space-xl:  2rem;
    --omp-field-gap: var(--omp-space-md);
    --omp-grid-gap:  1rem;
    --omp-card-padding: 1.25rem;

    /* --- Surfaces & backgrounds (aligne sur DS Sinari, violet clair) --- */
    --omp-bg-page:    #F7F8FF;       /* Surface Lightest DS */
    --omp-bg-card:    #FFFFFF;       /* Surface White DS */
    --omp-bg-section: #F0F2FF;       /* Surface Light DS (hover/subtle fills) */
    --omp-bg-warm:    #F3F5FF;       /* Surface Warm Light DS (card backgrounds) */
    --omp-bg-accent:  #DAE0FF;       /* Surface Medium DS (active tab/selection) */

    /* --- Borders (alignees sur DS Sinari) --- */
    --omp-border-light:  #DAE0FF;    /* Surface Medium DS */
    --omp-border-medium: #C8CDE9;    /* Surface Border Light DS */
    --omp-card-radius:   8px;

    /* --- Shadows --- */
    --omp-shadow-sm:  0 1px 3px rgba(0,0,0,0.08);
    --omp-shadow-md:  0 2px 8px rgba(0,0,0,0.12);
    --omp-shadow-lg:  0 8px 32px rgba(0,0,0,0.18);

    /* --- Text colors (inherit from Ultima theme for dark mode compat) --- */
    --omp-text-primary:   var(--text-color, #212529);
    --omp-text-secondary: var(--text-color-secondary, #6c757d);
    --omp-text-muted:     #adb5bd;

    /* --- Status colors --- */
    --omp-success: #2e7d32;
    --omp-warning: #f57c00;
    --omp-danger:  #c62828;
    --omp-info:    #1565c0;

    /* --- Typography --- */
    --omp-font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --omp-font-xs: 0.75rem;
    --omp-font-sm: 0.85rem;
    --omp-font-md: 0.95rem;
    --omp-font-lg: 1.1rem;
    --omp-line-height: 1.5;

    /* --- Layout --- */
    --omp-sticky-top:  48px;
    --omp-topbar-height: 48px;
    --omp-text-inverse: #fff;

    /* --- Transitions --- */
    --omp-transition: 150ms ease;
    --omp-primary-hover: #3714a8;
    --omp-transition-slow: 250ms ease;

    /* --- Typography extended --- */
    --omp-font-xl: 1.5rem;

    /* --- Status text colors (for notes, labels) --- */
    --omp-status-warning-text: #8a4b08;
    --omp-status-muted-text: #757575;

    /* --- Layout max-width --- */
    --omp-content-max-width: 1440px;

    /* --- Component sizing --- */
    --omp-input-height: 2.5rem;
    --omp-btn-height: 2.25rem;
    --omp-btn-height-sm: 2rem;

    /* --- Focus ring --- */
    --omp-shadow-focus: 0 0 0 2px rgba(var(--primary-color-rgb, 33,150,243), 0.2);

    /* --- Row colors (DataTable lignes colorees) --- */
    --omp-row-red-bg: #fce4ec;
    --omp-row-red-text: #b71c1c;
    --omp-row-yellow-bg: #fff9c4;
    --omp-row-yellow-text: #5d4037;
    --omp-row-green-bg: #e8f5e9;
    --omp-row-green-text: #1b5e20;
    --omp-row-blue-bg: #e3f2fd;
    --omp-row-blue-text: #0d47a1;
    --omp-row-clearblue-bg: #e1f5fe;
    --omp-row-clearblue-text: #01579b;
    --omp-row-grey-bg: #f5f5f5;
    --omp-row-grey-text: #424242;
    --omp-row-orange-bg: #fff3e0;
    --omp-row-orange-text: #e65100;

    /* --- Badge / status light backgrounds --- */

    /* --- Overlay/hover opacity --- */
    --omp-hover-overlay: rgba(0,0,0,0.04);
    --omp-hover-overlay-light: rgba(0,0,0,0.025);
    --omp-success-hover: rgba(46,125,50,0.08);
    --omp-danger-hover: rgba(198,40,40,0.08);
    --omp-info-hover: rgba(22,60,132,0.06);
    --omp-message-error-bg: rgba(198,40,40,0.06);
    --omp-message-warn-bg: rgba(245,124,0,0.06);
    --omp-message-info-bg: rgba(21,101,192,0.06);
}

/* =====================================================
   Dark mode — surcharges pour thèmes sombres Ultima
   ===================================================== */
body[class*="-dark"],
body[class*="_dark"] {
    --omp-text-muted: #888;
    --omp-shadow-sm:  0 1px 3px rgba(0,0,0,0.3);
    --omp-shadow-md:  0 2px 8px rgba(0,0,0,0.4);
    --omp-shadow-lg:  0 8px 32px rgba(0,0,0,0.5);
    --omp-success: #66bb6a;
    --omp-warning: #ffb74d;
    --omp-danger:  #ef5350;
    --omp-info:    #42a5f5;
    --omp-status-warning-text: #ffcc80;
    --omp-status-muted-text: #999;
    /* Surfaces/bordures : sans cette surcharge, les fonds restent clairs
       (blanc / violet tres clair) alors que le texte passe en blanc -> illisible
       (section headers, titlebars, cartes). Mappe sur les variables de
       theme Ultima (--surface-*) avec repli sombre si absentes. */
    --omp-bg-page:       var(--surface-ground, #1e1e2e);
    --omp-bg-card:       var(--surface-card, #2a2a3c);
    --omp-bg-section:    var(--surface-section, #33334a);
    --omp-border-light:  var(--surface-border, #3a3a52);
    --omp-border-medium: var(--surface-border, #4a4a66);
    /* Lignes colorees par statut : les fonds pastels clairs deviennent des
       teintes translucides sur fond sombre (le texte clair force par
       .ui-datatable tbody td reste lisible). Le texte conserve une teinte
       semantique claire pour les usages hors td. */
    --omp-row-red-bg:        rgba(239,83,80,0.18);
    --omp-row-red-text:      #ef9a9a;
    --omp-row-yellow-bg:     rgba(255,183,77,0.18);
    --omp-row-yellow-text:   #ffe082;
    --omp-row-green-bg:      rgba(102,187,106,0.18);
    --omp-row-green-text:    #a5d6a7;
    --omp-row-blue-bg:       rgba(66,165,245,0.18);
    --omp-row-blue-text:     #90caf9;
    --omp-row-clearblue-bg:  rgba(66,165,245,0.12);
    --omp-row-clearblue-text:#81d4fa;
    --omp-row-grey-bg:       rgba(255,255,255,0.06);
    --omp-row-grey-text:     #cfcfcf;
    --omp-row-orange-bg:     rgba(255,167,38,0.18);
    --omp-row-orange-text:   #ffcc80;
}
body[class*="-dark"] .seqc-commande-realisee-bg,
body[class*="_dark"] .seqc-commande-realisee-bg {
    background-color: rgba(46,125,50,0.22);
    box-shadow: inset 4px 0 0 0 #66bb6a;
}

/* =====================================================
   Phase 1 — Global resets & page background
   ===================================================== */
body,
body .ui-widget,
body .ui-widget input,
body .ui-widget select,
body .ui-widget textarea,
body .ui-widget button,
body .layout-wrapper,
body .layout-topbar,
body .layout-sidebar,
body .ui-datatable,
body .ui-accordion,
body .ui-panel,
body .ui-dialog,
body .ui-menubar,
body .ui-steps,
body .ui-tabview,
.ui-selectonemenu-panel,
.ui-autocomplete-panel,
div.ui-datepicker {
    font-family: var(--omp-font-family) !important;
}
body {
    background-color: var(--omp-bg-page);
    color: var(--omp-text-primary);
    line-height: var(--omp-line-height);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'liga' 1, 'calt' 1;
    overflow-x: hidden;
}
html {
    overflow-x: hidden;
}

/* =====================================================
   Phase 1 — Unified button system (.omp-btn)
   ===================================================== */
.omp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-size: var(--omp-font-sm);
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background var(--omp-transition), border-color var(--omp-transition), color var(--omp-transition), box-shadow var(--omp-transition);
    text-decoration: none;
    white-space: nowrap;
}

.omp-btn:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.omp-btn:disabled,
.omp-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Primary -- action principale : plein couleur du theme, graisse et ombre
   pour qu'elle ressorte clairement (cf. mantra UI, sans hardcoder la couleur) */
.omp-btn--primary {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--primary-color-text, var(--omp-text-inverse));
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(var(--primary-color-rgb, 33,150,243), 0.25);
}
.omp-btn--primary:hover {
    filter: brightness(0.9);
    box-shadow: 0 2px 6px rgba(var(--primary-color-rgb, 33,150,243), 0.35);
}

/* Secondary */
.omp-btn--secondary {
    background: var(--surface-200, #eee);
    border-color: var(--surface-300, #e0e0e0);
    color: var(--text-color, #424242);
}
.omp-btn--secondary:hover {
    background: var(--surface-300, #e0e0e0);
    border-color: var(--surface-400, #bdbdbd);
}

/* Outline */
.omp-btn--outline {
    background: transparent;
    border-color: var(--primary-color);
    color: var(--primary-color);
}
.omp-btn--outline:hover {
    background: var(--primary-color);
    color: var(--primary-color-text, var(--omp-text-inverse));
}

/* Sur les boutons PrimeFaces, les themes Ultima stylent via
   "body .ui-button..." (plus specifique qu'une simple classe omp-btn--*) :
   selon le theme utilisateur, nos variantes etaient ecrasees (bouton
   Valider blanc au lieu de primary). Companions a specificite superieure. */
body .ui-button.omp-btn--primary,
body .ui-button.omp-btn--primary.ui-state-default,
body .ui-button.omp-btn--primary:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--primary-color-text, var(--omp-text-inverse));
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(var(--primary-color-rgb, 33,150,243), 0.25);
}
body .ui-button.omp-btn--danger,
body .ui-button.omp-btn--danger.ui-state-default,
body .ui-button.omp-btn--danger:hover {
    background: var(--omp-danger);
    border-color: var(--omp-danger);
    color: var(--omp-text-inverse);
}
body .ui-button.omp-btn--outline,
body .ui-button.omp-btn--outline.ui-state-default {
    background: var(--omp-bg-card);
    border-color: var(--primary-color);
    color: var(--primary-color);
}
body .ui-button.omp-btn--outline:hover {
    background: var(--primary-color);
    color: var(--primary-color-text, var(--omp-text-inverse));
}
body .ui-button.omp-btn--secondary,
body .ui-button.omp-btn--secondary.ui-state-default {
    background: var(--surface-200, var(--omp-bg-section));
    border-color: var(--surface-300, var(--omp-border-medium));
    color: var(--text-color, var(--omp-text-primary));
}

/* Boutons PF habilles omp-btn : icone regroupee avec le texte (les themes
   Ultima positionnent l'icone en absolu au bord gauche -> icone collee au
   bord et texte decentre, ex. bouton Ajouter de l'admin) */
body .ui-button.omp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: auto;
}
body .ui-button.omp-btn .ui-icon,
body .ui-button.omp-btn [class*="ui-button-icon"] {
    position: static;
    margin: 0;
    transform: none;
}
body .ui-button.omp-btn .ui-button-text {
    padding: 0;
}

/* Danger */
.omp-btn--danger {
    background: var(--omp-danger);
    border-color: var(--omp-danger);
    color: var(--omp-text-inverse);
}
.omp-btn--danger:hover {
    filter: brightness(0.9);
}

/* Ghost */
.omp-btn--ghost {
    background: transparent;
    border-color: transparent;
    color: var(--primary-color);
}
.omp-btn--ghost:hover {
    background: var(--omp-hover-overlay);
}

/* Size modifiers */
.omp-btn--sm {
    padding: 0.3rem 0.7rem;
    font-size: var(--omp-font-xs);
}
.omp-btn--lg {
    padding: 0.65rem 1.4rem;
    font-size: var(--omp-font-md);
}

/* =====================================================
   Phase 1 — Section header (.omp-section-header)
   Replaces .customTitleBar pattern
   ===================================================== */
.omp-section-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: var(--omp-space-sm);
    margin-bottom: var(--omp-space-md);
    border-bottom: 2px solid var(--omp-border-light);
}

.omp-section-header i,
.omp-section-header .pi {
    color: var(--primary-color);
    font-size: var(--omp-font-lg);
}

.omp-section-header span,
.omp-section-header h3,
.omp-section-header h4 {
    font-weight: 600;
    font-size: var(--omp-font-lg);
    color: var(--omp-text-primary);
    margin: 0;
}

/* =====================================================
   Phase 1 — Focus ring global
   ===================================================== */
.ui-inputfield:focus,
.ui-inputfield.ui-state-focus,
.ui-selectonemenu.ui-state-focus,
.ui-autocomplete-input:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 1px;
    transition: outline var(--omp-transition);
}

/* =====================================================
   Phase 1 — Transitions globales
   ===================================================== */
.ui-button,
a.p-button,
.ui-menuitem-link {
    transition: background var(--omp-transition), border-color var(--omp-transition), color var(--omp-transition), box-shadow var(--omp-transition);
}

/* =====================================================
   Phase 1 — Content fade-in (micro-animation)
   ===================================================== */
@keyframes omp-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.layout-content {
    animation: omp-fade-in 150ms ease-out;
}

/* Phase 4 — Steps/suivi modernisé v2 */
body .ui-steps {
    padding: 1rem 0;
    position: relative;
}

body .ui-steps .ui-steps-item {
    flex: 1;
    position: relative;
}

/* Ligne connectrice entre les steps */
body .ui-steps::before {
    content: '';
    position: absolute;
    top: calc(1rem + 1.125rem);
    left: 0;
    right: 0;
    height: 2px;
    background: var(--omp-border-light);
    z-index: 0;
}

/* Numéro du step — base */
body .ui-steps .ui-steps-item .ui-steps-number {
    width: 2.25rem;
    height: 2.25rem;
    line-height: 2.25rem;
    font-size: var(--omp-font-sm);
    font-weight: 600;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    transition: all var(--omp-transition);
}

/* Step actif */
.ui-steps .ui-steps-item.ui-state-highlight .ui-steps-number {
    background: var(--primary-color) !important;
    color: var(--primary-color-text, var(--omp-text-inverse)) !important;
    box-shadow: 0 0 0 4px rgba(var(--primary-color-rgb, 33,150,243), 0.15);
    transform: scale(1.1);
}

.ui-steps .ui-steps-item.ui-state-highlight .ui-steps-title {
    color: var(--primary-color) !important;
    font-weight: 600;
}

/* Step passe (avant l'etape active) — vert success */
.ui-steps .ui-steps-item.ui-state-default .ui-steps-number {
    background: var(--omp-success, #4caf50) !important;
    color: var(--omp-text-inverse) !important;
    border: none;
}

/* Steps futurs = tous les items APRES l'etape active (combinateur ~) :
   PrimeFaces marque ui-state-default sur TOUT le non-actif, le DOM ne
   distingue pas fait/futur — seule la position par rapport a l'actif
   (ui-state-highlight) le permet. */
.ui-steps .ui-steps-item.ui-state-highlight ~ .ui-steps-item .ui-steps-number {
    background: var(--omp-bg-section, #f5f5f5) !important;
    color: var(--omp-text-muted) !important;
    border: 2px solid var(--omp-border-light);
}

/* Titre sous chaque step */
.ui-steps .ui-steps-item .ui-menuitem-link .ui-steps-title {
    white-space: pre-line;
    display: block;
    margin-top: 0.5rem;
    text-align: center;
    font-size: var(--omp-font-xs);
    color: var(--omp-text-secondary);
    line-height: 1.2;
}

/* Lien cliquable — pas de soulignement */
body .ui-steps .ui-steps-item .ui-menuitem-link {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.layout-wrapper .topbar-left .bdd {
    display: inline-block;
    vertical-align: center;
    text-align: center;
    max-width: 200px;
    width: 100%;
    height: 30px;
    color: var(--omp-danger); }

.pf-disabled {
    opacity: 0.5; /* Réduit l'opacité */
    pointer-events: none; /* Désactive les évènements de souris */
    /* Autres styles de votre choix */
}


.omp-disabled {
	opacity: 0.5 !important;
}
/* mes commandes */
.panelNoBorder, .panelNoBorder tr, .panelNoBorder td {
	border: hidden !important;
	border-color: white !important;
	box-shadow: none !important;
	/*background-color: #f7f7f7  !important;*/
}

.top-alignment {
	vertical-align: top;
}

/* Phase 3 — Row colors — pastels accessibles (WCAG AA contrast) */
body .ui-datatable tr.lightRedRow,
tr.lightRedRow,
td.lightRedRow {
    background-color: var(--omp-row-red-bg);
    color: var(--omp-row-red-text);
}

body .ui-datatable tr.lightYellowRow,
tr.lightYellowRow,
td.lightYellowRow {
    background-color: var(--omp-row-yellow-bg);
    color: var(--omp-row-yellow-text);
}

body .ui-datatable tr.lightGreenRow,
tr.lightGreenRow,
td.lightGreenRow {
    background-color: var(--omp-row-green-bg);
    color: var(--omp-row-green-text);
}

body .ui-datatable tr.lightWhiteRow,
tr.lightWhiteRow,
td.lightWhiteRow {
    background-color: var(--omp-bg-card);
    color: var(--omp-text-primary);
}

body .ui-datatable tr.lightBlueRow,
tr.lightBlueRow,
td.lightBlueRow {
    background-color: var(--omp-row-blue-bg);
    color: var(--omp-row-blue-text);
}

body .ui-datatable tr.lightClearBlueRow,
tr.lightClearBlueRow,
td.lightClearBlueRow {
    background-color: var(--omp-row-clearblue-bg);
    color: var(--omp-row-clearblue-text);
}

body .ui-datatable tr.lightGreyRow,
tr.lightGreyRow,
td.lightGreyRow {
    background-color: var(--omp-row-grey-bg);
    color: var(--omp-row-grey-text);
}

body .ui-datatable tr.lightOrangeRow,
tr.lightOrangeRow,
td.lightOrangeRow {
    background-color: var(--omp-row-orange-bg);
    color: var(--omp-row-orange-text);
}

/* La couleur de statut est posee sur le TR, mais le striping pair/impair du theme
   colore le TD (qui recouvre le TR) -> les lignes paires perdaient leur couleur et ne
   correspondaient plus a la legende. On applique donc la couleur de statut sur les
   cellules (TD), avec une specificite qui bat le striping SANS !important, et en
   excluant les etats survol/selection pour qu'ils restent visibles. */
body .ui-datatable tbody tr.lightRedRow:not(.ui-state-highlight):not(.ui-state-hover) > td       { background-color: var(--omp-row-red-bg); }
body .ui-datatable tbody tr.lightYellowRow:not(.ui-state-highlight):not(.ui-state-hover) > td    { background-color: var(--omp-row-yellow-bg); }
body .ui-datatable tbody tr.lightGreenRow:not(.ui-state-highlight):not(.ui-state-hover) > td     { background-color: var(--omp-row-green-bg); }
body .ui-datatable tbody tr.lightWhiteRow:not(.ui-state-highlight):not(.ui-state-hover) > td     { background-color: var(--omp-bg-card); }
body .ui-datatable tbody tr.lightBlueRow:not(.ui-state-highlight):not(.ui-state-hover) > td      { background-color: var(--omp-row-blue-bg); }
body .ui-datatable tbody tr.lightClearBlueRow:not(.ui-state-highlight):not(.ui-state-hover) > td { background-color: var(--omp-row-clearblue-bg); }
body .ui-datatable tbody tr.lightGreyRow:not(.ui-state-highlight):not(.ui-state-hover) > td      { background-color: var(--omp-row-grey-bg); }
body .ui-datatable tbody tr.lightOrangeRow:not(.ui-state-highlight):not(.ui-state-hover) > td    { background-color: var(--omp-row-orange-bg); }

/* Pourcentage */
.zero-percent {
	width: 0%;
}

.two-percent {
	width: 2%;
}

.four-percent {
	width: 4% !important;
}

.five-percent {
	width: 5%;
}

.six-percent {
	width: 6%;
}

.ten-percent {
	width: 10%;
}

.fifteen-percent {
	width: 15%;
}

.twenty-percent {
	width: 20%;
}

.thirty-percent {
	width: 30%;
}

.thirtyfive-percent {
	width: 35%;
}

.forty-percent {
	width: 40%;
}

.fortyfive-percent {
	width: 45%;
}

.fifty-percent {
	width: 50%;
}

.fiftyfive-percent {
	width: 55%;
}

.sixty-percent {
	width: 60%;
}

.sixtyfive-percent {
	width: 65%;
}

.seventy-percent {
	width: 70%;
}

.seventyfive-percent {
	width: 75%;
}

.eighty-percent {
	width: 80%;
}

.eightyfive-percent {
	width: 85%;
}

.ninety-percent {
	width: 90%;
}

.ninetyfive-percent {
	width: 95%;
}

.hundred-percent {
	width: 100%;
}

.hundredtwenty-percent {
	width: 120%;
}

/* .top-alignment doublon supprimé — défini l.320 */

.ui-carousel .ui-carousel-viewport ul {
	width: auto !important;
}

body.layout-compact .ui-datatable .ui-datatable-header {
	padding: 0px 14px !important;
}

body .ui-datatable .ui-datatable-header {
	padding: 0px 14px !important;
}

/* (supprime — unifie dans Phase 10 pagination) */

/* panel */
body .ui-widget-content {
	border: none;
}

body .ui-accordion .ui-accordion-content, body.layout-compact .ui-accordion .ui-accordion-content
	{
	padding: 0;
	margin: 0;
}

/* =====================================================
   Phase 3 — Accordion headers modernisés
   ===================================================== */
body .ui-accordion .ui-accordion-header {
    /* Entete de recherche/section : teinte de marque Sinari fondue depuis la
       gauche (--sn-surface-light) -> presence discrete mais identitaire. */
    background: linear-gradient(to right,
                var(--sn-surface-light, #F0F2FF) 0,
                var(--omp-bg-card) 55%) !important;
    color: var(--omp-text-primary) !important;
    border: none !important;
    border-left: 3px solid var(--primary-color) !important;
    border-bottom: 1px solid var(--omp-border-light) !important;
    border-radius: 0 !important;
    padding: 0.7rem 1rem;
    margin-top: 0 !important;
}

/* Icone de tete (loupe "Criteres", liste "Resultats") en couleur de marque.
   Le chevron de pli est un .ui-icon (non cible) ; seul l'icone de titre est .pi. */
body .ui-accordion .ui-accordion-header .pi {
    color: var(--sn-primary, var(--primary-color)) !important;
    font-size: var(--omp-font-lg);
}

body .ui-accordion .ui-accordion-header:hover a,
body .ui-accordion .ui-accordion-header:not(.ui-state-active):hover a {
    color: var(--primary-color) !important;
}

body .ui-accordion .ui-accordion-header.ui-state-hover {
    background: var(--omp-bg-card) !important;
}

body .ui-accordion .ui-accordion-header.ui-state-active {
    border-left-width: 3px !important;
    border-left-color: var(--primary-color) !important;
    background: var(--omp-bg-card) !important;
}

body .ui-accordion .ui-accordion-header a {
    color: var(--omp-text-primary) !important;
    font-weight: 600;
    font-size: var(--omp-font-sm);
}

body .ui-accordion .ui-accordion-header .ui-icon {
    color: var(--omp-text-secondary) !important;
}

/* =====================================================
   Phase 3 — Panel titlebars modernisés
   ===================================================== */

/* barre titre panel — style moderne */
.customTitleBar .ui-panel-titlebar {
    background: var(--omp-bg-section) !important;
    border: none !important;
    border-bottom: 1px solid var(--omp-border-light) !important;
}

body .ui-datagrid .ui-panel .ui-panel-titlebar .ui-panel-title {
    color: var(--omp-text-primary);
    font-weight: 600;
    font-size: var(--omp-font-sm);
}

.ui-panel-titlebar, .ui-widget-header {
    min-height: 25px !important;
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem !important;
}

.ui-panel-titlebar, .layout-main .ui-accordion .ui-accordion-header {
    background: var(--omp-bg-section);
    min-height: 25px;
    display: flex;
    align-items: center;
    border-radius: 0 !important;
}

/* Panel titlebar — texte lisible */
.ui-panel .ui-panel-titlebar {
    font-size: var(--omp-font-sm);
    font-weight: 600;
    color: var(--omp-text-primary);
    letter-spacing: 0.03em;
    border-bottom: 1px solid var(--omp-border-light);
}

/* Panel basicDetail — card avec bordure uniforme */
#basicDetail.customTitleBar {
    border: 1px solid var(--omp-border-light);
    border-radius: var(--omp-card-radius);
    overflow: hidden;
    box-shadow: none;
}

/* Accordions — contour card global */
body .ui-accordion {
    border: 1px solid var(--omp-border-light);
    border-radius: var(--omp-card-radius);
    overflow: hidden;
}

/* Espacement uniforme entre les grandes sections du detail */
#formAllTrjt,
#formAllPtlg {
    margin-top: var(--omp-space-md);
}

.ui-panel .ui-panel-titlebar .ui-panel-title {
    color: var(--omp-text-primary);
}

.header-colonnes-excel {
	min-height: 25px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	border-radius: 0 !important;
}
.table-with-excel-header > .ui-datatable-header.ui-widget-header {
padding: 0;
min-height: 0!important;

}
/* supprime: ancien positionnement absolu header-colonnes-excel — utiliser flexbox (l.1407) */

.parcours {
	padding-right: 1em;
	font-weight: normal;
}

/* .padding-left input, */
.padding-left {
	padding-left: 25px !important;
}
/* pagination */
.ui-widget-header.ui-paginator {
	display: block;
}
/* inputs */
/* body .ui-inputfield.hasDatepicker:focus + button {
border:1px solid red;
} */
/* Body & input text — texte principal sombre, pas gris (#757575 legacy) */
body, input {
    color: var(--omp-text-primary);
}

/* Éléments qui doivent rester en texte secondaire (préserve le comportement legacy) */
body .ui-datatable-footer,
body .ui-paginator,
body .ui-panel-footer {
    color: var(--omp-text-secondary);
}

/* Phase 3 — Inputs modernisés */
body .ui-inputfield {
    background: var(--omp-bg-card);
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--omp-border-medium);
    border-radius: 4px;
    box-sizing: border-box;
    text-align: left;
    font-size: var(--omp-font-sm);
    height: var(--omp-input-height);
    transition: border-color var(--omp-transition), box-shadow var(--omp-transition);
}

/* Hauteur uniforme : datepicker, calendar, autocomplete, selectOneMenu */
body .ui-calendar {
    display: inline-flex !important;
    align-items: stretch;
    vertical-align: middle;
    height: var(--omp-input-height);
    box-sizing: border-box;
}
body .ui-autocomplete,
body .ui-selectonemenu {
    height: var(--omp-input-height);
    box-sizing: border-box;
}
body .ui-autocomplete .ui-inputfield {
    height: 100%;
}
body .ui-datepicker-trigger {
    width: var(--omp-input-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body .ui-inputfield.ui-state-focus {
    background: var(--omp-bg-card);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb, 33,150,243), 0.15);
    padding: 0.55rem 0.65rem;
}
/*  body .ui-button { */
/* 	box-shadow: none!important; */
/* }  */
input.ui-state-focus {
	color: #000;
}

body.layout-compact .ui-panel .ui-panel-titlebar .ui-panel-titlebar-icon
	{
	top: 0;
	left: 0;
	margin: 0;
	width: 20px;
	height: 20px;
}


/* select */
body.layout-compact .ui-selectonemenu .ui-selectonemenu-trigger {
	width: auto;
	height: auto;
	margin: 0;
	top: 0;
}

body.layout-compact .ui-selectonemenu .ui-selectonemenu-trigger .ui-icon
	{
	margin: 0;
}

.ui-selectonemenu .ui-selectonemenu-trigger {
    top: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    background: rgba(0, 0, 0, 0.025);
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Phase 3 — SelectOneMenu modernisé */
body .ui-selectonemenu {
    border: 1px solid var(--omp-border-medium);
    border-radius: 4px;
    transition: border-color var(--omp-transition);
}
body .ui-selectonemenu.ui-state-focus {
    border-color: var(--primary-color);
}

body .ui-selectonemenu .ui-selectonemenu-label.ui-inputfield {
    font-size: var(--omp-font-sm);
    padding: 0.4rem 0.65rem;
    line-height: 1.4;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

body.layout-compact .ui-selectonemenu .ui-selectonemenu-trigger {
	width: 28px !important;
}

body .ui-inputfield.ui-state-disabled {
    padding: 0.55rem 0.65rem !important;
}

/* Styles communs */
.width-100 {
	width: 100%;
}
/* icones dans ui-datatable-header */
.ui-datatable-header {
	position: relative;
}

.ui-autocomplete-input {
	position: relative;
}

/* Phase 3 — Border-radius doux (sans !important pour laisser les composants groupés gérer) */
body .ui-corner-all, body .ui-corner-top {
    border-radius: 4px;
}

/* Préserver les coins droits sur les boutons groupés / selectOneButton */
body .ui-selectonebutton .ui-button,
body .ui-buttonset .ui-button {
    border-radius: 0;
}
body .ui-selectonebutton .ui-button:first-child,
body .ui-buttonset .ui-button:first-child {
    border-radius: 4px 0 0 4px;
}
body .ui-selectonebutton .ui-button:last-child,
body .ui-buttonset .ui-button:last-child {
    border-radius: 0 4px 4px 0;
}

/* =====================================================
   Toggles selectBooleanButton / selectOneButton : l'option
   SELECTIONNEE prend la couleur du theme au lieu du gris
   ui-state-active par defaut Ultima (peu visible -> on ne
   distingue pas le choix actif). Theme-bound : suit la
   couleur primaire choisie dans le parametrage.
   ===================================================== */
body .ui-selectbooleanbutton.ui-button.ui-state-active,
body .ui-selectbooleanbutton .ui-button.ui-state-active,
body .ui-selectonebutton .ui-button.ui-state-active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--primary-color-text, var(--omp-text-inverse));
}
body .ui-selectbooleanbutton.ui-button.ui-state-active .ui-icon,
body .ui-selectbooleanbutton.ui-button.ui-state-active .ui-button-text,
body .ui-selectbooleanbutton .ui-button.ui-state-active .ui-icon,
body .ui-selectbooleanbutton .ui-button.ui-state-active .ui-button-text,
body .ui-selectonebutton .ui-button.ui-state-active .ui-icon,
body .ui-selectonebutton .ui-button.ui-state-active .ui-button-text {
    color: var(--primary-color-text, var(--omp-text-inverse));
}
body .ui-selectbooleanbutton.ui-button.ui-state-active:hover,
body .ui-selectbooleanbutton .ui-button.ui-state-active:hover,
body .ui-selectonebutton .ui-button.ui-state-active:hover {
    filter: brightness(0.92);
}
/* btn excel */

.btn-excel {
 	float: none;
	margin: 0 5px;
}

.btn-excel img {
	vertical-align: middle;
}

#togglerOrtrDyn {
	float: none;
}

.header-colonnes-excel button {
	width: auto !important;
}

/* opacity */
body .ui-state-disabled {
	opacity: 0.9;
}

/* Checkbox */
body.layout-compact .ui-radiobutton .ui-radiobutton-box .ui-radiobutton-icon
	{
	left: 50% !important;
	top: 50% !important;
	transform: translate(-50%, -50%);
	width: 8px;
	height: 8px;
}

/* suivi commandes */
body div[data-widget=widget_ortrDetail_monsuivi] ul[role="tablist"] {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

body div[data-widget=widget_ortrDetail_monsuivi] ul[role="tablist"] li {
	float: none;
	flex: 1 1 auto;
}

/* Phase 4 — Panneau carte GPS modernisé */
#parcours .customTitleBar .ui-panel-titlebar {
    position: relative;
    transition: background var(--omp-transition);
    background: var(--omp-bg-section) !important;
    border-radius: var(--omp-card-radius) var(--omp-card-radius) 0 0;
}

#parcours .customTitleBar .ui-panel-titlebar:hover {
    background: var(--omp-border-medium) !important;
}
/* Espacement entre titre et bouton Parcours dans le header */
#parcours .customTitleBar .ui-panel-titlebar > span,
#parcours .customTitleBar .ui-panel-titlebar > .ui-button {
    margin-right: 0.75rem;
}

#parcours .ui-panel-title {
	order: 1;
}

#parcours .ui-panel-titlebar-icon {
	order: 0;
	float: none;
	position: static;
}

#parcours .ui-panel-titlebar-icon:hover {
	background: transparent !important;
}

#parcours .ui-panel-titlebar-icon:before {
	content: '';
	display: block;
	width: 100%;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
}

#parcours .ui-button {
	position: relative;
	z-index: 2;
}

#parcours .ui-icon.ui-icon-plusthick::before {
	content: '\e901';
}

#parcours .ui-icon.ui-icon-minusthick::before {
	content: '\e902';
}

@media screen and (max-width:1200px) {
	body div[data-widget=widget_ortrDetail_monsuivi] ul[role="tablist"] {
		/* flex-direction: column; */
		flex-wrap: wrap;
		justify-content: center;
	}
	body div[data-widget=widget_ortrDetail_monsuivi] ul[role="tablist"] li {
		flex: 0 0 auto;
		width: auto;
		/* flex: 1 1 100%;
	width: 100%; */
	}
	body div[data-widget=widget_ortrDetail_monsuivi] ul[role="tablist"] li a
		{
		/* width: 100%; */

	}
}

#ortrDetail {
	margin-top: var(--omp-space-md);
}

/* =====================================================
   Phase 4 — Sticky header redesign
   ===================================================== */
body.layout-compact #entete .card {
    margin-bottom: 0;
}

#entete .customcard {
    padding: 0.4rem 0.75rem;
    background: var(--omp-bg-card);
    border-bottom: 2px solid var(--omp-border-light);
}

#entete .customcard .flexbox {
    display: flex;
    flex-wrap: wrap;
    /* Actions (Editions/Valider/Dupliquer/...) alignées à droite : contrôle
       radio/selectOneButton à gauche, actions à droite -> barre équilibrée et
       cohérente entre détail commande et détail voyage. */
    justify-content: flex-end;
    gap: var(--omp-space-sm);
    align-items: center;
}

#entete button, #entete .ui-menubutton {
    display: inline-flex;
    align-items: center;
    width: auto;
    min-width: auto;
    margin: 0.2rem;
    border-radius: 4px;
    font-size: var(--omp-font-sm);
    font-weight: 500;
    transition: background var(--omp-transition), box-shadow var(--omp-transition);
}

#entete button:hover:not(:disabled) {
    box-shadow: var(--omp-shadow-sm);
}

#entete .ui-menubutton button {
    min-width: auto;
    margin: 0;
}

#entete  .ui-selectoneradio .ui-grid-row .ui-grid-col-6 {
	min-height: 30px;
	margin: 7px 0;
	display: flex;
	align-items: center;
}

/* (debug supprimé) */

/* legende couleurs commandes */
.nombre-commande {
	padding-bottom: 7px;
}

.nombre-facture {
	padding-bottom: 7px;
}

.nombre-extrausers {
	padding-bottom: 7px;
}

.legendeCouleursTable, body .ui-datatable .legendeCouleursTable tbody tr td
	{
	border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.legendeCouleursTable tr {
	display: flex;
}

.legendeCouleursTable td {
	flex: 1 1 11%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: all var(--omp-transition);
}

.legendeCouleursTable td:hover {
	flex: 0 0 25%;
}


.legendeCouleursTableFacture.ui-panelgrid>*>tr,
.legendeCouleursTableFacture.ui-panelgrid .ui-panelgrid-cell {
    border: none;
}
/* =====================================================
   Phase 4 — Séquences redesign
   ===================================================== */
.sequencesflex>div>div.ui-grid-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--omp-grid-gap);
    justify-content: space-between;
}

.sequencesflex>div>div.ui-grid-row>div {
    flex: 1 1 calc(50% - var(--omp-grid-gap));
}

/* Chaque séquence dans une card individuelle */
.sequencesflex .ui-panel {
    background: var(--omp-bg-card);
    border: 1px solid var(--omp-border-light);
    border-radius: var(--omp-card-radius);
    box-shadow: var(--omp-shadow-sm);
    margin-bottom: var(--omp-space-sm);
    overflow: hidden;
}

/* Header séquence — discret, fond gris clair */
.sequencesflex .ui-panel .ui-panel-titlebar {
    background: var(--omp-bg-section) !important;
    border-bottom: 1px solid var(--omp-border-light) !important;
    padding: 0.4rem 0.75rem !important;
    min-height: auto !important;
}

.sequencesflex .ui-panel .ui-panel-titlebar .ui-panel-title {
    font-size: var(--omp-font-sm) !important;
    font-weight: 600;
    color: var(--omp-text-primary);
}

/* Contenu séquence — padding compact */
.sequencesflex .ui-panel-content {
    padding: var(--omp-space-sm) 0.75rem !important;
}

/* Dashboard */
#dashboard-logo-user {
display: flex;

}
#dashboard-logo-user .logo-user {
flex: 1 1 45%;
display: flex;
align-items: center;
}
#dashboard-logo-user .logo-user img {
	display: inline-block;
	width: 100%;
}


/* Voyages */
.flex-breakline {
	flex: 0 0 100%;
	height: 0;
}
.voyage-detail-panel > .ui-panel-content {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.voyage-detail-panel .ui-panel-content > .ui-widget-content {
flex: 0 0 49%;
box-sizing: border-box;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.voyage-detail-panel .ui-panel-content > .ui-widget-content > .ui-widget-content {
flex: 0 0 100%;
box-sizing: border-box;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.voyage-detail-panel .ui-panel-content > .ui-widget-content > .ui-widget-content .voyage-detail-label {
flex: 0 0 30%;
box-sizing: border-box;
padding-right: 14px;
}
.voyage-detail-panel .ui-panel-content > .ui-widget-content > .ui-widget-content .voyage-detail-input {
flex: 1 1 70%;
margin: 0;
padding:0;
width: 70%;
}

/* =====================================================
   En-tete voyage (basicDetail) : grille 5 lignes.
   Ligne 1 : 3x col-4 (N° Voyage, Ref interne, Distance).
   Lignes 2-5 : 2x col-6 (paires ref/valeur).
   col-4 = label interne UNIQUEMENT (17rem) ; les col-4 et col-6
   de la grille externe retrouvent leur largeur PrimeFaces via
   le media query desktop.
   ===================================================== */
.voyage-detail-panel .col-4 .col-4,
.voyage-detail-panel .col-6 .col-4 {
    flex: 0 0 17rem;
    width: 17rem;
}
.voyage-detail-panel .col-8 {
    flex: 1 1 auto;
    width: auto;
}
.voyage-detail-panel .voyage-detail-input .ui-inputtext,
.voyage-detail-panel .voyage-detail-input .ui-autocomplete,
.voyage-detail-panel .voyage-detail-input .ui-selectonemenu {
    max-width: 24rem;
}
/* sm:col-12 ecrase les col-4/col-6 de la grille externe sur toutes les tailles.
   On retablit les proportions a partir de lg (desktop). */
@media (min-width: 992px) {
    .voyage-detail-panel .ui-panel-content .grid > .col-4 {
        flex: 0 0 33.33%;
        max-width: 33.33%;
        width: 33.33%;
    }
    .voyage-detail-panel .ui-panel-content .grid > .col-6 {
        flex: 0 0 50%;
        max-width: 50%;
        width: 50%;
    }
}
/* Icones map-pin en debut de libelle d'en-tete : retirees (bruit visuel). */
.voyage-detail-panel .voyage-detail-label .pi {
    display: none;
}

/* Voyage Exploite */
.messequencescommandeaafficher .enteteCmd {
	width: 100%;
}
.messequencescommandeaafficher .enteteCmd tbody {
width: 100%;
}
.messequencescommandeaafficher .enteteCmd td {
padding: 8px 14px;
}
/* 15+35+15+35 = 100% : les colonnes valeurs finissent a 50% et 100%,
   alignees sur les deux blocs Chargement/Livraison en dessous
   (16+35 x2 = 102% -> la table debordait et desalignait tout) */
.messequencescommandeaafficher .enteteCmd td:nth-child(1n) {
width: 15%;
}
.messequencescommandeaafficher .enteteCmd td:nth-child(2n) {
padding: 0 14px 0 0;
width: 35%;
}

/* Detail voyage : pour un voyage commande, le panel "tournee" (et inversement) est
   rendu mais son dataGrid interne ne l'est pas -> .ui-panel-content vide qui laisse
   une barre residuelle (regle de theme sur le dernier enfant du panel). On replie le
   contenu vide. :empty ne matche que le panel non applicable, jamais celui qui porte
   les sequences. */
[id$="messequencestourneeaafficher_content"]:empty,
[id$="messequencescommandeaafficher_content"]:empty {
	display: none;
}

/* List Voyage sequences */
.voyage-list-sequence {
}
.voyage-list-sequence > .ui-grid > .ui-grid-row > .ui-datagrid-column {
	border: 1px solid var(--omp-border-medium);
	padding:  0;
	margin-bottom: 14px;
}
.voyage-list-sequence > .ui-grid > .ui-grid-row > .ui-datagrid-column:first-child {
	margin-right: 14px;
	width: calc(50%-14px);
}
.voyage-list-sequence > .ui-grid > .ui-grid-row > .ui-datagrid-column .ui-panel-content {
	padding: 14px!important;
}
.voyage-list-sequence > .ui-grid > .ui-grid-row > .ui-datagrid-column .ui-panel-content table,
.voyage-list-sequence > .ui-grid > .ui-grid-row > .ui-datagrid-column .ui-panel-content table tbody {
	width: 100%;
}


/* Sequence realisée */
.sequence-realisee {
}
.sequence-realisee td:first-child {
	width: 30px;
}
/* Sequence adresse */
.sequence-adresse {
	margin: 14px 0;
	font-style: italic;
}
/* Sequence date */
.sequence-date {
}
.sequence-date td:nth-child(2n) {
	padding-left: 14px;
}
.sequence-date td:nth-child(3) {
	padding-left: 14px;
}
/* Sequence Quantite */
.sequence-qty,
.sequence-litige,
.sequence-upload  {
	background: var(--omp-bg-card);
	margin-bottom: var(--omp-space-xs);
}

/* Litige */
.sequence-litige,
.sequence-litige tbody {
	width: 100%;
}
.sequence-litige td:first-child  {
	width: 100%;
}
.sequence-litige td:last-child  {
	width: 30px;
}
/* Files */
.sequence-list-file,
.sequence-list-file tbody,
.sequence-list-file tr,
.sequence-list-file tbody tr > td{
width: 100%;
display: block;
}
.sequence-list-file .ui-grid {
}
.sequence-list-file .ui-datagrid-column {
	padding:0;
	flex: 0 0 100%;
}


/* Liste fichiers d'une sequence : chaque fichier est un h:panelGrid (table) distinct.
   Colonnes fixes -> nom / type / bouton alignes d'une ligne a l'autre. */
/* La table fichier prend toute la largeur de sa colonne : sinon elle se reduit a
   son contenu et la liste deroulante se cale juste apres le nom (position variable
   d'une ligne a l'autre). Pleine largeur -> le nom occupe l'espace restant et la
   deroulante reste alignee a droite. */
.list-files {
width: 100%;
}
.list-files  tbody tr {
display: flex;
flex-wrap: nowrap;
width: 100%;
align-items: center;
gap: 0.5rem;
}
/* Layout CONSTANT d'une ligne fichier : [nom flexible] [liste deroulante fixe] [supprimer].
   - td nom : NE PAS utiliser word-break:break-word (combine a min-width:0 en flex, il ramene
     la min-content a 1 caractere -> nom long empile 1 car/ligne, regression 21/06). On utilise
     overflow-wrap:anywhere (coupe seulement si besoin, sans ecraser la cellule) + flex:1 1 auto
     (le nom prend la largeur restante et reste a gauche).
   - PAS de flex-wrap : la deroulante reste TOUJOURS a droite, alignee d'une ligne a l'autre
     (sinon rendu incoherent : tantot dessous, tantot a cote). */
.list-files  tbody tr > td:nth-child(1) {
flex: 1 1 auto;
width: auto;
min-width: 0;
overflow-wrap: anywhere;
word-break: normal;
}
.list-files  tbody tr > td:nth-child(2) {
flex: 0 0 12rem;
width: auto;
}
.list-files  tbody tr > td:nth-child(2) .ui-selectonemenu {
width: 100%;
}
.list-files  tbody tr > td:nth-child(3) {
flex: 0 0 auto;
width: auto;
}
/* Garde-fou global : un nom de fichier long sans espace ne doit JAMAIS se
   casser caractere-par-caractere, quelle que soit la zone (toutes les listes
   de fichiers / uploads du detail commande ET voyage). */
.seqc-note-blue,
.seqc-note-orange,
.seqc-note-grey {
overflow-wrap: anywhere;
word-break: normal;
}
/* upload */
.sequence-upload,
.sequence-upload tr  {
	display: flex;
	width: 100%;
}
.sequence-upload .ui-fileupload-buttonbar {
	background: transparent!important;
	border: none!important;
}

/* Responsive .voyage-panel-detail */
@media screen and (max-width:640px) {

	.voyage-detail-panel .ui-panel-content > .ui-widget-content,
	.voyage-detail-panel .ui-panel-content > .ui-widget-content > .ui-widget-content .voyage-detail-label,
	.voyage-detail-panel .ui-panel-content > .ui-widget-content > .ui-widget-content .voyage-detail-input {
	flex: 0 0 100%;
	width: 100%;
	}


}


/* Admin */
#btn-add-wrapper {
	text-align: right;
}
body .ui-button.admin-btn-add {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-width: auto;
	width: auto !important;
	padding: 0.5rem 1rem;
	font-size: var(--omp-font-sm);
}
.table-full-width {
	width: 100%;
}
.table-full-width td:nth-child(even) {
	padding-right: 30px;
}
/* =====================================================
   Phase 7 — Admin contrôles cohérents
   ===================================================== */

/* selectBooleanButton dans admin : même largeur que selectOneButton */
.admin-flexbox-grid > li div.ui-selectbooleanbutton {
    flex: 0 1 150px;
    width: 150px;
    box-sizing: border-box;
}

/* Tous les boutons toggle dans admin : même apparence */
.admin-flexbox-grid .ui-selectbooleanbutton .ui-button,
.admin-flexbox-grid .equal-buttons .ui-button {
    min-width: 0;
    flex: 1 1 0;
    justify-content: center;
    text-align: center;
    font-size: var(--omp-font-sm);
    padding: 0.4rem 0.5rem;
}

/* Classe admin-button orpheline — la définir pour isCreateurOt */
.admin-button {
    width: 150px;
}

/* Phase 7 — Admin footer modernisé */
.admin-user-footer {
    text-align: center;
    border-top: 1px solid var(--omp-border-light);
    padding: var(--omp-space-lg) 0;
}
.admin-user-footer button {
margin: 0 0.2rem;
width: auto;
max-width: 150px;
}
.admin-user-footer button:first-child {
margin-left:0;
}
.admin-user-footer button:last-child {
margin-right:0;
}
.table-center {
	width: auto;
	margin: 0 auto;
}




ul.admin-flexbox-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	list-style-type: none;
}
.admin-flexbox-grid > li {
	margin-bottom: 20px;
	display: flex;
	justify-content: flex-start;
}
.admin-flexbox-grid > li > img {
	max-width:400px;
	width: auto;
	display: block;
	height: auto;
	max-height: 250px;
	margin: 0 auto;
}
.flexbox-2 > li {
	flex: 1 1 45%;
	flex-wrap: wrap;
}
.flexbox-3 > li {
	flex: 0 0 30%;
}
.flex-align-middle {
	align-items: center;
}
/* Grille CSS pour alignement des lignes (les labels wrappent différemment) */
ul#admin-bool {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 1rem;
    justify-content: unset;
}
ul#admin-bool > li {
    flex: none !important;
}
#admin-general {
	justify-content: flex-start;
}
#admin-bool .ui-inputtext,
#admin-general .ui-inputtext {
	max-width: 150px!important;
}




/* logos */
.bloc-logos,
.bloc-logos-boutons {
display: flex;
justify-content: space-between;
}
.bloc-logos > div,
.bloc-logos-boutons > div {
	flex: 0 0 45%;
}

.bloc-logos > div > img {
	display: block;
	margin: 10px auto;
	width: 90%;
	max-width: 200px;
}
.logo-boutons  {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
.bloc-logos-boutons .ui-button {
flex: 0 1 150px;
width: 150px ;
	box-sizing: border-box;
}

.bloc-logos-boutons .ui-fileupload-content {
    display: none !important;
}



.admin-flexbox-grid > li > label {
flex: 0 0 40%;
padding-right: 10px;
}
.admin-logo > li   {
 justify-content: space-between;
}
.admin-logo > li > .logo-buttons  {
 flex: 0 0 100%;
 justify-content: center;
 display: flex;
 flex-wrap: wrap;
}
.admin-flexbox-grid > li input,
.admin-flexbox-grid > li div.ui-selectbooleanbutton,
.admin-flexbox-grid > li label + *,
.admin-flexbox-grid .logo-buttons .ui-button {
	flex: 0 1 150px;
	width: 150px ;
	box-sizing: border-box;

}
.btn-logo-delete {
	margin-left:0;
}
body .admin-logo .ui-widget-header.ui-fileupload-buttonbar {
	background: none;
	border: none;
	padding:0!important;
	width: 150px ;
}
body .admin-logo .ui-fileupload-content {
	height: 0;
}
body .ui-tabs .ui-tabs-nav {
	flex-wrap: wrap;
}


.input-alarm .ui-icon-calendar::before {
	content: "alarm";
}






@media screen and (max-width:1100px) {

    ul#admin-bool {
        grid-template-columns: 1fr !important;
    }

	.admin-flexbox-grid > li {
		flex: 0 0 100%;
	}
	.admin-flexbox-grid > .logo-buttons {
	flex: 1 1 100%;
	min-width: none;
	max-width: none;
	}

	/* logo 1 en 1e position */
	.admin-flexbox-grid > li:nth-child(1) {
	order: 1;
	}
	/* boutons logo 1 en 2e position */
	.admin-flexbox-grid > li:nth-child(3) {
	order: 2;
	}
	/* logo 2 en 3e position */
	.admin-flexbox-grid > li:nth-child(2) {
	order: 3;
	}
	/* boutons logo 2 en 4e position */
	.admin-flexbox-grid > li:nth-child(4) {
	order: 4;
	}
}

@media screen and (max-width:640px) {

.admin-flexbox-grid > li {
	flex-wrap: wrap;
}
.admin-flexbox-grid > li > label,
.admin-flexbox-grid > li > input,
.admin-flexbox-grid > li > div.ui-selectbooleanbutton,
.admin-flexbox-grid > li > label + * {
	flex:0 0 100%;
}
body .ui-tabs .ui-tabs-nav li {
	flex: 0 0 100%;
}


.bloc-logos > div,
.bloc-logos-boutons > div {
	flex: 0 0 45%;
	flex-wrap: nowrap;
}
.bloc-logos-boutons {
	flex-wrap: nowrap!important;
}
.logo-boutons {
	flex-wrap: wrap!important;
}

.bloc-logos-boutons .ui-button,
.admin-user-footer.ui-fluid .ui-button ,
.admin-user-footer.ui-fluid .ui-button,
body .admin-logo .ui-widget-header.ui-fileupload-buttonbar ,
.btn-logo-delete {
	width: 105px!important ;
}
.bloc-logos-boutons .ui-button {
	width: 105px;
	flex: 0 0 105px;
	}
}



@media screen and (max-width:1100px) {
	#entete .col-6.lg:col-3.md:col-6, #entete .sm:col-12.lg:col-9.md:col-12 {
		padding: 0;
	}
	#entete  .ui-selectoneradio .ui-grid-row .ui-grid-col-6 {
		margin: 0 7px;
	}
	body .ui-steps .ui-steps-item .ui-menuitem-link .ui-steps-title {
		display: none;
	}

	/* panelGrid 4 colonnes → 2 colonnes (label + valeur) sur tablette */
	#ortrDetail .ui-panelgrid-blank .ten-percent,
	#ortrDetail .ui-panelgrid-blank .forty-percent {
		min-width: unset;
	}
	#ortrDetail .ui-panelgrid-blank > .ui-grid > .ui-grid-row > .ui-panelgrid-cell.ten-percent {
		width: 20% !important;
	}
	#ortrDetail .ui-panelgrid-blank > .ui-grid > .ui-grid-row > .ui-panelgrid-cell.forty-percent {
		width: 30% !important;
	}
}

@media screen and (max-width:640px) {
	.sequencesflex>div>div.ui-grid-row>div {
		flex: 1 1 100%;
	}
	#entete .col-6 {
		width: 100%;
	}
	#entete .col-6.lg:col-3.md:col-6, #entete .sm:col-12.lg:col-9.md:col-12 {
		padding: 0;
	}
	#entete  .ui-selectoneradio .ui-grid-row {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	#entete  .ui-selectoneradio .ui-grid-row .ui-grid-col-6 {
		width: auto;
		min-height: none;
		margin: 0 7px;
		min-width: 45%;
	}
}

@media screen and (max-width:540px) {
	#entete button, #entete .ui-menubutton {
		min-width: 45%;
	}
	#entete .ui-menubutton button {
		min-width: 100%;
	}
}
@media screen and (max-width:410px) {
	div.ui-paginator-top {
	text-align: left;
	padding-right: 120px;
	}
}

@media screen and (max-width:360px) {
	#entete button, #entete .ui-menubutton {
		min-width: 90%;
	}
	#entete .ui-menubutton button {
		min-width: 100%;
	}
}

.layout-wrapper .layout-main {
    /* 30px -> 6px : reduit la bande vide sous le footer (copyright) signalee
       comme "trop haute" en bas des pages detail. */
    padding-bottom: 6px;
    overflow-x: hidden;
    max-width: 100vw;
}

/* Fix troncature contenu par la sidebar + anti-scroll horizontal */
.layout-wrapper .layout-main .layout-content {
    overflow-x: hidden;
    overflow-y: visible;
    min-width: 0;
    max-width: 100%;
    background-color: var(--omp-bg-page);
}

/* (supprime — centrage icone datepicker geré dans le bloc global datepicker) */

.equal-buttons .ui-button {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    white-space: normal;
    text-align: center;
}

.equal-buttons {
    display: flex !important;
 }

body .ui-datagrid .ui-datagrid-content {
    border:none
}

.mes-voyages-fileupload .ui-fileupload-content {
    display: none !important;
}

.mes-voyages-fileupload .ui-fileupload-buttonbar{
    border: none !important;
}

/* =====================================================
   Dashboard
   ===================================================== */
/* Phase 6 — Dashboard welcome card */
.dashboard-welcome-card {
    position: relative;
    border-left: 4px solid var(--primary-color);
    border-radius: var(--omp-card-radius);
    box-shadow: var(--omp-shadow-sm);
}

.dashboard-logo-panel {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.dashboard-logo-panel .ui-panel-content {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

.dashboard-logo-img {
    display: block;
    max-width: 160px;
    max-height: 80px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Badge "dernière connexion" dans le welcome card — top-right absolu */
.omp-dashboard-last-login {
    position: absolute;
    top: 0.6rem;
    right: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--omp-font-xs);
    color: var(--omp-text-secondary);
    background: var(--omp-bg-section);
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--omp-border-light);
    white-space: nowrap;
    z-index: 1;
}

.omp-dashboard-last-login .pi {
    font-size: var(--omp-font-xs);
    color: var(--omp-text-muted);
    margin-right: 0.15rem;
}

.omp-dashboard-last-login-text {
    display: inline-flex;
    gap: 0.35rem;
}

@media screen and (max-width: 575px) {
    /* Mobile : repasse en flow normal pour ne pas recouvrir le greeting */
    .omp-dashboard-last-login {
        position: static;
        margin: 0 0 0.75rem auto;
    }
}

@media screen and (max-width: 768px) {
    .dashboard-logo-img {
        max-width: 100px;
        max-height: 60px;
    }

    /* Dashboard — graphiques empilés sur mobile */
    .omp-chart,
    div.col-4.flex.flex-column,
    div.col-8.flex.flex-column {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* =====================================================
   Phase 2 — Topbar modernisée
   ===================================================== */

/* Topbar : hauteur réduite, fond propre */
.layout-topbar {
    height: var(--omp-topbar-height) !important;
    min-height: var(--omp-topbar-height) !important;
    box-shadow: var(--omp-shadow-sm) !important;
}

/* Logo — voir Phase 10 pour la version finale */

/* Action buttons (icônes palette, cog, logout) — espacement uniforme */
.layout-topbar-items {
    gap: var(--omp-space-xs);
}

.layout-topbar-action {
    width: 36px !important;
    height: 36px !important;
    transition: background var(--omp-transition), transform var(--omp-transition);
}

.layout-topbar-action:hover {
    background: var(--omp-hover-overlay);
    transform: scale(1.05);
}

/* Dropdown panels — ombre modernisée */
.layout-topbar-action-panel {
    box-shadow: var(--omp-shadow-md) !important;
    border-radius: var(--omp-card-radius) !important;
    border: 1px solid var(--omp-border-light) !important;
    overflow: hidden;
}

/* Growl du layout (confirmation "Sauvegarder le parametrage") : .layout-topbar
   cree un contexte d'empilement a z-index:1100, donc tout le sous-arbre topbar
   (dont .layout-topbar-action-panel, le menu engrenage) est globalement a 1100.
   PrimeFaces pose un z-index INLINE sur le growl (~1002 via nextZindex), inferieur
   -> le growl passait DERRIERE le panneau. Un z-index inline ne se surcharge qu'avec
   !important (la specificite ne suffit pas). 1200 !important le ramene devant le
   topbar, sans toucher aux fonds/couleurs. */
body .ui-growl {
    z-index: 1200 !important;
}

.layout-topbar-action-item {
    transition: background var(--omp-transition);
}

.layout-topbar-action-item:hover {
    background: var(--omp-bg-section) !important;
}

/* =====================================================
   Phase 2 — Sidebar menu modernisé
   ===================================================== */

/* Active state : bande latérale + fond teinté */
.layout-menu-wrapper .ui-menuitem.ui-state-active > .ui-menuitem-link,
.layout-menu-wrapper .ui-menuitem-link.ui-state-active {
    border-left: 3px solid var(--primary-color) !important;
    background: rgba(var(--primary-color-rgb, 33,150,243), 0.08) !important;
}

/* Item du menu correspondant a l'ecran courant : marqueur pose par
   omp-active-menu.js (URL-based). Le rendu PrimeFaces de pu:menu utilise
   .active-menuitem-routerlink sur le <a>, pas .ui-menuitem-link -> on cible
   directement le lien marque. Detail -> item parent (cf. JS). */
.layout-menu-wrapper a.omp-menu-active {
    border-left: 3px solid var(--primary-color) !important;
    background: rgba(var(--primary-color-rgb, 33,150,243), 0.08) !important;
    font-weight: 600;
}

/* Hover : transition douce */
.layout-menu-wrapper .ui-menuitem-link {
    transition: background var(--omp-transition), border-color var(--omp-transition), padding-left var(--omp-transition);
    border-left: 3px solid transparent;
}

.layout-menu-wrapper .ui-menuitem-link:hover {
    background: var(--omp-bg-section) !important;
    border-left-color: var(--omp-border-medium);
}

/* Icônes menu : taille uniforme */
.layout-menu-wrapper .ui-menuitem-link .pi {
    font-size: var(--omp-font-lg);
    width: 1.5rem;
    text-align: center;
}

/* Dark mode — le menu latéral suit le thème sombre. La CSS layout Ultima
   (layout-menu-dark) ne dark-ifie pas le wrapper de façon fiable selon l'état
   chargé : on force le fond et le texte via le hook body[class*="-dark"]
   (classe omp-dark), comme pour la recherche / sticky / entêtes. */
body[class*="-dark"] .layout-menu-wrapper,
body[class*="-dark"] .layout-menu-container {
    background: var(--omp-bg-card);
}
body[class*="-dark"] .layout-menu-wrapper .ui-menuitem-link,
body[class*="-dark"] .layout-menu-wrapper .ui-menuitem-link .pi,
body[class*="-dark"] .layout-menu-wrapper .layout-root-menuitem > a {
    color: var(--omp-text-primary);
}

/* =====================================================
   Phase 2 — AJAX status modernisé (spinner CSS)
   ===================================================== */
@keyframes omp-spin {
    to { transform: rotate(360deg); }
}

.omp-ajax-status .pi-spinner,
.omp-ajax-status img {
    animation: omp-spin 0.8s linear infinite;
}

@media screen and (max-width: 991px) {
    .topbar-logo-label {
        display: none;
    }

    /* Sticky header — boutons moins larges sur tablette */
    #entete button, #entete .ui-menubutton {
        min-width: 15%;
    }

    /* Accordéon de recherche — boutons pleine largeur sur tablette */
    #entete .sm\:col-12 .p-button,
    #entete .sm\:col-12 button {
        width: 100%;
    }

    /* Chart — contrôles wrappables sur tablette */
    .chart-controls {
        flex-wrap: wrap;
    }

    /* DatePicker tablette large : s'adapte à la colonne */
    span.ui-datepicker {
        width: 100% !important;
    }
    span.ui-datepicker > input.ui-inputfield {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
    }
}

/* =====================================================
   Boutons actions rapides (p:link stylés p-button)
   ===================================================== */
a.p-button {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    padding: 0.4rem 0.9rem;
    border-radius: var(--border-radius, 4px);
    font-size: var(--omp-font-sm);
    transition: background-color var(--omp-transition), border-color var(--omp-transition), color var(--omp-transition);
    cursor: pointer;
}

a.p-button.p-button-outlined {
    background: transparent;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
}

a.p-button.p-button-outlined:hover {
    background: var(--primary-color);
    color: var(--primary-color-text, var(--omp-text-inverse));
}

a.p-button:not(.p-button-outlined) {
    background: var(--primary-color);
    border: 1px solid var(--primary-color);
    color: var(--primary-color-text, var(--omp-text-inverse));
}

a.p-button:not(.p-button-outlined):hover {
    background: var(--primary-600, var(--primary-color));
    filter: brightness(0.9);
}

/* =====================================================
   Classes utilitaires legacy (core-layout / anciennes pages)
   Refactored to use design tokens v2
   ===================================================== */

/* Couleurs — mapped to tokens */
.softgray,
.softgrey  { color: var(--omp-text-secondary); }
.red       { color: var(--omp-danger); }
.leaden    { color: var(--omp-text-secondary); }

/* Tailles de police — kept for legacy, prefer tokens */
.Fs12 { font-size: var(--omp-font-xs); }
.Fs18 { font-size: var(--omp-font-lg); }
.Fs20 { font-size: var(--omp-font-lg); }
.Fs24 { font-size: var(--omp-font-xl); }

/* Police */
.FontBold    { font-weight: 600; }

/* Espaceurs — use spacing tokens */
.EmptyBox5  { display: block; height: var(--omp-space-xs); }

/* Largeurs */
.Container100, .Responsive100 { width: 100%; max-width: 100%; }
.Wid100 { width: 100%; }

/* Display */
.DispInlBlock { display: inline-block; }

/* Flottants (legacy — préférer PrimeFlex) */
.Fleft  { float: left; }
.Fright { float: right; }

/* Marges (legacy) */
.MarTop10   { margin-top: 10px; }
.MarLeft10  { margin-left: 10px; }
.MarRight20 { margin-right: 20px; }

/* Alignement */
.TexVAlTop    { vertical-align: top; }


/* =====================================================
   En-tête sticky des pages de détail
   ===================================================== */
#entete.ui-shadow {
    box-shadow: var(--omp-shadow-md) !important;
}

#entete .card.customcard {
    padding: 0.5rem 1rem;
    margin-bottom: 0;
}

#entete .flexbox {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

#entete .flexbox .ui-button {
    width: auto;
    min-width: 8rem;
}

/* =====================================================
   Grille label / valeur dans les détails
   ===================================================== */
.detail-field-label {
    font-size: var(--omp-font-xs);
    color: var(--omp-text-secondary);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.15rem;
}

.detail-field-value {
    font-size: var(--omp-font-md);
    color: var(--omp-text-primary);
    font-weight: 400;
}

/* softgray comme label de champ */
.softgray.voyage-detail-label,
.softgray.voyage-detail-label * {
    font-size: var(--omp-font-xs);
    color: var(--omp-text-secondary);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* =====================================================
   mesVehiculesDedies : egaliser hauteur panels Tracteur / Plage de date
   (applique uniquement aux col contenant un ui-panel, pas au col-12 actions)
   ===================================================== */
#formVehiculesDedies > .grid > [class*="col-"]:has(> .ui-panel) {
    display: flex;
}
#formVehiculesDedies > .grid > [class*="col-"] > .ui-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
}
#formVehiculesDedies > .grid > [class*="col-"] > .ui-panel > .ui-panel-content {
    flex: 1;
}

/* =====================================================
   Facet title (tabs + accordion) : gap icone/texte
   Les .pi sont enfants directs du header (pas via <a>).
   ===================================================== */
.ui-accordion-header .pi,
.ui-tabs-header .pi,
.ui-tabs-anchor .pi {
    margin-right: 0.5rem;
    display: inline-block;
}

/* =====================================================
   Phase 5 — DataTable enterprise polish v2
   ===================================================== */
/* Zebrage uniquement sur les lignes SANS classe de statut (light*Row) :
   le fond des classes statut est porte par le TR, un fond TD le masquerait
   une ligne sur deux (couleurs metier perdues).
   Striping par la classe stable .ui-datatable-even (posee par ligne de donnees),
   PAS par nth-child : sinon une ligne d'expansion (.ui-expanded-row-content)
   inseree dans le DOM decale la parite -> les lignes en dessous changent de
   couleur a l'ouverture du detail ("clignotement"). */
.ui-datatable.ui-datatable-striped tbody tr.ui-datatable-even:not([class*="Row"]) td {
    background: var(--surface-50, rgba(0,0,0,0.015));
}
.ui-datatable tbody td {
    padding: 0.65rem 0.5rem;
    font-size: var(--omp-font-sm);
    color: var(--text-color, var(--omp-text-primary));
}
.ui-datatable thead th {
    position: relative;
    font-weight: 700;
    font-size: var(--omp-font-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--omp-text-secondary);
    background: var(--omp-bg-section);
    border-bottom: 2px solid var(--omp-border-medium);
    padding: 0.6rem 0.75rem;
    white-space: nowrap;
    overflow: visible;
}
/* Poignee de resize colonne : z-index au-dessus du header pour eviter
   que draggableColumns n'intercepte le mousedown avant le resizer. */
.ui-datatable .ui-column-resizer {
    z-index: 2;
    pointer-events: all !important;
}
.ui-datatable tbody td,
.ui-datatable thead th {
    border-color: var(--omp-border-light);
}
/* Grilles allegees : bordures horizontales uniquement (les verticales
   donnent un rendu "tableur" charge, cf. retour admin/listes) */
.ui-datatable > .ui-datatable-tablewrapper > table > thead > tr > th {
    border-width: 0 0 2px 0;
}
.ui-datatable > .ui-datatable-tablewrapper > table > tbody > tr > td {
    border-width: 0 0 1px 0;
}
.ui-datatable .ui-expanded-row-content td {
    background: var(--omp-bg-section);
    border-left: 3px solid var(--primary-color);
}
/* Row expansion : scroll horizontal si contenu deborde */
.ui-datatable .ui-expanded-row-content .ui-panelgrid,
.ui-datatable .ui-expanded-row-content > td > div {
    overflow-x: auto;
    max-width: 100%;
}

/* Hover sur ligne */
.ui-datatable tbody tr:hover td {
    background: rgba(var(--primary-color-rgb, 33,150,243), 0.04);
}

/* Ligne selectionnee : teinte de marque Sinari + accent lateral primary.
   La selection prime sur la couleur metier (light*Row exclut deja
   .ui-state-highlight) -> selection toujours lisible et identitaire. */
body .ui-datatable tbody tr.ui-state-highlight > td {
    background-color: var(--sn-surface-light, #F0F2FF) !important;
    color: var(--omp-text-primary) !important;
}
body .ui-datatable tbody tr.ui-state-highlight > td:first-child {
    box-shadow: inset 3px 0 0 0 var(--sn-primary, var(--primary-color));
}

/* =====================================================
   Grilles -- finition pro "Equilibre" (choix utilisateur).
   CONTRAINTE : ne touche PAS aux fonds de ligne metier (classes
   light*Row / legende couleurs) ni au zebrage. Uniquement entete,
   cadre et chiffres -> les codes couleur metier sont preserves.
   ===================================================== */
/* Filet primaire sous l'entete : signature branded Sinari (--primary-color
   vient du theme -> violet Sinari). */
.ui-datatable thead th {
    border-bottom-color: var(--primary-color);
}
/* Cadre discret autour de la grille : rendu encadre, plus pro. */
.ui-datatable > .ui-datatable-tablewrapper {
    border: 1px solid var(--omp-border-light);
    border-radius: var(--omp-card-radius);
    box-shadow: var(--omp-shadow-sm);
}
/* Chiffres a largeur constante : alignement visuel des colonnes de
   montants/quantites. Ne change AUCUNE couleur. */
.ui-datatable tbody td {
    font-variant-numeric: tabular-nums;
}
/* Colonne numerique : ajouter styleClass="omp-num" sur les p:column de
   montants/quantites pour les aligner a droite (n'affecte aucun fond). */
.ui-datatable .omp-num {
    text-align: right;
}

/* =====================================================
   Badges de statut -- marque Sinari (DS section 6.7 Chips, niveau Container)
   Pastille "pill", fond teinte clair + texte semantique fonce, Roboto 12px.
   i18n-safe : la classe de severite vient du CODE statut (controleur
   getStatutClass), jamais du libelle traduit. Rendu via styleClass sur le
   h:outputText -> <span class="omp-badge omp-badge--xxx">Libelle</span>.
   ===================================================== */
.omp-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 100px;
    font-family: var(--sn-font-primary);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
    border: 1px solid transparent;
}
.omp-badge--success { background: var(--sn-badge-success-bg); color: var(--sn-success-dark);    border-color: var(--sn-badge-success-border); }
.omp-badge--warning { background: var(--sn-badge-warning-bg); color: var(--omp-status-warning-text); border-color: var(--sn-badge-warning-border); }
.omp-badge--danger  { background: var(--sn-badge-danger-bg);  color: var(--sn-error-alt);       border-color: var(--sn-badge-danger-border); }
.omp-badge--info    { background: var(--sn-badge-info-bg);    color: var(--sn-info);            border-color: var(--sn-badge-info-border); }
.omp-badge--neutral { background: var(--sn-badge-neutral-bg); color: var(--sn-text-secondary);  border-color: var(--sn-badge-neutral-border); }
.omp-badge--primary { background: var(--sn-surface-light); color: var(--sn-primary-dark); border-color: var(--sn-badge-primary-border); }

/* =====================================================
   DataTable : pas de scroll horizontal par defaut.
   table-layout:fixed repartit les colonnes equitablement tant qu'aucune
   largeur inline n'est posee. Le resize utilisateur (PrimeFaces) pose un
   style="width:Xpx" INLINE sans !important : on ne doit donc PAS forcer
   width:auto !important sur th/td, sinon le CSS gagne et fige le rendu
   (cf. regle th/td plus bas). ===================================================== */
.ui-datatable .ui-datatable-tablewrapper {
    overflow-x: auto;
    max-width: 100%;
}
/* Panneau Colonnes (columnToggler) : le widget PF force height:200px en
   style inline des que la liste depasse -> !important justifie (inline
   style, pas de surcharge possible par specificite). On laisse le scroll
   au-dela de 60vh pour les tres longues listes de colonnes. */
.ui-columntoggler {
    height: auto !important;
    max-height: min(28rem, 60vh);
    border-radius: var(--omp-card-radius);
}
/* Table sans classe en PF 14 : selecteur permissif.
   table-layout: fixed + width 100% + th a width auto = repartition
   equitable des colonnes sur la largeur disponible. Override les widths
   inline PF (style="width: Xpx") via !important. */
.ui-datatable > .ui-datatable-tablewrapper > table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100%;
    table-layout: fixed !important;
}
.ui-datatable > .ui-datatable-tablewrapper > table > thead > tr > th,
.ui-datatable > .ui-datatable-tablewrapper > table > tbody > tr > td {
    /* PAS de width:auto !important ici : PrimeFaces applique le resize de colonne
       via style="width:Xpx" INLINE SANS !important. Un width:auto !important cote
       CSS gagnait sur l'inline -> le <th> changeait dans le DOM mais le rendu
       restait fige (resize "ne s'applique pas", sans erreur JS). On laisse donc
       l'inline (defaut PF + resize utilisateur) piloter la largeur ; table-layout
       fixed (regle ci-dessus) repartit equitablement tant qu'aucune largeur inline
       n'est posee. min-width:0 / max-width:none autorisent shrink et expand. */
    min-width: 0 !important;
    max-width: none !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Pagination modernisée */
/* (supprime — unifie dans Phase 10 pagination) */

/* (supprime — unifie dans Phase 10 pagination) */

/* =====================================================
   Header colonnes / bouton Excel dans les datatables
   ===================================================== */
.header-colonnes-excel {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    padding: 0.3rem 0.5rem;
    flex-wrap: wrap;
}

.header-colonnes-excel .ui-button {
    width: auto !important;
    font-size: 0.85rem;
}

.btn-excel img {
    display: block;
}

/* =====================================================
   Formulaire de recherche (accordionPanel)
   ===================================================== */
.ui-accordion .ui-accordion-header .icon-search-2::before,
.ui-accordion .ui-accordion-header .icon-th-list-1::before {
    margin-right: 0.4rem;
}

/* Etiquettes de champ dans les formulaires de recherche */
.grid.ui-fluid .ui-outputlabel,
.grid.ui-fluid > div > .ui-outputlabel {
    display: block;
    font-size: var(--omp-font-sm);
    color: var(--omp-text-secondary);
    margin-bottom: 0.2rem;
}

/* =====================================================
   Login page
   ===================================================== */
.login-page .pages-panel.card.login-card {
    min-width: 320px;
    max-width: 420px;
    width: 90vw;
    box-shadow: var(--omp-shadow-lg);
    border-radius: var(--omp-card-radius);
    overflow: hidden;
}

.login-page .pages-header {
    background: var(--primary-color);
    color: var(--primary-color-text, var(--omp-text-inverse));
    text-align: center;
    padding: 1rem 1.5rem !important;
}

.login-page .pages-header h2 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: inherit;
}

/* #login-logo — voir définition consolidée plus bas (Phase 7) */

.login-page .input-panel {
    padding: 1rem 1.5rem;
}
/* Login — inputgroup alignement propre (addon + float-label + messages) */
.login-page .ui-inputgroup {
    display: flex;
    align-items: center;
}
.login-page .ui-inputgroup .ui-inputgroup-addon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.5rem;
    flex: 0 0 auto;
}
.login-page .ui-inputgroup .ui-float-label {
    flex: 1 1 auto;
}
.login-page .ui-inputgroup .ui-float-label .ui-inputfield {
    height: 2.5rem;
    box-sizing: border-box;
    width: 100%;
}
/* Messages de validation inline dans l'inputgroup — même hauteur */
.login-page .ui-inputgroup .ui-message {
    display: flex;
    align-items: center;
    height: 2.5rem;
    flex: 0 0 auto;
    box-sizing: border-box;
}

/* Bouton Connexion : pleine largeur DANS le padding de la carte (28px de
   chaque cote). Pas de marge laterale : la classe w-full force width:100%,
   toute marge horizontale ferait deborder le bouton a droite. */
.login-page .p-button,
.login-page .ui-button {
    width: 100%;
    margin: 0 0 1rem;
}

.login-page .login-footer {
    color: var(--omp-text-muted);
    font-size: var(--omp-font-xs);
}

/* Fond login : rendre le logo de fond discret */
.pages-body.login-page {
    background-size: 280px auto !important;
    background-position: left center !important;
    background-repeat: no-repeat !important;
}

/* Centrage de la carte de login. La chaine de parents (form en w-full -> div -> carte)
   resistait a tout centrage flex (justify-content / align-self / marges auto restaient
   sans effet). Solution definitive : positionnement FIXE au centre du viewport, donc
   independant de toute la mise en page parente. La carte est un petit formulaire -> sur. */
.pages-body.login-page .pages-panel.login-card {
    position: fixed !important;
    inset: 0 !important;
    margin: auto !important;
    width: min(90vw, 420px) !important;
    height: -moz-fit-content;
    height: fit-content !important;
    max-height: 95vh !important;
}

@media screen and (max-width: 600px) {
    .pages-body.login-page {
        background-image: none !important;
    }
}

/* =====================================================
   Légende couleurs dans les footers de datatable
   ===================================================== */
.legendeCouleur {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0;
}

.legendeCouleursTable td {
    padding: 3px 8px;
    font-size: var(--omp-font-xs);
    border-radius: 4px;
}

/* =====================================================
   btn-ville (autocomplete dans mesVoyages)
   ===================================================== */
.btn-ville {
    width: 100%;
}
.btn-ville .ui-autocomplete-input {
    width: 100% !important;
}

/* =====================================================
   Sidebar — logo client dans le menu
   ===================================================== */
.layout-menu-wrapper .profile {
    padding: 0.75rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid rgba(255,255,255,0.12);
}

.layout-menu-wrapper .profile-image img {
    max-width: 180px;
    max-height: 64px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

/* =====================================================
   Charts — contraintes de taille
   ===================================================== */
/* Charts — hauteur + centrage */
.omp-chart {
    height: 350px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.omp-chart canvas {
    cursor: pointer;
    max-width: 100%;
}

/* jqplot legend — compact, aligned, centered under chart */
.jqplot-table-legend {
    color: var(--omp-text-primary) !important;
    margin: 12px auto 0 !important;
    border-spacing: 6px 4px;
    border-collapse: separate;
}
.jqplot-table-legend td {
    padding: 2px 6px;
    vertical-align: middle;
}
.jqplot-table-legend td.jqplot-table-legend-swatch {
    width: 16px;
    padding-right: 4px;
}
.jqplot-table-legend td.jqplot-table-legend-swatch > div {
    width: 14px !important;
    height: 14px !important;
    border-radius: 3px;
}
.jqplot-table-legend td.jqplot-table-legend-label {
    white-space: nowrap;
    font-size: 0.78rem;
    line-height: 1.2;
}

/* =====================================================
   Utilitaires divers
   ===================================================== */
.omp-clear {
    clear: both;
}

.omp-no-border {
    border: none !important;
}

/* Phase 4 — Boutons +/- action séquences (header panel) */
.omp-seqc-action-btn {
    padding: 0.3rem 0.6rem !important;
    text-align: center;
    border-radius: 4px;
    font-size: var(--omp-font-sm);
    transition: background var(--omp-transition);
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    min-width: auto !important;
    vertical-align: middle;
    margin-right: 0.35rem;
}

.omp-seqc-action-btn:hover:not(:disabled) {
    filter: brightness(0.9);
}

/* Fond rayé pour séquence/commande réalisée */
/* Sequence "realisee" : marquage VISIBLE (le motif raye quasi-blanc precedent
   etait imperceptible). Fond vert clair + accent vert a gauche = la sequence
   faite se distingue immediatement des sequences en attente. */
/* La classe est posee sur le .ui-panel outer. Les fils (titlebar + content)
   ont leur propre fond Ultima -> propagation explicite requise. */
.seqc-commande-realisee-bg,
.seqc-realisee-bg {
    background-color: #e7f6ec;
    box-shadow: inset 4px 0 0 0 var(--omp-success, #2e7d32);
}
.seqc-commande-realisee-bg .ui-panel-titlebar,
.seqc-realisee-bg .ui-panel-titlebar {
    background-color: #e7f6ec !important;
    border-bottom-color: var(--omp-success) !important;
}
.seqc-commande-realisee-bg .ui-panel-content,
.seqc-realisee-bg .ui-panel-content {
    background-color: #e7f6ec !important;
}

/* =====================================================
   AJAX status indicator (fixed bottom-right)
   ===================================================== */
.omp-ajax-status {
    width: 52px;
    height: 52px;
    position: fixed;
    right: 10px;
    bottom: 10px;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* Seule l'icone est visible : a l'idle (facets complete/error vides) le conteneur
   reste transparent. Pastille blanche + ombre pour rester lisible sur tout fond. */
.omp-ajax-status .pi-spinner {
    font-size: 1.9rem;
    color: var(--primary-color);
    background: var(--surface-a, #fff);
    border-radius: 50%;
    padding: 0.5rem;
    box-shadow: var(--omp-shadow-md, 0 2px 8px rgba(0, 0, 0, 0.15));
}

/* =====================================================
   DataTable — colonne icône (toggle/rowToggler)
   ===================================================== */
.omp-col-icon {
    width: 16px;
}

/* =====================================================
   Lien téléchargement souligné
   ===================================================== */
.omp-link-underline {
    text-decoration: underline;
}

/* =====================================================
   Session timeout dialog
   ===================================================== */
.omp-countdown {
    font-weight: bold;
    margin-left: 0.25rem;
}

.omp-timeout-info {
    text-align: center;
    font-size: var(--omp-font-sm);
    color: var(--omp-text-secondary);
}

/* =====================================================
   Accordion panels — headers recherche / datatable
   ===================================================== */
/* Uniformiser la taille des icônes dans les headers accordion */
.ui-accordion .ui-accordion-header a .icon-search-2,
.ui-accordion .ui-accordion-header a .icon-th-list-1 {
    font-size: var(--omp-font-md);
    margin-right: 0.35rem;
}

/* =====================================================
   Datatable — footer (légende + count)
   ===================================================== */
.ui-datatable .ui-datatable-footer {
    font-size: var(--omp-font-sm);
    color: var(--omp-text-secondary);
    padding: 0.4rem 0.75rem;
}

/* =====================================================
   Classes utilitaires carte / layout
   ===================================================== */
/* Phase 3 — Sections secondaires (séquences, parcours) */
/* Sections secondaires (sequences, parcours) — fond section + espacement uniforme */
.leaden-back {
    background-color: var(--omp-bg-card);
    border-radius: var(--omp-card-radius);
    margin-top: var(--omp-space-md);
}

.BorBotLeaden {
    border: 1px solid var(--omp-border-light);
    border-radius: var(--omp-card-radius);
}

/* Alignement vertical des cellules dans h:panelGrid */
.alignMiddleSameHeight {
    vertical-align: middle;
}

/* Wrapper principal de l'extranet — pas de min-height pour éviter les espaces vides */
.extranet {
}

/* =====================================================
   Formulaires de recherche — hiérarchie visuelle
   ===================================================== */

/* Labels de champ dans les grilles de formulaire (pattern styleClass="block") */
.grid.ui-fluid span.block,
.grid.ui-fluid label.block,
.grid.ui-fluid .ui-outputlabel.block {
    font-size: var(--omp-font-xs);
    font-weight: 600;
    color: var(--omp-text-secondary);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 0.3rem;
    display: block;
}

/* Séparateur visuel léger entre groupes de champs */
.field-separator {
    border: none;
    border-top: 1px solid var(--surface-200, #eeeeee);
    margin: 0.25rem 0;
    width: 100%;
}

/* Boutons recherche/annuler — rangée toujours en bas */
.search-btn-row {
    display: flex;
    gap: 0.5rem;
    padding-top: 0.5rem;
}
.search-btn-row > * {
    flex: 1;
}

/* =====================================================
   Dashboard — section graphiques (label au-dessus du picker)
   ===================================================== */
.chart-controls {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.chart-date-field {
    display: inline-flex;
    flex-direction: column;
    flex: 0 0 auto;
}
.chart-date-field .ui-outputlabel {
    font-size: var(--omp-font-xs);
    font-weight: 600;
    color: var(--omp-text-secondary);
    margin-bottom: 0.25rem;
}
/* Hide empty validation message — takes space and misaligns the button */
.chart-date-field .ui-message,
.chart-date-field .ui-messages {
    display: none;
}
/* Datepicker wrapper — input + icon button inline, no wrapping */
.chart-date-field > span {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: stretch;
    line-height: 1;
    height: 2.25rem;
    max-height: 2.25rem;
    min-height: 0;
}
.chart-date-field > span > input.ui-inputfield {
    width: 120px;
    flex: 0 0 120px;
    height: 2.25rem !important;
    max-height: 2.25rem !important;
    box-sizing: border-box;
}
.chart-date-field > span > .ui-datepicker-trigger {
    flex: 0 0 auto;
    height: 2.25rem !important;
    max-height: 2.25rem !important;
    box-sizing: border-box;
}
.chart-actions {
    display: inline-flex;
    flex-direction: column;
    justify-content: flex-end;
    flex: 0 0 auto;
}
.chart-actions .ui-button {
    white-space: nowrap;
    /* Même hauteur que les inputs DatePicker pour alignement parfait */
    height: 2.25rem;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    margin: 0;
}

/* =====================================================
   Login — omp.css manquait sur cette page (ajouté dans login.xhtml)
   ===================================================== */
.login-card {
    min-width: 320px;
    max-width: 400px;
    padding: var(--omp-card-padding);
    border-radius: var(--omp-card-radius);
    box-shadow: var(--omp-shadow-md);
}

/* Selecteur a specificite (0,5,0) pour battre le teal hardcode de demo.css
   (.pages-body.login-page .pages-panel .pages-header = (0,4,0)) : bandeau
   pleine largeur, couleur primaire Sinari (coherente avec le bouton
   Connexion), flush en haut de carte sans bordure ni remontee. */
.pages-body.login-page .pages-panel.login-card .pages-header {
    background: var(--primary-color);
    color: var(--primary-color-text, var(--omp-text-inverse));
    border: none;
    border-radius: 4px 4px 0 0;
    text-align: center;
    margin: -1.5rem -1.5rem 1.5rem -1.5rem;
    padding: 0.75rem 1rem;
}

.pages-body.login-page .pages-panel.login-card .pages-header h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.1em;
}

#login-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem 0;
    margin-bottom: 0.5rem;
    min-height: 60px;
}
#login-logo a {
    display: inline-flex;
    justify-content: center;
}
#login-logo img {
    max-height: 60px;
    max-width: 200px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

/* =====================================================
   Messages — harmonisation
   ===================================================== */
.ui-messages {
    margin-top: 0.5rem;
}

/* Phase 3 — Carte de contenu avec ombre subtile */
.card {
    border-radius: var(--omp-card-radius);
    box-shadow: var(--omp-shadow-sm);
    border: 1px solid var(--omp-border-light);
}

/* =====================================================
   .input80 — champ élargi (anciennement 80%, maintenant 100% en contexte ui-fluid)
   ===================================================== */
.input80 input,
.input80.ui-inputfield {
    width: 100% !important;
}

/* =====================================================
   Sticky header des pages de détail
   ===================================================== */
.omp-sticky-header {
    background-color: var(--omp-bg-card);
    background: var(--omp-bg-card);
    z-index: 1002;
    box-shadow: var(--omp-shadow-sm);
    overflow: visible;
    position: sticky;
    /* Le scroll se fait dans .layout-content (app shell Ultima), PAS sur
       window : le scrollport commence deja sous la topbar. top: 0 cale la
       barre au bord superieur du scrollport ; un offset topbar ici la
       ferait flotter au milieu de la page en laissant le contenu defiler
       au-dessus. */
    top: 0;
    /* Pas de margin-top negatif : il tirait la barre par-dessus le haut de la
       page (la sticky "ecrasait" le contenu superieur en mode trajet type). */
    margin-top: 0;
    padding-top: 0.5rem;
    /* Garantir que le contenu derriere ne transparait pas */
    isolation: isolate;
}
/* Couvre la bande du padding-top de .layout-content au-dessus de la barre
   stuck, ou le contenu defilant transparaitrait sinon */
.omp-sticky-header::before {
    content: '';
    position: absolute;
    top: -1rem;
    left: -0.5rem;
    right: -0.5rem;
    height: 1rem;
    background: var(--omp-bg-page);
}
/* Empecher le sticky de recouvrir la topbar au scroll */
.layout-wrapper .layout-topbar {
    z-index: 1100 !important;
}

/* Toolbar detail — hauteur uniforme sur tous les éléments */
.omp-toolbar-detail.grid {
    align-items: center;
}
/* La carte toolbar porte la classe primeflex .grid (marges negatives -0.5rem) qui
   la faisait deborder de ~7px de chaque cote -> elle paraissait plus large que les
   panneaux de contenu en dessous (mesure live : toolbar 259->1419 vs contenu
   266->1412, sur detail commande ET detail voyage). On annule les marges
   horizontales pour aligner les bords de la barre sticky sur les panneaux. */
#entete .omp-toolbar-detail.grid {
    margin-left: 0;
    margin-right: 0;
}
/* Colonne selectOneButton — centré verticalement dans la toolbar */
.omp-toolbar-detail > .col-6,
.omp-toolbar-detail > [class*="col-"] {
    display: flex !important;
    align-items: center !important;
}
/* selectOneButton Trajet/Point — même hauteur que les boutons toolbar */
#entete .ui-selectonebutton {
    display: flex;
    width: 100%;
}
#entete .ui-selectonebutton .ui-button {
    flex: 1;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 2.25rem;
    font-size: var(--omp-font-sm);
    padding: 0.35rem 0.75rem;
    box-sizing: border-box;
    line-height: 1;
}
#entete .ui-selectonebutton .ui-button .ui-button-text {
    line-height: 1;
    padding: 0;
}

/* Toolbar detail — boutons harmonisés (alignement à droite porté par la règle
   plus spécifique #entete .customcard .flexbox). */
.omp-toolbar-detail .flexbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.omp-toolbar-detail .flexbox .ui-menubutton,
.omp-toolbar-detail .flexbox .ui-button {
    font-size: var(--omp-font-sm) !important;
    height: 2.25rem;
    white-space: nowrap;
    box-sizing: border-box;
}
.omp-toolbar-detail .flexbox > .ui-button {
    padding: 0.35rem 0.75rem;
}
/* p:menuButton (Editions) : PF pose la styleClass omp-btn sur le span
   wrapper ui-menubutton, pas sur le <button> interne. Pour que le bouton
   soit STRICTEMENT identique au p:commandButton Dupliquer, on neutralise
   la bordure du WRAPPER (sinon double bordure wrapper + bouton interne ->
   contour visuellement plus fonce) et on laisse le <button> interne porter
   la bordure : c'est le meme .ui-button.ui-state-default que Dupliquer,
   donc meme rendu garanti quel que soit le theme. Le chevron (hardcode
   icon-left par PF) passe a droite du texte. */
.omp-toolbar-detail .flexbox .ui-menubutton.omp-btn {
    padding: 0;
    align-items: stretch;
    border: none;
    background: transparent;
    box-shadow: none;
    flex-shrink: 0;
    width: auto;
    min-width: max-content !important;
}
.omp-toolbar-detail .flexbox .ui-menubutton.omp-btn > .ui-button {
    width: 100%;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0.35rem 0.9rem;
    box-sizing: border-box;
    white-space: nowrap !important;
}
.omp-toolbar-detail .flexbox .ui-menubutton.omp-btn > .ui-button .ui-button-text {
    order: 1;
    padding: 0;
    line-height: 1;
    color: inherit;
}
.omp-toolbar-detail .flexbox .ui-menubutton.omp-btn > .ui-button .ui-icon {
    order: 2;
    position: static;
    margin: 0;
    color: inherit;
}

/* Panneau dropdown des menuButton (Editions...) : overlay PF .ui-menu-dynamic.
   Largeur min pour eviter le retour a la ligne des libelles ("Confirmation
   d'affretement"), hover lisible, icone teintee et espacee. */
.ui-menu.ui-menu-dynamic {
    /* width:auto neutralise la largeur inline que PF calque sur le bouton
       "Editions" (etroit) : sans cela, le libelle nowrap deborde du cadre. */
    width: auto !important;
    min-width: 13rem;
    padding: 0.25rem 0;
}
.ui-menu.ui-menu-dynamic .ui-menuitem-link {
    white-space: nowrap;
    padding: 0.55rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.ui-menu.ui-menu-dynamic .ui-menuitem-link:hover {
    background: var(--sn-surface-light);
}
.ui-menu.ui-menu-dynamic .ui-menuitem-link .ui-menuitem-icon {
    position: static;
    margin: 0;
    color: var(--sn-primary);
}

/* Panels de recherche dans le detail commande — uniformes et aeres */
#formAllTrjt .grid > [class*="col-"] > .ui-panel,
#formAllPtlg .grid > [class*="col-"] > .ui-panel {
    /* width 100% indispensable : la col parente est en display:flex
       (hauteurs egales) et un enfant block a largeur auto y retrecit
       a son contenu -> panels "eclates" constates en prod */
    width: 100%;
    height: 100%;
    border: 1px solid var(--omp-border-light);
    border-radius: var(--omp-card-radius);
    box-shadow: none;
    background: var(--omp-bg-card);
}
#formAllTrjt .grid > [class*="col-"] > .ui-panel > .ui-panel-content,
#formAllPtlg .grid > [class*="col-"] > .ui-panel > .ui-panel-content {
    padding: 0.75rem;
}
#formAllTrjt .grid > [class*="col-"],
#formAllPtlg .grid > [class*="col-"] {
    display: flex;
    padding: 0.35rem;
}
/* Section headers dans les panels de recherche — plus compact */
#formAllTrjt .omp-section-header,
#formAllPtlg .omp-section-header {
    margin-bottom: 0.5rem;
    font-size: var(--omp-font-sm);
    padding-bottom: 0.35rem;
}

/* Radio inline — Precommande / Commande */
.omp-radio-inline {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.25rem 0;
}
.omp-radio-inline .ui-radiobutton {
    margin: 0;
}
/* selectOneRadio PF14 = divs (ui-grid) : items en ligne avec respiration
   entre bouton et libelle, et entre les items (sinon le 2e radio colle
   au libelle du 1er) */
.omp-radio-inline .ui-selectoneradio {
    display: inline-flex;
    align-items: center;
    gap: 1.25rem;
}
.omp-radio-inline .ui-selectoneradio > div {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}
.omp-radio-inline label {
    cursor: pointer;
    font-size: var(--omp-font-sm);
    margin: 0;
    white-space: nowrap;
}
/* Garantir que chaque item radio (bouton + label) ne se compresse pas */
.omp-radio-inline .ui-grid-col-6,
.omp-radio-inline .ui-grid-row > td {
    white-space: nowrap;
    min-width: fit-content;
}

/* Parcours / GPS section */
.omp-parcours-section {
    margin-top: var(--omp-space-md);
}
.omp-parcours-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 0.75rem;
}
.omp-parcours-header > span {
    font-size: var(--omp-font-md);
    font-weight: 600;
    white-space: nowrap;
}
.omp-parcours-header > span i {
    margin-right: 0.35rem;
    color: var(--primary-color);
}

/* =====================================================
   Filtres recherche — ligne CP + Ville + Pays (flex forcé)
   ===================================================== */
.omp-filter-row {
    display: flex;
    gap: 0.75rem;
    align-items: flex-end;
    flex-wrap: nowrap;
}
.omp-filter-cp {
    flex: 0 0 15%;
    min-width: 80px;
}
.omp-filter-ville {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}
.omp-filter-pays {
    flex: 0 0 25%;
    min-width: 100px;
}
@media (max-width: 575px) {
    .omp-filter-row { flex-wrap: wrap; }
    .omp-filter-cp, .omp-filter-ville, .omp-filter-pays { flex: 1 1 100%; }
}

/* =====================================================
   AutoComplete dropdown inline — GLOBAL (detail + sequences + filtres)
   ===================================================== */
body .ui-autocomplete {
    display: flex !important;
    align-items: stretch;
    flex-wrap: nowrap;
}
body .ui-autocomplete .ui-autocomplete-input {
    flex: 1 1 auto;
    min-width: 0;
}
body .ui-autocomplete .ui-autocomplete-dropdown {
    flex: 0 0 auto;
    width: 2.5rem;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}


/* =====================================================
   Séquences — classes pour inline styles remplacés
   ===================================================== */
/* Contenu d'une sequence (detail voyage) cale a une largeur lisible : en mode
   tournee (1 colonne pleine largeur) les champs s'etiraient et le bouton "+" des
   quantites flottait tres loin a droite (gros vide). On borne le contenu pour que
   les champs et les actions restent groupes a gauche. (commande = 2 colonnes deja
   etroites -> sans effet). */
.voyage-list-sequence .ui-panel-content {
    max-width: 820px;
}

/* Checkbox "Séquence réalisée / effectuée" (détail voyage & commande) : sous
   ui-fluid, PrimeFaces la mettait à width:100% (~950px) -> son libellé partait
   tout à droite de la ligne (effet "de traviole"). Largeur naturelle pour que
   le libellé reste collé à la case. */
[id$=":effectue"].ui-chkbox {
    width: auto;
}

/* Texte d'erreur (ex. type chargement anormal) */
.text-error-bold {
    color: var(--red-500, #e53935);
    font-weight: 600;
    font-style: italic;
}

/* En-tête statut de séquence */
.seqc-status-header {
    color: var(--omp-text-secondary);
    font-size: var(--omp-font-lg);
    font-weight: 600;
}

/* Notes de séquence colorées */
.seqc-note-orange { float: left; color: var(--omp-status-warning-text); font-style: italic; font-weight: bold; }
.seqc-note-grey   { float: left; color: var(--omp-status-muted-text); font-style: italic; font-weight: bold; }
.seqc-note-blue   { float: left; color: var(--omp-info); font-style: italic; font-weight: bold; }

/* Label centré inline dans les séquences */
.seqc-label-center {
    display: block;
    width: 100%;
    text-align: center;
}

/* =====================================================
   Detail voyage -- lignes de formulaire des sequences COMPACTES.
   Probleme : sous ui-fluid + grille primeflex (col-N en %), les paires
   label/champ (Debut/Fin/N bon) et la ligne quantites se dispersaient sur toute
   la largeur du grand ecran (champs a ~500px, "Fin" rejete a droite, gros vides).
   Solution : colonnes de champs en largeur-contenu (flex auto) -> tout se groupe
   a gauche, compact ; + champs bornes a une largeur lisible. Sur les 2 vues
   (tournee = seqcstournee, commande = voyage-list-sequence).
   Les col-11 / col-12 (lignes pleine largeur : case "realisee", adresse,
   conteneur quantites) ne sont PAS touchees. */
[id$="seqcstournee"] .grid > .col-1,
[id$="seqcstournee"] .grid > .col-2,
[id$="seqcstournee"] .grid > .col-3,
[id$="seqcstournee"] .grid > .col-4,
[id$="seqcstournee"] .grid > .col-5,
[id$="seqcstournee"] .grid > .col-6,
.voyage-list-sequence .grid > .col-1,
.voyage-list-sequence .grid > .col-2,
.voyage-list-sequence .grid > .col-3,
.voyage-list-sequence .grid > .col-4,
.voyage-list-sequence .grid > .col-5,
.voyage-list-sequence .grid > .col-6 {
    width: auto;
    flex: 0 0 auto;
}
/* Espacement regulier entre label et champ (la grille devient compacte). */
[id$="seqcstournee"] .grid,
.voyage-list-sequence .grid {
    gap: 0.35rem 0.6rem;
    align-items: center;
}
/* Champs bornes a une largeur lisible (datepickers avec trigger calendrier,
   selects, inputs). 13rem : la date "dd/MM/yyyy HH:mm" + le bouton calendrier. */
[id$="seqcstournee"] .ui-calendar,
.voyage-list-sequence .ui-calendar {
    width: 13rem;
}
[id$="seqcstournee"] .ui-selectonemenu,
.voyage-list-sequence .ui-selectonemenu {
    width: 11rem;
}
[id$="seqcstournee"] .ui-inputtext,
.voyage-list-sequence .ui-inputtext {
    max-width: 14rem;
}

/* Ligne quantité : flex row — proportions 1/3 valeur, 2/3 unité, bouton compact */
.seqc-qty-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 2px 0;
    flex-wrap: wrap;
}
/* InputNumber quantite : largeur fixe */
.seqc-qty-row .ui-inputnumber,
.seqc-qty-row .ui-spinner {
    flex: 0 0 80px;
    width: 80px !important;
    min-width: 80px;
    max-width: 80px;
}
.seqc-qty-row .ui-inputnumber input,
.seqc-qty-row .ui-spinner .ui-spinner-input {
    padding: 0.25rem 0.3rem !important;
    font-size: var(--omp-font-sm);
    text-align: center;
    width: 100% !important;
    height: 2rem;
    box-sizing: border-box;
}
/* Unite : largeur plus large pour libelles longs */
.seqc-qty-row .ui-selectonemenu {
    flex: 0 0 160px;
    width: 160px !important;
    min-width: 160px;
    max-width: 160px;
    height: 2rem;
}
.seqc-qty-row .ui-selectonemenu .ui-selectonemenu-label {
    font-size: var(--omp-font-sm);
    padding: 0 0.3rem !important;
    box-sizing: border-box;
    height: 2rem;
    line-height: 2rem;
}
.seqc-qty-row .ui-selectonemenu .ui-selectonemenu-trigger {
    width: 1.5rem;
    height: 2rem;
    box-sizing: border-box;
}
/* Label Charge/Livre : largeur fixe pour alignement uniforme */
.seqc-qty-label-group {
    flex: 1 1 auto;
    min-width: 80px;
    display: flex;
    align-items: center;
    padding-right: 0.25rem;
}
.seqc-qty-label {
    font-size: var(--omp-font-sm);
    color: var(--omp-text-secondary);
    font-style: italic;
    white-space: nowrap;
}
/* Boutons + et - (ajouter/supprimer quantite) : taille strictement identique */
body .btn-plus.ui-button,
body .btn-moins.ui-button,
body .seqc-qty-row > button.ui-button.ui-button-icon-only {
    width: var(--omp-btn-height-sm) !important;
    height: var(--omp-btn-height-sm) !important;
    min-width: var(--omp-btn-height-sm) !important;
    max-width: var(--omp-btn-height-sm) !important;
    min-height: var(--omp-btn-height-sm) !important;
    max-height: var(--omp-btn-height-sm) !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 4px;
    border: 1px solid var(--omp-border-medium);
    transition: background var(--omp-transition), border-color var(--omp-transition);
    box-sizing: border-box;
    flex-shrink: 0;
}
/* Icone centree dans les boutons +/- */
body .btn-plus.ui-button .pi,
body .btn-moins.ui-button .pi,
body .btn-plus.ui-button .ui-icon,
body .btn-moins.ui-button .ui-icon {
    position: static !important;
    margin: 0 !important;
    top: auto !important;
    left: auto !important;
    font-size: 0.85rem;
    line-height: 1;
}
body .btn-plus.ui-button .ui-button-text,
body .btn-moins.ui-button .ui-button-text {
    display: none !important;
}
.btn-plus.ui-button {
    background: var(--omp-bg-card);
    color: var(--omp-success);
}
.btn-plus.ui-button:hover:not(:disabled) {
    background: var(--omp-success-hover);
    border-color: var(--omp-success);
}
.btn-moins.ui-button {
    background: var(--omp-bg-card);
    color: var(--omp-danger);
}
.btn-moins.ui-button:hover:not(:disabled) {
    background: var(--omp-danger-hover);
    border-color: var(--omp-danger);
}
/* Bouton - dans la seqc-qty-row : ne pas grandir dans le flex */
.seqc-qty-row > .btn-moins.ui-button,
.seqc-qty-row > button.ui-button.ui-button-icon-only {
    flex: 0 0 var(--omp-btn-height-sm);
}

/* Bloc quantites + bouton "+" : le + s'aligne sur la 1ere ligne (pas de
   flottement vertical au milieu de la pile) et la grille retrecit pour
   que le + reste dans le panneau (sinon il deborde dans la gouttiere
   entre Chargement et Livraison). */
.seqc-qty-block {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}
.seqc-qty-block > .flex-1 {
    min-width: 0;
}

/* =====================================================
   Detail panelGrid 4 colonnes — meilleur espacement
   ===================================================== */

/* Labels (col 1 et 3) — largeur min pour éviter troncature */
.ui-panelgrid-blank > .ui-grid > .ui-grid-row > .ui-panelgrid-cell.ten-percent {
    width: 15% !important;
    min-width: 120px;
}
.ui-panelgrid-blank > .ui-grid > .ui-grid-row > .ui-panelgrid-cell.forty-percent {
    width: 35% !important;
}

/* Espacement vertical entre lignes du panelGrid */
#ortrDetail .ui-panelgrid-blank > .ui-grid > .ui-grid-row > .ui-panelgrid-cell {
    padding: 0.45rem 0.6rem;
}

/* AutoComplete dans le panelGrid : occuper toute la largeur dispo */
#ortrDetail .ui-panelgrid-blank .ui-autocomplete {
    display: flex !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
#ortrDetail .ui-panelgrid-blank .ui-autocomplete-input {
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
}
/* Empêcher l'autocomplete de déborder des cellules du panelGrid */
#ortrDetail .ui-panelgrid-blank .ui-panelgrid-cell {
    overflow: visible;
}
#ortrDetail .ui-panelgrid-blank .ui-autocomplete {
    overflow: hidden;
}

/* InputText/InputTextarea dans le panelGrid detail : pleine largeur */
#ortrDetail .ui-panelgrid-blank .ui-inputfield {
    width: 100% !important;
    box-sizing: border-box;
}

/* =====================================================
   Séquences — espacement interne amélioré
   ===================================================== */

/* .sequencesflex .ui-panel-content — consolidé en Phase 4 (l.993) */

/* Inputs dans les séquences : pleine largeur */
.sequencesflex .ui-inputtext,
.sequencesflex .ui-autocomplete-input {
    width: 100% !important;
}

/* Espacement entre les champs dans les séquences */
.sequencesflex .ui-panelgrid {
    margin-bottom: var(--omp-space-sm);
}

/* =====================================================
   Date pickers dans séquences — plus larges
   ===================================================== */

/* Date picker : largeur ajustee pour mieux remplir la colonne de sequence */
#commandedate .seqc-date-groups .ui-panelgrid td:first-child,
#commandedateptlg .seqc-date-groups .ui-panelgrid td:first-child {
    width: 160px;
    min-width: 130px;
}
#commandedate .seqc-date-groups .ui-panelgrid td:nth-child(2),
#commandedateptlg .seqc-date-groups .ui-panelgrid td:nth-child(2) {
    width: 100px;
    min-width: 85px;
}

/* =====================================================
   mesCommandesDetail — séquences PTLG
   ===================================================== */

/* Dropdown point logistique — ne pas tronquer, trigger inline */
#ortrDetail .ui-selectonemenu {
    min-width: 0;
    width: 100% !important;
    position: relative;
}
#ortrDetail .ui-selectonemenu .ui-selectonemenu-trigger {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
#ortrDetail .ui-selectonemenu .ui-selectonemenu-label {
    padding-right: 2.5rem;
}

/* Footer panel basicDetail : badges statut voyage (Exploite, Taxe, Facture) */
.ui-panel .ui-panel-footer .seqc-status-header {
    display: flex;
    flex-wrap: wrap;
    gap: var(--omp-space-xs);
    align-items: center;
}

/* Grille dates séquences : table imbriquée, pas de CSS pour l'alignement horizontal */
.seqc-date-grid {
    width: 100%;
    margin-bottom: 0.25rem;
}
/* Tableau externe : 2 colonnes [Début | Fin] */
.seqc-date-groups {
    width: 100%;
}
.seqc-date-groups > tbody > tr > td {
    vertical-align: top;
    padding-right: 1rem;
}
/* Tableau interne : flex row pour aligner date + heure côte à côte */
.seqc-date-groups .ui-panelgrid .ui-grid-row {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
}
.seqc-date-groups .ui-panelgrid td {
    vertical-align: middle;
    white-space: nowrap;
    padding: 0 4px 0 0;
}
/* Le datePicker remplit sa cellule */
#commandedate .ui-datepicker,
#commandedateptlg .ui-datepicker {
    width: 100% !important;
    min-width: unset !important;
}
/* Label Debut / Fin */
.seqc-date-label {
    display: block;
    white-space: nowrap;
    font-weight: 600;
    font-size: var(--omp-font-xs);
    color: var(--omp-text-secondary);
    margin-bottom: 0.15rem;
}
/* Input date/heure : pleine largeur de la cellule td (complement des regles td:first-child/nth-child) */
#commandedate .ui-inputfield,
#commandedateptlg .ui-inputfield {
    width: 100%;
    box-sizing: border-box;
}
/* Ligne Rendez-vous */
.seqc-rdv-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 100%;
    margin-top: 0.25rem;
}
.seqc-rdv-row .seqc-date-label {
    display: inline;
    flex-shrink: 0;
    margin-bottom: 0;
    line-height: 2rem;
}
.seqc-rdv-row .ui-selectonemenu {
    flex: 1 1 auto;
    min-width: 0;
}

/* =====================================================
   DataTable — ligne dépliée (mesFactures)
   ===================================================== */
div.ui-datatable table tbody tr.ui-expanded-row {
    background: var(--omp-info-hover) !important;
}

/* =====================================================
   Responsive mobile — < 576px (6.6)
   Problème : PrimeFlex sm:col-12 s'active à min-width:576px,
   donc en dessous les col-4/col-3 restent à 33 % (trop étroit).
   Correction ciblée dans les accordions de recherche.
   ===================================================== */
@media screen and (max-width: 575px) {

    /* Formulaires de recherche (accordionPanel) : 1 colonne */
    .ui-accordion .grid > .col-2,
    .ui-accordion .grid > .col-3,
    .ui-accordion .grid > .col-4,
    .ui-accordion .grid > .col-6 {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Légende couleurs : max 2 items par ligne */
    .legendeCouleursTable td {
        flex: 1 1 45%;
    }

    /* Sticky header compact */
    #entete .card.customcard {
        padding: 0.25rem 0.5rem;
    }

    /* Sticky header : col-6 en pleine largeur */
    #entete .col-6 {
        width: 100%;
    }

    /* Panels voyage-detail : empilés + colonnes internes full-width */
    .voyage-detail-panel .ui-panel-content > .ui-widget-content {
        flex: 0 0 100%;
        width: 100%;
    }
    .voyage-detail-panel .grid > .col-4,
    .voyage-detail-panel .grid > .col-6,
    .voyage-detail-panel .grid > .col-8 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Detail panelGrid 4 colonnes → empilé en mobile */
    .ui-panelgrid-blank .ui-g {
        flex-wrap: wrap;
    }
    .ui-panelgrid-blank .ui-panelgrid-cell.ten-percent,
    .ui-panelgrid-blank .ui-panelgrid-cell.forty-percent,
    .ui-panelgrid-blank .ui-panelgrid-cell.ui-g-12 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        min-width: unset !important;
        padding: 0.2rem 0.5rem !important;
    }

    /* Séquence dates : empilées en mobile */
    .seqc-date-groups > tbody > tr {
        display: flex;
        flex-wrap: wrap;
    }
    .seqc-date-groups > tbody > tr > td {
        flex: 0 0 100%;
        padding-right: 0;
        margin-bottom: 0.5rem;
    }

    /* Grilles imbriquées génériques dans détails : empiler */
    #voyaDetail .grid > .col-1,
    #voyaDetail .grid > .col-2,
    #voyaDetail .grid > .col-3,
    #voyaDetail .grid > .col-4,
    #voyaDetail .grid > .col-5,
    #voyaDetail .grid > .col-6,
    #voyaDetail .grid > .col-8,
    #voyaDetail .grid > .col-11 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* mesFactures : boutons empilés */
    #formtabRecherche .grid > .col-6 {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* DatePicker mobile : pleine largeur */
    span.ui-datepicker {
        width: 100% !important;
    }
    span.ui-datepicker > input.ui-inputfield {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
    }

    /* Dashboard chart-controls : empilés en mobile */
    .chart-controls {
        flex-wrap: wrap !important;
    }
    .chart-date-field {
        flex: 1 1 100%;
    }
    .chart-actions {
        flex: 1 1 100%;
    }
    .chart-actions .ui-button {
        width: 100%;
    }

    /* Login : inputs pleine largeur */
    .login-page .pages-panel.card.login-card {
        min-width: unset;
        width: 95vw;
    }
    .login-page .ui-inputgroup .ui-float-label .ui-inputfield {
        font-size: var(--omp-font-md);
    }
}

/* =====================================================
   Responsive tablette — 576px à 767px (6.7)
   Comble le gap entre sm: (>=576px) et md: (>=768px)
   ===================================================== */
@media screen and (min-width: 576px) and (max-width: 767px) {

    /* Formulaires recherche : colonnes étroites en pleine largeur */
    .ui-accordion .grid > .col-2,
    .ui-accordion .grid > .col-3,
    .ui-accordion .grid > .col-4 {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Panels voyage-detail : empilés + colonnes internes */
    .voyage-detail-panel .ui-panel-content > .ui-widget-content {
        flex: 0 0 100%;
        width: 100%;
    }

    /* Détail voyage : grilles label/valeur empilées */
    #voyaDetail .grid > .col-4,
    #voyaDetail .grid > .col-8 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* DatePicker tablette : inputs s'adaptent */
    span.ui-datepicker {
        width: 100% !important;
    }
    span.ui-datepicker > input.ui-inputfield {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
    }

    /* Chart controls tablette : wrap propre */
    .chart-controls {
        flex-wrap: wrap !important;
    }
    .chart-date-field {
        flex: 0 1 auto;
    }
    .chart-actions {
        flex: 0 0 auto;
    }
}


/* =====================================================
   Phase 9 — Polish global (v2.1)
   ===================================================== */

/* --- Max-width content retiré : le layout Ultima gère la largeur --- */

/* --- AutoComplete dropdown panel --- */
body .ui-autocomplete-panel {
    box-shadow: var(--omp-shadow-md);
    border-radius: 4px;
    border: 1px solid var(--omp-border-light);
    overflow: hidden;
    max-width: calc(100vw - 1rem);
    /* Panneau colle sous le champ : PF14 AutoComplete.alignPanel reinitialise
       left/top a "" (vide) AVANT position(). Sans left/top CSS, le panneau
       (position:absolute enfant de body) retombe sur sa position statique,
       et le setter jQuery.offset() calcule alors un delta errone -> panneau
       decale (~9px a gauche, ~21px en bas, chevauche le champ suivant).
       Fixer left/top a 0 fait retomber le reset sur 0 (au lieu de auto) et
       corrige le calcul. La valeur inline posee ensuite par position() prime.
       NB : ne concerne QUE l'autocomplete ; SelectOneMenu.alignPanel reset
       deja a "0px" et n'est pas impacte. */
    top: 0;
    left: 0;
}
/* Hauteur des panneaux d'autocomplete : montrer toute la liste (~11 lignes) au lieu de ~5.
   Source unique factorisee -> les p:autoComplete n'ont plus de scrollHeight inline.
   !important assume : surcharge le style max-height pose par PrimeFaces sur la liste. */
body .ui-autocomplete-panel .ui-autocomplete-items {
    max-height: 350px !important;
    overflow-y: auto !important;
}
/* --- SelectOneMenu dropdown panel --- */
body .ui-selectonemenu-panel {
    max-width: calc(100vw - 1rem);
}
body .ui-autocomplete-panel .ui-autocomplete-items .ui-autocomplete-item {
    padding: 0.5rem 0.75rem;
    font-size: var(--omp-font-sm);
    transition: background var(--omp-transition);
}
body .ui-autocomplete-panel .ui-autocomplete-items .ui-autocomplete-item.ui-state-highlight {
    background: rgba(var(--primary-color-rgb, 33,150,243), 0.1);
    color: var(--primary-color);
}

/* DatePicker : rendu interne modernise */
/* Le wrapper PrimeFaces 14 est span.ui-calendar (pas span.ui-datepicker) */
/* Dans .ui-fluid le wrapper peut recevoir width:100% -- on preserve inline-flex */
body .ui-fluid span.ui-calendar,
span.ui-calendar {
    display: inline-flex !important;
    align-items: stretch;
    vertical-align: middle;
}
td span.ui-calendar {
    vertical-align: middle;
}
/* Input date : fond blanc, bordure visible, radius gauche */
/* Dans .ui-fluid, l'input recoit width:100% via body .ui-inputtext -- on overide avec flex */
body .ui-fluid span.ui-calendar > input.ui-inputfield,
span.ui-calendar > input.ui-inputfield {
    box-sizing: border-box !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    background: var(--omp-bg-card) !important;
    border: 1px solid var(--omp-border-medium, #C8CDE9) !important;
    border-right: none !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: 6px !important;
    border-bottom-left-radius: 6px !important;
    padding: 0.5rem 0.65rem !important;
    font-size: var(--omp-font-sm) !important;
    color: var(--omp-text-primary) !important;
    height: auto !important;
    align-self: stretch !important;
    transition: border-color var(--omp-transition), box-shadow var(--omp-transition);
}
body .ui-fluid span.ui-calendar > input.ui-inputfield:focus,
span.ui-calendar > input.ui-inputfield:focus,
span.ui-calendar > input.ui-inputfield.ui-state-focus {
    outline: none !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 2px rgba(72, 32, 205, 0.15) !important;
    background: var(--omp-bg-card) !important;
}
/* Bouton trigger : fond primary Sinari, icone blanche, hauteur alignee */
/* body .ui-fluid .ui-button { width: 100% } et body .ui-calendar .ui-button-icon-only { width: 2.75rem }
   imposent leur largeur -- on surcharge avec specificite superieure */
body .ui-fluid span.ui-calendar > button.ui-datepicker-trigger.ui-button,
body span.ui-calendar > button.ui-datepicker-trigger.ui-button,
span.ui-calendar > button.ui-datepicker-trigger {
    flex: 0 0 2.25rem !important;
    width: 2.25rem !important;
    min-width: 2.25rem !important;
    height: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    align-self: stretch !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    overflow: hidden;
    background: var(--primary-color) !important;
    border: 1px solid var(--primary-color) !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
    cursor: pointer;
    transition: background var(--omp-transition), border-color var(--omp-transition);
}
body .ui-fluid span.ui-calendar > button.ui-datepicker-trigger.ui-button:hover,
body span.ui-calendar > button.ui-datepicker-trigger.ui-button:hover {
    background: var(--omp-primary-hover) !important;
    border-color: var(--omp-primary-hover) !important;
}
/* Icone calendrier : blanche, statique, taille coherente.
   margin: 0 obligatoire -- Ultima centre l'icone en absolu avec des marges
   negatives (-.5em) qui, une fois en position static, decalent l'icone. */
span.ui-calendar > button.ui-datepicker-trigger .pi,
span.ui-calendar > button.ui-datepicker-trigger .ui-icon,
span.ui-calendar > button.ui-datepicker-trigger .ui-button-icon-left {
    color: var(--omp-text-inverse) !important;
    font-size: var(--omp-font-sm) !important;
    position: static !important;
    transform: none !important;
    margin: 0 !important;
}

/* --- DatePicker : panel popup modernise ---
   PF14 : la racine du panel est div.ui-datepicker (il n'existe PAS de
   classe ui-datepicker-panel). Avec monthNavigator/yearNavigator, le
   titre contient select.ui-datepicker-month et input.ui-datepicker-year. */
body div.ui-datepicker.ui-widget {
    box-shadow: var(--omp-shadow-lg);
    border-radius: var(--omp-card-radius);
    border: 1px solid var(--omp-border-light);
    overflow: hidden;
    padding: 0;
    font-family: var(--omp-font-family);
    font-size: var(--omp-font-sm);
    background: var(--omp-bg-card);
}
/* Header flex : le DOM est prev, next, title -- on reordonne pour
   obtenir prev / titre centre / next */
body div.ui-datepicker .ui-datepicker-header {
    display: flex;
    align-items: center;
    border-radius: 0;
    padding: 0.5rem 0.6rem;
    background: var(--primary-color);
    color: var(--primary-color-text, var(--omp-text-inverse));
    border: none;
}
body div.ui-datepicker .ui-datepicker-header .ui-datepicker-prev { order: 1; }
body div.ui-datepicker .ui-datepicker-header .ui-datepicker-next { order: 3; }
body div.ui-datepicker .ui-datepicker-header .ui-datepicker-title {
    order: 2;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin: 0;
    font-weight: 600;
    font-size: var(--omp-font-md);
}
/* Navigateurs mois (select) / annee (input number) : pastilles claires */
body div.ui-datepicker .ui-datepicker-title select.ui-datepicker-month,
body div.ui-datepicker .ui-datepicker-title input.ui-datepicker-year {
    border: none;
    border-radius: 4px;
    padding: 0.25rem 0.4rem;
    background: var(--omp-bg-card);
    color: var(--omp-text-primary);
    font-family: var(--omp-font-family);
    font-size: var(--omp-font-sm);
    font-weight: 500;
    height: 1.9rem;
    box-sizing: border-box;
    cursor: pointer;
}
body div.ui-datepicker .ui-datepicker-title input.ui-datepicker-year {
    width: 4.2rem;
    text-align: center;
    cursor: text;
    appearance: textfield;
    -moz-appearance: textfield;
}
body div.ui-datepicker .ui-datepicker-title input.ui-datepicker-year::-webkit-outer-spin-button,
body div.ui-datepicker .ui-datepicker-title input.ui-datepicker-year::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* Fleches precedent/suivant : cercles, icone centree en flex */
body div.ui-datepicker .ui-datepicker-header .ui-datepicker-prev,
body div.ui-datepicker .ui-datepicker-header .ui-datepicker-next {
    position: static;
    float: none;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--primary-color-text, var(--omp-text-inverse));
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--omp-transition);
}
body div.ui-datepicker .ui-datepicker-header .ui-datepicker-prev:hover,
body div.ui-datepicker .ui-datepicker-header .ui-datepicker-next:hover {
    background: rgba(255, 255, 255, 0.2);
}
body div.ui-datepicker .ui-datepicker-header .ui-datepicker-prev span,
body div.ui-datepicker .ui-datepicker-header .ui-datepicker-next span {
    color: var(--primary-color-text, var(--omp-text-inverse));
    position: static;
    margin: 0;
}
body div.ui-datepicker .ui-datepicker-calendar {
    margin: 0.4rem 0.5rem 0.5rem;
}
body div.ui-datepicker .ui-datepicker-calendar th {
    font-weight: 600;
    font-size: var(--omp-font-xs);
    color: var(--omp-text-secondary);
    padding: 0.4rem;
}
body div.ui-datepicker .ui-datepicker-calendar td {
    padding: 2px;
}
body div.ui-datepicker .ui-datepicker-calendar td > a,
body div.ui-datepicker .ui-datepicker-calendar td > span {
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
    line-height: 2rem;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--omp-transition);
}
body div.ui-datepicker .ui-datepicker-calendar td > a:hover {
    background: rgba(var(--primary-color-rgb, 33,150,243), 0.12) !important;
}
body div.ui-datepicker .ui-datepicker-calendar td > a.ui-state-active {
    background: var(--primary-color) !important;
    color: var(--primary-color-text, var(--omp-text-inverse)) !important;
    border-radius: 50%;
    font-weight: 600;
}
/* Timepicker : colonnes heures/minutes centrees, fleches en cercles */
body div.ui-datepicker .ui-timepicker {
    border: none;
    border-top: 1px solid var(--omp-border-light);
    background: var(--omp-bg-card);
    padding: 0.75rem 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
body div.ui-datepicker .ui-timepicker > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
}
body div.ui-datepicker .ui-timepicker a {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    cursor: pointer;
    transition: background var(--omp-transition);
}
body div.ui-datepicker .ui-timepicker a:hover {
    background: rgba(var(--primary-color-rgb, 33,150,243), 0.12);
}
body div.ui-datepicker .ui-timepicker a .ui-icon,
body div.ui-datepicker .ui-timepicker a .pi {
    color: var(--primary-color);
    font-size: var(--omp-font-sm);
}
body div.ui-datepicker .ui-hour-picker > span,
body div.ui-datepicker .ui-minute-picker > span,
body div.ui-datepicker .ui-second-picker > span {
    font-size: var(--omp-font-lg);
    font-weight: 600;
    color: var(--omp-text-primary);
    min-width: 2rem;
    text-align: center;
}
body div.ui-datepicker .ui-timepicker .ui-separator {
    padding: 0;
    font-size: var(--omp-font-lg);
    font-weight: 600;
    color: var(--omp-text-secondary);
}
body div.ui-datepicker .ui-datepicker-buttonbar {
    border: none;
    border-top: 1px solid var(--omp-border-light);
    background: var(--omp-bg-card);
    padding: 0.4rem;
    display: flex;
    justify-content: space-between;
}
body div.ui-datepicker .ui-datepicker-buttonbar .ui-button {
    background: transparent;
    border: none;
    color: var(--primary-color);
    font-size: var(--omp-font-sm);
    font-weight: 500;
    padding: 0.3rem 0.75rem;
    border-radius: 4px;
    box-shadow: none;
    transition: background var(--omp-transition);
}
body div.ui-datepicker .ui-datepicker-buttonbar .ui-button:hover {
    background: rgba(var(--primary-color-rgb, 33,150,243), 0.12);
}
/* Navigateurs mois/annee dans le header (fond primaire) */
body .ui-datepicker-panel .ui-datepicker-header select.ui-datepicker-month,
body .ui-datepicker-panel .ui-datepicker-header select.ui-datepicker-year {
    background: rgba(255, 255, 255, 0.18);
    color: var(--primary-color-text, var(--omp-text-inverse));
    border: none;
    border-radius: 4px;
    padding: 0.2rem 0.4rem;
    margin: 0 0.15rem;
    font-size: var(--omp-font-sm);
    font-weight: 500;
    cursor: pointer;
}
body .ui-datepicker-panel .ui-datepicker-header select.ui-datepicker-month:hover,
body .ui-datepicker-panel .ui-datepicker-header select.ui-datepicker-year:hover {
    background: rgba(255, 255, 255, 0.3);
}
body .ui-datepicker-panel .ui-datepicker-header select.ui-datepicker-month option,
body .ui-datepicker-panel .ui-datepicker-header select.ui-datepicker-year option {
    background: var(--omp-bg-card);
    color: var(--omp-text-primary);
}
/* Fleches prev/next : cercles cliquables */
body .ui-datepicker-panel .ui-datepicker-header .ui-datepicker-prev,
body .ui-datepicker-panel .ui-datepicker-header .ui-datepicker-next {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--omp-transition);
}
body .ui-datepicker-panel .ui-datepicker-header .ui-datepicker-prev:hover,
body .ui-datepicker-panel .ui-datepicker-header .ui-datepicker-next:hover {
    background: rgba(255, 255, 255, 0.2);
}
/* (timepicker : voir bloc complet plus haut) */

/* --- Spinner (quantités) modernisé --- */
body .ui-spinner .ui-spinner-button {
    border-radius: 0;
    transition: background var(--omp-transition);
}
body .ui-spinner .ui-spinner-button:hover {
    background: var(--omp-bg-section);
}
body .ui-spinner .ui-spinner-up {
    border-radius: 0 4px 0 0;
}
body .ui-spinner .ui-spinner-down {
    border-radius: 0 0 4px 0;
}

/* --- Messages de validation stylisés --- */
body .ui-messages-error {
    background: var(--omp-message-error-bg);
    border: none;
    border-left: 4px solid var(--omp-danger);
    border-radius: 4px;
    padding: 0.6rem 1rem;
    color: var(--omp-danger);
}
body .ui-messages-warn {
    background: var(--omp-message-warn-bg);
    border: none;
    border-left: 4px solid var(--omp-warning);
    border-radius: 4px;
    padding: 0.6rem 1rem;
    color: var(--omp-status-warning-text);
}
body .ui-messages-info {
    background: var(--omp-message-info-bg);
    border: none;
    border-left: 4px solid var(--omp-info);
    border-radius: 4px;
    padding: 0.6rem 1rem;
    color: var(--omp-info);
}

/* --- Detail voyage : badges de statut dans la barre d'actions ---
   Poussent les actions (Editions/Valider) a droite (margin auto) tout en
   restant a gauche ; vides (aucun statut) = zero impact sur l'alignement. */
.omp-voya-statut {
    margin-right: auto;
    display: flex;
    flex-wrap: wrap;
    gap: var(--omp-space-sm);
    align-items: center;
}

/* --- Detail voyage : message de succes en vert + coche ---
   Scope #entete car INFO n'y est reserve qu'au succes (enregistrementvalide) ;
   les avertissements (aucune modif, taille, dates) sont en WARN, les erreurs
   d'init en ERROR (cf reclassement severites MesVoyagesDetailController). */
#entete .ui-messages-info {
    background: var(--sn-badge-success-bg);
    border-left-color: var(--sn-success-dark);
    color: var(--sn-success-dark);
}
#entete .ui-messages-info .ui-messages-info-summary,
#entete .ui-messages-info .ui-messages-info-detail {
    color: var(--sn-success-dark);
}
#entete .ui-messages-info .ui-messages-info-icon {
    color: var(--sn-success-dark);
}
#entete .ui-messages-info .ui-messages-info-icon::before {
    content: "\e90a"; /* pi-check-circle */
}

/* --- SelectOneMenu overlay panel --- */
body .ui-selectonemenu-panel {
    box-shadow: var(--omp-shadow-md);
    border-radius: 4px;
    border: 1px solid var(--omp-border-light);
}
body .ui-selectonemenu-panel .ui-selectonemenu-items .ui-selectonemenu-item {
    padding: 0.5rem 0.75rem;
    font-size: var(--omp-font-sm);
    transition: background var(--omp-transition);
}
body .ui-selectonemenu-panel .ui-selectonemenu-items .ui-selectonemenu-item.ui-state-highlight {
    background: rgba(var(--primary-color-rgb, 33,150,243), 0.1);
    color: var(--primary-color);
}

/* --- Liens dans DataTable : hover souligné --- */
.ui-datatable td a:hover,
.ui-datatable td .ui-commandlink:hover {
    text-decoration: underline;
}

/* --- DataTable header de tri : indicateur au hover --- */
body .ui-datatable thead th.ui-sortable-column:hover {
    background: var(--surface-200, #eee);
    cursor: pointer;
}

/* --- Tooltip modernisé --- */
body .ui-tooltip .ui-tooltip-text {
    box-shadow: var(--omp-shadow-md);
    border-radius: 4px;
    font-size: var(--omp-font-sm);
    padding: 0.4rem 0.7rem;
}

/* --- FileUpload modernisé --- */
body .ui-fileupload .ui-fileupload-buttonbar {
    border-radius: 4px 4px 0 0;
}
body .ui-fileupload .ui-fileupload-content {
    border-radius: 0 0 4px 4px;
}

/* --- Panel border-radius global --- */
body .ui-panel {
    border-radius: var(--omp-card-radius);
    overflow: hidden;
}

/* --- Dialog modernisé --- */
body .ui-dialog {
    box-shadow: var(--omp-shadow-lg);
    border-radius: var(--omp-card-radius);
    border: 1px solid var(--omp-border-light);
    overflow: hidden;
}
body .ui-dialog .ui-dialog-titlebar {
    border-radius: var(--omp-card-radius) var(--omp-card-radius) 0 0;
    padding: 0.75rem 1rem;
    font-size: var(--omp-font-md);
    font-weight: 600;
}
body .ui-dialog .ui-dialog-content {
    padding: 1rem 1.25rem;
}
body .ui-dialog .ui-dialog-footer {
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--omp-border-light);
    display: flex;
    justify-content: flex-end;
    gap: var(--omp-space-sm);
}

/* --- Scroll to top micro-améliorations --- */
body .ui-datatable-scrollable-header,
body .ui-datatable-scrollable-footer {
    background: var(--omp-bg-card);
}

/* --- Responsive: mobile sticky header buttons --- */
@media screen and (max-width: 575px) {
    #entete .flexbox .ui-button {
        min-width: auto;
        font-size: var(--omp-font-xs);
    }
    /* Steps mobile : pastilles plus petites */
    body .ui-steps .ui-steps-item .ui-steps-number {
        width: 1.5rem;
        height: 1.5rem;
        line-height: 1.5rem;
        font-size: var(--omp-font-xs);
    }
    body .ui-steps::before {
        top: calc(1rem + 0.75rem);
    }
    /* Quantites mobile : wrap elements */
    .seqc-qty-row .ui-inputnumber,
    .seqc-qty-row .ui-spinner {
        flex: 0 0 60px;
        width: 60px !important;
        min-width: 60px;
        max-width: 60px;
    }
    .seqc-qty-row .ui-selectonemenu {
        flex: 0 0 100px;
        width: 100px !important;
        min-width: 100px;
        max-width: 100px;
    }
}

/* ==========================================================================
   Impression — @media print
   Masquer les éléments de navigation, afficher le contenu utile proprement
   ========================================================================== */
@media print {

    /* Masquer navigation, header sticky, footer, boutons d'action */
    .layout-menu-wrapper,
    .layout-topbar,
    .omp-footer,
    #entete .ui-button,
    #entete .ui-menubutton,
    .ui-paginator,
    p[id$="ajaxStatus"],
    .ui-datatable-footer,
    .header-colonnes-excel,
    .ui-contextmenu,
    .ui-dialog,
    .ui-tooltip,
    .ui-growl,
    .ui-overlaypanel,
    .legendeCouleursTable,
    .btn-excel {
        display: none !important;
    }

    /* Sticky header : position statique pour impression */
    .omp-sticky-header,
    #entete.ui-shadow {
        position: static !important;
        box-shadow: none !important;
    }

    /* Carte Leaflet : hauteur fixe pour l'impression */
    .leaflet-container {
        height: 400px !important;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    /* Tableaux : pas de scroll horizontal, pleine largeur */
    .ui-datatable-scrollable-body {
        overflow: visible !important;
    }
    .ui-datatable {
        width: 100% !important;
        font-size: 0.8rem;
    }

    /* Couleurs lignes : forcer l'impression des couleurs de fond */
    .lightRedRow,
    .lightYellowRow,
    .lightGreenRow,
    .lightBlueRow,
    .lightClearBlueRow,
    .lightGreyRow,
    .lightOrangeRow {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    /* Cartes PrimeFaces : pas d'ombre, bordure legere */
    .card, .customcard {
        box-shadow: none !important;
        border: 1px solid #ccc;
    }

    /* Eviter les coupures de page a l'interieur des panels */
    .ui-panel {
        page-break-inside: avoid;
    }

    /* Formulaire de detail : afficher en 2 colonnes max */
    #ortrDetail .col-3,
    #voyaDetail .col-3 {
        width: 50% !important;
    }

    /* Layout content : pleine largeur sans sidebar */
    .layout-content {
        margin-left: 0 !important;
        padding: 0.5rem !important;
    }
}

/* =====================================================
   Phase 10 — Pages d'erreur (404, access-denied, error)
   Card centrée, même design system que login
   ===================================================== */
.omp-error-card {
    min-width: 320px;
    max-width: 460px;
    width: 90vw;
    box-shadow: var(--omp-shadow-lg);
    border-radius: var(--omp-card-radius);
    overflow: hidden;
}

.omp-error-header {
    background: var(--omp-danger) !important;
    color: var(--omp-text-inverse) !important;
    text-align: center;
    padding: 0.75rem 1.5rem !important;
}

.omp-error-header h2 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: inherit;
}

/* Bouton retour dans les pages d'erreur */
.omp-error-card .ui-button {
    margin-top: 0.5rem;
}

/* =====================================================
   Phase 10 — Footer amélioré
   ===================================================== */
.omp-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.3rem 1rem;
    font-size: var(--omp-font-xs);
    color: var(--omp-text-muted);
    border-top: 1px solid var(--omp-border-light);
    margin-top: auto;
}

/* =====================================================
   Phase 10 — DataTable vide : message "Pas de X" amélioré
   ===================================================== */
body .ui-datatable .ui-datatable-data tr.ui-widget-content td.ui-datatable-empty-message {
    text-align: center;
    padding: 2rem 1rem;
    font-size: var(--omp-font-md);
    color: var(--omp-text-muted);
    font-style: italic;
}

/* =====================================================
   Phase 10 — Topbar : logo + username harmonisés
   ===================================================== */
.topbar-logo-img {
    height: 28px;
    width: 28px;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
    margin-right: var(--omp-space-sm);
}

.topbar-logo-label {
    vertical-align: middle;
    font-size: var(--omp-font-sm);
    font-weight: 500;
    color: var(--omp-text-primary);
    margin-left: 0.4rem;
}

/* =====================================================
   Phase 10 — Accordion fermé "Critères de recherche"
   Indiquer visuellement qu'on peut ouvrir
   ===================================================== */
body .ui-accordion .ui-accordion-header:not(.ui-state-active) {
    cursor: pointer;
}

/* =====================================================
   Phase 10 — Carte Leaflet : placeholder quand tuiles absentes
   ===================================================== */
.leaflet-container {
    background: var(--omp-bg-section);
    border: 1px solid var(--omp-border-medium);
    border-radius: var(--omp-card-radius);
}

/* Scroll cooperatif : indice "Ctrl + molette pour zoomer" affiche brievement
   quand l'utilisateur scrolle sur la carte sans Ctrl (la page defile alors). */
.omp-map-scroll-hint {
    position: absolute;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    background: rgba(46, 41, 65, 0.45);
    color: #fff;
    font-family: var(--sn-font-primary, 'Roboto', sans-serif);
    font-size: 1rem;
    font-weight: 500;
    border-radius: var(--omp-card-radius);
    opacity: 0;
    transition: opacity var(--omp-transition);
}
.omp-map-scroll-hint.is-visible {
    opacity: 1;
}

/* =====================================================
   Phase 10 — DataTable : bandes alternées plus visibles
   Striping par la classe stable assignee par PrimeFaces (.ui-datatable-even),
   PAS par nth-child : une ligne d'expansion (.ui-expanded-row-content) inseree
   dans le DOM decalerait la parite nth-child de toutes les lignes en dessous
   -> elles changeaient de couleur a l'ouverture du detail ("clignotement").
   La classe PF est posee par ligne de donnees, stable a l'expansion.
   ===================================================== */
body .ui-datatable .ui-datatable-data > tr.ui-datatable-even:not([class*="Row"]) {
    background-color: var(--surface-50, #fafafa);
}
/* DataTable dark mode — texte et fond lisibles */
body[class*="-dark"] .ui-datatable tbody td,
body[class*="_dark"] .ui-datatable tbody td {
    color: var(--text-color) !important;
}
body[class*="-dark"] .ui-datatable .ui-datatable-data > tr.ui-datatable-even:not([class*="Row"]),
body[class*="_dark"] .ui-datatable .ui-datatable-data > tr.ui-datatable-even:not([class*="Row"]) {
    background-color: rgba(255,255,255,0.03);
}
body[class*="-dark"] .ui-datatable .ui-datatable-data > tr:hover,
body[class*="_dark"] .ui-datatable .ui-datatable-data > tr:hover {
    background-color: rgba(255,255,255,0.06) !important;
}
body[class*="-dark"] .ui-datatable thead th,
body[class*="_dark"] .ui-datatable thead th {
    color: var(--text-color) !important;
}
body[class*="-dark"] .ui-datatable,
body[class*="_dark"] .ui-datatable {
    color: var(--text-color);
}

body .ui-datatable .ui-datatable-data > tr:hover {
    background-color: rgba(var(--primary-color-rgb, 33,150,243), 0.04) !important;
    transition: background var(--omp-transition);
}

/* Ne pas overrider les lignes colorées par statut */
body .ui-datatable .ui-datatable-data > tr.lightRedRow:hover,
body .ui-datatable .ui-datatable-data > tr.lightYellowRow:hover,
body .ui-datatable .ui-datatable-data > tr.lightGreenRow:hover,
body .ui-datatable .ui-datatable-data > tr.lightBlueRow:hover,
body .ui-datatable .ui-datatable-data > tr.lightClearBlueRow:hover,
body .ui-datatable .ui-datatable-data > tr.lightGreyRow:hover,
body .ui-datatable .ui-datatable-data > tr.lightOrangeRow:hover {
    filter: brightness(0.97);
    background-color: inherit !important;
}

/* =====================================================
   Phase 10 — Pagination : pills actifs plus visibles
   ===================================================== */
body .ui-paginator .ui-paginator-page.ui-state-active {
    background: var(--primary-color);
    color: var(--primary-color-text, var(--omp-text-inverse));
    border-radius: 50%;
    min-width: 2.25rem;
    min-height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

body .ui-paginator .ui-paginator-page {
    border-radius: 50%;
    min-width: 2.25rem;
    min-height: 2.25rem;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    transition: background var(--omp-transition);
    font-size: var(--omp-font-sm);
}

body .ui-paginator .ui-paginator-page:hover:not(.ui-state-active) {
    background: var(--surface-200, #eee);
}

/* Pagination — boutons nav (first/prev/next/last) */
body .ui-paginator .ui-paginator-first,
body .ui-paginator .ui-paginator-prev,
body .ui-paginator .ui-paginator-next,
body .ui-paginator .ui-paginator-last {
    min-width: 2.25rem;
    min-height: 2.25rem;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background var(--omp-transition);
    font-size: 1rem;
}
body .ui-paginator .ui-paginator-first .ui-icon,
body .ui-paginator .ui-paginator-prev .ui-icon,
body .ui-paginator .ui-paginator-next .ui-icon,
body .ui-paginator .ui-paginator-last .ui-icon,
body .ui-paginator .ui-paginator-first .pi,
body .ui-paginator .ui-paginator-prev .pi,
body .ui-paginator .ui-paginator-next .pi,
body .ui-paginator .ui-paginator-last .pi {
    font-size: var(--omp-font-sm);
}
body .ui-paginator .ui-paginator-first:hover,
body .ui-paginator .ui-paginator-prev:hover,
body .ui-paginator .ui-paginator-next:hover,
body .ui-paginator .ui-paginator-last:hover {
    background: var(--surface-200, #eee);
}

/* Pagination — espacement entre les boutons */
body .ui-paginator {
    gap: 0.25rem;
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 0.5rem 1rem !important;
}

/* =====================================================
   Phase 10 — Bouton "Colonnes" dans les listes : harmonisé
   ===================================================== */
.header-colonnes-excel .ui-button {
    font-size: var(--omp-font-sm);
    border-radius: 4px;
}

/* =====================================================
   Phase 10 — Mobile responsive améliorations
   ===================================================== */
@media screen and (max-width: 575px) {
    /* Pages d'erreur : pleine largeur mobile */
    .omp-error-card {
        min-width: unset;
        width: 95vw;
    }

    /* Footer : identique au desktop (deja compact) */
    .omp-footer {
        padding: 0.3rem 0.75rem;
        font-size: var(--omp-font-xs);
    }

    /* Sidebar logo : masqué en mobile (déjà dans topbar) */
    .layout-menu-wrapper .profile {
        display: none;
    }
}

/* =====================================================
   Charts — centrage + responsive
   ===================================================== */
.omp-chart {
    max-height: 350px;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
.omp-chart canvas {
    max-width: 100% !important;
}

/* (supprime — unifie dans DatePicker global) */

/* =====================================================
   Session 20b — #4 Boutons header detail commande
   ===================================================== */
#entete .flexbox .ui-button {
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    font-size: var(--omp-font-sm);
    font-weight: 500;
    border: 1px solid var(--omp-border-medium);
    background: var(--omp-bg-card);
    color: var(--omp-text-primary);
    transition: background var(--omp-transition), border-color var(--omp-transition), box-shadow var(--omp-transition);
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 2.25rem;
    box-sizing: border-box;
    line-height: 1;
}
#entete .flexbox .ui-button:hover:not(:disabled) {
    background: var(--omp-bg-section);
    border-color: var(--primary-color);
    color: var(--primary-color);
    box-shadow: var(--omp-shadow-sm);
}
#entete .flexbox .ui-button .ui-icon,
#entete .flexbox .ui-button .pi {
    color: var(--primary-color);
}
#entete .flexbox .ui-button .ui-button-text {
    line-height: 1;
    padding: 0;
}
/* MenuButton "Editions" — meme style que les autres boutons de la
   toolbar (herite de #entete .flexbox .ui-button), seul l'espacement
   icone/texte est ajuste */
#entete .ui-menubutton .ui-button {
    gap: 0.4rem;
}
#entete .ui-menubutton .ui-button .ui-icon {
    position: static;
    margin-top: 0;
}
#entete .ui-menubutton .ui-menu {
    z-index: 10000 !important;
    position: absolute !important;
    clip: unset !important;
}
/* Garantir que le menu Editions n'est pas clipé par les parents sticky */
#entete .customcard,
#entete .flexbox,
#entete .card {
    overflow: visible !important;
}

/* =====================================================
   Session 20b — #5 Section parcours modernisée
   ===================================================== */
#parcours {
    border-radius: var(--omp-card-radius);
    box-shadow: var(--omp-shadow-sm);
    border: 1px solid var(--omp-border-light);
    background: var(--omp-bg-card);
    overflow: hidden;
    margin-top: var(--omp-space-md);
}
#parcours .ui-panel {
    border: none;
    box-shadow: none;
}
#parcours .customTitleBar .ui-panel-titlebar {
    background: var(--omp-bg-section) !important;
    border-bottom: 2px solid var(--omp-border-light) !important;
    border-radius: 0 !important;
    padding: 0.5rem 1rem;
}
#parcours .ui-panel-content {
    padding: var(--omp-space-md) !important;
}

/* =====================================================
   Session 20b — #6 Filtres commandes : séparateurs visuels
   ===================================================== */
/* Espacement vertical coherent dans TOUS les formulaires de recherche */
.omp-search-form .grid.ui-fluid {
    row-gap: 0.75rem;
}

/* Barre d'action au-dessus de la carte */
.omp-map-action-bar {
    display: flex;
    justify-content: flex-start;
    padding: 0.5rem 0;
    /* Meme empreinte horizontale que la carte (mapAdvanced width:99%) pour que le
       bouton "Parcours" se cale exactement sur la largeur de la map. */
    width: 99%;
}

/* Bouton "Parcours" sur toute la largeur de la carte.
   flex:1 1 100% est INDISPENSABLE : width:100% seul est neutralise (largeur
   calculee = contenu, ~76px, mesure live) ; c'est le flex-basis explicite + grow
   qui force le bouton a 100% de la barre (verifie : 76px -> 1349px). */
.omp-map-action-bar .ui-button.omp-btn {
    flex: 1 1 100%;
    width: 100%;
}

/* =====================================================
   Session 28 — Audit UI global
   ===================================================== */

/* --- Accordion headers : contraste + lisibilite --- */
.ui-accordion .ui-accordion-header a {
    font-weight: 600;
    font-size: var(--omp-font-md);
    padding: 0.75rem 1rem;
}

/* --- Card a l'interieur d'un accordion tab --- */
.ui-accordion .ui-accordion-content > .card {
    margin-bottom: 0;
}

/* --- Labels formulaire : hierarchie visuelle --- */
.grid.ui-fluid .ui-outputlabel.block,
.grid.ui-fluid p-outputLabel .block,
.grid.ui-fluid label.block {
    margin-bottom: 0.35rem;
    font-weight: 500;
    color: var(--omp-text-secondary);
    font-size: var(--omp-font-sm);
}

/* --- Legende couleurs responsive (mesCommandes, mesVoyages) --- */
.legendeCouleursTable.ui-panelgrid {
    display: flex !important;
    flex-wrap: wrap;
    gap: 0.4rem 0.6rem;
    border: none !important;
    margin-top: 0.5rem;
    justify-content: center;
}
.legendeCouleursTable.ui-panelgrid tbody,
.legendeCouleursTable.ui-panelgrid tr {
    display: contents !important;
}
.legendeCouleursTable.ui-panelgrid td {
    display: inline-flex !important;
    align-items: center;
    padding: 0.3rem 0.75rem;
    border-radius: 20px;
    font-size: var(--omp-font-xs);
    font-weight: 600;
    white-space: nowrap;
    border: none !important;
    line-height: 1.4;
}
/* Compteur commandes/voyages */
.legendeCouleur {
    text-align: center;
}
.legendeCouleur .nombre-commande,
.legendeCouleur .nombre-facture,
.legendeCouleur .Fleft {
    display: block;
    margin-bottom: 0.4rem;
    font-weight: 600;
    font-size: var(--omp-font-sm);
    color: var(--omp-text-primary);
}

/* --- Row expansion panel (mesFactures detail) --- */
.ui-datatable .ui-expanded-row-content .ui-panel {
    border: 1px solid var(--omp-border-light);
    border-radius: var(--omp-card-radius, 6px);
    background: var(--omp-bg-card);
}

/* --- Messages : espacement --- */
.ui-messages {
    margin-top: 0.5rem;
}

/* =====================================================
   Search form pattern — factorise pour toutes les pages
   ===================================================== */

/* Card dans recherche : bordure nette + ombre + padding renforce */
.omp-search-form .card {
    border: 1px solid var(--omp-border-medium);
    border-radius: var(--omp-card-radius, 6px);
    background: var(--omp-bg-card);
    box-shadow: var(--omp-shadow-sm);
    padding: 1.25rem 1.25rem 0.75rem 1.25rem;
}

/* Accent primary sur le bord gauche du card (marqueur visuel) */
.omp-search-form .card {
    border-left: 3px solid var(--primary-color);
}

/* Labels : plus contraste, plus lisibles */
.omp-search-form .ui-outputlabel {
    display: block;
    margin-bottom: 0.35rem;
    font-weight: 600;
    font-size: var(--omp-font-xs);
    color: var(--omp-text-primary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Inputs dans recherche : bordure uniforme, radius, focus */
.omp-search-form .ui-inputfield,
.omp-search-form .ui-selectonemenu,
.omp-search-form .ui-autocomplete-input {
    border: 1px solid var(--omp-border-medium);
    border-radius: 4px;
    padding: 0.5rem 0.65rem;
    font-size: var(--omp-font-sm);
    transition: border-color var(--omp-transition), box-shadow var(--omp-transition);
    background: var(--omp-bg-card);
}
.omp-search-form .ui-inputfield:focus,
.omp-search-form .ui-autocomplete-input:focus {
    border-color: var(--primary-color);
    box-shadow: var(--omp-shadow-focus);
    outline: none;
}

/* SelectOneMenu dans recherche */
.omp-search-form .ui-selectonemenu {
    border-radius: 4px;
}
.omp-search-form .ui-selectonemenu .ui-selectonemenu-label {
    padding: 0.5rem 0.65rem;
    font-size: var(--omp-font-sm);
}

/* DatePicker dans recherche */
.omp-search-form .ui-datepicker-trigger {
    border-radius: 0 6px 6px 0;
}

/* Barre d'actions Rechercher/Annuler — toujours sur la meme ligne */
.omp-search-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    padding-top: 1rem;
    border-top: 1px solid var(--omp-border-light);
    margin-top: 0.5rem;
}
.omp-search-actions .ui-button {
    min-width: 140px;
    flex: 0 0 auto;
    border-radius: 4px;
    font-weight: 500;
    padding: 0.55rem 1.25rem;
    font-size: var(--omp-font-sm);
}

@media (max-width: 575px) {
    .omp-search-actions {
        flex-direction: column;
    }
    .omp-search-actions .ui-button {
        width: 100%;
    }
}

/* --- Mobile charts : hauteur reduite --- */
@media (max-width: 575px) {
    .omp-chart {
        height: 250px;
        max-height: 250px;
    }
}

/* =====================================================
   Sous-groupes visuels dans la search form
   ===================================================== */
.omp-filter-group-header {
    padding-bottom: 0 !important;
    padding-top: 1rem !important;
}
.omp-filter-group-header:first-child {
    padding-top: 0 !important;
}
.omp-section-header--sub {
    padding-bottom: 0.4rem;
    margin-bottom: 0.6rem;
    /* Filet de section fondu (marque) plutot qu'un trait plat */
    border-bottom: 0;
    background-image: linear-gradient(to right,
                      var(--sn-primary, var(--primary-color)) 0,
                      var(--omp-border-light) 28%,
                      transparent 70%);
    background-position: 0 100%;
    background-size: 100% 1px;
    background-repeat: no-repeat;
}
/* Icone de sous-section dans une pastille teintee de marque */
.omp-section-header--sub i,
.omp-section-header--sub .pi {
    font-size: var(--omp-font-xs);
    color: var(--sn-primary, var(--primary-color));
    background: var(--sn-surface-light, #F0F2FF);
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.omp-section-header--sub span {
    font-weight: 600;
    font-size: var(--omp-font-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--sn-primary-dark, var(--omp-text-secondary));
}

/* =====================================================
   Utilitaires (remplacement des styles inline residuels)
   ===================================================== */
.omp-mb-sm {
    margin-bottom: var(--omp-space-sm);
}
.omp-icon-warning {
    color: var(--omp-status-warning-text);
    font-size: var(--omp-font-md);
}
/* fileupload litige voyages : largeur naturelle (le ui-fluid force 100%) */
.mes-voyages-fileupload.ui-fileupload {
    width: auto !important;
}

/* =====================================================
   Bandeau cookies (lib cookieconsent v3, page login)
   La lib n'embarque pas son CSS : tout le style est ici.
   Markup genere : div.cc-window > span.cc-message (+ a.cc-link)
   + div.cc-compliance > a.cc-btn.cc-dismiss
   ===================================================== */
.cc-window {
    position: fixed;
    left: 50%;
    bottom: var(--omp-space-lg);
    transform: translateX(-50%);
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: var(--omp-space-md);
    width: calc(100% - 2rem);
    max-width: 720px;
    padding: var(--omp-space-md) var(--omp-space-lg);
    background: var(--omp-bg-card);
    color: var(--omp-text-secondary);
    border: 1px solid var(--omp-border-light);
    border-radius: var(--omp-card-radius);
    box-shadow: var(--omp-shadow-lg);
    font-family: var(--omp-font-family);
    font-size: var(--omp-font-sm);
    line-height: 1.4;
    transition: opacity var(--omp-transition-slow, 300ms ease);
}
.cc-window.cc-invisible {
    opacity: 0;
}
.cc-window .cc-message {
    flex: 1 1 auto;
}
.cc-window .cc-link {
    color: var(--primary-color);
    text-decoration: underline;
    margin-left: 0.25rem;
}
.cc-window .cc-btn.cc-dismiss {
    flex: 0 0 auto;
    padding: 0.45rem 1.2rem;
    background: var(--primary-color);
    color: var(--primary-color-text, var(--omp-text-inverse));
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    font-weight: 500;
    transition: background var(--omp-transition);
}
.cc-window .cc-btn.cc-dismiss:hover {
    background: var(--omp-primary-hover);
    color: var(--primary-color-text, var(--omp-text-inverse));
}
@media (max-width: 575px) {
    .cc-window {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        bottom: var(--omp-space-sm);
    }
}

/* =====================================================
   Detail commande / detail voyage — polish UI
   ===================================================== */

/* 1. Libelles du formulaire commande (colonne ten-percent = label)
      Meme style que les labels de recherche : uppercase, secondaire, small */
#ortrDetail .ui-panelgrid-blank > .ui-grid > .ui-grid-row > .ui-panelgrid-cell.ten-percent > span {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--omp-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: block;
}

/* 2. Panel principal commande (basicDetail) : elevation + titre en primary */
#ortrDetail #basicDetail {
    box-shadow: var(--omp-shadow-sm) !important;
}
#ortrDetail #basicDetail > .ui-panel-titlebar {
    background: var(--omp-bg-section) !important;
    border-bottom: 2px solid var(--omp-border-light) !important;
    padding: 0.7rem 1rem !important;
}
#ortrDetail #basicDetail .ui-panel-title {
    font-size: var(--omp-font-md) !important;
    font-weight: 600 !important;
    color: var(--sn-primary) !important;
}

/* 3. Headers sequences Chargement / Livraison :
      fond page-section (violet tres clair) + soulignement primary + titre primary */
.sequencesflex .ui-panel .ui-panel-titlebar {
    background: var(--omp-bg-section) !important;
    border-bottom: 2px solid var(--sn-primary) !important;
    border-top: none !important;
    padding: 0.55rem 0.85rem !important;
    min-height: auto !important;
}
.sequencesflex .ui-panel .ui-panel-titlebar .ui-panel-title {
    font-size: var(--omp-font-sm) !important;
    font-weight: 700 !important;
    color: var(--sn-primary) !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* 4. Section etapes (p:steps) : accroche visuelle — bord gauche primary + shadow discret */
.extranet.leaden-back.BorBotLeaden {
    border-top: 3px solid var(--sn-primary) !important;
    border-left: 1px solid var(--omp-border-light) !important;
    border-right: 1px solid var(--omp-border-light) !important;
    border-bottom: 1px solid var(--omp-border-light) !important;
    border-radius: 0 0 var(--omp-card-radius) var(--omp-card-radius) !important;
    background: var(--omp-bg-card) !important;
    box-shadow: var(--omp-shadow-sm) !important;
    margin-top: 0 !important;
}

/* 5. Panel voyage basicDetail : meme traitement que commande */
#voyaDetail #basicDetail {
    border: 1px solid var(--omp-border-light) !important;
    border-radius: var(--omp-card-radius) !important;
    box-shadow: var(--omp-shadow-sm) !important;
    overflow: hidden !important;
}
#voyaDetail #basicDetail > .ui-panel-titlebar {
    background: var(--omp-bg-section) !important;
    border-bottom: 2px solid var(--omp-border-light) !important;
    padding: 0.7rem 1rem !important;
}
#voyaDetail #basicDetail .ui-panel-title {
    font-size: var(--omp-font-md) !important;
    font-weight: 600 !important;
    color: var(--sn-primary) !important;
}

/* 6. Libelles voyage (voyage-detail-label) : uppercase, secondaire — meme pattern que les formulaires commande */
.voyage-detail-panel .voyage-detail-label {
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    color: var(--omp-text-secondary) !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* 7. Valeurs voyage : legerement renforcees pour contraster avec les labels */
.voyage-detail-panel .voyage-detail-input {
    font-weight: 500;
    color: var(--sn-text-primary);
}

/* 8. Commandes dans voyage : accent lateral primary sur chaque panel commande */
.messequencescommandeaafficher .customTitleBar .ui-panel-titlebar {
    border-left: 3px solid var(--sn-primary) !important;
    padding-left: 0.85rem !important;
}
.messequencescommandeaafficher .customTitleBar .ui-panel-title {
    font-weight: 600 !important;
    color: var(--sn-text-primary) !important;
}

/* 9. Espacements verticaux entre sections detail — respiration accrue */
#ortrDetail > .ui-panel {
    margin-top: var(--omp-space-md);
}
#ortrDetail .extranet.leaden-back.BorBotLeaden,
#ortrDetail #sequences-trjt,
#ortrDetail #sequences-ptlg {
    margin-top: var(--omp-space-md);
}

/* 10. Tablette (<992px) : labels en tete des cellules */
@media screen and (max-width: 992px) {
    #ortrDetail .ui-panelgrid-blank > .ui-grid > .ui-grid-row {
        flex-wrap: wrap;
    }
    #ortrDetail .ui-panelgrid-blank > .ui-grid > .ui-grid-row > .ui-panelgrid-cell.ten-percent > span {
        margin-bottom: 0.1rem;
    }
}