/* v00621 - Shared segmented top controls. No fixed positioning of page headers. */ .fm-segmented-bar { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 0; min-height: 42px; padding: 4px; border: 1px solid rgba(148,163,184,.32); border-radius: 12px; background: rgba(255,255,255,.9); box-shadow: 0 1px 3px rgba(15,23,42,.08); box-sizing: border-box; } .fm-segmented-control { display: inline-flex; align-items: center; justify-content: center; height: 32px; min-width: 0; padding: 0 10px; border: 1px solid rgba(148,163,184,.28); border-radius: 8px; background: rgba(255,255,255,.78); color: #64748b; font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; box-sizing: border-box; transition: background-color .16s ease, box-shadow .16s ease, border-color .16s ease; } button.fm-segmented-control { cursor: pointer; } .fm-segmented-square { width: 32px; min-width: 32px; padding: 0; flex-shrink: 0; } .fm-segmented-control i { font-size: 11px; } .fm-segmented-control:hover { background: #f1f5f9; } .fm-segmented-control:focus-visible, .fm-po-input-bubble:focus-within { outline: 2px solid #38bdf8; outline-offset: 2px; } .fm-segmented-control[aria-pressed="true"], .fm-segmented-accent, .fm-segmented-marker { color: #0284c7; background: rgba(240,249,255,.92); border-color: rgba(14,165,233,.38); box-shadow: 0 3px 10px rgba(14,165,233,.1); } .fm-segmented-marker { width: 32px; padding: 0; flex: 0 0 32px; } .fm-segmented-control:disabled { opacity: .45; cursor: default; box-shadow: none; } .fm-segmented-select { position: relative; display: inline-flex; min-width: 0; } .fm-segmented-select > select { appearance: none; -webkit-appearance: none; width: 100%; padding-right: 26px; cursor: pointer; text-overflow: ellipsis; } .fm-segmented-select > i { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 9px; color: #64748b; pointer-events: none; } #timelinePeriodControls .fm-segmented-select { width: 104px; } #payrollYearControl .fm-segmented-select { min-width: 86px; } html.dark .fm-segmented-bar { background: color-mix(in srgb, var(--fm-dark-surface,#0b1f33) 94%, transparent); border-color: color-mix(in srgb, var(--fm-dark-border,#334155) 75%, transparent); } html.dark .fm-segmented-control { color: #cbd5e1; background: color-mix(in srgb, var(--fm-dark-surface-2,#111827) 84%, transparent); border-color: color-mix(in srgb, var(--fm-dark-border,#334155) 72%, transparent); } html.dark .fm-segmented-control:hover { background: var(--fm-dark-hover,#163a5e); } html.dark .fm-segmented-control[aria-pressed="true"], html.dark .fm-segmented-accent, html.dark .fm-segmented-marker { color: #7dd3fc; background: rgba(3,105,161,.24); border-color: rgba(14,165,233,.46); } html.dark .fm-segmented-select > i { color: #94a3b8; } html.dark .fm-segmented-select option { color: #e2e8f0; background: var(--fm-dark-surface,#0b1f33); } /* V00661 — Les marges de page sont définies par chaque app au niveau du conteneur de contenu, une seule fois. Les contrôles partagés ne rajoutent aucun inset. */ @media (min-width: 640px) { #timelinePeriodControls, #payrollYearControl, #poViewModes { margin-left: auto; flex-shrink: 0; } #poProjectSelect { width: 24rem; max-width: min(24rem,38vw); } #poSearchWrap.fm-page-center-search { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 20; margin: 0 !important; } } #poPageTop { min-height: 44px; } #poSearchWrap { z-index: 20; } /* V00623 - The same water drop grows to the RIGHT, three times. */ #poHeaderRow { min-height:44px; position:relative; } #poSearchWrap { width:36px; height:36px; min-height:36px; } .fm-po-search-cluster { --po-water-width:280px; position:relative; width:36px; height:36px; pointer-events:auto; } #poSearchMorph, .fm-po-child-drop { width:36px; flex-shrink:0; transform-origin:18px center; } #poSearchCluster.is-open #poSearchMorph, #poSearchPanel.is-open .fm-po-child-drop { width:var(--po-water-width); border-radius:18px; } #poSearchCluster[data-filtered="true"] #poSearchToggleBtn::after { content:""; position:absolute; width:6px; height:6px; right:4px; top:5px; border-radius:50%; background:#0284c7; border:1px solid white; } #poSearchPanel { position:absolute; top:44px; left:0; width:var(--po-water-width); pointer-events:none; } .fm-po-search-clip { overflow:visible; } .fm-po-search-fields { display:flex; flex-direction:column; gap:8px; padding:0; margin:0; width:100%; } .fm-po-search-field { width:100%; opacity:0; visibility:hidden; transform:translateY(-44px); transition:transform .46s cubic-bezier(.18,1.34,.34,1),opacity .22s,visibility .46s; } #poSearchPanel.is-open .fm-po-search-field { opacity:1; visibility:visible; transform:translateY(0); transition-delay:calc(var(--field-index) * 45ms); } #poSearchPanel.is-open { pointer-events:auto; } #poSearchPanel .fm-water-search { transition-delay:calc(var(--field-index) * 45ms); } .fm-po-search-leading { flex:0 0 34px; width:34px; height:34px; display:flex; align-items:center; justify-content:center; color:#64748b; font-size:12px; } #poSearchCluster .fm-water-search-input { flex:1 1 auto; width:0; min-width:0; padding-right:2px; } .fm-po-search-submit { flex:0 0 30px; width:30px; height:30px; margin-right:3px; border:0; border-radius:50%; color:#64748b; background:transparent; cursor:pointer; opacity:0; visibility:hidden; transition:opacity .2s,visibility .2s; } #poSearchCluster.is-open .fm-po-search-submit { opacity:1; visibility:visible; } .fm-po-search-submit:hover { color:#0284c7; background:rgba(14,165,233,.08); } #poPageTop { transition:padding-bottom .46s cubic-bezier(.18,1.2,.34,1); padding-bottom:0; } #poPageTop.po-search-open { padding-bottom:88px; } html.dark .fm-po-search-leading, html.dark .fm-po-search-submit { color:#94a3b8; } @media(max-width:639.98px) { #poSearchWrap { width:36px; justify-self:center; margin:0 auto; } #purchaseOrdersView #poSearchWrap { height:36px; min-height:36px; } #poHeaderRow .fm-unified-controls-row { align-items:start; } #poPageTop.po-search-open { padding-bottom:0; } #poHeaderRow .fm-unified-controls-row { row-gap:12px; } #poSearchWrap { margin-bottom:0; transition:margin-bottom .46s cubic-bezier(.18,1.2,.34,1); } #poPageTop.po-search-open #poSearchWrap { margin-bottom:88px; } } @media(prefers-reduced-motion:reduce) { #poPageTop, #poSearchWrap, #poSearchCluster .fm-water-search, .fm-po-search-field { transition:none !important; animation:none !important; } } html.fm-shell-command-remote-active #poLocalActions { display: none !important; } #poArchiveVisibilityBtn[data-archives="visible"] { color: #d97706; } #poArchiveVisibilityBtn svg { display: block; } .fm-po-workspace { display: grid; grid-template-columns: minmax(0,1fr); gap: 16px; align-items: start; } #poWorkspace #poListCard { min-width: 0; } .fm-po-list-filters { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } #poDirectiveSelect { width: 24rem; max-width: 75%; } #poCount { white-space: nowrap; flex-shrink: 0; } #poMsg:empty { display: none; } #poMsg:not(:empty) { margin-bottom: 10px; } .fm-po-list-scroll { min-width: 0; } .fm-po-preview-pane { min-width: 0; position: sticky; top: 8px; border-radius: 16px; overflow: hidden; background: white; border: 1px solid #e2e8f0; box-shadow: 0 1px 4px rgba(15,23,42,.12); } .fm-po-preview-pane[hidden], #poInlineFrame[hidden], #poInlineStatus[hidden], #poInlineRetryBtn[hidden] { display: none !important; } .fm-po-preview-header { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid #e2e8f0; } .fm-po-preview-header .fm-segmented-bar { background: transparent; box-shadow: none; border: 0; padding: 0; min-height: 32px; } .fm-po-preview-header > .fm-segmented-bar { flex-shrink: 0; } .fm-po-preview-body { position: relative; height: clamp(360px,72dvh,960px); background: #f1f5f9; } #poInlineFrame { display: block; border: 0; width: 100%; height: 100%; background: white; } .fm-po-preview-status { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 28px; color: #64748b; font-size: 13px; text-align: center; white-space: pre-line; } .fm-po-preview-retry { position: absolute; left: 50%; top: calc(50% + 58px); transform: translateX(-50%); } #poPreviewPane[data-state="loading"] .fm-po-preview-status::before { content: ""; width: 16px; height: 16px; border: 2px solid #cbd5e1; border-top-color: #0284c7; border-radius: 50%; margin-right: 10px; animation: fmPoSpin .8s linear infinite; flex-shrink: 0; } @keyframes fmPoSpin { to { transform: rotate(360deg); } } #poWorkspace[data-view="preview"] #poRows tr[data-po-selected="true"] td { background: rgba(14,165,233,.1) !important; } #poWorkspace[data-view="preview"] #poRows tr[data-po-selected="true"] td:first-child { box-shadow: inset 3px 0 #0284c7; } #poWorkspace[data-view="preview"] #poCards [data-po-selected="true"] { border-color: #38bdf8 !important; box-shadow: 0 0 0 1px #38bdf8; } #poRows tr[data-po]:focus-visible, #poCards [data-po-card]:focus-visible { outline: 2px solid #38bdf8; outline-offset: -2px; } html.dark .fm-po-preview-pane { background: var(--fm-dark-surface,#0b1f33); border-color: var(--fm-dark-border,#334155); } html.dark .fm-po-preview-header { border-color: var(--fm-dark-border,#334155); } html.dark .fm-po-preview-body { background: var(--fm-dark-input,#091a2b); } html.dark .fm-po-preview-status { color: #cbd5e1; } @media (min-width: 768px) { #poWorkspace[data-view="preview"] { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } #poWorkspace[data-view="preview"] .fm-po-list-scroll { max-height: calc(72dvh + 28px); overflow: auto; } #poWorkspace[data-view="preview"] .po-table-scroll { overflow: visible; } #poWorkspace[data-view="preview"] .po-table-scroll table { min-width: 740px; } } @media (max-width: 767.98px) { #poWorkspace[data-view="preview"] .fm-po-list-scroll { max-height: 38dvh; overflow: auto; } .fm-po-preview-pane { position: relative; top: auto; } .fm-po-preview-body { height: 65dvh; min-height: 360px; } } @media (max-width: 639.98px) { #poSearchWrap { position: relative; grid-column: 1 / -1; } .fm-po-input-bubble { height: 44px; } #timelinePeriodControls, #payrollYearControl, #poViewModes { width: 100%; min-height: 52px; border-radius: 16px; padding: 6px; gap: 6px; } #timelinePeriodControls .fm-segmented-control, #payrollYearControl .fm-segmented-control, #poViewModes .fm-segmented-control { height: 38px; border-radius: 11px; } #timelinePeriodControls .fm-segmented-square { width: 36px; min-width: 36px; } #timelinePeriodControls .fm-segmented-select { flex: 1 1 0; width: auto; } #payrollYearControl .fm-segmented-select { flex: 1 1 auto; } #poViewModes { display: grid; grid-template-columns: 1fr 1fr; } #poViewModes .fm-segmented-control { width: 100%; } #poDirectiveSelect { width: 100%; max-width: 76%; } } @media (prefers-reduced-motion: reduce) { .fm-segmented-control, .fm-po-search-panel { transition: none !important; } .fm-po-search-panel.is-open .fm-po-input-bubble::after, #poPreviewPane[data-state="loading"] .fm-po-preview-status::before { animation: none !important; } } /* Override the old native-arrow rule on the payroll year select. */ #payrollYearControl select.fm-segmented-control { appearance: none; -webkit-appearance: none; min-width: 0; } /* Tablet-width headers keep the centered search clear of the project picker. */ @media (min-width: 640px) { #purchaseOrdersView #poProjectSelect, #timelineView #projectSelect { width: min(24rem,38vw); } } @media (min-width: 640px) and (max-width: 767.98px) { #timelinePeriodControls .fm-segmented-control { padding-left: 7px; padding-right: 7px; } #timelinePeriodControls .fm-segmented-square { width: 28px; min-width: 28px; padding: 0; } #timelinePeriodControls .fm-segmented-select > select { padding-right: 24px; } } /* V00622 - Quotes share the exact same top controls as Achats / Temps. */ #quotePageTop { min-height: 44px; } #quoteModeControl { margin-left: auto; flex-shrink: 0; } #quoteModeControl .fm-segmented-control { padding: 0 12px; } #quoteSearchWrap { z-index: 20; } #quoteSearchWrap .fm-water-search { --fm-water-open-width: 17.5rem; } #quoteSearchResults[hidden] { display: none !important; } .fm-quote-search-results { border: 1px solid #e2e8f0; border-radius: 16px; padding: 16px; background: white; } .fm-quote-search-caption { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 12px; font-size: 12px; color: #64748b; } .fm-quote-directive-toolbar { margin-bottom: 16px; } #quoteDirectiveSelect { width: 24rem; max-width: 100%; } .fm-quote-information { display: grid; grid-template-columns: minmax(0,1fr) 210px; gap: 28px; align-items: start; } .fm-quote-main-information { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .fm-quote-side-information { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding-left: 18px; border-left: 1px solid #e2e8f0; } .fm-quote-date-field { margin-top: 22px; } #quoteMainInformation #quoteEditorMsg:empty { display: none; } #quoteEditorHeading { min-width: 0; } #quoteSignatureCard { width: 100%; max-width: 430px; } #quoteSideInformation input, #quoteSideInformation select { max-width: 100%; } html.fm-shell-command-remote-active #quotesLocalActions { display: none !important; } html.dark .fm-quote-search-results { background: var(--fm-dark-surface,#0b1f33); border-color: var(--fm-dark-border,#334155); } html.dark .fm-quote-search-caption { color: #94a3b8; } html.dark .fm-quote-side-information { border-color: var(--fm-dark-border,#334155); } @media (min-width:640px) { #quoteProjectSelect { width: min(24rem,38vw); transition: max-width .35s ease; } #quoteSearchWrap.fm-page-center-search { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); margin: 0 !important; } #quotePageTop:has(.fm-water-search.is-open) #quoteProjectSelect { max-width: calc(50vw - 160px); } } @media (max-width:639.98px) { #quoteSearchWrap { position: relative; grid-column: 1 / -1; } #quoteModeControl { width: 100%; min-height: 52px; border-radius: 16px; padding: 6px; gap: 6px; display: grid; grid-template-columns: 1fr 1fr; } #quoteModeControl .fm-segmented-control { height: 38px; border-radius: 11px; } .fm-quote-information { grid-template-columns: minmax(0,1fr); gap: 18px; } .fm-quote-side-information { border-left: 0; border-top: 1px solid #e2e8f0; padding: 14px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .fm-quote-date-field { grid-column: 1 / -1; margin-top: 6px; } #quoteSideInformation .fm-quote-date-field input { max-width: none; } } @media (prefers-reduced-motion:reduce) { .fm-po-search-panel, .fm-po-search-field, #quoteProjectSelect { transition: none !important; } .fm-po-input-bubble::after, .fm-water-search.is-opening, .fm-water-search.is-closing, .fm-water-search.is-opening::after { animation: none !important; } } /* V00623 - Compact quote identity block, number aligned with directive. */ .fm-quote-information { grid-template-rows:auto auto; } #quoteDirectiveToolbar { grid-column:1; grid-row:1; margin:0; } #quoteMainInformation { grid-column:1; grid-row:2; } #quoteSideInformation { grid-column:2; grid-row:1 / 3; align-self:start; } #quoteMainInformation .fm-quote-short-field { width:50%; min-width:0; } #quoteMainInformation #quoteSignatureCard { max-width:430px; } #quoteSideInformation .fm-quote-date-field { margin-top:6px; } #quoteNoInput { height:32px; } #quoteSideInformation { gap:12px; } .fm-reserve-modes { margin-left:auto; flex-shrink:0; } #reserveDisplayModes[hidden], #reserveMoneyNotice[hidden], #reserveMoneyWarning[hidden] { display:none !important; } .fm-reserve-valuation-note { margin:0 0 10px; font-size:11px; line-height:1.5; color:#64748b; } .fm-reserve-money-warning { margin:0 0 12px; border:1px solid #fca5a5; border-left:4px solid #dc2626; background:#fef2f2; color:#991b1b; padding:10px 14px; border-radius:12px; font-size:12px; line-height:1.6; } .fm-reserve-cost-missing { color:#dc2626; font-weight:600; } html.dark .fm-reserve-valuation-note { color:#94a3b8; } html.dark .fm-reserve-money-warning { background:rgba(127,29,29,.25); color:#fecaca; border-color:#b91c1c; } html.dark .fm-reserve-cost-missing { color:#fca5a5; } @media(max-width:900px) { #quoteMainInformation .fm-quote-short-field { width:75%; } } @media(max-width:639.98px) { .fm-quote-information { grid-template-columns:minmax(0,1fr) minmax(130px,.8fr); gap:16px 12px; } #quoteMainInformation { grid-column:1 / -1; grid-row:2; } #quoteMainInformation .fm-quote-short-field { width:100%; } #quoteSideInformation { grid-column:2; grid-row:1; display:flex; padding:0; border:0; gap:10px; } #quoteDirectiveToolbar { grid-column:1; grid-row:1; } #quoteDirectiveSelect { width:100%; } #quoteSideInformation .fm-quote-date-field { margin-top:0; } #reserveDisplayModes { grid-column:1 / -1; justify-self:end; } } /* V00623 - The object/title stays full width, even with a project. */ #quoteTitleField { width:100%; min-width:0; } #reserveHeaderControls #reserveLoadBtn { margin-left:0 !important; } /* V00658 — Alignement Projets/Directives: les actions vivent dans l'encadré, afin que le bord supérieur du tableau soit au même niveau que les autres pages. */ .fm-entity-card-toolbar { min-height: 28px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-bottom: 8px; } .fm-entity-card-toolbar-mapping { justify-content: space-between; } .fm-entity-card-toolbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex: 0 0 auto; } .fm-entity-mapping-status { flex: 1 1 auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } @media (max-width: 639.98px) { .fm-entity-card-toolbar, .fm-entity-card-toolbar-mapping { align-items: flex-start; } .fm-entity-card-toolbar-mapping { flex-wrap: wrap; } .fm-entity-mapping-status { order: 2; flex-basis: 100%; white-space: normal; } .fm-entity-card-toolbar-actions { margin-left: auto; flex-wrap: wrap; } } /* V00657 — Projets / Directives: même en-tête que les autres sections + vue liste/fiche. */ #projectsView .fm-unified-page-top, #directivesView .fm-unified-page-top { min-height: 42px; } @media (min-width: 640px) { #projectSearchWrap.fm-page-center-search, #directiveSearchWrap.fm-page-center-search { position: absolute; top: 50%; transform: translate(-50%, -50%); z-index: 10; margin: 0 !important; } #projectClientFilter, #directiveProjectFilter { max-width: min(24rem, 38vw); } } @media (max-width: 639.98px) { #projectSearchWrap, #directiveSearchWrap { position: relative; grid-column: 1 / -1; } #projectViewModes, #directiveViewModes { width: 100%; min-height: 52px; border-radius: 16px; padding: 6px; gap: 6px; display: grid; grid-template-columns: 1fr 1fr; } #projectViewModes .fm-segmented-control, #directiveViewModes .fm-segmented-control { height: 38px; border-radius: 11px; } } .fm-entity-workspace { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; } .fm-entity-workspace > * { min-width: 0; } .fm-entity-detail-pane { min-width: 0; position: sticky; top: 8px; border-radius: 16px; overflow: hidden; background: white; border: 1px solid #e2e8f0; box-shadow: 0 1px 4px rgba(15,23,42,.12); } .fm-entity-detail-pane[hidden] { display: none !important; } .fm-entity-detail-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-bottom: 1px solid #e2e8f0; background: rgba(248,250,252,.9); } .fm-entity-detail-content { min-height: 360px; max-height: calc(78dvh - 52px); overflow: auto; padding: 12px; } .fm-entity-detail-content > :first-child { margin-top: 0 !important; } .fm-entity-detail-empty { min-height: 320px; display: grid; place-items: center; padding: 24px; color: #64748b; font-size: 12px; text-align: center; } html.dark .fm-entity-detail-pane { background: var(--fm-dark-surface,#0b1f33); border-color: var(--fm-dark-border,#334155); } html.dark .fm-entity-detail-header { border-color: var(--fm-dark-border,#334155); background: rgba(15,23,42,.78); } @media (min-width: 900px) { .fm-entity-workspace[data-view="split"] { grid-template-columns: minmax(310px, .72fr) minmax(0, 1.28fr); } .fm-entity-workspace[data-view="split"] .fm-entity-list-scroll { max-height: 78dvh; overflow: auto; } /* Projets: en vue partagée on garde exactement Nom + Code + Client. */ #projectsWorkspace[data-view="split"] table th:nth-child(n+4), #projectsWorkspace[data-view="split"] table td:nth-child(n+4) { display:none !important; } /* Directives: liste compacte = Code + Sous-projet + Description. */ #directivesWorkspace[data-view="split"] table th:nth-child(3), #directivesWorkspace[data-view="split"] table td:nth-child(3), #directivesWorkspace[data-view="split"] table th:nth-child(5), #directivesWorkspace[data-view="split"] table td:nth-child(5), #directivesWorkspace[data-view="split"] table th:nth-child(6), #directivesWorkspace[data-view="split"] table td:nth-child(6) { display:none !important; } } @media (max-width: 899.98px) { .fm-entity-workspace[data-view="split"] { grid-template-columns: minmax(0,1fr); } .fm-entity-detail-pane { position: relative; top: auto; } .fm-entity-detail-content { max-height: none; } } #projectsTableBody tr[data-inline-selected="true"] td, #directivesTableBody tr[data-inline-selected="true"] td { background: rgba(14,165,233,.10) !important; } #projectsTableBody tr[data-inline-selected="true"] td:first-child, #directivesTableBody tr[data-inline-selected="true"] td:first-child { box-shadow: inset 3px 0 #0284c7; } /* V00659 - Compact icon controls with anchored styled popovers. */ .fm-popover-control-bar { overflow: visible; } .fm-control-popover-wrap { position: relative; display: inline-flex; flex: 0 0 auto; } .fm-control-popover { position: absolute; top: calc(100% + 8px); right: 0; z-index: 90; min-width: max-content; padding: 7px; border: 1px solid rgba(148,163,184,.34); border-radius: 13px; background: rgba(255,255,255,.98); box-shadow: 0 14px 32px rgba(15,23,42,.16), 0 2px 8px rgba(15,23,42,.08); backdrop-filter: blur(12px); } .fm-control-popover.hidden { display: none !important; } .fm-control-popover-row { display: flex; align-items: center; gap: 5px; } .fm-control-popover-list { min-width: 142px; display: grid; gap: 4px; } .fm-popover-choice { display: flex; align-items: center; width: 100%; min-height: 34px; padding: 0 11px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: #475569; font-size: 12px; font-weight: 600; text-align: left; white-space: nowrap; cursor: pointer; } .fm-popover-choice:hover { background: #f1f5f9; color: #0f172a; } .fm-popover-choice[aria-pressed="true"], .fm-popover-choice.is-active { color: #0284c7; background: rgba(240,249,255,.96); border-color: rgba(14,165,233,.32); } .fm-control-popover::before { content: ""; position: absolute; top: -5px; right: 12px; width: 9px; height: 9px; transform: rotate(45deg); background: inherit; border-left: 1px solid rgba(148,163,184,.28); border-top: 1px solid rgba(148,163,184,.28); } html.dark .fm-control-popover { background: color-mix(in srgb, var(--fm-dark-surface,#0b1f33) 97%, transparent); border-color: color-mix(in srgb, var(--fm-dark-border,#334155) 78%, transparent); box-shadow: 0 16px 34px rgba(0,0,0,.35); } html.dark .fm-popover-choice { color: #cbd5e1; } html.dark .fm-popover-choice:hover { background: var(--fm-dark-hover,#163a5e); color: #f8fafc; } html.dark .fm-popover-choice[aria-pressed="true"], html.dark .fm-popover-choice.is-active { color: #7dd3fc; background: rgba(3,105,161,.24); border-color: rgba(14,165,233,.42); } html.dark .fm-control-popover::before { border-color: color-mix(in srgb, var(--fm-dark-border,#334155) 78%, transparent); } #timelinePeriodControls, #payrollYearControl { overflow: visible; } #quoteModeControl .fm-segmented-square { width: 32px; min-width: 32px; padding: 0; } #quoteModeControl .fm-segmented-square i { font-size: 13px; } @media (max-width:639.98px) { #timelinePeriodControls, #payrollYearControl { width: auto; min-height: 52px; display: inline-flex; justify-self: end; } #timelinePeriodControls .fm-segmented-square, #payrollYearControl .fm-segmented-square { width: 38px; min-width: 38px; } #quoteModeControl { width: auto; min-height: 52px; display: inline-flex; grid-template-columns: none; justify-self: end; } #quoteModeControl .fm-segmented-control { width: 38px; min-width: 38px; padding: 0; } .fm-control-popover { right: 0; } } /* V00785 — Standard unique de la ligne haute sur desktop. Une seule géométrie pour Temps, Documents, Projets et Comptabilité : page 44px / liste 32px / recherche 36px / modes 42px (boutons 32px). */ @media (min-width: 640px) { .fm-unified-page-top { min-height: 44px !important; margin-top: 0 !important; margin-bottom: 0 !important; align-items: center !important; } .fm-unified-controls-row { min-height: 44px !important; height: 44px; align-items: center !important; } /* Toutes les listes déroulantes de la ligne haute ont exactement la même taille. */ .fm-unified-controls-row select:not(.sr-only), .fm-top-project-select { height: 32px !important; min-height: 32px !important; max-height: 32px !important; box-sizing: border-box !important; padding-top: 0 !important; padding-bottom: 0 !important; font-size: 12px !important; line-height: 1 !important; border-radius: 8px !important; } .fm-page-center-search { min-height: 36px !important; height: 36px; align-items: center !important; } .fm-water-search { width: 36px; height: 36px; min-height: 36px; } .fm-segmented-bar { min-height: 42px !important; height: 42px; padding: 4px !important; gap: 4px !important; border-radius: 12px !important; box-sizing: border-box !important; } .fm-segmented-control { height: 32px !important; min-height: 32px !important; border-radius: 8px !important; box-sizing: border-box !important; } .fm-segmented-square { width: 32px !important; min-width: 32px !important; padding-left: 0 !important; padding-right: 0 !important; } /* Neutralise les anciens 42px propres à quelques sections. */ #timelineView .fm-unified-page-top, #reserveView .fm-unified-page-top, #projectsView .fm-unified-page-top, #directivesView .fm-unified-page-top, #managerTimesheetView .fm-unified-page-top, #payrollView .fm-unified-page-top, #plansPageTop, #timesheetsPageTop, #quotePageTop, #repartitionHeaderRow, #lettersPageTop, #projectsPageTop, #directivesPageTop, #avenantsPageTop, #poHeaderRow { min-height: 44px !important; } } /* V00789 — Axe central universel des loupes desktop/tablette. La recherche ne participe plus au calcul flex gauche/droite : elle est toujours centrée sur le gabarit complet de la page, même si les menus/actions changent. */ /* V00796 — Le viewport racine ne réserve aucune gouttière globale. Les conteneurs réellement défilants conservent leur propre gestion de scrollbar. Cela supprime la bande vide à droite du site, y compris après la scrollbar et à droite de la barre supérieure, sans modifier les marges utiles des pages. */ html { scrollbar-gutter: auto; } @media (min-width: 640px) { .fm-unified-page-top { position: relative !important; } .fm-unified-page-top > .fm-unified-controls-row { position: static !important; } .fm-unified-page-top .fm-page-center-search { position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; margin: 0 !important; width: auto !important; min-width: 36px !important; z-index: 30 !important; justify-content: center !important; } } /* V00790 — géométrie globale des pages. Objectifs : 1) la loupe reste sur l'axe exact du viewport, indépendamment des contrôles voisins et de la présence d'une scrollbar; 2) toutes les pages utilisent la même gouttière droite/gauche de 16 px; 3) les barres de modes sont ancrées sur le même bord droit que le contenu. */ @media (min-width: 640px) { :root { --fm-page-inline-gutter: 1rem; } /* Même largeur utile dans Feuille, Gestion et les pages natives du Shell. */ html.fm-embed main#main, html.fm-gp-embedded main#main { padding-left: var(--fm-page-inline-gutter) !important; padding-right: var(--fm-page-inline-gutter) !important; box-sizing: border-box !important; scrollbar-gutter: stable !important; } #shellAccountingHub > .w-full { padding-left: var(--fm-page-inline-gutter) !important; padding-right: var(--fm-page-inline-gutter) !important; box-sizing: border-box !important; } /* Le host et sa ligne supérieure occupent toujours 100 % de la largeur utile. */ .fm-shell-page-identity-host, .fm-unified-page-top, .fm-unified-controls-row { width: 100% !important; max-width: none !important; box-sizing: border-box !important; } .fm-unified-page-top, .fm-unified-controls-row { margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } /* Axe universel : la page commence à 16 px du viewport; 50vw - 16 px place donc le centre de la loupe exactement à 50vw, même si la largeur du contenu change à cause d'une scrollbar ou de contrôles gauche/droite différents. */ .fm-unified-page-top .fm-page-center-search { position: absolute !important; left: calc(50vw - var(--fm-page-inline-gutter)) !important; right: auto !important; top: 50% !important; transform: translate(-50%, -50%) !important; margin: 0 !important; z-index: 30 !important; } /* Toutes les familles de modes se terminent exactement au bord droit utile. */ .fm-unified-controls-row > .fm-view-modes, .fm-unified-controls-row > .fm-period-controls, .fm-unified-controls-row > #dbDashboardTabs, .fm-unified-controls-row > #payrollYearControl, .fm-unified-controls-row > #quoteModeControl, .fm-unified-controls-row > #reserveDisplayModes, .fm-unified-controls-row > #timelinePeriodControls, .fm-unified-controls-row > #poViewModes, .fm-unified-controls-row > #shellAccountingDepositViewModes, .fm-unified-controls-row > #shellAccountingAgingViewModes, .fm-unified-controls-row > #shellAccountingAssetsViewModes { margin-left: auto !important; margin-right: 0 !important; justify-self: end !important; flex-shrink: 0 !important; } /* Les sections pilotées par le Shell ne peuvent pas introduire une marge horizontale locale différente de la gouttière commune. */ html.fm-shell-page-identity-active .fm-shell-page-identity-host { margin-left: 0 !important; margin-right: 0 !important; } } @media (min-width: 640px) { html.fm-embed main#main > section:has(> .fm-unified-page-top), html.fm-gp-embedded main#main > section:has(> .fm-unified-page-top) { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } } /* V00791 — géométrie finale commune. - La marge visuelle droite reste exactement 16 px, même quand le scroller interne d'une app embarquée apparaît/disparaît. - La loupe est centrée sur le centre réel de la zone utile, et non sur la largeur des contrôles voisins. - Inscription est verrouillée sur la même famille de modes que le reste du site. */ @media (min-width: 640px) { :root { --fm-main-scrollbar-width: 0px; } html.fm-embed main#main, html.fm-gp-embedded main#main { padding-left: var(--fm-page-inline-gutter, 1rem) !important; padding-right: max(0px, calc(var(--fm-page-inline-gutter, 1rem) - var(--fm-main-scrollbar-width, 0px))) !important; box-sizing: border-box !important; } /* Avec la compensation de scrollbar ci-dessus, le centre du header correspond toujours au centre visuel du viewport de l'app. */ .fm-unified-page-top .fm-page-center-search { left: 50% !important; right: auto !important; top: 50% !important; transform: translate(-50%, -50%) !important; } /* Empêche l'ancien style Inscription de reprendre le dessus. */ #managerTimesheetView #mtLayoutTabs.fm-segmented-bar { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 4px !important; height: 42px !important; min-height: 42px !important; padding: 4px !important; border: 1px solid rgba(148,163,184,.32) !important; border-radius: 12px !important; background: rgba(255,255,255,.9) !important; box-shadow: 0 1px 3px rgba(15,23,42,.08) !important; } #managerTimesheetView #mtLayoutTabs .mt-layout-tab.fm-segmented-control { width: 32px !important; min-width: 32px !important; height: 32px !important; min-height: 32px !important; padding: 0 !important; border: 1px solid rgba(148,163,184,.28) !important; border-radius: 8px !important; background: rgba(255,255,255,.78) !important; color: #64748b !important; box-shadow: none !important; } #managerTimesheetView #mtLayoutTabs .mt-layout-tab.fm-segmented-control.is-active, #managerTimesheetView #mtLayoutTabs .mt-layout-tab.fm-segmented-control[aria-selected="true"] { color: #0284c7 !important; background: rgba(240,249,255,.92) !important; border-color: rgba(14,165,233,.38) !important; box-shadow: 0 3px 10px rgba(14,165,233,.10) !important; } html.dark #managerTimesheetView #mtLayoutTabs.fm-segmented-bar { background: color-mix(in srgb, var(--fm-dark-surface,#0b1f33) 94%, transparent) !important; border-color: color-mix(in srgb, var(--fm-dark-border,#334155) 75%, transparent) !important; } html.dark #managerTimesheetView #mtLayoutTabs .mt-layout-tab.fm-segmented-control { color: #cbd5e1 !important; background: color-mix(in srgb, var(--fm-dark-surface-2,#111827) 84%, transparent) !important; border-color: color-mix(in srgb, var(--fm-dark-border,#334155) 72%, transparent) !important; } html.dark #managerTimesheetView #mtLayoutTabs .mt-layout-tab.fm-segmented-control.is-active, html.dark #managerTimesheetView #mtLayoutTabs .mt-layout-tab.fm-segmented-control[aria-selected="true"] { color: #7dd3fc !important; background: rgba(3,105,161,.24) !important; border-color: rgba(14,165,233,.46) !important; } } /* V00792 — une seule gouttière de scrollbar par app embarquée. Le viewport racine ne réserve jamais une seconde gouttière : seul main#main, qui est le vrai conteneur défilant, gère la scrollbar. Cela aligne Feuille (Dashboard / Inscription / Rlv de paie) sur Gestion / Achats. */ html.fm-embed, html.fm-embed body, html.fm-gp-embedded, html.fm-gp-embedded body { scrollbar-gutter: auto !important; } /* V00793 — RLV de paie: aucun contenu d'un relevé ne peut imposer une largeur supérieure à la zone utile. Les noms de PDF longs se replient au lieu de créer un défilement horizontal de toute la page. */ #payrollView, #payrollLayout, #payrollLayout > *, #payrollList, #payrollList .payroll-year-group, #payrollList .payroll-year-body, #payrollList .payroll-slip-card, #payrollViewerCard { min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; } #payrollList .payroll-slip-card > .flex { min-width: 0 !important; max-width: 100% !important; } #payrollList .payroll-slip-card > .flex > :first-child { min-width: 0 !important; max-width: 100% !important; flex: 1 1 auto !important; } #payrollList .payroll-slip-card > .flex > :first-child > * { max-width: 100% !important; overflow-wrap: anywhere !important; word-break: break-word !important; } #payrollViewerTitle, #payrollViewerSubtitle, #payrollInfoLine { min-width: 0 !important; max-width: 100% !important; overflow-wrap: anywhere !important; word-break: break-word !important; } @media (min-width: 640px) { #payrollEmployeeFilterWrap { min-width: 0 !important; max-width: min(24rem, calc(50vw - 4rem)) !important; } #payrollEmployeeFilter { width: 24rem !important; max-width: 100% !important; min-width: 0 !important; } } /* V00793 — Comptabilité native du Shell: même marge droite visuelle que les pages iframe (Achats, Projets, etc.). La règle globale #shellAccountingHub > .w-full ne doit pas écraser la compensation de la scrollbar du hub. */ @media (min-width: 640px) { #shellAccountingHub > #shellAccountingInner.w-full { padding-left: var(--fm-page-inline-gutter, 1rem) !important; padding-right: max(0px, calc(var(--fm-page-inline-gutter, 1rem) - var(--fm-accounting-scrollbar-width, 0px))) !important; box-sizing: border-box !important; } } /* V00799 — Répartition : la rangée d'actions locale est vide lorsque le Shell déporte ses boutons dans la barre d'action. La masquer évite un second espacement vertical (space-y-4) avant l'encadré de sélection. */ html.fm-shell-command-remote-active #repartitionLocalActionsRow { display: none !important; } /* V00837 — MOBILE SEULEMENT : toutes les vraies barres de modes reprennent exactement la famille compacte de Réserve. Les boutons propres à chaque page sont conservés; seules la géométrie, les bordures, le fond et les états changent. Ne touche ni aux contrôles de période/année ni au desktop. */ @media (max-width: 767.98px) { .fm-view-modes:not(.hidden):not([hidden]), #quoteModeControl:not(.hidden):not([hidden]), #reserveDisplayModes:not(.hidden):not([hidden]), #dbDashboardTabs:not(.hidden):not([hidden]) { width: auto !important; min-width: 0 !important; height: 42px !important; min-height: 42px !important; max-height: 42px !important; display: inline-flex !important; grid-template-columns: none !important; align-items: center !important; justify-content: center !important; justify-self: end !important; flex: 0 0 auto !important; gap: 4px !important; padding: 4px !important; margin-left: auto !important; margin-right: 0 !important; border: 1px solid rgba(148,163,184,.32) !important; border-radius: 12px !important; background: rgba(255,255,255,.90) !important; box-shadow: 0 1px 3px rgba(15,23,42,.08) !important; box-sizing: border-box !important; } .fm-view-modes .fm-segmented-control, #quoteModeControl .fm-segmented-control, #reserveDisplayModes .fm-segmented-control, #dbDashboardTabs .db-dashboard-tab { width: 32px !important; min-width: 32px !important; max-width: 32px !important; height: 32px !important; min-height: 32px !important; max-height: 32px !important; flex: 0 0 32px !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border: 1px solid rgba(148,163,184,.28) !important; border-radius: 8px !important; background: rgba(255,255,255,.78) !important; color: #64748b !important; box-shadow: none !important; font-size: 12px !important; line-height: 1 !important; } .fm-view-modes .fm-segmented-control i, #quoteModeControl .fm-segmented-control i, #reserveDisplayModes .fm-segmented-control i, #dbDashboardTabs .db-dashboard-tab i { font-size: 11px !important; } .fm-view-modes .fm-segmented-control[aria-pressed="true"], .fm-view-modes .fm-segmented-control[aria-selected="true"], .fm-view-modes .fm-segmented-control.is-active, #quoteModeControl .fm-segmented-control[aria-pressed="true"], #reserveDisplayModes .fm-segmented-control[aria-pressed="true"], #dbDashboardTabs .db-dashboard-tab[aria-selected="true"] { color: #0284c7 !important; background: rgba(240,249,255,.92) !important; border-color: rgba(14,165,233,.38) !important; box-shadow: 0 3px 10px rgba(14,165,233,.10) !important; } html.dark .fm-view-modes:not(.hidden):not([hidden]), html.dark #quoteModeControl:not(.hidden):not([hidden]), html.dark #reserveDisplayModes:not(.hidden):not([hidden]), html.dark #dbDashboardTabs:not(.hidden):not([hidden]) { background: color-mix(in srgb, var(--fm-dark-surface,#0b1f33) 94%, transparent) !important; border-color: color-mix(in srgb, var(--fm-dark-border,#334155) 75%, transparent) !important; box-shadow: 0 1px 3px rgba(0,0,0,.18) !important; } html.dark .fm-view-modes .fm-segmented-control, html.dark #quoteModeControl .fm-segmented-control, html.dark #reserveDisplayModes .fm-segmented-control, html.dark #dbDashboardTabs .db-dashboard-tab { color: #cbd5e1 !important; background: color-mix(in srgb, var(--fm-dark-surface-2,#111827) 84%, transparent) !important; border-color: color-mix(in srgb, var(--fm-dark-border,#334155) 72%, transparent) !important; box-shadow: none !important; } html.dark .fm-view-modes .fm-segmented-control[aria-pressed="true"], html.dark .fm-view-modes .fm-segmented-control[aria-selected="true"], html.dark .fm-view-modes .fm-segmented-control.is-active, html.dark #quoteModeControl .fm-segmented-control[aria-pressed="true"], html.dark #reserveDisplayModes .fm-segmented-control[aria-pressed="true"], html.dark #dbDashboardTabs .db-dashboard-tab[aria-selected="true"] { color: #7dd3fc !important; background: rgba(3,105,161,.24) !important; border-color: rgba(14,165,233,.46) !important; box-shadow: 0 3px 10px rgba(14,165,233,.10) !important; } } /* V00838 — MOBILE SEULEMENT 1) Toutes les barres de modes du bandeau reprennent EXACTEMENT la géométrie de Réserve (42 px / boutons 32 px), y compris Chronologie, Rlv de paie et Achats. 2) La liste déroulante principale reste à gauche, sur la même ligne que les modes, et adopte la même goutte animée que dans la télécommande gauche. */ .fm-mobile-primary-select-morph { display: contents; } .fm-mobile-primary-select-toggle { display: none; } @media (max-width: 767.98px) { .fm-unified-controls-row { position: relative !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; width: 100% !important; min-width: 0 !important; min-height: 42px !important; height: 42px !important; gap: 8px !important; } /* Famille Réserve : même boîte extérieure pour toutes les barres de modes. */ .fm-unified-controls-row > .fm-segmented-bar:not(.hidden):not([hidden]), #timelinePeriodControls:not(.hidden):not([hidden]), #payrollYearControl:not(.hidden):not([hidden]), #poViewModes:not(.hidden):not([hidden]) { width: auto !important; min-width: 0 !important; height: 42px !important; min-height: 42px !important; max-height: 42px !important; display: inline-flex !important; grid-template-columns: none !important; align-items: center !important; justify-content: center !important; align-self: center !important; justify-self: auto !important; flex: 0 0 auto !important; gap: 4px !important; padding: 4px !important; margin: 0 0 0 auto !important; border-radius: 12px !important; box-sizing: border-box !important; } .fm-unified-controls-row > .fm-segmented-bar .fm-segmented-control, #timelinePeriodControls .fm-segmented-control, #payrollYearControl .fm-segmented-control, #poViewModes .fm-segmented-control { width: 32px !important; min-width: 32px !important; max-width: 32px !important; height: 32px !important; min-height: 32px !important; max-height: 32px !important; flex: 0 0 32px !important; padding: 0 !important; border-radius: 8px !important; line-height: 1 !important; box-sizing: border-box !important; } #timelinePeriodControls .fm-control-popover-wrap, #payrollYearControl .fm-control-popover-wrap { width: 32px !important; min-width: 32px !important; height: 32px !important; min-height: 32px !important; flex: 0 0 32px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } /* La liste principale occupe le coin gauche sans pousser la barre de modes. */ .fm-mobile-primary-select-host { order: -20 !important; width: 33px !important; min-width: 33px !important; max-width: 33px !important; height: 33px !important; min-height: 33px !important; flex: 0 0 33px !important; grid-column: auto !important; justify-self: start !important; align-self: center !important; margin: 0 !important; overflow: visible !important; position: relative !important; z-index: 72 !important; } .fm-mobile-primary-select-host > div:not(.fm-mobile-primary-select-morph) { width: 33px !important; min-width: 33px !important; max-width: 33px !important; height: 33px !important; min-height: 33px !important; overflow: visible !important; } .fm-mobile-primary-select-morph { --fm-mobile-primary-select-open-width: 250px; position: absolute !important; left: 0 !important; top: 0 !important; display: block !important; width: 33px !important; height: 33px !important; min-width: 33px !important; min-height: 33px !important; border: 1px solid rgba(99,102,241,.34) !important; border-radius: .82rem !important; background: rgba(255,255,255,.96) !important; box-shadow: 0 2px 8px rgba(15,23,42,.08) !important; overflow: hidden !important; transform-origin: left center !important; transition: width .42s cubic-bezier(.2,.78,.2,1), border-radius .42s cubic-bezier(.2,.78,.2,1), box-shadow .30s ease, background-color .30s ease !important; will-change: width,border-radius !important; z-index: 90 !important; } .fm-mobile-primary-select-morph.is-open { width: min(var(--fm-mobile-primary-select-open-width), calc(100vw - 5rem)) !important; border-radius: .72rem !important; box-shadow: 0 10px 28px rgba(15,23,42,.16) !important; background: #fff !important; } .fm-mobile-primary-select-toggle { position: absolute !important; left: 0 !important; top: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 31px !important; height: 31px !important; min-width: 31px !important; min-height: 31px !important; padding: 0 !important; border: 0 !important; border-radius: .76rem !important; background: transparent !important; color: #4f46e5 !important; cursor: pointer !important; z-index: 2 !important; } .fm-mobile-primary-select-native { position: absolute !important; left: 32px !important; top: 3px !important; width: calc(100% - 37px) !important; height: 27px !important; min-height: 27px !important; max-height: 27px !important; margin: 0 !important; padding: 0 1.65rem 0 .38rem !important; border: 0 !important; outline: 0 !important; border-radius: .5rem !important; background: transparent !important; color: #0f172a !important; font-size: 12px !important; line-height: 1 !important; opacity: 0 !important; transform: translateX(-10px) !important; pointer-events: none !important; transition: opacity .18s ease .08s, transform .30s cubic-bezier(.2,.78,.2,1) !important; z-index: 1 !important; appearance: auto !important; -webkit-appearance: menulist !important; } .fm-mobile-primary-select-morph.is-open .fm-mobile-primary-select-native { opacity: 1 !important; transform: translateX(0) !important; pointer-events: auto !important; } /* La loupe garde son axe central pendant que liste et modes partagent la ligne. */ .fm-unified-controls-row > .fm-page-center-search { position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%,-50%) !important; width: 36px !important; min-width: 36px !important; height: 36px !important; min-height: 36px !important; margin: 0 !important; grid-column: auto !important; z-index: 40 !important; } html.dark .fm-mobile-primary-select-morph { background: color-mix(in srgb,var(--fm-dark-surface,#0f172a) 96%,transparent) !important; border-color: rgba(129,140,248,.42) !important; } html.dark .fm-mobile-primary-select-morph.is-open { background: var(--fm-dark-surface,#0f172a) !important; box-shadow: 0 12px 30px rgba(0,0,0,.32) !important; } html.dark .fm-mobile-primary-select-toggle { color: #a5b4fc !important; } html.dark .fm-mobile-primary-select-native { color: #f8fafc !important; color-scheme: dark; } } /* V00839 — MOBILE SEULEMENT La recherche reprend sa propre ligne AU-DESSUS. La seconde ligne contient uniquement la liste principale a gauche et la barre de modes a droite. Cette geometrie remplace le centrage absolu V00838 qui pouvait bloquer l'ouverture de la goutte de recherche sur mobile. */ @media (max-width: 767.98px) { .fm-unified-controls-row { display: grid !important; grid-template-columns: minmax(33px, 1fr) auto !important; grid-template-rows: 40px 42px !important; column-gap: 8px !important; row-gap: 4px !important; align-items: center !important; width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 86px !important; overflow: visible !important; } /* Ligne 1 : loupe seule, centree, avec toute la largeur necessaire pour l'animation d'ouverture. */ .fm-unified-controls-row > .fm-page-center-search { position: relative !important; left: auto !important; right: auto !important; top: auto !important; transform: none !important; grid-column: 1 / -1 !important; grid-row: 1 !important; justify-self: stretch !important; align-self: center !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-width: 0 !important; height: 40px !important; min-height: 40px !important; margin: 0 !important; overflow: visible !important; z-index: 120 !important; pointer-events: none !important; } .fm-unified-controls-row > .fm-page-center-search .fm-water-search { position: relative !important; left: auto !important; top: auto !important; transform-origin: center center !important; pointer-events: auto !important; z-index: 121 !important; } .fm-unified-controls-row > .fm-page-center-search .fm-water-search.is-open { width: min(var(--fm-water-open-width), calc(100vw - 2rem)) !important; } /* Ligne 2 : liste principale a gauche. */ .fm-mobile-primary-select-host { grid-column: 1 !important; grid-row: 2 !important; justify-self: start !important; align-self: center !important; order: initial !important; z-index: 90 !important; } /* Ligne 2 : tous les modes a droite, meme famille Reserve. */ .fm-unified-controls-row > .fm-segmented-bar:not(.hidden):not([hidden]), #timelinePeriodControls:not(.hidden):not([hidden]), #payrollYearControl:not(.hidden):not([hidden]), #poViewModes:not(.hidden):not([hidden]) { grid-column: 2 !important; grid-row: 2 !important; justify-self: end !important; align-self: center !important; margin: 0 !important; } }