/* Échec de l'agrandissement. Renvoi du contenu non agrandi. (873,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (877,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (1284,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (1418,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (2289,16): run-time error CSS1036: Expected expression, found '@colorDefault' (2290,23): run-time error CSS1036: Expected expression, found '@colorDefault' (2632,16): run-time error CSS1036: Expected expression, found '@colorDefault' (2672,16): run-time error CSS1036: Expected expression, found '@colorDefault' (2673,23): run-time error CSS1036: Expected expression, found '@colorDefault' (2763,16): run-time error CSS1036: Expected expression, found '@colorDefault' (2799,16): run-time error CSS1036: Expected expression, found '@colorDefault' (2840,16): run-time error CSS1036: Expected expression, found '@colorDefault' (2841,23): run-time error CSS1036: Expected expression, found '@colorDefault' (3052,24): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-text-selected' (3059,21): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-text-selected' (3063,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-text-active' (3068,33): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-text-active' (3132,20): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-text-selected' (3168,33): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (3790,28): run-time error CSS1039: Token not allowed after unary operator: '-color-success-border-discrete-default' (3791,22): run-time error CSS1039: Token not allowed after unary operator: '-color-success-surface-discrete-default' (3792,17): run-time error CSS1039: Token not allowed after unary operator: '-color-success-text-regular-default' (3799,23): run-time error CSS1039: Token not allowed after unary operator: '-body-xxs-regular-fontFamily' (3800,21): run-time error CSS1039: Token not allowed after unary operator: '-body-xxs-regular-fontSize' (3803,23): run-time error CSS1039: Token not allowed after unary operator: '-body-xxs-regular-lineHeight' (3804,26): run-time error CSS1039: Token not allowed after unary operator: '-body-xxs-regular-letterSpacing' (3808,28): run-time error CSS1039: Token not allowed after unary operator: '-color-warning-border-discrete-default' (3809,22): run-time error CSS1039: Token not allowed after unary operator: '-color-warning-surface-discrete-default' (3810,17): run-time error CSS1039: Token not allowed after unary operator: '-color-warning-text-regular-default' (3825,28): run-time error CSS1039: Token not allowed after unary operator: '-color-neutral-surface-discrete-default' (4159,8): run-time error CSS1030: Expected identifier, found '>' (4159,50): run-time error CSS1031: Expected selector, found ')' (4159,50): run-time error CSS1025: Expected comma or open brace, found ')' (4186,8): run-time error CSS1030: Expected identifier, found '>' (4186,50): run-time error CSS1031: Expected selector, found ')' (4186,50): run-time error CSS1025: Expected comma or open brace, found ')' (4271,8): run-time error CSS1030: Expected identifier, found '>' (4271,54): run-time error CSS1031: Expected selector, found ')' (4271,54): run-time error CSS1025: Expected comma or open brace, found ')' (4459,26): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface-discrete-hover' (4718,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4719,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4720,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4776,24): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (4777,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (4783,21): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (4787,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (4797,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (4900,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface-discrete-selected' (5325,25): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (5330,25): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (5335,43): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (5430,35): run-time error CSS1039: Token not allowed after unary operator: '-color-warning' (5434,35): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-brand' (5538,18): run-time error CSS1030: Expected identifier, found '.' (5538,43): run-time error CSS1031: Expected selector, found ')' (5538,43): run-time error CSS1025: Expected comma or open brace, found ')' (5544,18): run-time error CSS1030: Expected identifier, found '.' (5544,50): run-time error CSS1031: Expected selector, found ')' (5544,50): run-time error CSS1025: Expected comma or open brace, found ')' (5691,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface-discrete-hover' (5701,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-border-inverted' (5845,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (5860,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (5865,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (5866,24): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (5874,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (5907,35): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (5908,21): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (5932,21): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (5935,39): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (5959,25): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (6015,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (6044,28): run-time error CSS1039: Token not allowed after unary operator: '-url-img-close-btn' (6150,28): run-time error CSS1039: Token not allowed after unary operator: '-dropdown-icon-path' (6166,28): run-time error CSS1039: Token not allowed after unary operator: '-dropdown-icon-path' (6181,28): run-time error CSS1039: Token not allowed after unary operator: '-dropdown-icon-white-path' (6204,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (6212,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (6287,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-border' (6467,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-border-inverted' (6713,32): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (6714,36): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (6715,21): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (6723,21): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (6733,32): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (6734,36): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (6735,21): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (6739,25): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (6752,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (6753,32): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (6754,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (6759,21): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (6771,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (6783,46): run-time error CSS1030: Expected identifier, found '.' (6783,61): run-time error CSS1031: Expected selector, found ')' (6783,61): run-time error CSS1025: Expected comma or open brace, found ')' (6840,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (6843,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (6853,32): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (6859,26): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (7228,17): run-time error CSS1039: Token not allowed after unary operator: '-size-dim-150' (7229,18): run-time error CSS1039: Token not allowed after unary operator: '-size-dim-150' (7233,17): run-time error CSS1039: Token not allowed after unary operator: '-size-dim-200' (7234,18): run-time error CSS1039: Token not allowed after unary operator: '-size-dim-200' (7238,17): run-time error CSS1039: Token not allowed after unary operator: '-size-dim-300' (7239,18): run-time error CSS1039: Token not allowed after unary operator: '-size-dim-300' (7243,17): run-time error CSS1039: Token not allowed after unary operator: '-size-dim-1000' (7244,18): run-time error CSS1039: Token not allowed after unary operator: '-size-dim-1000' (7256,22): run-time error CSS1039: Token not allowed after unary operator: '-neo-loader-stroke-color' (7260,28): run-time error CSS1039: Token not allowed after unary operator: '-size-dim-100' (7277,18): run-time error CSS1039: Token not allowed after unary operator: '-size-dim-400' (7278,17): run-time error CSS1039: Token not allowed after unary operator: '-size-dim-400' (7284,28): run-time error CSS1039: Token not allowed after unary operator: '-url-brand-small-logo-path' (7320,17): run-time error CSS1039: Token not allowed after unary operator: '-header-text-color' (7328,17): run-time error CSS1039: Token not allowed after unary operator: '-header-text-color' (7349,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (7356,28): run-time error CSS1039: Token not allowed after unary operator: '-color-success' (7360,28): run-time error CSS1039: Token not allowed after unary operator: '-color-warning' (7364,28): run-time error CSS1039: Token not allowed after unary operator: '-color-danger' (7387,28): run-time error CSS1039: Token not allowed after unary operator: '-limit-bg' (7407,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface-discrete-selected' (7426,17): run-time error CSS1039: Token not allowed after unary operator: '-limit-title-color' (7431,17): run-time error CSS1039: Token not allowed after unary operator: '-limit-message-color' (7440,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (7441,17): run-time error CSS1039: Token not allowed after unary operator: '-limit-cta-color' (7453,32): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-border-unchanged-hover' (7458,28): run-time error CSS1039: Token not allowed after unary operator: '-color-warning-bg' (7462,24): run-time error CSS1039: Token not allowed after unary operator: '-color-danger' (7466,32): run-time error CSS1039: Token not allowed after unary operator: '-color-danger-bg' (7470,24): run-time error CSS1039: Token not allowed after unary operator: '-color-info' (7474,32): run-time error CSS1039: Token not allowed after unary operator: '-color-info-bg' (7516,28): run-time error CSS1039: Token not allowed after unary operator: '-url-bg-arianne' (7539,17): run-time error CSS1039: Token not allowed after unary operator: '-upgrade-title-color' (7546,17): run-time error CSS1039: Token not allowed after unary operator: '-upgrade-subtitle-color' (7552,17): run-time error CSS1039: Token not allowed after unary operator: '-upgrade-desc-color' (7588,17): run-time error CSS1039: Token not allowed after unary operator: '-upgrade-feature-title' (7594,17): run-time error CSS1039: Token not allowed after unary operator: '-upgrade-feature-desc' (7601,32): run-time error CSS1039: Token not allowed after unary operator: '-upgrade-divider' (7623,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (7624,17): run-time error CSS1039: Token not allowed after unary operator: '-upgrade-btn-primary-color' (7625,24): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (7629,32): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-border-unchanged-hover' (7630,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (7635,17): run-time error CSS1039: Token not allowed after unary operator: '-upgrade-btn-secondary-color' (7636,24): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (7640,32): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-border-unchanged-hover' (7721,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (7733,48): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (7747,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (7851,17): run-time error CSS1039: Token not allowed after unary operator: '-color-warning' (7877,32): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface-discrete-hover' (7882,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface-discrete-selected' (7917,28): run-time error CSS1039: Token not allowed after unary operator: '-color-warning-bg' (7918,17): run-time error CSS1039: Token not allowed after unary operator: '-color-warning' (7922,28): run-time error CSS1039: Token not allowed after unary operator: '-color-success' (7971,24): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-brand' (7972,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface-discrete-selected' (7979,24): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-brand' (8347,24): run-time error CSS1039: Token not allowed after unary operator: '-color-danger' (8351,35): run-time error CSS1039: Token not allowed after unary operator: '-color-danger' (8355,21): run-time error CSS1039: Token not allowed after unary operator: '-color-danger' (8369,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (8379,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (8387,22): run-time error CSS1039: Token not allowed after unary operator: '-url-img-close-btn' (8452,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (8492,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (8496,26): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (8576,17): run-time error CSS1039: Token not allowed after unary operator: '-color-danger' (8667,17): run-time error CSS1039: Token not allowed after unary operator: '-color-danger' (8678,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (8682,28): run-time error CSS1039: Token not allowed after unary operator: '-color-danger' (8708,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (8713,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (8728,38): run-time error CSS1038: Expected hex color, found '#0003' (8753,24): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface-discrete-selected' (8758,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-border-inverted' (8759,31): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface-discrete-selected' (8800,21): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (8804,21): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (8857,24): run-time error CSS1039: Token not allowed after unary operator: '-color-danger' (8861,31): run-time error CSS1039: Token not allowed after unary operator: '-color-danger' (8865,17): run-time error CSS1039: Token not allowed after unary operator: '-color-danger' (8945,17): run-time error CSS1039: Token not allowed after unary operator: '-color-danger' (8971,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (9038,17): run-time error CSS1039: Token not allowed after unary operator: '-color-danger' (9112,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface-discrete-selected' (9129,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (9139,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (9173,28): run-time error CSS1039: Token not allowed after unary operator: '-color-danger' (9188,21): run-time error CSS1039: Token not allowed after unary operator: '-color-danger' (9195,17): run-time error CSS1039: Token not allowed after unary operator: '-color-danger' (9229,33): run-time error CSS1039: Token not allowed after unary operator: '-color-danger' (9249,17): run-time error CSS1039: Token not allowed after unary operator: '-color-danger' (9257,46): run-time error CSS1030: Expected identifier, found '.' (9257,47): run-time error CSS1030: Expected identifier, found 'popup-neo-assistant' (9257,66): run-time error CSS1031: Expected selector, found ')' (9257,66): run-time error CSS1025: Expected comma or open brace, found ')' (9286,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (9307,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (9340,24): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (9356,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (9386,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface-discrete-selected' (9397,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-border-inverted' (9398,35): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface-discrete-selected' (9414,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (9542,17): run-time error CSS1039: Token not allowed after unary operator: '-color-danger' (9572,17): run-time error CSS1039: Token not allowed after unary operator: '-color-danger' (9586,66): run-time error CSS1030: Expected identifier, found '.' (9586,67): run-time error CSS1030: Expected identifier, found 'popup-neo-assistant' (9586,86): run-time error CSS1031: Expected selector, found ')' (9586,86): run-time error CSS1025: Expected comma or open brace, found ')' (9728,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (9784,16): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-text-active' (9788,36): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-text-selected' (9792,21): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-text-active' (9796,20): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-text-active' (9851,18): run-time error CSS1039: Token not allowed after unary operator: '-main-accent-color' (9872,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (9931,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (10003,21): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (10026,21): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (10073,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (10074,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (10091,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (10111,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (10227,17): run-time error CSS1039: Token not allowed after unary operator: '-color-secondary-brand' (10254,33): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface-discrete-selected' (10255,32): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface-discrete-selected' (10256,34): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface-discrete-selected' (10271,26): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-border-inverted' (10302,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-border-inverted' (10333,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-border-inverted' (10362,28): run-time error CSS1039: Token not allowed after unary operator: '-url-bg-arianne' (10447,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface-discrete-hover' (10532,28): run-time error CSS1039: Token not allowed after unary operator: '-dropdown-icon-path' (10557,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface-discrete-hover' (11031,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (11096,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (11299,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (11300,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (11307,32): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (11315,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-text' (11406,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface-discrete-selected' (11573,16): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (11577,16): run-time error CSS1039: Token not allowed after unary operator: '-color-secondary-brand' (11581,16): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-brand' (11585,16): run-time error CSS1039: Token not allowed after unary operator: '-color-secondary-brand' (11686,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (11880,30): run-time error CSS1030: Expected identifier, found '.' (11880,42): run-time error CSS1031: Expected selector, found ')' (11880,42): run-time error CSS1025: Expected comma or open brace, found ')' (12355,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (12356,32): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-border-inverted' (12357,21): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (12393,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-border-inverted' (12394,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (12411,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (12705,1): run-time error CSS1019: Unexpected token, found '}' (12781,1): run-time error CSS1019: Unexpected token, found '@keyframes' (12782,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (13562,16): run-time error CSS1036: Expected expression, found '@colorDefault' (13605,16): run-time error CSS1036: Expected expression, found '@colorDefault' (13606,23): run-time error CSS1036: Expected expression, found '@colorDefault' (13637,12): run-time error CSS1036: Expected expression, found '@colorDefault' (13638,19): run-time error CSS1036: Expected expression, found '@colorDefault' (13672,12): run-time error CSS1036: Expected expression, found '@colorDefault' (13673,19): run-time error CSS1036: Expected expression, found '@colorDefault' (13682,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (13683,10): run-time error CSS1035: Expected colon, found '{' (13693,1): run-time error CSS1019: Unexpected token, found '@keyframes' (13694,10): run-time error CSS1035: Expected colon, found '{' (13711,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (13712,10): run-time error CSS1035: Expected colon, found '{' (13722,1): run-time error CSS1019: Unexpected token, found '@keyframes' (13723,10): run-time error CSS1035: Expected colon, found '{' (13762,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-surface' (13983,1): run-time error CSS1019: Unexpected token, found '}' (14050,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (14051,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (14064,1): run-time error CSS1019: Unexpected token, found '@-moz-keyframes' (14065,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (14078,1): run-time error CSS1019: Unexpected token, found '@keyframes' (14079,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (14119,1): run-time error CSS1019: Unexpected token, found '@keyframes' (14120,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' */ html, body { margin: 0; padding: 0; min-height: 100vh; } a:active, a:visited { color: inherit; } .score-ellisphere-green { color: green; font-weight: bold; } .score-ellisphere-orange { color: orange; font-weight: bold; } .score-ellisphere-red { color: red; font-weight: bold; } .score-ellisphere-black { color: black; font-weight: bold; } .dxgvSelectedRow_MetropolisBlueBP.tr-ecriture-a-j { font-weight: bold !important; } .dxgvSelectedRow_MetropolisBlueBP .score-ellisphere-green { font-weight: bold; } .dxgvSelectedRow_MetropolisBlueBP .score-ellisphere-orange { font-weight: bold; } .dxgvSelectedRow_MetropolisBlueBP .score-ellisphere-red { font-weight: bold; } .dxgvSelectedRow_MetropolisBlueBP .score-ellisphere-black { font-weight: bold; } body { font-family: Ubuntu; font-size: 13px; background: #f3f3f3; color: black; } .wrapper-cookies-policy { position: fixed; width: 100%; bottom: 0; background: lightyellow; text-align: center; font-size: smaller; box-shadow: 0 0 1px 1px #E2E2E2; line-height: 25px; z-index: 9; opacity: 0; height: 0px; } #install-chrome { position: fixed; width: 250px; height: 150px; background: white; color: black; box-shadow: 0 0 5px gray; display: none; padding: 10px 20px; opacity: 0; top: -150px; left: 50%; margin-left: -125px; z-index: 99999; } #reload-page { position: fixed; width: 250px; height: 150px; background: white; color: black; box-shadow: 0 0 5px gray; display: none; padding: 10px 20px; opacity: 0; top: -150px; left: 50%; margin-left: -125px; z-index: 99999; } .max-400 { overflow-y: auto; max-height: 400px; padding-right: 5px; } #install-chrome #close-install { width: 16px; opacity: 0.4; cursor: pointer; float: right; } #reload-page #close-install { width: 16px; opacity: 0.4; cursor: pointer; float: right; } #install-chrome #close-install:hover { opacity: 0.6; } #reload-page #close-install:hover { opacity: 0.6; } ::-webkit-scrollbar { width: 8px; height: 8px; background: rgba(210, 210, 210, 0.5); } /* Handle */ ::-webkit-scrollbar-thumb { background: rgba(165, 165, 165, 1); border-radius: 10px; } ::-webkit-scrollbar-thumb:window-inactive { background: rgba(165, 165, 165, 0.7); } .dxgvControl_MetropolisBlueBP, .dxgvDisabled_MetropolisBlueBP, .dxpcLite_MetropolisBlueBP, .dxdpLite_MetropolisBlueBP { font-family: Ubuntu !important; font-size: 13px !important; } .dxgvSearchPanel_MetropolisBlueBP { border: none; } .dxgvSearchPanel_MetropolisBlueBP > table { width: 100% !important; max-width: none !important; } .dxgvSearchPanel_MetropolisBlueBP .dxeButtonEdit_MetropolisBlueBP { float: right; } h1, h2, h3, h4, h5, h6 { font-weight: 400; } input, textarea { font-family: Ubuntu; font-size: 13px; } input[type='text'], input[type='password'], textarea { -webkit-appearance: none; -moz-appearance: none; } .mycheckbox { position: relative; top: 3px; margin-right: 5px; cursor: pointer; } .edevis-content { display: none; } select { font-family: Ubuntu; } .cash-flow-main{ margin-top: 8px; width: 180px; display: flex; flex-direction: column; gap: 16px; } .cash-flow-main .h2 { color: #666666; } .cash-flow-card { padding: 8px; width: 100%; height: fit-content; background-color: white; border: 1px solid #E1E1E1; border-radius: 4px; } .cash-flow-section{ display:flex; flex-direction: column; } .cash-flow-container { display: inline-flex; gap: 48px; } .cash-flow-col{ display: inline-flex; gap: 24px; /*flex-direction: column;*/ } .cash-flow-card h2 { font-size: 19px; font-weight: 700; color: #232323; margin-bottom: 12px; margin-left: 8px; margin-top: 4px; } .highcharts-tooltip > span { padding-top: -4px; } .cash-flow-row { display: flex; justify-content: space-between; font-size: 11px; gap: 12px; height: 17px; } .cash-flow-amount-percent { background-color: #FFF5E6; border: 1px solid #FFDCBD; border-radius: 4px; color: #AF4000; padding-left: 5px; padding-right: 5px; font-size: 11px; font-weight: 400; } .cash-flow-amount { font-size: 11px; font-weight: 600; margin-right: auto; } .cash-flow-section-title { display: flex; align-items: center; font-size: 14px; font-family: Ubuntu; font-weight: 500; color: #666666; margin-bottom: 12px; } .cash-flow-section-title img { padding-bottom: 2px; vertical-align: unset; } .cash-flow-value { font-weight: bold; margin-top: 5px; } .cash-flow-icon-container { width: 16px; height: 16px; border-radius: 4px; margin-right: 12px; } .pageTitle { max-height: 106px; padding: 8px 40px 8px 20px; gap: 24px; /*border: 1px solid #E1E1E1;*/ border-bottom: none; font-family: Ubuntu; font-size: 24px; font-weight: 300; text-align: left; /*background: #f3f3f3;*/ background-image: linear-gradient(180deg, #fff, #f5f5f5); } input { outline: none; border: none; padding: 4px 12px; border-radius : 4px; } input[type='checkbox'] { margin: 0 3px; vertical-align: middle; } input.showFocus:focus { border: 1px dotted #bfbfbf; } input[type="radio"] { outline: none; } .blur { -webkit-filter: blur(2px); -moz-filter: blur(2px); -ms-filter: blur(2px); -o-filter: blur(2px); filter: blur(2px); } .currentPage { font-size: 16px; font-style: italic; text-decoration: underline; } .card-gray { position: relative; margin: 16px; padding: 0px; height: 160px; width: 200px; border-radius: 8px; background: #F1F1F1; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); overflow: hidden; } .card-gray img.logo-card { opacity: 0.153; position: absolute; bottom: 5px; right: 10px; width: 90px; } .card-gray img.logo-card-small { opacity: 0.153; position: absolute; bottom: 5px; right: 10px; width: 32px; } .tick-bottom:after { content: ""; position: absolute; display: block; width: 0; height: 0; border: 11px solid; border-color: rgb(230, 230, 230) transparent transparent transparent; top: 22px; left: 12px; } .smaller-switch { transform: scale(0.8); } .noborder { border: none !important; } .my-input { border: 1px solid rgb(169, 169, 169); height: 18px; padding: 1px 5px 3px 3px; } .my-input:focus { border: 1px solid #0072c6; } select::-ms-expand { display: none; } .line-60 { line-height: 60px; } .line-36 { line-height: 36px; } .line-32 { line-height: 32px; } .line-30 { line-height: 30px; } .line-28 { line-height: 28px; } .line-26 { line-height: 26px; } .line-24 { line-height: 24px; } .line-22 { line-height: 22px; } .line-20 { line-height: 20px; } .line-18 { line-height: 18px; } .line-16 { line-height: 16px; } .toolbar-submenu-header { margin: 0; line-height: 15px; cursor: default; background: rgb(239, 239, 239); padding-left: 20px; font-size: smaller; font-weight: 800; height: 30px; line-height: 30px; } .border-black { border-left: 6px solid #505050; padding-left: 6px; } .border-error { border-left: 6px solid #e74c3c; padding-left: 6px; } .border-valid { border-left: 6px solid #1aa187 !important; padding-left: 6px; } .border-warning { border-left: 6px solid orange; padding-left: 6px; } .border-gray { border-left: 6px solid gray; padding-left: 6px; } .logo-tendance { height: 24px; opacity: 0.2; position: absolute; right: 0; } option { line-height: 30px; } a, a:visited, a:active { text-decoration: none; color: black; } a:hover { text-decoration: underline; } .action-item { cursor: pointer; } img { vertical-align: middle; } .statusbar { position: fixed; bottom: 0; background: #BDC3C7; width: 100%; height: 0px; overflow: hidden; z-index: 3; text-align: center; line-height: 24px; } .logo-header { width: 225px; position: relative; display: block; height: 50px; float: left; text-align: center; } .footer-login { position: absolute; bottom: 0; width: 100%; margin: 0 auto; text-align: center; font-size: 12px; text-align: center; color: black !important; background: rgba(255, 255, 255, 0.95); padding-top: 5px; } .footer-login a { color: #0072c6 !important; } .footer-login .footer-liens a { padding: 0 25px; } .certificat { background: rgb(221, 221, 221); padding: 5px 15px; margin: 15px 20px; box-shadow: -1px 2px 2px rgb(187, 187, 187); } .certificat:hover { background: #c2c2c2; cursor: pointer; } .selected-cert { background: #0072c6 !important; color: white; } .img-tag { width: 16px; opacity: 0.75; margin: 0 5px; } .cart-certToRenew { font-size: smaller; } .lien-versRenouvellement { padding: 3px 20px; text-decoration: initial !important; } .infoCert-inMessage { background: #f0f0f0; position: relative; margin: 20px; } .infoCert2-inMessage { padding: 5px 15px; transform: translateY(-60px); background: #f0f0f0; padding: 5px 15px; opacity: 0; position: absolute; z-index: 1; transition-delay: 0.2s; max-height: 70%; } .showinfoiban { transform: scale(0.3) translateX(-30px); } .showinfoiban.display { opacity: 1; transform: scale(1) translateX(0px); } .infoCert1-inMessage { padding: 5px 15px; background: #f0f0f0; padding: 5px 15px; transform: translateY(0px); opacity: 1; z-index: 1; transition-delay: 0.2s; } .wrapper-infoCert:hover .infoCert2-inMessage { transform: translateY(0px); opacity: 1; } .wrapper-infoCert:hover .infoCert1-inMessage { transform: translateY(-60px); opacity: 0; } .bg-cert-inMessage { position: absolute; opacity: 0.085; margin-left: -25px; margin-top: 0px; z-index: 2; } .info-legend-typeope { visibility: hidden; height: 18px; margin: 0 3px 0 0; margin-top: -3px; } .details-enAttente tr:hover .info-legend-typeope { visibility: visible; } .columns-grid .columns-info { opacity: 0; position: relative; left: 7px; } .columns-grid:hover .columns-info { opacity: 1; left: 0px; } .columns-grid-realise .columns-info { opacity: 0; position: relative; left: 7px; } .columns-grid-realise:hover .columns-info { opacity: 1; left: 0px; } .columns-grid-prev .columns-info { opacity: 0; position: relative; left: 7px; } .columns-grid-prev:hover .columns-info { opacity: 1; left: 0px; } .box-details { position: absolute; top: 0px; width: 100%; } .box-details-grid-realise { width: 100%; } .box-details-grid-prev { width: 100%; } .box-details-facture { position: absolute; top: 0px; width: 100%; } /*****************************************************/ /* UTILITY */ img.delete-message { margin-top: 10px; opacity: 0.6; height: 20px; } img.delete-message:hover { cursor: pointer; opacity: 1; height: 25px; } .mex-box { transition-duration: 0.8s !important; } span.warning-text { color: rgb(255, 123, 54); font-size: large; position: absolute; margin-top: -11px; font-weight: 700; } svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } circle { fill: rgba(128, 128, 128, 0.2); } .menu-mobile { display: none; } .italic { font-style: italic !important; } .bold { font-weight: 900 !important; } .no-margin { margin: 0; } .no-padding { padding: 0 !important; } .no-padding-header { padding-left: 0 !important; padding-right: 0 !important; } .padding-left-only { padding-left: 5px !important; padding-top: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; } *:focus { outline: none !important; } .left { float: left !important; } .clear { clear: both; } .table { display: table; } .tr { display: table-row; } .td { display: table-cell; } .flex { display: -webkit-flex; /* Safari */ display: -ms-flexbox; /*IE 10*/ /*display: flex;*/ } .no-selectable { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .no-border { border: none !important; } .center-text { text-align: center !important; } .color-box { width: 80px; height: 3px; display: inline-block; background-color: #ccc; left: 5px; top: 5px; margin-bottom: 2px; } .left-text { text-align: left !important; } .right-text { text-align: right !important; } .cursor { cursor: pointer !important; } .cursor:hover { opacity: 0.4 !important; } .right { float: right !important; } .bottom-right { bottom: 15px; position: absolute; right: 15px; } .hidden { display: none !important; } .backgroundBP { color: white !important; background: var(--color-primary-surface) !important; } .bar-toolbar, .nav-item, .header-block { background: var(--color-primary-surface) !important; } #contextMenuGridView { position: fixed; background: white; border: 1px solid gray; box-shadow: 0 0 4px gray; padding: 1px; font-size: 11px; } #contextMenuGridView .item-contextmenu:hover { background: gray; color: white; } #contextMenuGridView .item-contextmenu img { height: 16px; } .titre-tableaubord img.info-titre { visibility: hidden; height: 20px; margin-right: 4px; margin-top: -2px; } .titre-tableaubord:hover img.info-titre { visibility: visible; } .opac { opacity: 0.6 !important; } .my-button { padding: 4px 8px; margin: 4px 0; width: 60px; display: block; text-align: center; color: white; border: none; border-radius: 4px; } .green-button { background: #1aa187; } .red-button { background: #C0392B; } .rotate180 { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .rotate-90 { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); } .rotate90 { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .tick-ok { background: #159f84; width: 6px; height: 20px; } .tick-error { background: #e74c3c; width: 6px; height: 20px; } .tick-warning { background: #FF9B29; width: 6px; height: 20px; } .div-cell-ok { border-right: 5px solid #159f84; padding: 0 5px 0 0; line-height: 22px; height: 22px; position: relative; } .div-cell-warning { border-right: 5px solid #FF9B29; padding: 0 5px 0 0; line-height: 22px; height: 22px; position: relative; } .div-cell-error { border-right: 5px solid #e74c3c; padding: 0 5px 0 0; line-height: 22px; height: 22px; position: relative; } ._translateX { -webkit-transform: scale(0.95) translateX(250px) !important; /* Chrome, Safari, Opera */ -moz-transform: scale(0.95) translateX(250px) !important; -ms-transform: scale(0.95) translateX(250px) !important; /* IE 9 */ -o-transform: scale(0.95) translateX(250px) !important; transform: scale(0.95) translateX(250px) !important; opacity: 0 !important; } .smaller { -webkit-transform: scale(0.95); /* Chrome, Safari, Opera */ -moz-transform: scale(0.95); -ms-transform: scale(0.95); /* IE 9 */ -o-transform: scale(0.95); transform: scale(0.95); } .smaller-x { -webkit-transform: scale(0.7); /* Chrome, Safari, Opera */ -moz-transform: scale(0.7); -ms-transform: scale(0.7); /* IE 9 */ -o-transform: scale(0.7); transform: scale(0.7); } .bigger { -webkit-transform: scale(1.25); /* Chrome, Safari, Opera */ -moz-transform: scale(1.25); -ms-transform: scale(1.25); /* IE 9 */ -o-transform: scale(1.25); transform: scale(1.25); } .animate { -webkit-transition: all cubic-bezier(.62,.28,.23,.99) 0.3s; -moz-transition: all cubic-bezier(.62,.28,.23,.99) 0.3s; -ms-transition: all cubic-bezier(.62,.28,.23,.99) 0.3s; -o-transition: all cubic-bezier(.62,.28,.23,.99) 0.3s; transition: all cubic-bezier(.62,.28,.23,.99) 0.3s; /*cubic-bezier(0.230, 1.000, 0.320, 1.000)*/ } .animate-bounce { -webkit-transition: all cubic-bezier(.32,0,.5,1.5) 0.37s; -moz-transition: all cubic-bezier(.32,0,.5,1.5) 0.37s; -ms-transition: all cubic-bezier(.32,0,.5,1.5) 0.37s; -o-transition: all cubic-bezier(.32,0,.5,1.5) 0.37s; transition: all cubic-bezier(.32,0,.5,1.5) 0.37s; } .animate-slow { -webkit-transition: all cubic-bezier(.62,.28,.23,.99) 0.9s; -moz-transition: all cubic-bezier(.62,.28,.23,.99) 0.9s; -ms-transition: all cubic-bezier(.62,.28,.23,.99) 0.9s; -o-transition: all cubic-bezier(.62,.28,.23,.99) 0.9s; transition: all cubic-bezier(.62,.28,.23,.99) 0.9s; } .animated { -webkit-animation-duration: 0.71s; animation-duration: 0.71s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .hiddenToAnimate { opacity: 0; transform: translateX(-30px) scale(0.85); position: relative; display: block; } .displayToAnimate { opacity: 1; transform: translateX(0px) scale(1); } .bottom-mex-popup { position: absolute; bottom: 25px; left: 60px; color: gray; border-left: 5px solid #e74c3c; padding: 3px 5px; opacity: 0; } .container-lst-cert-validation .select-cert { background: #f1f1f1; margin: 10px 0; padding: 3px 5px; transition: all 0.2s ease-out; position: relative; } .container-lst-cert-validation .select-cert:hover { background: #c0c0c0; cursor: pointer; border-left: 10px solid #0072c6; } .container-lst-cert-validation .select-cert img { position: absolute; opacity: 0.19; right: 15px; height: 60px; } .container-lst-cert-validation .select-auth { background: #f1f1f1; margin: 10px 0; padding: 3px 5px; transition: all 0.2s ease-out; position: relative; } .container-lst-cert-validation .select-auth:hover { background: #c0c0c0; cursor: pointer; border-left: 10px solid #0072c6; } .container-lst-cert-validation .select-auth img { position: absolute; opacity: 0.19; right: 15px; height: 60px; } .dxgvDataRow_MetropolisBlueBP.dxgvSelectedRow_MetropolisBlueBP .colorBP { color: white !important; } @-webkit-keyframes bounceOut { 0% { -webkit-transform: scale(1); } 25% { -webkit-transform: scale(.95); } 50% { opacity: 1; -webkit-transform: scale(1.1); } 100% { opacity: 0; -webkit-transform: scale(.3); } } @keyframes bounceOut { 0% { transform: scale(1); } 25% { transform: scale(.95); } 50% { opacity: 1; transform: scale(1.1); } 100% { opacity: 0; transform: scale(.3); } } .info-action-ellisphere { opacity: 0; left: -20px; position: relative; margin: 20px 0; top: 10px; } .btn-action-ellisphere { opacity: 0; transform: scale(0.7); margin-right: 20px; width: 100px; } .btn-action-ellisphere.displayed { opacity: 1; transform: scale(1); } .delete-email-ellisphere { opacity: 0.3; height: 14px; } #table-emails-ellisphere { margin-top: 10px; } #table-emails-ellisphere tr:hover .delete-email-ellisphere { opacity: 0.5; height: 18px; } .delete-email-ellisphere:hover { opacity: 0.7; cursor: pointer; } .bounceOut { -webkit-animation-name: bounceOut; animation-name: bounceOut; } .circle { position: absolute; width: 41px; height: 22px; border-radius: 10px; text-align: center; line-height: 22px; /*margin-top: -10px;*/ padding-left: 13px; } #PopupConfirmation_PW-1 .dxbButton_MetropolisBlueBP.dxbDisabled_MetropolisBlueBP, #PopupConfirmation_PW-1 .dxbButton_MetropolisBlueBP.dxbDisabled_MetropolisBlueBP:hover { color: #FFFFFF !important; background-color: #BFBFBF !important; box-shadow: none; cursor: auto; } .circle:hover { opacity: 1; cursor: pointer; } .circle.red:before { content: ""; position: absolute; width: 14px; height: 14px; top: 3px; left: 5px; border-radius: 14px; background: white; } .circle.red:after { content: "NON"; position: absolute; color: white; left: 22px; font-size: 11px; } .circle.green:after { content: "OUI"; position: absolute; color: white; right: 24px; font-size: 11px; } .circle.green:before { content: ""; position: absolute; width: 14px; height: 14px; top: 3px; right: 5px; border-radius: 14px; background: white; } .disabled.circle { background-color: gray !important; cursor: auto !important; } .colorBP { color: var(--color-primary-surface) !important; } .colorGreen { color: #159f84; } .colorGray { color: #888888 !important; } .colorRed { color: red; /*rgb(231, 76, 60);*/ } .colorBlack { color: black; } .dxgvSelectedRow_MetropolisBlueBP .colorRed { color: red; } .colorOrange { color: #EC8E00; } .red { background-color: #e74c3c !important; color: white; } .black { background-color: #222222 !important; color: white; } .orange { background-color: orange !important; color: white; } .green { background-color: #159f84 !important; color: white !important; } .gray { background-color: gray !important; color: white !important; } .yellow { color: rgb(82, 82, 82) !important; background: #FFFA9D !important; } .recherche-avancee { position: relative; width: 100%; transform-origin: top; transform: scaleY(0); background: #F1F1F1; margin-bottom: 5px; margin-top: 5px; padding-bottom: 10px; z-index: 3; } .recherche-avancee small { padding: 8px 0; display: block; color: gray; } .recherche-avancee .apply-filters { bottom: 10px; position: absolute; right: 10px; padding: 2px 15px; width: auto; } .clear-filters-ecritures { position: relative; width: 120px; padding: 2px 0 !important; top: 5px; } .recherche-avancee .apply-filters:hover, .recherche-avancee .clear-filters:hover { cursor: pointer; background-color: #0A997D !important; box-shadow: 0px 0px 3px rgb(160, 160, 160); } .bic-compte-emetteur-card { margin-left: -3px; } .bic-compte-emetteur-card img { margin: 0 5px; } .dxgvEmptyDataRow_MetropolisBlueBP td.dxgv { border: none !important; } .content-confirmation { font-size: 12px; } /* WIDGET */ .liste-fichiersaEnvoyer { width: 100%; } .liste-fichiersaEnvoyer td { padding: 1px 2px; } .liste-fichiersaEnvoyer tr.tr:hover { background: #eee !important; cursor: pointer; } .bouton-traiter { padding: 4px 12px; margin: 5px 10px; height: 32px; width: 85px; color: white; text-align: center; border-radius: 4px; background-color: var(--color-primary-surface); display: flex; align-items: center; justify-content: center; } .td-valide img, .td-signe img { width: 16px; } .box-details-errors { position: absolute; background: lightyellow; padding: 7px 15px; margin-bottom: 10px; margin-top: 5px; color: black; opacity: 0; transform: translateY(-60px); z-index: 3; } .box-details-errors:after { content: ""; position: absolute; width: 0; height: 0; top: -18px; right: 5px; border: 10px solid; border-color: transparent transparent lightyellow transparent; } .show-box-details-errors { opacity: 1; transform: translateY(0px); } /* END WIDGET */ .card-activation { position: relative; background: #f0f0f0; color: white; padding: 3px 7px; margin: 0 5px; width: 100px; height: 100px; text-align: center; overflow: hidden; } .card-activation i, .card-activation b { position: relative; height: 0px; overflow: hidden; display: block; line-height: 18px; opacity: 0; top: 7px; } .card-activation:hover i, .card-activation:hover b { height: 36px; opacity: 1; } .card-activation:hover { background: #A5A5A5; box-shadow: 0px 0px 5px gray; cursor: pointer; } .card-activation img { height: 64px; margin-top: 10px; } .card-activation:hover img { margin-top: 0px !important; } /* POPUP TRAITEMENT AUTO */ .wrapper-traitement-fichiers { position: relative; width: 850px; } .wrapper-btn-traitement { position: absolute; bottom: 0px; right: 0px; z-index: 2; } .table-traitement-fichiers { width: 100%; } .table-traitement-fichiers tr:nth-child(2n) { background: #f0f0f0; } .derniere-etape-info { position: relative; animation: displayInfoLastStage cubic-bezier(.87,-.1,.19,1.24) 0.8s; animation-iteration-count: 1; animation-delay: 0.15s; opacity: 0; animation-fill-mode: forwards; /*animation-timing-function : cubic-bezier(.87,-.41,.19,1.44);*/ display: block; } .errorEtape { color: red; } .error-message { color: red; font-weight: 700; } div.derniere-etape-info { max-height: 70px; overflow: auto; width: 100%; } .errorEtape { border-left: 6px solid rgb(231, 76, 60); padding: 2px 0; padding-left: 6px; } .okEtape { border-left: 6px solid #159f84; padding: 2px 0; padding-left: 6px; } .validation-fichier-ok, .signature-fichier-ok { position: relative; animation-name: pulseTest; animation-duration: 1s; animation-iteration-count: 1; animation-timing-function: cubic-bezier(.87,-.41,.19,1.44); } .info-cert-to-use { background: #F1F1F1; position: relative; margin: 15px auto; overflow: hidden; text-align: left; display: table; min-width: 300px; } .info-cert-to-use table { text-align: left; margin: 0px 5px; } .download-details-action:hover { opacity: 0.8 !important; cursor: pointer; } .download-details-action { opacity: 0.5; transform: scale(1); height: 24px; transition: all 0.3s ease-in-out; } #pwdReLogin { border: 1px solid lightgray; width: 200px; font-size: 12px; background: url('/Content/Images/lock-login.png'); background-repeat: no-repeat; background-position-x: -2px; background-position-y: 1px; padding-left: 27px; margin: 15px 0; } .info-cert-to-use table td { padding: 1px 3px; } .info-cert-to-use img.bg { position: absolute; bottom: 0; right: 0; opacity: 0.08; height: 95px; transform: scale(1.3); } .popupDeleteTag { width: 230px; border: 1px solid #f0f0f0; color: black; background: #f1f1f1; box-shadow: 0 0 5px gray; position: absolute; left: 50%; margin-left: -115px; margin-top: -30px; opacity: 0; z-index: 3; } .popupDeleteTag .commandsDeleteTag span { margin: 0 20px; cursor: pointer; font-size: 11px; padding: 3px 10px; } .popupDeleteTag .imgClosePopupDeleteTag { float: right; width: 16px; cursor: pointer; } @keyframes pulseTest { 0% { opacity: 0; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.2); } } @keyframes displayInfoLastStage { 0% { opacity: 0; transform: scaleX(0.8); background-color: white; } 90% { opacity: 1; transform: scaleX(1); background-color: lightyellow; } 100% { opacity: 1; transform: scaleX(1); background-color: white; } } .disabled .dxWeb_edtCheckBoxChecked_MetropolisBlueBP { background-position: -218px -351px !important; width: 16px; height: 16px; } .progressbar-send { position: relative; width: 200px; height: 20px; line-height: 20px; background: lightgray; } .progressbar-send .text-etat { position: absolute; color: white; z-index: 1; } .progressbar-send .etat { position: relative; width: 0%; height: 20px; /*animation-name: myFadeIn; animation-duration: 1s; animation-iteration-count: 1; animation-fill-mode: backwards; transform-origin: left;*/ } /*.table-traitement-fichiers .etat:nth-child(1) { animation-delay: .25s; } .table-traitement-fichiers .etat:nth-child(2) { animation-delay: .5s; } .table-traitement-fichiers .etat:nth-child(3) { animation-delay: .75s; } .table-traitement-fichiers .etat:nth-child(4) { animation-delay: 1s; }*/ @keyframes myFadeIn { 0% { opacity: 0; transform: scaleX(0); } 100% { opacity: 1; transform: scaleX(1); } } @keyframes myOpacityIn { 0% { opacity: 0; } 100% { opacity: 1; } } /* END POPUP TRAITEMENT AUTO*/ @media only screen and (min-width : 1360px) and (max-width : 4500px) { .dxgvControl_MetropolisBlueBP, .dxgvDisabled_MetropolisBlueBP { font-size: 14px !important; } .content-confirmation { font-size: 13px; } .statusbar { height: 30px; line-height: 30px; } /*._selected { height: 32px !important; } .dxgvDataRow_MetropolisBlueBP { line-height: 32px; }*/ } @media only screen and (min-width : 0px) and (max-width : 1086px) { .logo-header { width: 180px; } .toolbar-item { padding: 0 5px !important; } .toolbar-item img:first-child { width: 28px !important; } .box-selector-groupe { margin-top: 56px !important; } .content-page { margin-top: 30px; } } .dxgvSearchPanel_MetropolisBlueBP .dxeSafariSys { position: relative; width: 232px !important; } /* Ellisphere */ .Elli_divTable { width: 80%; white-space: nowrap; height: 300px; } .Elli_divTableRow { display: table-row; } .Elli_divTableHead { color: #FFF; display: table-cell; padding: 3px 10px; text-align: center; } .Elli_divTableCell { display: table-cell; padding: 3px 10px; border: 1px solid #EEE; text-align: center; } .Elli_divTableHeading { background-color: #0b80d6; display: table-header-group; font-weight: bold; } .Elli_divTableFoot { background-color: #0b80d6; display: table-footer-group; font-weight: bold; } .Elli_divTableBody { display: table-row-group; } /* Couleurs des boutons des popup Ellisphere*/ #PopupConfirmation_PW-1.ellisphere #_ok, #PopupConfirmation_PW-1.ellisphere #_annuler, #enregistrer-parametres-ellisphere, #fermer-parametres-ellisphere, .btn-action-ellisphere { background: #00aeef !important; } /* Couleurs des boutons des entetes Ellisphere*/ #PopupConfirmation_PWH-1.dxpc-header.dxpc-withBtn.ellisphere, #PopupEllisphere_PWH-1.dxpc-header { background: #00aeef !important; } /* Couleurs des fonds de Popup Ellisphere*/ #PopupConfirmationEllisphere_PWC-1, #PopupConfirmation_PW-1.ellisphere, #PopupEllisphere_PWC-1 { background: #f7f5f5 !important; } .chkToutCocher { margin-left: 0px; } .height140 { height: 140px; } #PopupNS_DivGlobale { display: flex; align-items: center; justify-content: center; border: 0.4px solid #ccc; width: 500px; margin: 0 auto; cursor: pointer; } .PopupNS_arrowUp { opacity: 0; transition: opacity .3s ease-in-out; -moz-transition: opacity .3s ease-in-out; -webkit-transition: opacity .3s ease-in-out; transition: 2s; } #PopupNS_DivGlobale:hover .PopupNS_arrowUp { opacity: 1.0; transition: opacity .3s ease-in-out; -moz-transition: opacity .3s ease-in-out; -webkit-transition: opacity .3s ease-in-out; transform: translate(0px, 5px); transition: 1s } .PopupNS_arrowDown { opacity: 0; transition: opacity .3s ease-in-out; -moz-transition: opacity .3s ease-in-out; -webkit-transition: opacity .3s ease-in-out; transition: 2s; } #PopupNS_DivGlobale:hover .PopupNS_arrowDown { opacity: 1.0; transition: opacity .3s ease-in-out; -moz-transition: opacity .3s ease-in-out; -webkit-transition: opacity .3s ease-in-out; transform: translate(0px, -5px); transition: 1s } .buttonGridTresoDetaille { margin-left: 30px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 4px 1px; border: 1px solid #d3d3d3; border-radius: 5px; background-color: #0072C6; color: white; font-family: Arial, sans-serif; font-size: 14px; font-weight: bold; cursor: pointer; text-decoration: none; transition: all 0.3s ease; min-width: 160px; max-height: 32px; } .buttonGridTresoDetaille:hover { background-color: #005696; border-color: #a9a9a9; } .buttonGridTresoDetaille:active { background-color: #004a86; border-color: #808080; } .buttonGridTresoDetaille img { height: 20px; width: 20px; } /* bouton connexion DSP2 */ .connect-dsp2-ic { width: 42px; height: 42px; position: relative; top: 28%; border-radius: 32px; box-shadow: -1px 2px 5px #AFAFAF; border: 2px solid white; background-color: #0072C6; } .connect-dsp2-ic > img { position: relative; top: 10px; left: 10px; transition: 0.3s; } .connect-dsp2-ic:hover > img, .connect-dsp2-ic:active > img { transition: 0.3s; transform: rotate(90deg); } .connect-dsp2-ic:hover { cursor: pointer; } .connect-dsp2-ic:hover .connect-dsp2-link-top { -webkit-animation: kf-ringtone 0.7s 1 forwards; -moz-animation: kf-ringtone 0.7s 1 forwards; -o-animation: kf-ringtone 0.7s 1 forwards; animation: kf-ringtone 0.7s 1 forwards; } .connect-dsp2-ic:hover .connect-dsp2-link-bottom { -webkit-animation: kf-ringtone 0.7s 1 forwards; -moz-animation: kf-ringtone 0.7s 1 forwards; -o-animation: kf-ringtone 0.7s 1 forwards; animation: kf-ringtone 0.7s 1 forwards; } .connect-dsp2-link-top { width: 60%; position: absolute; left: 19%; top: 19%; } .connect-dsp2-link-bottom { width: 60%; position: absolute; left: 19%; top: 19%; } .anime-ringtone { -webkit-animation: kf-ringtone 1s ease; -moz-animation: kf-ringtone 1s ease; -o-animation: kf-ringtone 1s ease; animation: kf-ringtone 1s ease; } @keyframes kf-ringtone { 0% { transform: rotate(0); } 15% { transform: rotate(-28deg); } 30% { transform: rotate(18deg); } 45% { transform: rotate(6deg); } 60% { transform: rotate(1deg); } 75% { transform: rotate(0); } 100% { transform: rotate(0); } } .anime-colorize-blue { -webkit-animation: kf-colorize-blue 1s forwards; -moz-animation: kf-colorize-blue 1s forwards; -o-animation: kf-colorize-blue 1s forwards; animation: kf-colorize-blue 1s forwards; } @keyframes kf-colorize-blue { 0% { background-color: #909090; } 100% { background-color: #0072C6; } } .anime-colorize-grey { -webkit-animation: kf-colorize-grey 1s forwards; -moz-animation: kf-colorize-grey 1s forwards; -o-animation: kf-colorize-grey 1s forwards; animation: kf-colorize-grey 1s forwards; } @keyframes kf-colorize-grey { 0% { background-color: #0072C6; } 100% { background-color: #909090; } } .overflow-menu { overflow-x: hidden; overflow-y: auto; height: 72.3vh; } #dsp2-btn-back { width: 35px; cursor: pointer; display: inline-block; text-align: left; padding: 20px; position: absolute; left: 0px; display: none; top: 42px; } .dxsplHSeparator_MetropolisBlueBP { background-color: lightgray !important; } .dsp2-sync-account:hover { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .dsp2-sync-account { cursor: pointer; -webkit-transition: -webkit-transform .8s ease-in-out; transition: transform .3s ease-in-out; } .centered-square { margin: 10px; width: 20%; text-align: center; /*border: 1px solid gray;*/ display: inline-block; } .container-square { text-align: center; display: inline-block; width: 100%; height: 80pt; /*border: 1px solid black;*/ } .centered-square.popup-expired { margin: 10px; width: 100px; text-align: center; /*border: 1px solid gray;*/ display: inline-block; } .container-square.popup-expired { text-align: center; display: inline-block; width: 800px; height: 80pt; /*border: 1px solid black;*/ } .dsp2-sync-all > img { animation: rotate360 2s infinite; } .dsp2-sync-all { animation: fadeIn 0.5s ease-in both; } .dsp2-sync-finished { animation: fadeOut 1s ease-in both; } @keyframes fadeIn { 0% { -webkit-transform: translateX(0px); opacity: 0; } 100% { -webkit-transform: translateX(5px); opacity: 1; } } @keyframes fadeOut { 0% { -webkit-transform: translateX(0px); opacity: 1; } 100% { -webkit-transform: translateX(5px); opacity: 0; } } @keyframes rotate360 { 0% { -webkit-transform: rotateZ(0deg); } 100% { -webkit-transform: rotateZ(360deg); } } /* ====================================================== */ /* Tooltips */ /* ====================================================== */ .boite-envoi-tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; /* If you want dots under the hoverable text */ } /* Tooltip text */ .boite-envoi-tooltip .boite-envoi-tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; padding: 5px 0; border-radius: 6px; /* Position the tooltip text - see examples below! */ position: absolute; z-index: 1; } /* Show the tooltip text when you mouse over the tooltip container */ .boite-envoi-tooltip:hover .boite-envoi-tooltiptext { visibility: visible; } .modal { display: block; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 999999; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ } .modal-content { background-color: #fefefe; margin: auto; padding: 20px; border: 1px solid #888; width: 30%; } .combo-constructeurs { border: 1px solid lightgray; text-align: center; margin: auto; position: relative; width: 260px; display: flex; background-color: white; height: 26px !important; flex-direction: row; align-items: center; justify-content: center; } .combo-constructeurs .img-arrow { position: absolute; right: 10px; opacity: 0.35; margin-top: 2px; } .combo-constructeurs:hover .img-arrow { opacity: 0.5; } .combo-constructeurs:hover { color: @colorDefault; border-color: @colorDefault; cursor: pointer; } .ligne { position: relative; left: 140px; } ul.options-constructeurs { position: absolute; list-style: none; padding: 0; margin: 0; margin-left: 47px; background: #f0f0f0; width: 180px; max-height: 200px; overflow-y: auto; border: 1px solid lightgray; z-index: 10; text-align: center; } ul.options-constructeurs li { padding: 4px 10px; font-size: smaller; color: black; background-color: white; } ul.options-constructeurs li:hover { background: darkgrey; cursor: pointer; } ul.options-constructeurs li:hover span { } ul.options-constructeurs li span { display: block; font-size: smaller; color: gray; margin: 3px 0; } .tooltip { position: relative; display: inline-block; font-size: 14px; } .tooltip:hover { cursor: pointer; } .tooltip .tooltiptext { visibility: hidden; background-color: #555; color: #fff; text-align: center; border-radius: 6px; padding: 10px 0; position: absolute; z-index: 9; left: 50%; margin-left: -150px; opacity: 0; width: 237px; } .tooltip .tooltiptext-dsp2-renew { visibility: hidden; background-color: #555; color: #fff; text-align: center; border-radius: 6px; padding: 10px 0; position: absolute; opacity: 0; width: 237px; top: 30px; z-index: 999; font-size: 12px; font-weight: normal !important; text-align: left; max-width: 230px; } .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; padding: 5px 15px 5px 15px; } .tooltip:hover .tooltiptext-dsp2-renew { visibility: visible; opacity: 1; padding: 5px 5px 5px 5px; } .cbo-all-societe::-webkit-input-placeholder { color: lightgrey; } .dataTables_wrapper.no-footer .dataTables_scrollBody { border: none !important; width: 370px; } .dataTable > thead { display: none; } .bg-dsp2-inMessage { position: absolute; opacity: .085; margin-left: 5px; margin-top: 5px; z-index: 2; width: 40px; height: 40px; } .infoDsp2-inMessage { background: #f0f0f0; position: relative; margin: 20px; width: 280px; height: 150px; } .titre-dsp2ToRenew { text-align: center; font-size: 12px; margin: 20px; } .dsp2-new-connexion-tbody { display: flex; flex-direction: row; column-count: 2; flex-wrap: wrap; justify-content: center; } .fleche-droite { border: solid #d2d2d2; border-width: 0 3px 3px 0; display: inline-block; padding: 3px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } .dsp2-new-connexion-tbody > tr { background-color: #ffffff; /*border-bottom: 1px solid #eee;*/ width: 285px; } .dsp2-new-connexion-tbody > tr > td:nth-child(1) { /*padding: 5px 10px !important;*/ } .dsp2-new-connexion-tbody tr:hover { background-color: #f0f0f0; cursor: pointer; color: black; } .dsp2-new-connexion-tbody > tr > td:nth-child(2) { width: 100%; padding: 5px 10px !important; } .dsp2-new-connexion-tbody > tr > td > div > span:nth-child(1) { width: 100% } .dsp2-new-connexion-tbody > tr > td > div > span:nth-child(2) { float: right; } .dsp2-new-connexion-label { width: 100%; } .dsp2-new-connexion-info-sp2 { float: right; margin-right: 15px; } .dsp2-new-connexion-tbody > tr { height: 48px; } /*=====================================*/ /* POPUP RENOUVELLEMENT CONNEXION DSP2 */ /*=====================================*/ #rdsp2-master-container { height: 500px; } #rdsp2-container { display: flex; height: 300px; justify-content: flex-start; align-items: flex-start; flex-direction: column; } #rdsp2-chk-to-renew { display: flex; flex-direction: row; } #rdsp2-liste-to-renew { width: 290px; padding: 5px; margin: 5px; padding: 5px; /*position: absolute; top: 85px;*/ height: 285px; overflow-x: hidden; } .rdsp2-row { border: 1px solid #ccc; border-radius: 7px; cursor: pointer; padding: 5px; margin: 5px; display: flex; flex-direction: row; align-items: center; } .rdsp2-row { display: flex; } .rdsp2-row:hover { background-color: #eee; cursor: pointer; } .rdsp2-label-and-arrow { display: flex; justify-content: space-between; width: 100%; margin-left: 5px; margin-right: 10px; align-items: center; } .rdsp2-row-img { padding: 5px; } .rdsp2-label-banque { width: 100% } .rdsp2-row-progression { display: flex; flex-direction: row; justify-content: center; align-items: center; } .rdsp2-row-progression-img { width: 16px; height: 16px; margin: 5px; } .rdsp2-row-progression-label-font { font-family: Ubuntu; font-size: 13px; background: white; color: black; font-weight: bold; } .renew-popup-button-div { text-align: center; margin-top: 5px; } #renew-popup-button { width: 310px; cursor: pointer; padding: 7px; } .span-img-renew-dsp2 { margin-left: 5px; } .highcharts-tooltip-container { z-index: 0 !important; } .societe-list h3 .img-renew-dsp2 { transition: transform 0.35s ease; } .societe-list h3:hover .img-renew-dsp2 { transform: rotate(180deg); } ul.cyber-combo-banques-options { position: absolute; list-style: none; padding: 0; margin: 0; margin-left: 33px; background: #f0f0f0; width: 450px; max-height: 200px; overflow-y: auto; border: 1px solid lightgray; z-index: 10; } ul.cyber-combo-banques-options li { padding: 4px 10px; font-size: smaller; color: @colorDefault; } ul.cyber-combo-banques-options li:hover { background: lightgray; cursor: pointer; } ul.cyber-combo-banques-options li:hover span { } ul.cyber-combo-banques-options li span { display: block; font-size: smaller; color: gray; margin: 3px 0; } .cyber-combo-banques { border: 1px solid lightgray; padding: 5px; text-align: center; margin: auto; position: relative; color: black; width: 82%; } .cyber-combo-banques .img-arrow { position: absolute; right: 10px; opacity: 0.35; margin-top: 2px; } .cyber-combo-banques:hover .img-arrow { opacity: 0.5; } .cyber-combo-banques:hover { color: @colorDefault; border-color: @colorDefault; cursor: pointer; } .flex-center { display: flex; justify-content: center; } .error-modal-popup-content { background-color: #fefefe; margin: auto; border: 1px solid #888; position: absolute; min-width: 150px; min-height: 150px; left: 50%; top: 50%; transform: translate(-50%, -50%); box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } .error-modal-popup-titre { width: 100%; background: #0072C6; color: white; font-weight: 500; } .error-modal-popup-titre-text { font-weight: 500; margin-right: 0px; margin-top: 0px; padding: 15px; } .error-modal-popup-error-text { padding-left: 15px; padding-right: 30px; font-weight: 500; } .error-modal-popup-content-detail { border-left: 6px solid orange; padding-left: 6px; margin-left: 15px; } .error-modal-popup-detail-text { padding: 15px; } .error-modal-popup-close { color: #ffffff; float: right; font-size: 28px; font-weight: bold; margin-right: 10px; margin-top: 6px; } .error-modal-popup-close:hover, .error-modal-popup-close:focus { color: #bbbbbb; text-decoration: none; cursor: pointer; } ul.cenet-combo-banques-options { position: absolute; list-style: none; padding: 0; margin: 0; margin-left: 33px; background: #f0f0f0; width: 525px; max-height: 200px; overflow-y: auto; border: 1px solid lightgray; z-index: 10; } ul.cenet-combo-banques-options li { padding: 4px 10px; font-size: smaller; color: @colorDefault; } ul.cenet-combo-banques-options li:hover { background: lightgray; cursor: pointer; } ul.cenet-combo-banques-options li:hover span { } ul.cenet-combo-banques-options li span { display: block; font-size: smaller; color: gray; margin: 3px 0; } ul.select-infra-sso { position: absolute; list-style: none; padding: 0; margin: 0; margin-left: 130px; background: #f0f0f0; width: 250px; max-height: 200px; overflow-y: auto; border: 1px solid lightgray; z-index: 10; } ul.select-infra-sso li { padding: 4px 10px; font-size: smaller; color: @colorDefault; } ul.select-infra-sso li:hover { background: lightgray; cursor: pointer; } ul.select-infra-sso li:hover span { } ul.select-infra-sso li span { display: block; font-size: smaller; color: gray; margin: 3px 0; } .cenet-combo-banques { border: 1px solid lightgray; padding: 5px; text-align: center; margin: auto; position: relative; color: black; width: 82%; } .cenet-combo-banques .img-arrow { position: absolute; right: 10px; opacity: 0.35; margin-top: 2px; } .cenet-combo-banques:hover .img-arrow { opacity: 0.5; } .cenet-combo-banques:hover { color: @colorDefault; border-color: @colorDefault; cursor: pointer; } .etape-dsp2-encours { opacity: 1; left: 0px; } #appliquer-societe { margin: 5px 0px 5px 0px; } #divAppliquerSociete { display: flex; flex-direction: row; align-items: center; } .opacity { opacity: 0.5 } .opacity:hover { opacity: 1 } .dsp2-benef-div { } .dsp2-benef-div-select { width: 200px; border-color: #ccc; padding: unset !important; } #dsp2-benef-info-progression { position: absolute; bottom: 15px; } #footer-beneficiaires { position: absolute; bottom: 0px; width: 100%; left: 0px; } .footer-beneficiaires-prog { color: #fff !important; background-color: #0072c6 !important; height: 4px; width: 0%; } .mix-ebics-dsp2-ko-details-compte { display: flex; margin: 10px; justify-content: space-around; } .mix-ebics-dsp2-ko-details-compte-nom { font-weight: bold; } .mix-ebics-dsp2-ko-btn { text-align: end; margin-right: 15px; } .mix-ebics-dsp2-ko-popup-result { width: 100%; text-align: center; } .mix-ebics-dsp2-ko-popup-content { width: 580px; height: 180px; } .mix-ebics-dsp2-ko-popup-error { font-weight: bold; } .mix-ebics-dsp2-ko-popup-content-table { margin-top: 10px; margin-bottom: 10px; border-bottom: 1px solid #ccc; width: 100%; } .dsp2-benef-div-nom-benef { display: flex; } .dsp2-benef-div-nom-benef-img { width: 16px; height: 16px; position: relative; top: 4px; left: 5px; } .dsp2-rb-benef { position: relative; top: 2px; left: 7px; } .dsp2-rb-benef.cb-ignore { position: relative; top: 2px; left: 11px; } .dsp2-rb-benef.cb-maj { position: relative; top: 2px; left: -2px; } .dsp2-benef-left-info { position: absolute; margin-top: 0px !important; width: 5px !important; height: 21px !important; } .dsp2-liste-compte-emetteur-to-edit { width: 100%; } .dsp2-liste-compte-emetteur-to-edit td { padding: 0 5px; } .dsp2-paiement-annule { border: 1px solid; border-radius: 10px; padding: 5px 10px 5px 10px; margin-right: 10px; color: red; } .dxgvSelectedRow_MetropolisBlueBP .dsp2-paiement-annule { color: white !important; } .dsp2-paiement-annule-remise { border: 1px solid; border-radius: 10px; padding: 1px 10px 1px 10px; margin-right: 10px; } .dxgvSelectedRow_MetropolisBlueBP .dsp2-paiement-annule-remise { color: white !important; } .ocr-analyse-div { display: flex; position: absolute; bottom: 12px; left: 15px; } .maj-gridviewfacture:hover .animate-bounce { transform: rotateZ(90deg); } /**** WIP NEO MENU CSS ****/ .sidebar { width: 250px; background-color: #F7F7F7; color: #333; overflow-y: auto; position: relative; border-right: 1px solid #ccc; transition: 0.3s ease; font-family: 'Ubuntu'; } .menu { list-style-type: none; padding: 0; margin: 0; } .menuItem { border-left: 5px solid transparent; cursor: pointer; /*padding: 5px;*/ transition: background-color 0.3s ease; user-select: none; display: flex; align-items: center; padding: 8px; gap: 8px; justify-content: space-between; } .navBar-div-label { display:flex; align-items:center; } .navItemSelected { border-color: var(--color-primary-text-selected) !important; background-color: #f3f3f3 !important; display: flex; } .navItemSelected .navBar-label { font-weight: 500; color: var(--color-primary-text-selected); } .actionmenuitem.navItemSelected { color: var(--color-primary-text-active) !important; } .menuItem:not(.homeSubmenuItem):hover { border-left: 5px solid var(--color-primary-text-active); } .sidebar-content { /* -150 px pour le header+toolbar et -28px le bouton pour collapse */ height: calc(100vh - 100px); background-color: #fff; overflow-x: auto; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } .sidebar-content::-webkit-scrollbar { display: none; } .sidebar-footer { border-top: 1px solid #E1E1E1; display: flex; justify-content: flex-end; background-color: #fff; cursor: pointer; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 15px; user-select: none; box-shadow: 0px 4px 16px 0px #0000001F; } .sidebar-footer > .navBar-icon { transition: transform 0.3s ease; } .lock { opacity: 1 !important; position: absolute; left: 0; top: 4px; } .menuItem-lock { float: right; position: relative; filter: invert(1); } .navBar-icon { height: 24px; width: 24px; pointer-events: none; } .navBar-arrow { height: 16px; width: 16px; position: relative; right: 8px; transition: transform 0.3s ease; transform: rotate(0deg); top: unset !important; left: unset !important; } .navBar-arrow path { fill: var(--color-primary-text-selected) !important; } .navItemSelected > .navBar-div-arrow > .navBar-arrow { transform: rotate(180deg); } .homeSubmenuItem { justify-content:unset !important; } .navBar-label { margin-left: 5px; } /*.navBar-label { margin-left: 10px; font-family: Ubuntu; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; }*/ .navBar-subTitle { display: none; font-weight: 500; font-size: 16px !important; } div.actionmenuitem { margin: 0; padding: 0; } .actionmenuitem:hover { border-left: 5px solid var(--color-primary-surface); /*font-weight: bold;*/ /*color: var(--color-primary-surface);*/ background-color: #f3f3f3; } div.actionmenuitem a { display: block; width: 100%; height: 100%; text-decoration: none; color: inherit; user-select: none; } .subMenu { background-color: #FFF; height: 100% } .submenu-item { padding: 10px 20px 10px 40px; background-color: #fafafa; border-bottom: 1px solid #eee; } .subMenu .actionmenuitem { border-left: 5px solid transparent; padding-left: 39px; line-height: 30px; margin: 0; position: relative; overflow: hidden; display: flex; } .collapsed .subMenuLocked { display: flex; flex-direction: row-reverse; align-items: center; justify-content: flex-end; } .sidebar a { text-decoration: none; } .sidebar a:hover { text-decoration: none; } /**** WIP NEO MENU CSS ****/ /**** WIP NEO COLLAPSED MENU CSS ****/ .collapsed { width: 90px; overflow-y: visible; } .collapsed .navBar-arrow { display: none; } .collapsed .navBar-subTitle { margin-left: 16px !important; display: block; } .collapsed .navBar-label { font-size: 11px; } .collapsed .action-item { margin-left: 0px; } .collapsed .menuItem-lock { float: right; } .collapsed .menuItem > .navBar-icon { height: 24px; width: 24px; } .collapsed .navSubMenu .subMenu { position: inherit; min-height: auto; } .collapsed .subMenu { min-height: calc(100vh - 150px); width: 220px; position: absolute; top: 0; left: 100%; border-right: 1px solid #E1E1E1; background-color: #FFF; } .collapsed > .sidebar-footer > .navBar-icon { transform: rotate(180deg); } .collapsed .menuItem { display: flex; flex-direction: column; gap: 8px; justify-content: center; align-items: center; text-align: center; min-height: 55px; padding-top: 15px; } /* .collapsed .subMenu { display: none !important; }*/ /* .collapsed .isOpen .subMenu { display: block !important; }*/ .navItem:hover { background-color: #f3f3f3; } .collapsed .navBar-label { padding-left:4px; padding-right:4px; padding-top:8px; } .subMenu-header { display: flex; justify-content: space-between; align-items: center; padding-right: 10px; } /* Mais il reste affiché si épinglé */ .subMenu.open { display: block !important; border-left: 1px solid #E1E1E1; box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.12); } .subMenu.open.pinned { border-left: 1px solid #E1E1E1; box-shadow: none; } .sidebar.pinned { width: 250px !important; min-width: 250px !important; } /**** WIP NEO COLLAPSED MENU CSS ****/ .dp-texts { font-family: Ubuntu !important; font-size: 12px !important; } .dp-btn { background-color: #f1f1f1; border: none; padding: 5px; margin-top: 5px; cursor: pointer; text-align: left; } .dp-filter-container { position: relative; display: inline-block; padding: 12px 30px; } .dp-filter-button { padding: 5px; border: 1px solid #ccc; background-color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: space-around; min-width: 270px; height: 24px; } .dp-filter-menu { display: none; position: absolute; top: 23px; left: 10px; background-color: #fff; border: 1px solid #ccc; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); padding: 15px 20px; z-index: 1000; width: 228px; } .dp-date-pickers { display: flex; justify-content: space-between; } .dp-date-pickers input { width: 40%; padding: 10px; margin: 5px 1%; border: 1px solid #ccc; border-radius: 4px; } .dp-quick-filters { margin-top: 5px; display: flex; flex-direction: column; } .dp-quick-filters button { background-color: #f1f1f1; border: none; padding: 5px; margin-top: 5px; cursor: pointer; text-align: left; } .dp-quick-filters button:hover, .dp-cancel:hover { background-color: #ddd; } .dp-filter-actions { display: flex; margin-top: 15px; justify-content: space-between; } .dp-filter-actions button { padding: 5px 15px; border: none; cursor: pointer; } .dp-filter-actions button#apply-button:disabled { background-color: #ccc; cursor: not-allowed; } .dp-filter-actions button#apply-button:not(:disabled) { background-color: forestgreen; color: white; } @media (max-width: 1350px) { .modal-fac-fournisseur { max-width: 1100px !important; } .sticky-bottom-frame-fournisseur { max-width: 1100px !important; } .fac-fournisseur-preview { width: 615px !important; } .FactureFournBinaryImage { width: 540px !important; } } .ocr-error-analyse { display: flex; width: 330px; flex-direction: row; align-items: center; margin: 10px; position: absolute; left: 5px; overflow-y: auto; } .MemoResizable textarea { resize: both; min-width: 298px; min-height: 68px; } .row-dsp2-groupe:hover { cursor: pointer; background-color: #0072c6; color: white; } .row-dsp2-connexion:hover { cursor: pointer; background-color: #0072c6; color: white; } #associationTable { text-align: center; vertical-align: middle; border: 1px solid #EAEAEA; } #associationTable > tbody > tr > td { border: 1px solid #EAEAEA; /* Bordure de chaque cellule avec une couleur gris très clair */ padding: 8px; /* Espace entre les cellules */ text-align: center; /* Centrer horizontalement */ vertical-align: middle; /* Centrer verticalement */ } #associationTable > thead > tr > th { border: 1px solid #EAEAEA; /* Bordure de chaque cellule avec une couleur gris très clair */ padding: 8px; /* Espace entre les cellules */ text-align: center; /* Centrer horizontalement */ vertical-align: middle; /* Centrer verticalement */ } .ocr-param-div-actions { display: flex; flex-direction: column; } .loading-add-ocr-row { margin-left: 10px; } .loading-add-ocr-row > img { width: 16px; } .box-param-ocr { display: flex; } #container-table-ocr-associations { padding-top: 15px; } .ocr-combo-type { height: 28px; padding: unset !important; } .ocr-param-div-actions-ajouter { } .ocr-param-div-actions-appliquer { } .delete-ocr-row { cursor: pointer; } .ocr-no-data { width: 500px; text-align: center; display: flex; flex-direction: column; align-content: center; justify-content: center; align-items: center; border: 1px solid #EAEAEA; padding: 20px; } .ocr-tooltip-text { margin-left: 20px !important; bottom: 20px !important; width: 500px !important; } .row-error { border: 1px solid red; } /* Ligne rouge dans la nouvelle cellule d'erreur */ .error-indicator { width: 4px; background-color: red; height: 100%; } /* Style du pop-up lors du survol (utilisation de l'attribut title) */ .error-td { position: relative; border-right: 5px solid red !important; cursor: pointer; } .ocr-etat, .ocr-etat-header { border-left: 1px solid white !important; border-top: 1px solid white !important; border-bottom: 1px solid white !important; } /* Masquer l'info-bulle au départ */ .error-tooltip { visibility: hidden; background-color: #ffffff; color: #bd1919; text-align: left; padding: 5px; border-radius: 3px; border: 1px solid #bd1919; position: absolute; z-index: 1; top: 50%; left: 105%; transform: translateY(-50%); white-space: nowrap; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); } /* Montrer l'info-bulle quand on survole la cellule */ .error-td:hover .error-tooltip { visibility: visible; } .error-td[title]:hover::after { content: attr(title); position: absolute; left: 110%; /* Positionné à droite de la ligne rouge */ top: 50%; transform: translateY(-50%); background-color: #f2dede; color: #a94442; border: 1px solid #a94442; padding: 5px; white-space: nowrap; z-index: 1000; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); } .max-content-form-clientfourn { margin-right: -12px; min-height: 360px; overflow-y: auto; overflow-x: clip; } .loadFormProfil { position: absolute !important; bottom: 5px; width: 100%; display: flex !important; justify-content: center; align-items: center; } .loaderForm-text { margin-top: 5px; padding-top: 5px; } .section-title { font-weight: bold; margin-bottom: 10px; margin-top: 20px; } .details-export { width: 100%; } .details-export tr { line-height: 25px; } .details-export > td { width: 50%; text-align: right; } .neobutton { border-radius: 2px; } .neoLike { border-radius: 8px !important; } .neoLike .dxpc-header { background: white !important; color: #232323; border-bottom: 1px solid #acacac; border-top-left-radius: 8px; border-top-right-radius: 8px; text-align: center; font-size: 16px; padding-top: 20px } .dxWeb_pcCloseButton_MetropolisBlueBP { filter: grayscale(100%) brightness(0%) !important; } .neoLike .dxpc-content { padding: 20px 24px 20px 24px; } .neoLike .dxpc-closeBtn { padding-right: 20px } #PopupAddFactureClientFromFacture_PW-1.dxpc-mainDiv, #PopupAddFactureClientFromFacture_PW-1 .dxpc-contentWrapper, #PopupAddFournisseurFromFacture_PW-1.dxpc-mainDiv, #PopupAddFournisseurFromFacture_PW-1 .dxpc-contentWrapper { height: auto !important; } /* Popup confirmation correction facture */ #PopupConfirmationModifierFacFourn_PW-1.dxpc-mainDiv { position: fixed !important; height: auto !important; } #PopupConfirmationModifierFacFourn_DXPWMB-1 { position: fixed !important; inset: 0 !important; } /* Popup export des factures Fournisseur */ #PopupExportDateResetFournisseur_PW-1.dxpc-mainDiv { position: fixed !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%); height: auto !important; } #PopupExportDateResetFournisseur_DXPWMB-1 { position: fixed !important; inset: 0 !important; } /*Timeline Facture*/ .timeline-table { border-collapse: collapse; width: 94%; } .timeline-item { position: relative; padding-left: 30px; /* Augmenter l'espacement à gauche */ margin-bottom: 15px; /* Ajouter de l'espacement entre les éléments */ height: 20px; } .timeline-dot { width: 12px; height: 12px; border-radius: 50%; position: absolute; left: -6px; top: 50%; transform: translateY(-50%); } .timeline-dot.created, .timeline-dot.modified { background-color: rgba(227, 226, 224, 0.5); } .timeline-dot.validation-requested { background-color: rgb(253, 231, 208); } .timeline-dot.validated { background-color: rgb(160, 230, 220); } .timeline-dot.sent { background-color: rgb(211, 229, 239); } .timeline-dot.cashed, .timeline-dot.accepted { background-color: rgb(219, 237, 219); } .timeline-dot.cancelled { background-color: rgb(232, 222, 238); } .timeline-dot.refused { background-color: rgb(255, 226, 221); } .timeline-dot.invoiced { background-color: #E1BEE7; /* Violet clair pastel */ } .timeline-title { font-weight: bold; } .spacer { height: 20px; border-left: 2px solid #ccc; } .timeline-date { color: #757575; } .blueNew { font-size: 8px; color: blue; } .correspondance-exact { border: 1px solid var(--color-success-border-discrete-default, #ACECC8); background: var(--color-success-surface-discrete-default, #F0F9F4); color: var(--color-success-text-regular-default, #1C5B3A); } .message-box { border-radius: 4px; padding: 1px; margin-bottom: 10px; font-family: var(--body-xxs-regular-fontFamily, Ubuntu); font-size: var(--body-xxs-regular-fontSize, 14px); font-style: normal; font-weight: 400; line-height: var(--body-xxs-regular-lineHeight, 16.5px); letter-spacing: var(--body-xxs-regular-letterSpacing, 0.05px); } .verification-requise { border: 1px solid var(--color-warning-border-discrete-default, #FFDCBD); background: var(--color-warning-surface-discrete-default, #FFF5E6); color: var(--color-warning-text-regular-default, #AF4000); } .message-neutral-box { margin: 0 8px; padding: 8px 16px; display: flex; align-items: flex-start; gap: 8px; color: #2C2C2C; font-size: 13px; font-weight: 500; line-height: 20px; width: calc(100% - 16px); box-sizing: border-box; background-color: var(--color-neutral-surface-discrete-default, #F9F9F9); clip-path: inset(0 round 4px); } .csc3sk-popup-auth { display: flex; flex-direction: column; } .csc3sk-popup-auth-div-img-smartphone { width: 100px; } .csc3sk-popup-auth-img-smartphone { width: 130px; } .csc3sk-popup-auth-div-img-loader { } .csc3sk-popup-auth-img-loader { width: 50px; } .csc3sk-popup-auth-div-label { margin: 20px; } .csc3sk-popup-auth-label { text-align: center; } .csc3sk-popup-auth-div-identifiant { margin-left: 20px; margin-right: 20px; margin-bottom: 10px; text-align: center; } .csc3sk-popup-auth-identifiant { } .csc3sk-popup-auth-div-haut { display: flex; justify-content: center; align-items: center; flex-direction: row; } .csc3sk-popup-auth-img-error { width: 56px; } .csc3sk-popup-auth-img-ok { width: 56px; } .csc3sk-popup-auth-div-img-result { display: flex; justify-content: center; align-items: center; align-content: center; width: 100px; } .cscCertEurope-popup-auth { display: flex; flex-direction: column; } .cscCertEurope-popup-auth-div-img-smartphone { width: 100px; } .cscCertEurope-popup-auth-img-smartphone { width: 130px; } .cscCertEurope-popup-auth-div-img-loader { } .cscCertEurope-popup-auth-img-loader { width: 50px; } .cscCertEurope-popup-auth-div-label { margin: 20px; } .cscCertEurope-popup-auth-label { text-align: center; } .cscCertEurope-popup-auth-div-identifiant { margin-left: 20px; margin-right: 20px; margin-bottom: 10px; text-align: center; } .cscCertEurope-popup-auth-identifiant { } .cscCertEurope-popup-auth-div-haut { display: flex; justify-content: center; align-items: center; flex-direction: row; } .cscCertEurope-popup-auth-img-error { width: 56px; } .cscCertEurope-popup-auth-img-ok { width: 56px; } .cscCertEurope-popup-auth-div-img-result { display: flex; justify-content: center; align-items: center; align-content: center; width: 100px; } /*Lorsqu'une row devient selected dans la gridviewEcriture, on passe la couleur de l'img svg de la colonne à blanc, ainsi dés que la classe SelectedRow drop car on lache la selection, l'img reprend sa couleur d'origine*/ tr.dxgvSelectedRow_MetropolisBlueBP .col-israpproche img.img-lettrage { filter: brightness(0) invert(1); } /*Suivi Facture*/ .select-item-typedate { width: 100%; max-width: 133px; box-sizing: border-box; padding: 4px 8px; font-size: 12px; height: 28px; margin-right: 7px; } .date-filter-container { display: flex; align-items: center; /* Aligne les éléments verticalement au centre */ gap: 10px; /* Espace entre les éléments */ margin-bottom: 30px; } .date-filter-container div { display: flex; flex-direction: column; } .date-filter-container label { margin-bottom: 5px; /* Espace entre le label et le champ de date */ } .header-echoir-Entre301J::before, .header-echoir-Entre6031J::before, .header-echoir-Entre9061J::before, .header-echoir-supp90::before, .header-echu-Entre030j::before, .header-echu-supp90::before, .header-echu-Entre6190J::before, .header-echu-Entre3160j::before { content: ''; /* Utilise un cercle vide comme contenu */ display: inline-block; width: 10px; /* Taille du cercle */ height: 10px; /* Taille du cercle */ border-radius: 50%; /* Rend le cercle rond */ margin-right: 6px; /* Espace entre le cercle et le texte */ } .header-echu-Entre030j, .header-echu-supp90, .header-echu-Entre6190J, .header-echu-Entre3160j, .header-echoir-Entre301J, .header-echoir-Entre6031J, .header-echoir-Entre9061J, .header-echoir-supp90 { display: flex; align-items: center; justify-content: flex-end; } .header-echu-Entre030j span, .header-echu-supp90 span, .header-echu-Entre6190J span, .header-echu-Entre3160j span, .header-echoir-Entre301J span, .header-echoir-Entre6031J span, .header-echoir-Entre9061J span, .header-echoir-supp90 span { margin-right: auto; /* Aligne le texte à droite */ } /* Echoir*/ .header-echoir-supp90::before { background: #63B084 !important; border: 1px solid #296128; } .header-echoir-Entre9061J::before { background: #A5E3BF !important; border: 1px solid #4E964E; } .header-echoir-Entre6031J::before { background: #C4E7D3 !important; border: 1px solid #5E935E; } .header-echoir-Entre301J::before { background: #EDF9F2 !important; border: 1px solid #5E935E; } /* Echu*/ .header-echu-Entre030j::before { background: #FFFBF3 !important; border: 1px solid #D36900; } .header-echu-Entre3160j::before { background: #FFECD0 !important; border: 1px solid #DB6600; } .header-echu-Entre6190J::before { background: #FFD8A1 !important; border: 1px solid #D66700; } .header-echu-supp90::before { background: #F2A6A9 !important; border: 1px solid #BB142C; } .balance-totaux-grey { font-weight: bold; text-align: right; background: #E6F0F7 !important; } .custom-tabs { width: 100%; } .tabs-header { display: flex; gap: 10px; margin-bottom: 10px; } .tab-btn { padding: 10px 20px; background-color: #f2f2f2; border: none; cursor: pointer; border-radius: 8px 8px 0 0; font-weight: normal; } .tab-btn.active { background-color: #fff; font-weight: bold; box-shadow: 0 -2px 5px rgba(0,0,0,0.1); } .tab-pane { display: none; } .tab-pane.active { display: block; } .custom-grid-cell { border: 1px solid #F3F3F3 !important; /* Couleur et épaisseur de la bordure */ padding: 8px; /* Espacement à l'intérieur des cellules */ text-align: right; /* Alignement du texte à droite */ } /* Style pour les en-têtes de colonne */ .custom-grid-header { background-color: white; /* Couleur de fond des en-têtes */ border: 1px solid #F3F3F3 !important; /* Couleur et épaisseur de la bordure */ padding: 8px; /* Espacement à l'intérieur des cellules */ text-align: center; /* Alignement du texte au centre */ } .error-cell-import-ecriture { background-color: red; } .update-cell-import-client { background-color: green; } .radio-montant-previsionnel-reliquat label { font-size: 13px; } /* DEBUT style import catégorie : permettant de coloriser la grille imbriquée d'import de sous catégorie au sein de la grille d'import de catégories */ #GridViewImportCategorie .dxgvDetailRow_MetropolisBlueBP > td { background-color: white !important; } /* Supprime le fond étendu de la table interne */ table[id^="GridViewImportSousCategorie"][id$="_DXMainTable"] { background-color: transparent !important; } /* Applique un fond gris fumé UNIQUEMENT aux lignes de données des grilles imbriquées */ table[id^="GridViewImportSousCategorie"][id$="_DXMainTable"] .dxgvDataRow_MetropolisBlueBP > td { background-color: WhiteSmoke !important; } /* Gère le décalage des grilles imbriquées */ td:has(> table[id^="GridViewImportSousCategorie"]) { padding-left: 85px; padding-bottom: 12px; } /* FIN style import catégorie */ /* DEBUT style gridView Categorisation et SousCategorie, utile pour la gestion drag & drop au sein de la double grille, un enfer sur terre */ /* Masque uniquement les lignes de sous-catégorie pendant le drag */ tr[id^="GridViewSousCategorisations"][id*="_DXDataRow"].invisible-during-drag { visibility: hidden !important; } /* Style pour l'élément visuel du drag */ .drag-helper { opacity: 0.95; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); border-collapse: collapse; pointer-events: none; background-color: white; } /* Gère le décalage des grilles imbriquées */ td:has(> table[id^="GridViewSousCategorisations"]) { padding-left: 85px; padding-bottom: 12px; } /* FIN STYLE CATEGORISATION */ .li-radio { /*utile pour forcer le style d'affichage en mode
  • pour afficher la petite bille noir de début de ligne (car le flex pour l'affichage sur une ligne la fais sauter)*/ list-style: disc; list-style-position: outside; } .li-row { /*aligne le contenu sur une seule ligne*/ display: inline-flex; align-items: center; gap: 10px; } .radio-inline { display: inline-block !important; margin: 0 !important; padding: 0 !important; border: none !important; } /* DEBUT style popup rappro */ /* Etat bloque : empeche les multi-clics */ .popupRappro-btn-disabled { opacity: 0.6; pointer-events: none; } /* Loader inline sur le bouton */ .popupRappro-btn-loading { position: relative; } .popupRappro-btn-loading:after { content: ""; position: absolute; right: 8px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border: 2px solid rgba(0, 0, 0, 0.25); border-top-color: rgba(0, 0, 0, 0.7); border-radius: 50%; animation: popupRappro-spin 0.8s linear infinite; } @keyframes popupRappro-spin { to { transform: rotate(360deg); } } #GridViewEcrituresPopupRappro_M_ .dxgvDetailRow_MetropolisBlueBP > td { background-color: white !important; } /* Supprime le fond étendu de la table interne */ table[id^="GridViewEcrituresPopupRappro_S_"][id$="_DXMainTable"] { background-color: transparent !important; } /* Applique un fond gris fumé UNIQUEMENT aux lignes de données des grilles imbriquées */ table[id^="GridViewEcrituresPopupRappro_S_"][id$="_DXMainTable"] tr.dxgvDataRow_MetropolisBlueBP.row_prev { background-color: WhiteSmoke !important; } table[id^="GridViewEcrituresPopupRappro_S_"][id$="_DXMainTable"] tr.dxgvDataRow_MetropolisBlueBP.row_realisee { background-color: #e4f7dc !important; } /* Gère le décalage des grilles imbriquées */ td:has(> table[id^="GridViewEcrituresPopupRappro_S_"]) { padding-left: 0px; padding-bottom: 12px; } /* Ligne de séparation fine : on met la bordure sur les cellules */ table[id^="GridViewEcritures"][id$="_DXMainTable"] tr.grid-row-master > td { border-bottom: 1px solid #e5e7eb !important; /* gris clair */ } /* Pas de double trait sur la dernière ligne du bloc */ table[id^="GridViewEcritures"][id$="_DXMainTable"] tbody tr.grid-row-master:last-child > td { border-bottom: none !important; } /* Ligne de séparation fine : on met la bordure sur les cellules */ table[id^="GridViewEcritures"][id$="_DXMainTable"] tr.row_slave > td { border-bottom: 1px solid #e5e7eb !important; /* gris clair */ } /* Pas de double trait sur la dernière ligne du bloc */ table[id^="GridViewEcritures"][id$="_DXMainTable"] tbody tr.row_slave:last-child > td { border-bottom: none !important; } .ptabs-bar { display: flex; /* Place les onglets sur une seule ligne et permet l'alignement horizontal */ gap: 0; /* Aucun espace entre les items: les bordures du bas se touchent */ align-items: flex-end; /* Aligne la base des items pour que les traits bas soient sur la meme ligne */ user-select: none; /* Evite la selection de texte lors des clics sur les onglets */ padding: 0 8px; overflow-x: hidden; } /* ====== TABS ITEM (un onglet) ====== */ .ptabs-item { display: inline-flex; /* Inline pour s'aligner naturellement, flex pour centrer le contenu */ align-items: center; /* Centre verticalement label + badge */ gap: 8px; /* Espace entre le label et le badge */ padding: 10px 32px 12px 12px; /* Haut, Droite, Bas, Gauche: espace cliquable confortable */ border-bottom: 2px solid #d1d5db; /* Trait bas gris par defaut (onglet inactif) */ cursor: pointer; /* Indique que l'element est cliquable */ color: #4b5563; /* Couleur de texte gris moyen (inactif) */ font-weight: 500; /* Poids de police moyen */ white-space: nowrap; /* Evite les retours a la ligne dans un onglet */ outline: none; /* Retire l'outline par defaut (on gere le focus si besoin ailleurs) */ /* Pas de margin pour que les border-bottom restent continues entre items */ } /* Effet hover simple: texte legerement plus sombre */ .ptabs-item:hover { color: #111827; } /* Etat actif: couleur bleue + trait bas bleu + poids un peu plus fort */ .ptabs-item.is-active { border-bottom-color: #0d1b4c; /* Remplace le gris par le bleu sur la bordure basse */ color: #0d1b4c; /* Texte bleu pour l'onglet actif */ font-weight: 600; /* Laisse le label un peu plus prononce */ } /* ====== Label texte d'un onglet ====== */ .ptabs-label { line-height: 1; /* Ligne compacte pour eviter de decaler la bordure basse */ } /* ====== Badge (pastille de compteur) ====== */ .ptabs-badge { display: inline-block; /* Permet padding et min-width */ min-width: 18px; /* Taille minimale pour les petits nombres (ex: 0, 1) */ padding: 2px 6px; /* Espace interne pour une pastille lisible */ font-size: 12px; /* Taille reduite pour s'approcher du look "pill" */ line-height: 1; /* Evite les hauteurs excessives */ border-radius: 9999px; /* Forme de pilule bien arrondie */ background: #eef2f7; /* Fond gris clair par defaut */ color: #374151; /* Texte gris fonce pour le contraste */ text-align: center; /* Centre le chiffre dans la pastille */ } /* Badge quand l'onglet est actif: teinte bleutee coherente */ .ptabs-item.is-active .ptabs-badge { background: #e7ecfb; /* Fond legerement bleute */ color: #0d1b4c; /* Texte bleu pour le rappel visuel de l'etat actif */ } .ptabs-section { margin-top: 16px; } .ptabs-title { font-weight: 600; font-size: 16px; margin-bottom: 4px; margin-left: 15px; } .ptabs-desc { font-size: 14px; color: #374151; /* gris doux, lisible */ margin: 0; margin-left: 15px; } /* Button _validAll plus utilisé*/ .validAllPointageBtnPopup, .validAllPointageBtnPopup input, .validAllPointageBtnPopup .dx-button, .validAllPointageBtnPopup .dxb, .validAllPointageBtnPopup .dx-button-content, .validAllPointageBtnPopup .dxbButton, .validAllPointageBtnPopup .dxbButton .dxb { height: 32px !important; line-height: 32px !important; font-size: 13px !important; padding: 0 14px !important; border-radius: 10px !important; margin-left: 175px; } .validAllPointageBtnPopup { display: block; width: 100%; max-width: 560px; background: #1e3a8a; color: #fff; font-weight: 400 !important; text-align: center; border: none; box-shadow: 0 1px 0 rgba(0,0,0,.18), 0 6px 10px rgba(0,0,0,.14); cursor: pointer; } .validAllPointageBtnPopup * { font-weight: 400 !important; } .validAllPointageBtnPopup:hover { box-shadow: 0 2px 0 rgba(0,0,0,.22), 0 8px 14px rgba(0,0,0,.16); } .validAllPointageBtnPopup:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(0,0,0,.18), 0 6px 10px rgba(0,0,0,.12); } .validAllPointageBtnPopup:focus { outline: 2px solid #93c5fd; outline-offset: 2px; } .validAllPointageBtnPopup[disabled], .myClass.dxWebButtonDisabled, .myClass[aria-disabled="true"] { background: #94a3b8; box-shadow: none; cursor: not-allowed; } /* STYLE BOUTON _validSection */ /* Le conteneur devient la référence de l’absolu */ #popupPointageEcritures { position: relative; } .validSectionBtnPopup { position: absolute; top: 80px; right: 16px; background: #fff !important; border: 1px solid #1e3a8a !important; border-radius: 6px !important; color: white !important; padding: 0 18px !important; height: 36px !important; line-height: 36px !important; font-weight: 600 !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: none !important; } .validSectionBtnPopup .dx-button-content, .validSectionBtnPopup .dxb { padding: 0 !important; } .validSectionBtnPopup:hover { background: var(--color-primary-surface-discrete-hover) !important; } .validSectionBtnPopup:active { background: #eaf0ff !important; } /* Etat du bouton "desactiver" */ .validSectionBtnPopup.dxbDisabled_MetropolisBlueBP, .validSectionBtnPopup .dxb.is-disabled { background: #f2f4f8 !important; border-color: #c7cfe8 !important; color: #9aa3c7 !important; filter: grayscale(100%); opacity: 0.9; cursor: default !important; pointer-events: none; box-shadow: none !important; } /* Etat du bouton "Tout valider" */ .validSectionBtnPopup.has-items { background: #0a2c85 !important; color: #ffffff !important; cursor: pointer; } /* FIN STYLE BOUTON _validSection */ /* Style cellule textBox + img croix suppression */ .residuelle-montant-cell { display: inline-flex; align-items: center; justify-content: flex-end; width: 100%; } .residuelle-montant-cell img { margin-left: 6px; margin-right: 10px; } /* FIN STYLE cellule textBox + img croix suppression */ /* Permet d'ajuster la position de la combo d'opération dans la boite d'envoi */ div[id^="OperationFichierModifInstant_"][id$="_DDD_PW-1"] { left: -10px !important; } .vop-icon-img-grid { width: 20px; } .vop-container > .vop-result { justify-content: flex-start !important; } .table-detail-vop { position:relative; left:-20px; } .vop-result-grid { font-size:13px !important; } .recap-top-content { display:flex; flex-direction:row; } .societe-row { display: flex; align-items: center; gap: 6px; } .connexion-sso { } .connexion-sso-title { margin: 20px 0px; } .connexion-sso-link { margin: 20px 0px; text-align:center; } .connexion-sso-link > a { color:blue; text-decoration:underline; } .connexion-sso-link > a:hover { color: purple; } .container-operation-progress { text-align: center; padding: 30px; } .operation-title { font-size: 18px; margin-bottom: 10px; } .operation-message { margin-bottom: 20px; color: #555; } .operation-loader img { width: 48px; height: 48px; } #btnTutoEFacture { position: fixed; bottom: 0; right: 180px; border: none; border-radius: 8px 8px 0 0; padding: 10px 20px; font-size: 14px; font-weight: 600; cursor: pointer; z-index: 1199; transition: background-color 0.2s ease; } .categorie-regles-actions { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 25px; padding: 0 12px; } .categorie-regles-actions__group { display: flex; align-items: center; gap: 40px; } .categorie-regles-actions__item { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: #000; text-decoration: none; white-space: nowrap; } .categorie-regles-actions__icon { width: 24px; height: 24px; object-fit: contain; display: block; flex: 0 0 24px; } .categorie-regles-actions__label { line-height: 24px; } .categorie-regles-actions__item:hover { text-decoration: none; } .categorie-regles-actions__item:hover .categorie-regles-actions__label { text-decoration: underline; } /* ============================================================================= * SiteReact.css - Feuille de styles principale de l'application React * ============================================================================= * * ORGA : * * 1. FONDATIONS * 1.1 Variables CSS et polices * 1.2 Réinitialisations générales * * 2. SURCHARGES DEVEXTREME * 2.1 Boutons * 2.2 Éditeurs et champs de saisie * 2.3 DataGrid - Général * 2.4 DataGrid - En-têtes et tri * 2.5 DataGrid - Lignes et sélection * 2.6 DataGrid - Pagination * 2.7 Cases à cocher * 2.8 Onglets et tabs * 2.9 Pop-ups DevExpress * 2.10 Autres composants DevExtreme * * 3. MISE EN PAGE * 3.1 Conteneurs principaux * 3.2 Barre d'outils * 3.3 Grille et détails * 3.4 Panneau de détails * * 4. COMPOSANTS * 4.1 Recherche et filtres * 4.2 Boutons de filtre (pills) * 4.3 Sélecteurs de compte * 4.4 Menus déroulants * 4.5 Info-bulles * 4.6 Chargeur (loader) * 4.7 Zone Compteurs Factures * 4.8 Parametrage Compte Facture par défaut * * 5. FORMULAIRES * 5.1 Labels et champs * 5.2 Cases à cocher et radios * 5.3 Pop-ups et modales * * 6. EN-TÊTE ET NAVIGATION * 6.1 Barre d'en-tête * 6.2 Navigation latérale * * 7. PAGE DE CONNEXION * * 8. WIDGETS ET GRAPHIQUES * 8.1 Widgets généraux * 8.2 Quotas et graphiques * 8.3 Légendes * 8.4 Couleurs des banques * 8.5 Widget Factures * * 9. VUES SPÉCIFIQUES * 9.1 Détails de compte * 9.2 Détails d'écriture * 9.3 Extraits * * 10. UTILITAIRES * 10.1 Espacements et marges * 10.2 Flexbox utilitaires * 10.3 Couleurs et états * 10.4 Accessibilité * 10.5 eReporting * * 11. RESPONSIVE * * 12. ANIMATIONS * * ========================================================================== */ /* ============================================================================= * 1. FONDATIONS * ========================================================================== */ /* ----------------------------------------------------------------------------- * 1.1 Variables CSS et polices * -------------------------------------------------------------------------- */ :root { --theme-color: #fff; --dropdown-icon-path: url('/Content/Images/Neo/icons/icon_chevron_default.svg'); --dropdown-icon-white-path: url('/Content/Images/Neo/icons/icon_chevron_down_white.svg'); } @font-face { font-family: '89c3-icons'; src: url('../src/web-assets-4.22.0/package/common/fonts/89c3-icons.eot'); src: url('../src/web-assets-4.22.0/package/common/fonts/89c3-icons.eot?#iefix') format('eot'), url('../src/web-assets-4.22.0/package/common/fonts/89c3-icons.woff2') format('woff2'), url('../src/web-assets-4.22.0/package/common/fonts/89c3-icons.woff') format('woff'), url('../src/web-assets-4.22.0/package/common/fonts/89c3-icons.ttf') format('truetype'), url('../src/web-assets-4.22.0/package/common/fonts/89c3-icons.svg#89c3-icons') format('svg'); font-weight: normal; font-style: normal; font-display: block; } @font-face { font-family: 'dxicons'; src: url('../wwwroot/dist/fonts/dxicons.woff') format('woff'), url('../wwwroot/dist/fonts/dxicons.woff2') format('woff2'), url('../wwwroot/dist/fonts/dxicons.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: block; } /* ----------------------------------------------------------------------------- * 1.2 Réinitialisations générales * -------------------------------------------------------------------------- */ b, strong { font-weight: 500; } .dx-widget { font-family: Ubuntu !important; font-weight: 400; } .dx-widget input { font-family: Ubuntu !important; font-weight: 400; color: #232323; } .dx-item-content { font-family: Ubuntu !important; font-size: 13px !important; font-weight: 400; } /* ============================================================================= * 2. SURCHARGES DEVEXTREME * ========================================================================== */ /* ----------------------------------------------------------------------------- * 2.1 Boutons * -------------------------------------------------------------------------- */ .dx-button-mode-outlined { border-color: var(--color-primary-surface) !important; color: var(--color-primary-surface) !important; background-color: white !important; } .dx-button-mode-outlined .dx-icon, .dx-button-mode-outlined.dx-button-default .dx-icon { color: var(--color-primary-surface) !important; } .dx-button-mode-contained { background-color: var(--color-primary-surface) !important; color: white !important; } .dx-button-mode-text.dx-state-hover { border-radius: 12px; } .dxbButton_MetropolisBlueBP { border-radius: 4px; background-color: var(--color-primary-surface) !important; color: white; font-size: 14px; padding-left: 4px; padding-right: 4px; } .dxgvCommandColumnItem_MetropolisBlueBP, .delete-button-row-categorie-import { background-color: transparent !important; } /* ----------------------------------------------------------------------------- * 2.2 Éditeurs et champs de saisie * -------------------------------------------------------------------------- */ .headerSelectors .dx-editor-outlined { /*border: none !important;*/ } .dx-editor-outlined { border: 1px solid #808080 !important; } .dx-texteditor-input-container input[type="text"] { border: none; } .dxeTextBoxSys, .dxeButtonEditSys { border-radius: 4px; } /* ----------------------------------------------------------------------------- * 2.3 DataGrid - Général * -------------------------------------------------------------------------- */ /* ============================================================ Suppression du separateur des colonnes figees pour cette grille ============================================================ */ .dg-sans-separateur .dx-datagrid .dx-datagrid-sticky-columns .dx-datagrid-table .dx-row td.dx-datagrid-sticky-column-border-right, .dx-rtl .dg-sans-separateur .dx-datagrid .dx-datagrid-sticky-columns .dx-datagrid-table .dx-row td.dx-datagrid-sticky-column-border-right { border-right: none !important; } .dg-sans-separateur .dx-datagrid .dx-datagrid-sticky-columns .dx-datagrid-table .dx-row td.dx-datagrid-sticky-column-border-left, .dx-rtl .dg-sans-separateur .dx-datagrid .dx-datagrid-sticky-columns .dx-datagrid-table .dx-row td.dx-datagrid-sticky-column-border-left { border-left: none !important; } .dx-datagrid .dx-datagrid-headers .dx-row td.dx-pointer-events-none, .dx-datagrid .dx-datagrid-rowsview .dx-data-row td.dx-pointer-events-none, .dx-datagrid .dx-datagrid-rowsview .dx-freespace-row td.dx-pointer-events-none, .dx-datagrid .dx-datagrid-rowsview .dx-header-row td.dx-pointer-events-none, .dx-datagrid .dx-datagrid-rowsview .dx-virtual-row td.dx-pointer-events-none { border-left: none !important; border-right: none !important; } .dx-datagrid-column-chooser-button { display: none !important; } .dx-datagrid-headers + .dx-datagrid-rowsview { border-top: none !important; } /*.dx-datagrid-header-panel { z-index: 2; }*/ .dx-datagrid .dx-row > td { vertical-align: middle !important; } .dx-datagrid .dx-row-alt { background-color: #F9F9F9 !important; } .dx-freespace-row { height: 0 !important; } .dx-datagrid .dx-freespace-row, .dx-datagrid .dx-freespace-row > td { pointer-events: none !important; background: transparent !important; } .dxgvHeader_MetropolisBlueBP { font-weight: 500; } .dxgvDataRow_MetropolisBlueBP { height: 50px; } .dxgvSelectedRow_MetropolisBlueBP { background-color: var(--color-primary-surface-discrete-selected) !important; color: black; } /*REGION RAPPRO*/ /*DEBUT LOADER*/ .spinnerRapprochement { display: inline-block; width: 14px; height: 14px; border: 2px solid #ccc; border-top: 2px solid #3498db; border-radius: 50%; animation: spin 1s linear infinite; margin-right: 5px; vertical-align: middle; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /*FIN LOADER*/ /*DEBUT POPUP VALIDATION*/ .rappro-validation-content { padding: 12px 14px; } .rappro-validation-line { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; } .rappro-validation-nb { font-weight: 700; font-size: 18px; min-width: 40px; text-align: right; } .rappro-validation-label { font-size: 14px; } .rappro-validation-purge-line { display: flex; align-items: center; gap: 10px; margin-top: 4px; margin-bottom: 10px; flex-wrap: wrap; } .rappro-validation-purge-text { font-size: 14px; font-weight: 600; white-space: nowrap; } .rappro-validation-purge-radio { display: inline-flex; } .rappro-validation-purge-radio .dx-radiobutton { margin-right: 14px; } .rappro-validation-buttons { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; } /*GRID RESIDUELLE debut*/ .rappro-validation-residuelles-grid .dx-datagrid-rowsview td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rappro-validation-residuelles-grid .dx-scrollable-scrollbar.dx-scrollbar-horizontal { display: none !important; } .rappro-validation-residuelles-grid .dx-datagrid-headers { position: static !important; } .error-cell-import-ecriture .dx-texteditor-container { border: 2px solid #d32f2f !important; border-radius: 4px; } /*GRID RESIDUELLE FIN*/ /*FIN POPUP VALIDATION*/ .grids-rappro .dx-datagrid-headers { position: static !important; top: auto !important; z-index: auto !important; } .rp-filters-bar { display: flex; align-items: center; gap: 12px; } .filterAfterSearchRappro { position: relative; left: 0; display: inline-flex; gap: 12px; z-index: 1; } .rp-filters-bar .search-field { top: 0; } .dxbtn-label-with-badge { display: inline-flex; align-items: center; gap: 8px; line-height: 1; } .ptabs-badge-inline { position: static; /* important: pas de position absolute */ margin-left: 2px; top: auto; right: auto; transform: none; font-weight: 600; } /* Enleve le gros padding autour du detail (cause principale du "bloc" enorme) */ .grids-rappro .dx-master-detail-row > td, .grids-rappro .dx-master-detail-cell { padding: 0 !important; } /* La sous-grille doit coller au master, sans marges */ .rappro-fiable-details-grid { margin: 0; } /* Compacter les lignes du detail */ .rappro-fiable-details-grid .dx-row > td { padding-top: 6px; padding-bottom: 6px; vertical-align: middle; } /* Eviter les separations lourdes */ .rappro-fiable-details-grid .dx-datagrid-rowsview, .rappro-fiable-details-grid .dx-datagrid-content { border: 0; } .cell-compte { display: inline-flex; align-items: center; gap: 8px; } .bank-logo { width: 18px; height: 18px; object-fit: contain; flex: 0 0 auto; } .previsionnelle-icon { font-size: 14px; opacity: 0.85; } .empty-compte-placeholder { display: inline-block; width: 100%; } /* compacter un peu les rows slave */ .rappro-fiable-details-grid .dx-row > td { padding-top: 6px; padding-bottom: 6px; vertical-align: middle; } /* Optionnel: figer les largeurs des colonnes techniques du master pour que le padding soit stable */ .grids-rappro .dx-command-select { width: 42px !important; } .grids-rappro .dx-command-expand { width: 30px !important; } .cell-ecriture { display: inline-flex; align-items: center; } img.previsionnel { width: 13px; opacity: 0.7; margin-right: 4px; } .ecriture-spacer { display: inline-block; width: 13px; /* même largeur que l’icône */ margin-right: 4px; } /* Supprime les paddings internes qui peuvent ajouter 2-6px */ .grids-rappro .dx-master-detail-cell { padding-left: 0 !important; padding-right: 0 !important; } .montant-ecart-rappro { color: rgb(230, 126, 48); font-weight: bold; } /*Affichage colonne montant*/ .grids-rappro .montant-pos { font-weight: bold; } .grids-rappro .montant-neg { font-weight: bold; color: #d32f2f; } /*Fin affichage colonne montant*/ /* Retire les lignes verticales entre colonnes */ .grids-rappro .dx-datagrid-headers .dx-header-row > td, .grids-rappro .dx-datagrid-rowsview .dx-row > td { border-left: none !important; border-right: none !important; } /*TRONQUAGE text colonne Compte*/ .grids-rappro .dx-data-row td[data-column-id="compte"] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Important pour ton rendu custom Compte: le span doit pouvoir tronquer */ .grids-rappro .cell-compte { display: flex; align-items: center; gap: 6px; min-width: 0; } .grids-rappro .bank-compte-text { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /*FIN TRONQUAGE colonne compte*/ /*SLAVE*/ .rappro-fiable-details-grid .row-previsionnelle td, .rappro-fiable-details-grid .row-previsionnelle .dx-datagrid-text-content { font-weight: bold; } /*Btn edit*/ .rappro-fiable-details-grid .cell-edit-wrap { display: flex; justify-content: center; align-items: center; height: 100%; } .rappro-fiable-details-grid .btn-row-edit { opacity: 0; pointer-events: none; transition: opacity 120ms ease-in-out; } .rappro-fiable-details-grid .dx-data-row:hover .btn-row-edit { opacity: 1; pointer-events: auto; } .rappro-fiable-details-grid .btn-row-edit .dx-button-content { width: 28px; height: 28px; padding: 0 !important; display: flex; align-items: center; justify-content: center; } .rappro-fiable-details-grid .btn-row-edit .dx-icon { width: 20px; height: 20px; margin: 0; background-size: contain; background-repeat: no-repeat; background-position: center; } /*Fin btn edit*/ /*FIN SLAVE*/ /* ancre le bouton par rapport au bloc des tabs */ .rappro-tabs-wrap { position: relative; } /* place la barre d'outils (spinner + bouton colonnes) en haut a droite, aligne avec la ligne des tabs */ .rappro-tabs-wrap .rappro-tabs-toolbar { position: absolute; top: 10px; right: 10px; z-index: 1; display: flex; align-items: center; gap: 45px; } /* garde le bloc spinner sur une seule ligne dans la barre d'outils */ .rappro-tabs-wrap .rappro-tabs-toolbar #nbPointageEcrRealisee { white-space: nowrap; } /* evite que le bouton recouvre le dernier tab */ .rappro-tabs-wrap .dx-tabpanel-tabs { padding-right: 60px; } /* Supprime la bande toolbar/header-panel */ .grids-rappro .dx-datagrid-header-panel { display: none !important; height: 0 !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; } /* Sécurité : évite des espaces résiduels si DevExtreme laisse un wrapper */ .grids-rappro .dx-toolbar { display: none !important; } /*SECTIONS*/ .rapprochement-sections { font-family: Ubuntu !important; } /* Barre grise sous les onglets */ .rapprochement-sections .dx-tabpanel-tabs { background: transparent !important; padding: 0 !important; border: 0 !important; border-bottom: 1px solid #e6e6e6 !important; } /* Neutralise box/theme (cible TabPanel + tabs) */ .rapprochement-sections .dx-tabpanel, .rapprochement-sections .dx-tabpanel-container, .rapprochement-sections .dx-multiview, .rapprochement-sections .dx-multiview-wrapper, .rapprochement-sections .dx-tabpanel-tabs .dx-tabs, .rapprochement-sections .dx-tabpanel-tabs .dx-tabs-wrapper { border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; } /* Si ton theme met un cadre via pseudo-elements */ .rapprochement-sections .dx-tabpanel-tabs .dx-tabs-wrapper::before, .rapprochement-sections .dx-tabpanel-tabs .dx-tabs-wrapper::after, .rapprochement-sections .dx-tabpanel-tabs .dx-tab::before, .rapprochement-sections .dx-tabpanel-tabs .dx-tab::after { content: none !important; display: none !important; } /* Tabs */ .rapprochement-sections .dx-tabpanel-tabs .dx-tab { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 10px 0 !important; font: 13px Ubuntu !important; color: #2f2f2f !important; } /* Desactive l'indicator DevExtreme */ .rapprochement-sections .dx-tabpanel-tabs .dx-tab-indicator { display: none !important; } /* Label via tabRender (label + badge) */ .rapprochement-sections .dx-tabpanel-tabs .dx-tab .dx-item-content.dx-tab-content > .rappro-tab-label { display: inline-flex !important; /* IMPORTANT: gap fonctionne */ align-items: center !important; gap: 8px !important; padding: 8px 20px !important; line-height: 1.2 !important; border-bottom: 2px solid transparent !important; } /* Hover */ .rapprochement-sections .dx-tabpanel-tabs .dx-tab:hover { color: var(--color-primary-surface) !important; } /* Selected */ .rapprochement-sections .dx-tabpanel-tabs .dx-tab.dx-tab-selected { color: var(--color-primary-surface) !important; } .rapprochement-sections .dx-tabpanel-tabs .dx-tab.dx-tab-selected .dx-item-content.dx-tab-content > .rappro-tab-label { border-bottom-color: var(--color-primary-surface) !important; font-weight: bold; } /* Focus/active */ .rapprochement-sections .dx-tabpanel-tabs .dx-tab.dx-state-focused, .rapprochement-sections .dx-tabpanel-tabs .dx-tab.dx-state-active { background: transparent !important; outline: none !important; box-shadow: none !important; } /* Contenu */ .rapprochement-sections .dx-tabpanel-container, .rapprochement-sections .dx-multiview-wrapper { padding-top: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } /* Badge */ .rapprochement-sections .ptabs-badge { transform: translateY(-1px); } /*FIN SECTIONS*/ /* centre le contenu de la cellule */ /* conteneur cellule */ .grids-rappro .cell-delete-wrap { display: flex; justify-content: center; align-items: center; height: 100%; } /* bouton invisible par defaut */ .grids-rappro .btn-row-delete { opacity: 0; pointer-events: none; transition: opacity 120ms ease-in-out; } /* visible au hover */ .grids-rappro .dx-data-row:hover .btn-row-delete { opacity: 1; pointer-events: auto; } /* ZONE CLiquable du bouton (POINT CLE) */ .grids-rappro .btn-row-delete .dx-button-content { width: 28px; /* augmente la surface */ height: 28px; padding: 0 !important; display: flex; align-items: center; justify-content: center; } /* icone DX (trash) bien centree */ .grids-rappro .btn-row-delete .dx-icon { font-size: 20px; /* controle taille icone */ margin: 0; line-height: 1; } /* Autoriser le tooltip d'aide à déborder du dropdown de la pill Paramétrage */ .parametrage-rappro-popup .dx-overlay-content, .parametrage-rappro-popup .dx-popup-content, .parametrage-rappro-popup .dx-popup-content > div, .parametrage-rappro-popup .dd-menu { overflow: visible !important; } /* ============================================================ Grille eReporting ============================================================ */ /* Bande alignée en bas pour coller le soulignement aux entêtes de colonnes */ .dg-ereporting-bandes .dx-datagrid-headers .dx-header-row > td.col-bande { vertical-align: bottom; } /* Libellé de bande en petites capitales, souligné de la couleur du groupe */ .dg-ereporting-bandes .bande-entete { display: block; margin: 0 8px; padding-bottom: 6px; font-size: 11px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; color: #666666; } .dg-ereporting-bandes .bande-entete-international { border-bottom: 2px solid var(--color-warning, #f59e0b); } .dg-ereporting-bandes .bande-entete-france { border-bottom: 2px solid var(--color-primary-brand); } /* Titre d'entête centré, alignement des cellules de données inchangé (!important : DevExtreme pose l'alignement de la colonne en style inline sur le td) */ .dg-ereporting-bandes .dx-datagrid-headers .dx-header-row > td.entete-centree { text-align: center !important; } /* Séparateurs verticaux de l'entête, invisibles au repos : bordure transparente pour garder la même largeur et éviter un décalage d'un pixel au survol */ .dg-ereporting-bandes .dx-datagrid-headers .dx-header-row > td { border-left: 1px solid transparent !important; } /* Séparateurs affichés au survol de l'entête, sur ses deux lignes */ .dg-ereporting-bandes .dx-datagrid-headers:hover .dx-header-row > td { border-left-color: #ddd !important; } /* Séparateur plus marqué au début de chaque bande */ .dg-ereporting-bandes .dx-datagrid-headers:hover .dx-header-row > td.col-separateur-bande { border-left-color: #ccc !important; } /* Pas de séparateur devant la case "tout cocher", au bord gauche de la grille */ .dg-ereporting-bandes .dx-datagrid-headers .dx-header-row > td.dx-command-select, .dg-ereporting-bandes .dx-datagrid-headers:hover .dx-header-row > td.dx-command-select { border-left-color: transparent !important; } .dx-header-row > td > .dx-datagrid-text-content:not(.dx-sort-indicator):not(.dx-header-filter-indicator) { width: 100% } /*END REGION RAPPRO*/ /* ----------------------------------------------------------------------------- * 2.4 DataGrid - En-têtes et tri * -------------------------------------------------------------------------- */ .dx-datagrid .dx-datagrid-headers { position: sticky; top: 113px; z-index: 1; } /* Grilles factures client / fournisseur */ .dg-factures .dx-datagrid .dx-datagrid-headers { top: 113px; margin-top: 12px; } /* Grilles factures : neutralise le décalage inline posé par DevExtreme sur le corps lorsqu'un resize survient avec l'entête sticky collée (top: Npx) */ .dg-factures .dx-datagrid-rowsview { top: 0 !important; } .dg-factures .dx-datagrid-header-panel { position: relative; z-index: 1; } /* Grilles factures : colonne Etat centrée, un seul indicateur de tri (le miroir DevExtreme reste masqué) */ .dg-factures .dx-datagrid-headers .dx-header-row td .dx-column-indicators.dx-visibility-hidden { display: none; } /* Grilles factures : frontières de colonnes visibles au survol de l'entête (repère pour le redimensionnement) */ .dg-factures .dx-datagrid-headers .dx-header-row:hover > td { border-right: 1px solid #e1e1e1 !important; } .dg-factures .dx-datagrid-headers .dx-header-row:hover > td:last-child { border-right: none !important; } .dg-ereporting .dx-datagrid-headers .dx-datagrid-table .dx-row > td { border-left: 1px solid #ddd; } .dg-ereporting .dx-datagrid-rowsview { top: 0 !important; } .dg-ereporting .dx-datagrid-header-panel { position: relative; z-index: 1; } td.case-non-selectionnable > .dx-state-disabled { opacity: 0; pointer-events: none; } .dataGrid-details-extrait .dx-datagrid .dx-datagrid-headers { top: unset; position: unset; } /* Virements d'équilibrage : le td a un overflow qui en fait un scroll container et capture le sticky des en-têtes de grilles (qui ne s'engage alors jamais, c'est la fenêtre qui scrolle). On libère l'overflow sur cette page pour que le sticky global (top:113 sous le bandeau fixe) se cale sur le viewport. */ .td-gridview:has(.dg-virements-equilibrage) { overflow-x: visible; overflow-y: visible; } /* Les conteneurs de l'onglet capturent le sticky du volet : overflow libéré */ .td-gridview:has(.gridAndDetails .detailsBoxReact), .tab-content:has(.gridAndDetails .detailsBoxReact) { overflow: visible; } /* Comptes emetteur / destinataire : societe + ':' et (PIVOT) en vrai gras (la regle globale b,strong {font-weight:500} les affadit) */ .dg-virements-equilibrage .dx-data-row td b { font-weight: 700; } /* Synthèse Soldes prévisionnels : le panneau (td-details-gridview, overflow-y:auto) a son propre scroll interne et sert de référentiel au sticky. top:0 = les en-têtes se collent en haut du panneau quand on défile DANS le panneau (le top:113 global est calibré pour le scroll de la page, pas pour ce volet). */ .dg-synthese-virequi .dx-datagrid .dx-datagrid-headers { top: 0; } /* Bandeau de titre grisé (style repris de legacy) */ .dg-synthese-virequi .dx-datagrid-header-panel { background-color: #f1f1f1; padding-left: 8px; } .dx-datagrid-headers td:first-child .dx-column-indicators { display: none !important; } .dx-datagrid .dx-header-row .dx-column-indicators::before { display: none; } .dx-datagrid .dx-header-row .dx-column-indicators .dx-sort { display: inline-block !important; } .dx-datagrid .dx-header-row .dx-sort::before { font-size: 12px; opacity: 1; visibility: visible; display: inline-block; margin-left: 4px; position: relative; } .dx-datagrid .dx-header-row .dx-sort-up::before { content: "▲"; } .dx-datagrid .dx-header-row .dx-sort-down::before { content: "▼"; } .dx-datagrid-headers .colorRed { color: inherit !important; } .align-right-header .dx-datagrid-text-content { text-align: right !important; } /*REGION Historique virements sct*/ /* Enlève le gros padding autour du détail (même fix que .grids-rappro) */ .dg-historique-sct .dx-master-detail-row > td, .dg-historique-sct .dx-master-detail-cell { padding: 0 !important; } /* Curseur main sur les lignes master (le clic déplie le détail) */ .dg-historique-sct .dx-data-row { cursor: pointer; } /* En-tête du détail (banque / fichier / date) — même rendu que le legacy */ .dg-historique-sct .headerDetailRowContent { position: relative; padding: 6px 12px; background-color: #f3f3f3; } .dg-historique-sct .close-details-remise { position: absolute; right: 16px; top: 10px; } /* Loader d'ouverture du détail : NeoLoader centré dans la rangée détail */ .detail-remise-histo-loading { display: flex; justify-content: center; align-items: center; min-height: 120px; padding: 16px 0; } /* La sous-grille des virements colle au master, fond différencié */ .dg-details-remise-histo { margin: 0; background: transparent; } /* Les en-têtes de la sous-grille ne doivent PAS hériter du sticky global * (top: 113px) : symptôme = en-têtes décalés qui recouvrent la 1ère ligne * (précédents : .dataGrid-details-extrait, .grids-rappro) */ .dg-details-remise-histo .dx-datagrid .dx-datagrid-headers, .dg-details-remise-histo.dx-widget .dx-datagrid-headers { position: static !important; top: auto !important; z-index: auto !important; } /* Compacter les lignes du détail */ .dg-details-remise-histo .dx-row > td { padding-top: 6px; padding-bottom: 6px; } td.cell-bandeau-dg { position: relative; padding: 0 !important; } .bandeau-rouge-dg { position: absolute; top: 0; bottom: 0; left: 0; width: 6px; background-color: rgb(231, 76, 60); } /* ----------------------------------------------------------------------------- * 2.5 DataGrid - Lignes et sélection * -------------------------------------------------------------------------- */ .dx-datagrid-rowsview .dx-row > td { height: 30px; line-height: 30px; overflow: hidden; } .dx-datagrid-rowsview .dx-row:hover, .dx-datagrid-rowsview .dx-row-alt:hover, .dx-datagrid .dx-row-alt:hover > td { background-color: var(--color-primary-surface-discrete-hover) !important; } .dx-datagrid-table .dx-data-row.dx-state-hover:not(.dx-selection):not(.dx-row-inserted):not(.dx-row-removed):not(.dx-edit-row):not(.dx-row-focused) > td:not(.dx-focused) { background-color: unset !important; } .dx-datagrid-rowsview .dx-selection.dx-row > td, .dx-datagrid-rowsview .dx-selection.dx-row.dx-row-alt > td { background-color: var(--color-primary-border-inverted) !important; color: black !important; } dx-data-row .dx-command-select { border-bottom: 1px solid white !important; } /* Boutons d'action dans les lignes */ .dx-data-row .btn-add-virement-dg { visibility: hidden; } .dx-data-row:hover .btn-add-virement-dg, .dx-datagrid-rowsview .dx-data-row:hover .btn-add-virement-dg { visibility: visible; opacity: 1; } .btn-add-virement-dg { box-sizing: border-box; opacity: 0.4; } .btn-add-virement-dg:hover { opacity: 1; } .btn-add-virement-dg .dx-icon { font-size: 14px; line-height: 24px; vertical-align: middle; } .btn-add-virement-dg .dx-button-content { padding: 0 !important; display: flex; align-items: center; justify-content: center; } .divAction-btn-dg, .cellAction-dg { display: inline-flex; gap: 8px; height: 100%; align-items: center; } /* Grille Virements d'équilibrage : boutons d'action visibles au survol de la ligne */ .dg-virements-equilibrage .cell-actions-virequi { display: flex; justify-content: center; align-items: center; gap: 2px; height: 100%; } .dg-virements-equilibrage .btn-row-edit, .dg-virements-equilibrage .btn-row-delete { opacity: 0; pointer-events: none; transition: opacity 120ms ease-in-out; } .dg-virements-equilibrage .dx-data-row:hover .btn-row-edit, .dg-virements-equilibrage .dx-data-row:hover .btn-row-delete { opacity: 1; pointer-events: auto; } /* Zone cliquable du bouton */ .dg-virements-equilibrage .btn-row-edit .dx-button-content, .dg-virements-equilibrage .btn-row-delete .dx-button-content { width: 28px; height: 28px; padding: 0 !important; display: flex; align-items: center; justify-content: center; } .dg-virements-equilibrage .btn-row-edit .dx-icon, .dg-virements-equilibrage .btn-row-delete .dx-icon { width: 20px; height: 20px; margin: 0; background-size: contain; background-repeat: no-repeat; background-position: center; } /* Retire les lignes verticales entre colonnes */ .dg-synthese-virequi .dx-datagrid-headers .dx-header-row > td, .dg-synthese-virequi .dx-datagrid-rowsview .dx-row > td { border-left: none !important; border-right: none !important; } /* Les montants ne passent jamais à la ligne (wordWrap actif pour les noms de comptes) */ .dg-synthese-virequi td.cell-montant-nowrap { white-space: nowrap; } /* Montants en vrai gras (la règle globale b,strong {font-weight:500} les affadit) */ .dg-synthese-virequi td.cell-montant-nowrap b { font-weight: 700; } /* ----------------------------------------------------------------------------- * 2.6 DataGrid - Pagination * -------------------------------------------------------------------------- */ .dx-page-sizes { display: flex; align-items: center; border-radius: 32px; /*background-color: #EFEFEF;*/ padding: 2px; } .dx-page-size { color: #232323; border: 1px solid #ddd; font-size: 14px; cursor: pointer; transition: all 0.2s ease-in-out; width: 45px; text-align: center; padding: 4px 16px; } .dx-page-size.dx-selection { background-color: #fff !important; font-weight: bold; border-radius: 32px !important; } .dx-info { color: #232323 !important; opacity: 1 !important; } .dx-pager .dx-pages .dx-selection { border: 1px solid var(--color-primary-surface) !important; background-color: #fff !important; } .dx-page { min-width: 32px !important; padding: 7px 9px !important; text-align: center !important; } /* ----------------------------------------------------------------------------- * 2.7 Cases à cocher * -------------------------------------------------------------------------- */ .dx-datagrid-checkbox-size .dx-checkbox-icon { border: 2px solid var(--color-primary-surface) !important; border-radius: 4px; } .dx-datagrid-checkbox-size.dx-checkbox-checked .dx-checkbox-icon { background-color: var(--color-primary-surface) !important; border-color: var(--color-primary-surface) !important; } .dx-datagrid-checkbox-size.dx-checkbox-checked .dx-checkbox-icon::before { color: #fff !important; } .dx-checkbox-indeterminate .dx-checkbox-icon::before { background-color: var(--color-primary-surface) !important; } /* ----------------------------------------------------------------------------- * 2.8 Onglets et tabs * -------------------------------------------------------------------------- */ .dxtcLite_MetropolisBlueBP > .dxtc-content { padding-top: 10px; padding-left: 0; } #pcTresorerie_CC, .dxtc-content { overflow: visible !important; } .dxtcLite_MetropolisBlueBP > .dxtc-stripContainer .dxtc-tab { background: unset; } .dx-tabs-wrapper { background-color: transparent !important; } .custom-tabs .dx-tab { border-radius: 4px; background: transparent; border-bottom: 2px solid transparent; transition: all 0.2s; } .custom-tabs .dx-tab.dx-tab-selected { border-bottom-color: var(--color-primary-surface); color: var(--color-primary-surface); } .custom-tabs .dx-tab:hover { background: rgba(25, 118, 210, 0.08); } /* Page à onglets Trésorerie */ .pageOngletTreso { font-family: Ubuntu !important; background-color: white; } .suiviFac { background-color: unset; } .pageOngletTreso .dxtcLite_MetropolisBlueBP { font: 13px Ubuntu !important; } .pageOngletTreso .dxtcLite_MetropolisBlueBP > .dxtc-stripContainer .dxtc-activeTab, .pageOngletTreso .dxtcLite_MetropolisBlueBP > .dxtc-stripContainer .dxtc-activeTab a { background-color: transparent !important; color: var(--color-primary-surface) !important; background: none !important; font: 16px Ubuntu; border-bottom: 2px solid var(--color-primary-surface) !important; } .pageOngletTreso .dxtcLite_MetropolisBlueBP > .dxtc-stripContainer, .dxtcLite_MetropolisBlueBP > .dxtc-stripContainer a > .dx-vam { padding-bottom: 6px !important; } .pageOngletTreso .dxtcLite_MetropolisBlueBP > .dxtc-stripContainer .dxtc-link, .pageOngletTreso .dxtcLite_MetropolisBlueBP > .dxtc-stripContainer .dxtc-leftIndent, .pageOngletTreso .dxtcLite_MetropolisBlueBP > .dxtc-stripContainer .dxtc-rightIndent { text-decoration: none; white-space: nowrap; display: flex; align-items: center; justify-content: center; } .pageOngletTreso .dxtcLite_MetropolisBlueBP > .dxtc-stripContainer .dxtc-link { padding: 4px 16px; } .pageOngletTreso .dxtcLite_MetropolisBlueBP > .dxtc-stripContainer .dxtc-tabHover, .dxtcLite_MetropolisBlueBP > .dxtc-stripContainer .dxtc-tabHover a { color: var(--color-primary-surface) !important; } .pageOngletTreso .dxtcLite_MetropolisBlueBP > .dxtc-stripContainer .dxtc-tabHover, .dxtcLite_MetropolisBlueBP > .dxtc-stripContainer .dxtc-tabHover a:hover span { text-decoration: none; } .pageOngletTreso .dxtcLite_MetropolisBlueBP > .dxtc-content { padding-top: 0; } .pageOngletTreso .dxtcLite_MetropolisBlueBP.dxtc-top > .dxtc-stripContainer { background-color: #f5f5f5; padding-left: 40px; } .pageOngletTreso .dxtcLite_MetropolisBlueBP > .dxtc-link { padding-top: 0; } .pageOngletTreso .dxtcLite_MetropolisBlueBP > .dxtc-stripContainer .dxtc-tab { background-color: transparent !important; font-size: 13px; } .pageOngletTreso .dxtcLite_MetropolisBlueBP.dxtc-top > .dxtc-content { background-color: transparent; } .pageOngletTreso .dxtcLite_MetropolisBlueBP.dxtc-top > .dxtc-stripContainer .dxtc-activeTab, .pageOngletTreso .dxtcLite_MetropolisBlueBP.dxtc-top > .dxtc-stripContainer .dxtc-tab, .pageOngletTreso .dxtcLite_MetropolisBlueBP.dxtc-top > .dxtc-stripContainer .dxtc-leftIndent, .pageOngletTreso .dxtcLite_MetropolisBlueBP.dxtc-top > .dxtc-stripContainer .dxtc-spacer, .pageOngletTreso .dxtcLite_MetropolisBlueBP.dxtc-top > .dxtc-stripContainer .dxtc-rightIndent, .pageOngletTreso .dxtcLite_MetropolisBlueBP.dxtc-top > .dxtc-stripContainer .dxtc-sbWrapper, .pageOngletTreso .dxtcLite_MetropolisBlueBP.dxtc-top > .dxtc-stripContainer .dxtc-sbIndent, .pageOngletTreso .dxtcLite_MetropolisBlueBP.dxtc-top > .dxtc-stripContainer .dxtc-sbSpacer { border-bottom: none; } /* ----------------------------------------------------------------------------- * 2.9 Pop-ups DevExpress * -------------------------------------------------------------------------- */ .dx-overlay-wrapper { z-index: 15001 !important; font-family: ubuntu !important; } .dxpc-mainDiv { border-radius: 8px !important; } .dxpc-header { background: #fff !important; color: var(--color-primary-surface) !important; text-align: center; height: 60px; margin-bottom: 12px; border-top-left-radius: 8px; border-top-right-radius: 8px; border-bottom: 1px solid #E1E1E1; } .dxpc-headerContent { margin-right: 0 !important; line-height: 60px !important; } .dxpc-headerText { font-weight: 400 !important; font-size: 20px !important; } .dxWeb_pcCloseButton_MetropolisBlueBP { filter: grayscale(100%) brightness(0%) !important; right: 15px; } .dxpc-closeBtn img { display: none; } .dxpc-closeBtn { background-image: var(--url-img-close-btn); background-repeat: no-repeat; background-position: center; background-size: 24px 24px; width: 40px; height: 50px; cursor: pointer; position: absolute; right: 12px; } .GridViewVirementsIntEnAttente_custwindow_PW-1, #GridViewHistorique_custwindow_PW-1 { top: 50px !important; } #PopupAddFactureArticleFromArticle_PW-1 { overflow: visible; } #GridViewComptes_custwindow_PWC-1 { overflow-y: auto !important; } /* Tooltip de canal d'émission des grilles factures (fond sombre façon maquette) */ .dx-popover-wrapper.tooltip-canal-facture .dx-overlay-content { background-color: #1f1f1f; color: #ffffff; border: none; border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); } .dx-popover-wrapper.tooltip-canal-facture .dx-popover-arrow::after { background-color: #1f1f1f; border: none; box-shadow: none; } .tooltip-canal-facture .dx-tooltip-wrapper .dx-overlay-content .dx-popup-content { padding: 10px 14px; font-size: 13px; line-height: 1.5; } #PopupAddFournisseurFromFacture_PW-1 .dxpc-content { max-height: calc(100vh - 220px); overflow-y: auto; } .contenu-reinit-widgets { padding: 8px 4px 16px; line-height: 1.5; text-align: center; } .reinit-widgets-message { margin: 0 0 16px; } .reinit-widgets-loader { display: flex; justify-content: center; align-items: center; min-height: 64px; } .reinit-widgets-loader .neo-loader { transform: none; width: 40px; height: 40px; } .reinit-widgets-loader .neo-loader-svg { width: 40px; height: 40px; } /* ----------------------------------------------------------------------------- * Formulaires facture (vente, achat, import) : bandeau d'entête figé au défilement * z-index au-dessus des menus déroulants du formulaire (599/600), * sous les pop-ups (9999) et les overlays DevExtreme (15001) * -------------------------------------------------------------------------- */ .container-popupAddFactureClient > .header-preview-facture { position: sticky; top: 0; z-index: 650; background-color: #fff; border-bottom: 1px solid #e1e1e1; } /* ----------------------------------------------------------------------------- * 2.10 Autres composants DevExtreme * -------------------------------------------------------------------------- */ .dx-list-item { table-layout: auto !important; } .dx-dropdowneditor.dx-state-hover:not(.dx-custom-button-hovered) .dx-dropdowneditor-icon, .dx-dropdowneditor.dx-dropdowneditor-active .dx-dropdowneditor-icon { border-radius: 15px; } .dx-dropdownbutton-toggle { background-image: var(--dropdown-icon-path); background-size: 16px; background-repeat: no-repeat; background-position: center center; height: 32px; width: 32px; display: inline-block; background-color: transparent; margin: auto 0; } .dx-dropdownbutton-toggle .dx-icon-spindown { display: none !important; } .dx-button-content .dx-icon-spindown { background-image: var(--dropdown-icon-path); background-size: 16px; background-repeat: no-repeat; background-position: center center; } .dx-button-content .dx-icon-spindown::before { display: none !important; } .custom-default-button .dx-icon { color: white !important; } .custom-default-button .dx-dropdownbutton-toggle { background-image: var(--dropdown-icon-white-path) !important; background-size: 16px; background-repeat: no-repeat; background-position: center center; height: 32px; width: 32px; display: inline-block; background-color: transparent; margin: auto 0; position: relative; } .custom-default-button .dx-dropdownbutton-toggle::before { content: ""; position: absolute; top: 1px; bottom: 1px; left: 0; width: 1px; background-color: white; } .customColumnChooser .dx-icon { color: var(--color-primary-surface) !important; } td.dx-cell > div img { vertical-align: auto !important; } .dx-header-filter:not(.dx-header-filter-empty) { color: var(--color-primary-surface) !important; } .dx-header-filter.dx-header-filter-empty { color: unset !important; } .dxeCaptionCell_MetropolisBlueBP, *[class*="dxeBase"] label { font-family: Ubuntu !important; } #cbProfondeurEcrituresPrevisionnelles_CapC .dxeCaption_MetropolisBlueBP { margin-bottom: 0; } #cbProfondeurEcrituresPrevisionnelles_CapC { vertical-align: middle; } /* ============================================================================= * 3. MISE EN PAGE * ========================================================================== */ /* ----------------------------------------------------------------------------- * 3.1 Conteneurs principaux * -------------------------------------------------------------------------- */ .gridviewMain { /*margin-right: 0px;*/ } .contentPageUnderReactToolbar, .contentPageUnderReactToolbarWithProtect { padding: 20px; background-color: #f3f3f3; } .contentPageUnderReactToolbar .SearchAndFilterGridView .search-field { padding-left: 0; } .contentPageUnderReactToolbar .gridAndDetails { padding-left: 0; } .workBoxZone { padding: 20px; border: 1px solid #e1e1e1; background-color: white; border-radius: 8px; } /* Pages factures : la barre de filtres passe à la ligne au lieu d'élargir la page */ .workBoxZone > .SearchAndFilterGridView { flex-wrap: wrap; row-gap: 8px; } .content-grid .SearchAndFilterGridView .search-field { padding-left: 0; } .protectionContent { padding-left: 20px; padding-top: 24px; padding-bottom: 40px; } /* ----------------------------------------------------------------------------- * 3.2 Barre d'outils * -------------------------------------------------------------------------- */ .reactToolBar { border: 1px solid var(--color-primary-border); border-left: 1px solid #ccc; border-right: none; border-top: none; max-height: 50px; min-height: 32px; padding: 8px 40px; position: sticky; top: 64px; z-index: 2; /*margin-bottom: 32px;*/ background-color: #fff; z-index: 3; } .toolbar-container { display: flex; align-items: center; flex-wrap: wrap; row-gap: 8px; } .reactToolBar { max-height: none; } .left-section, .right-section { display: flex; align-items: center; } .left-section { gap: 24px; } .right-section { gap: 24px; margin-left: auto; padding-left: 24px; border-left: 1px solid #ACACAC; } .button-container { display: flex; align-items: flex-end; gap: 8px; margin-top: auto; } .small-icon { min-width: 40px; height: 40px; } /* ----------------------------------------------------------------------------- * 3.3 Grille et détails * -------------------------------------------------------------------------- */ .gridAndDetails { display: flex; padding: 20px; gap: 20px; background-color: #f3f3f3; align-items: flex-start; } .gridAndDetails svg { position: unset; } .gridAndDetails > .workBoxZone > .content-grid { display: grid; grid-template-columns: minmax(0, 1fr); } .gridsReact { margin-top: -32px; } .gridNoDetails { display: flex; padding: 20px; background-color: #f3f3f3; margin-right: auto; box-sizing: border-box; width: 100%; } .gridNoDetails .content-grid { width: 100%; box-sizing: border-box; } /* ----------------------------------------------------------------------------- * 3.4 Panneau de détails * -------------------------------------------------------------------------- */ .detailsBoxReact { background-color: #fff; font-family: 'Ubuntu'; font-weight: 400; opacity: 1; font-size: 13px; right: 1px; z-index: 1; /*border-left: 2px solid #E1E1E1;*/ border: 1px solid #e1e1e1; padding: 20px; border-radius: 8px; display: flex; flex-direction: column; box-sizing: border-box; /*padding: 0 40px;*/ flex: 0 0 540px; min-width: 0; max-width: 540px; position: sticky; top: 120px; } .gridAndDetails .detailsBoxReact { position: sticky; /*top: 140px;*/ z-index: 3; align-self: start; overflow-y: auto; max-height: 80vh; max-width: 420px; min-width: 420px; margin-right: 0 !important; right: 0; margin-left: auto; box-sizing: border-box; top: 113px; margin-top: 0; overflow-x: hidden; } .gridAndDetails .detailsBoxReact .table-detail-react { table-layout: fixed; width: 100%; } .gridAndDetails .detailsBoxReact .detail-value { overflow-wrap: anywhere; word-break: break-word; } .disable-scrollbars::-webkit-scrollbar { background: transparent; width: 0; } .disable-scrollbars { scrollbar-width: none; -ms-overflow-style: none; } .close-volet-react { position: absolute; top: 5px; right: 5px; opacity: 0.8; float: right; width: 18px; cursor: pointer; } .close-voletReact { opacity: 0.8; margin: 10px 10px 0; float: left; width: 16px; } .titleDetails { padding: 20px; height: fit-content; min-height: 130px; background: var(--color-primary-border-inverted); color: #232323; font-size: 32px; display: flex; text-align: center; align-items: center; justify-content: center; flex-direction: column; gap: 20px; box-sizing: border-box; border-radius: 4px; } .title-section-details { font-weight: 500; font-size: 20px; padding: 8px 16px; border-bottom: 1px solid #ACACAC; margin-bottom: 0; cursor: pointer; margin-top: 8px; } .title-section-details img { position: absolute; right: 25px; padding-top: 5px; } .customDetailsButtonReact .dx-button-content { display: flex; flex-direction: row-reverse; align-items: center; } .customDetailsButtonReact .dx-icon { margin-left: 8px; margin-right: 0; transition: transform 1s ease; margin-inline-start: 2px !important; width: 30px !important; padding-left: 5px; } .customDetailsButtonReact.rotated .dx-icon { transform: rotate(180deg); } .customDetailsButtonReact .dx-button-text { color: #000000 !important; } /* ============================================================================= * 4. COMPOSANTS * ========================================================================== */ /* ----------------------------------------------------------------------------- * 4.1 Recherche et filtres * -------------------------------------------------------------------------- */ /* * Cartes d'etat des factures (client, fournisseur, devis) et interrupteur Archives * ----------------------------------------------------------------------------- * Cartes en flex fluide bornees par un mini et un maxi, retour a la ligne quand * la fenetre est trop etroite ; l'interrupteur suit sur la meme ligne ou passe dessous */ .cartes-etat-facture { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; /* Espace reserve au bouton de choix des colonnes de la grille, cale en haut a droite */ padding-right: 60px; } .cartes-etat-facture > .box-filter-etat-facture { flex: 0 0 150px; width: 150px; max-width: 150px; height: 62px; box-sizing: border-box; padding: 6px 10px; margin-left: 0 !important; display: flex; flex-direction: column; justify-content: space-between; } .carte-etat-facture-entete { display: flex; align-items: center; justify-content: space-between; } /* Interrupteur Archives : element du flux, a droite de la derniere carte, en tete de ligne si ca deborde */ .cartes-etat-facture > .toggle-archives { flex: 0 0 auto; margin-left: 8px; } @media (max-width: 1100px) { .cartes-etat-facture > .box-filter-etat-facture { flex-basis: 150px; width: 150px; max-width: 150px; } } /* Pages factures : cartes d'état puis grille, en flux vertical (remplace table.table-gridview) */ .zone-grille-factures { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; min-width: 0; max-width: 100%; } /* Passe au-dessus du bandeau de la grille (remonte de 32px par .gridsReact) sans bloquer le bouton de choix des colonnes : le conteneur laisse passer les clics, ses enfants les captent */ .zone-grille-factures > .container-filtre-etat { padding-bottom: 0; position: relative; z-index: 2; pointer-events: none; } .zone-grille-factures > .container-filtre-etat .box-filter-etat-facture, .zone-grille-factures > .container-filtre-etat .toggle-archives { pointer-events: auto; } .table-gridview .container-filtre-etat { position: relative; z-index: 2; pointer-events: none; } .table-gridview .container-filtre-etat .box-filter-etat-facture, .table-gridview .container-filtre-etat .toggle-archives { pointer-events: auto; } /* Pages factures : la largeur intrinsèque de la grille DevExtreme (somme des colonnes) ne doit pas élargir la table de mise en page ; minmax(0, 1fr) ramène la contribution minimale à zéro */ .zone-grille-factures > .content-grid { display: grid; grid-template-columns: minmax(0, 1fr); } .SearchAndFilterGridView { display: flex; align-items: center; gap: 20px; /*padding-right: 40px;*/ } .SearchAndFilterGridView > .right { margin-left: auto; display: flex; align-items: center; } .SearchAndFilterGridView .search-field { top: 0 !important; padding-left: 40px; } .SearchAndFilterGridView .compteSelectBox { height: 32px !important; } .search-field { position: relative; top: 32px; z-index: 1; width: 320px; } .searchAndFilter { display: inline-flex; position: relative; top: 32px; z-index: 2; } .filtreAfterSearch { position: relative; } .filtreAfterSearch .header-label { margin-top: 16px; } .searchTbReact { border-radius: 24px !important; } .filterAfterSearch { position: relative; left: 390px; display: inline-flex; gap: 12px; z-index: 1; } .filterWihtoutSearch { position: relative; display: inline-flex; gap: 12px; z-index: 1; align-items: end; margin-bottom: 24px; } .filterWihtoutSearchDatagrid { position: relative; display: inline-flex; gap: 24px; z-index: 1; padding-top: 32px; } /* ----------------------------------------------------------------------------- * 4.2 Boutons de filtre (pills) * -------------------------------------------------------------------------- */ .filterPillButton .dx-button-content .dx-icon-spindown { display: none; } .filterPillButton .dx-button { padding-right: 12px; border-radius: 24px !important; border: 1px solid #ACACAC !important; color: #232323 !important; z-index: 3; box-sizing: border-box; height: 32px; } .filterPillButton .dx-button:hover { border: 1px solid var(--color-primary-surface) !important; box-shadow: 0 0 0 1px var(--color-primary-surface); color: var(--color-primary-surface) !important; } .filterPillButton .dx-button .dx-icon { color: #454545 !important; } .filterPillButton .dx-button:hover .dx-icon { color: var(--color-primary-surface) !important; } .pill-with-clear { position: relative; display: inline-block; z-index: 1; } .pill-with-clear.has-selection .filterPillButton .dx-button { border: 1px solid var(--color-primary-surface) !important; box-shadow: 0 0 0 1px var(--color-primary-surface); color: var(--color-primary-surface) !important; } .pill-with-clear.has-selection .filterPillButton .dx-button .dx-icon { color: var(--color-primary-surface) !important; } .pill-with-clear.has-selection .filterPillButton .dx-button-content { padding-right: 24px !important; } .pill-with-clear.no-clear .filterPillButton .dx-button-content { padding-right: 0 !important; } .filterPillButton .dx-buttongroup.dx-state-focused .dx-button, .filterPillButton:focus-within .dx-button { border: 1px solid var(--color-primary-surface) !important; box-shadow: 0 0 0 1px var(--color-primary-surface); color: var(--color-primary-surface) !important; } .filterPillButton .dx-buttongroup.dx-state-focused .dx-button .dx-icon, .filterPillButton:focus-within .dx-button .dx-icon { color: var(--color-primary-surface) !important; } .pill-clear { position: absolute; top: 52%; right: 8px; transform: translateY(-50%); border: 0; background: transparent; cursor: pointer; font-size: 24px; color: var(--color-primary-surface); z-index: 4; } .pill-clear:hover { opacity: 1; } #btnEcritures .dx-button-content .dx-icon:not(.dx-icon-filter) { display: none !important; } #btnEcritures .dx-button-content .dx-icon:is(.dx-icon-filter) { font-size: 14px; } #btnDates .dx-button-content .dx-icon:not(.dx-icon-event) { display: none !important; } #btnMontants .dx-button-content .dx-icon:not(.dx-icon-money) { display: none !important; } /* Menu déroulant des filtres */ .dd-menu { padding: 12px 14px; min-width: 280px; } .dd-menu .dx-texteditor.dx-editor-outlined { border-radius: 30px !important; } .dd-title { font-weight: 500; margin-bottom: 8px; margin-top: 10px; font-size: 19px; } .dd-section { margin-top: 10px; } .dd-label { font-weight: 600; margin-bottom: 6px; } .dd-filter-prev { margin-top: -8px; } .dd-filter-prev .header-label { margin-top: 0; } .filterBarHeader { position: absolute; top: -32px; } .pastille-filtre { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; border: 1px solid var(--color-primary-surface); border-radius: 20px; background: #ffffff; color: var(--color-primary-surface); font-family: Ubuntu; font-size: 13px; cursor: pointer; vertical-align: middle; } .pastille-filtre .pastille-filtre-coche { width: 14px; height: 14px; border: 1px solid var(--color-primary-surface); border-radius: 3px; box-sizing: border-box; } .pastille-filtre.actif { background: var(--color-primary-surface); color: #ffffff; font-weight: 500; } .pastille-filtre.actif .pastille-filtre-coche { border-color: #ffffff; background: #ffffff url("data:image/svg+xml;utf8,") center / 10px no-repeat; } /* ----------------------------------------------------------------------------- * 4.3 Sélecteurs de compte * -------------------------------------------------------------------------- */ .selectSocetComptes, .dropdownSelectGroupe { display: flex; gap: 16px; align-items: center; width: auto; } .dropdownSelectGroupe { justify-content: space-between; } .selectbox-with-icon .dx-texteditor-input { padding-left: 28px; } .selectbox-with-icon .data-dx_placeholder { padding-left: 28px; } .tbddSelectCompte { border: none !important; max-width: 250px; } .sbCstmSelectCompte { border: 1px solid !important; border-color: #808080 !important; } .dotted-box { border: 2px dashed #BEBEBE; padding: 20px; border-radius: 4px; margin-top: 4px; display: flex; align-items: center; justify-content: space-between; } /* ============================================================================= * Sélecteur Société / Compte combiné (DropDownBox + DataGrid) * ========================================================================== */ /* ============================================================================= * Société/Compte Dropdown — calqué sur .compteSelectBox (affichage 2 lignes) * ========================================================================== */ .socCompteDropdown { min-width: 280px; } .socCompteDropdown .dx-dropdowneditor-icon { height: 32px; } /* ── Champ fermé : logo + 2 lignes ── */ .socCompteField { display: flex; align-items: center; gap: 10px; padding: 4px 0 4px 4px; height: 100%; } .socCompteField-logo { width: 36px; height: 36px; border-radius: 50%; object-fit: contain; flex-shrink: 0; } .socCompteField-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; } /* TextBox = ligne 1 (société) + champ de recherche à l'ouverture */ .socCompteField-input { border: none !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; min-height: unset !important; height: auto !important; } .socCompteField-input .dx-texteditor-input { font-family: Ubuntu, sans-serif; font-size: 14px; font-weight: 500; color: #232323; padding: 0 !important; height: auto !important; min-height: unset !important; line-height: 1.2; } .socCompteField-input .dx-texteditor-input-container { height: auto !important; } .socCompteField-input.dx-state-focused { border: none !important; box-shadow: none !important; } /* span = ligne 2 (compte) */ .socCompteField-banque { font-family: Ubuntu, sans-serif; font-size: 11px; font-weight: 400; color: #8a8a8a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .socCompteSelectBox { height: 48px !important; } .socCompteSelectBox .dx-texteditor-input-container { height: 48px; } .socCompteSelectBox .dx-placeholder::before { padding: unset !important; } @media screen and (max-width: 1366px) { .socCompteDropdown { min-width: 220px; } .socCompteField-logo { width: 28px; height: 28px; } .socCompteField-input .dx-texteditor-input { font-size: 13px; } .socCompteField-banque { font-size: 10px; } .socCompteSelectBox { height: 42px !important; } } /* Grille du dropdown */ .socCompteGrid .dx-datagrid-headers { /* surcharge la règle sticky globale qui décale les headers de 113px */ position: static !important; top: auto !important; background-color: #f5f5f5; } .socCompteGrid .dx-row > td { cursor: pointer; } /* Lignes agrégat « TOUT COMPTE » */ .socCompteGrid .socCompteRow--aggregate > td { background-color: #f5f5f5 !important; color: #000 !important; font-weight: 500; } .socCompteCell-soc { display: inline-flex; align-items: center; gap: 8px; min-width: 0; } .socCompteCell-logo { width: 16px; height: 16px; border-radius: 50%; object-fit: contain; flex-shrink: 0; } .socCompteCell-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .compteField--open .compteField-banque { display: none; } /* ----------------------------------------------------------------------------- * 4.4 Menus déroulants * -------------------------------------------------------------------------- */ .dropdown-container { position: relative; display: flex; align-items: center; height: 32px; } .dropdown-container input[type="text"] { border: none; } .dropdown-account-button { padding: 4px; border-radius: 4px; border: 1px solid #808080; background: #fff; display: flex; align-items: center; justify-content: space-between; cursor: pointer; height: 22px; } .dropdown-menu { position: absolute; top: 100%; left: 0; width: 100%; max-height: 200px; overflow-y: auto; background: #fff; border: 1px solid #ccc; border-radius: 4px; z-index: 1000; } .dropdown-item { padding: 8px; display: flex; align-items: center; cursor: pointer; border-bottom: 1px solid #eaeaea; transition: background-color 0.2s ease; } .dropdown-item:hover { background-color: #f0f0f0; } .dropdown-image { width: 20px; height: 20px; margin-left: 8px; } .arrow-image { width: 16px; height: 16px; position: absolute; right: 10px; } .inputddCompte { border: none !important; outline: none !important; width: 100% !important; background: transparent !important; color: #232323 !important; font-family: Ubuntu !important; font-size: 13px !important; font-weight: 400 !important; line-height: 150%; } .inputddCompte .dx-texteditor-input { color: #232323 !important; font-family: Ubuntu !important; font-weight: 400 !important; } /* ----------------------------------------------------------------------------- * 4.5 Info-bulles * -------------------------------------------------------------------------- */ .tooltip-wrapper { display: inline-block; position: relative; } .tooltip-box { visibility: hidden; opacity: 0; background: #333; color: #fff; border-radius: 4px; padding: 6px 12px; position: absolute; z-index: 10; font-size: 14px; transition: opacity 0.2s; white-space: pre-line; pointer-events: none; width: max-content; } .tooltip-wrapper:hover .tooltip-box, .tooltip-wrapper:focus-within .tooltip-box { visibility: visible; opacity: 1; } .tooltip-top { bottom: 100%; left: 50%; transform: translateX(-50%) translateY(-8px); } .tooltip-right { left: 100%; top: 50%; transform: translateY(-50%) translateX(8px); } .tooltip-bottom { top: 100%; left: 50%; transform: translateX(-50%) translateY(8px); } .tooltip-left { right: 100%; top: 50%; transform: translateY(-50%) translateX(-8px); } /* ----------------------------------------------------------------------------- * 4.6 Chargeur (loader) * -------------------------------------------------------------------------- */ .neo-loader { display: inline-block; position: relative; margin: 0 auto; overflow: hidden; } .loader-mid { left: 40%; } .neo-loader-s { width: var(--size-dim-150); height: var(--size-dim-150); } .neo-loader-m { width: var(--size-dim-200); height: var(--size-dim-200); } .neo-loader-l { width: var(--size-dim-300); height: var(--size-dim-300); } .neo-loader-xl { width: var(--size-dim-1000); height: var(--size-dim-1000); } .neo-loader-svg { display: block; width: 100%; height: 100%; animation: spin-anim 2s linear infinite; } .neo-loader-svg circle { fill: transparent; stroke: var(--neo-loader-stroke-color); stroke-linecap: round; stroke-dasharray: 283; stroke-dashoffset: 190; stroke-width: var(--size-dim-100); transform-origin: 50%; animation: circle-anim 1.4s ease-in infinite; transition: stroke 0.6s ease-in; } .neo-loader-m .neo-loader-svg circle { stroke-width: 10px; } .neo-loader-xl .neo-loader-svg circle { stroke-width: 5px; } .neo-loader-logo { display: none; position: absolute; height: var(--size-dim-400); width: var(--size-dim-400); left: 50%; top: 50%; transform: translate(-50%, -50%); background-repeat: no-repeat; background-size: 100%; background-image: var(--url-brand-small-logo-path); } .neo-loader-xl .neo-loader-logo, .neo-loader-l .neo-loader-logo { display: block; } #neo-loader-container { margin-bottom: 24px; } /* ----------------------------------------------------------------------------- * 4.7 Compteurs Factures * -------------------------------------------------------------------------- */ .progressCounter { display: flex; flex-direction: column; gap: 4px; min-width: 160px; max-width: 220px; padding: 0 8px; } .progressCounter-header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; line-height: 1.2; } .progressCounter-label { color: var(--header-text-color, #333); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .progressCounter-count { font-weight: 600; color: var(--header-text-color, #333); white-space: nowrap; font-variant-numeric: tabular-nums; } .progressCounter-separator { opacity: 0.5; margin: 0 1px; } .progressCounter-track { position: relative; width: 100%; height: 8px; background-color: #E1E1E1; border-radius: 3px; overflow: hidden; } .progressCounter-fill { height: 100%; background-color: var(--color-primary-surface); border-radius: 3px; transition: width 300ms ease-out; } /* Variantes (optionnelles) */ .progressCounter--success .progressCounter-fill { background-color: var(--color-success, #16a34a); } .progressCounter--warning .progressCounter-fill { background-color: var(--color-warning, #f59e0b); } .progressCounter--danger .progressCounter-fill { background-color: var(--color-danger, #dc2626); } /* État loading */ .progressCounter--loading .progressCounter-loader { display: flex; align-items: center; justify-content: center; height: 20px; } .headerSelector--reactProgressCounter { padding-right: 15px; } .limitBanner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px 24px; border: 1px solid #e1e1e1; border-radius: 8px; background-color: var(--limit-bg, #ffffff); margin: 16px 0; margin-top: 0px; } .limitBanner-content { display: flex; align-items: center; gap: 16px; flex: 1; min-width: 0; } .limitBanner-iconWrapper { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background-color: var(--color-primary-surface-discrete-selected) !important; flex-shrink: 0; } .limitBanner-icon { width: 20px; height: 20px; } .limitBanner-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .limitBanner-title { font-weight: 600; font-size: 14px; color: var(--limit-title-color, #1a1a1a); } .limitBanner-message { font-size: 13px; color: var(--limit-message-color, #666); } .limitBanner-cta { font-family: 'Ubuntu'; display: inline-flex; align-items: center; justify-content: center; padding: 10px 20px; background-color: var(--color-primary-surface); color: var(--limit-cta-color, #ffffff); border: none; border-radius: 6px; font-size: 14px; font-weight: 500; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color 150ms ease; } .limitBanner-cta:hover { background-color: var(--color-primary-border-unchanged-hover); } /* Variantes de couleur d'icône / fond */ .limitBanner--warning .limitBanner-iconWrapper { background-color: var(--color-warning-bg, #e6ecf7); } .limitBanner--danger { border-color: var(--color-danger, #dc2626); } .limitBanner--danger .limitBanner-iconWrapper { background-color: var(--color-danger-bg, #fee2e2); } .limitBanner--info { border-color: var(--color-info, #3b82f6); } .limitBanner--info .limitBanner-iconWrapper { background-color: var(--color-info-bg, #dbeafe); } /* Responsive : empiler sur petit écran */ @media (max-width: 768px) { .limitBanner { flex-direction: column; align-items: flex-start; } .limitBanner-cta { width: 100%; } } /* Overlay */ .upgradePopup-overlay { position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.4); display: flex; align-items: center; justify-content: center; z-index: 9999; padding: 20px; animation: upgradePopup-fadeIn 150ms ease-out; } /* Dialog */ .upgradePopup-dialog { background-color: #ffffff; border-radius: 12px; width: 100%; max-width: 640px; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2); animation: upgradePopup-slideUp 200ms ease-out; } /* Hero image */ .upgradePopup-hero { background-image: var(--url-bg-arianne); -webkit-background-size: cover; padding: 32px 24px 24px; display: flex; align-items: center; justify-content: center; border-radius: 12px 12px 0 0; } .upgradePopup-heroImage { max-width: 100%; max-height: 200px; object-fit: contain; } /* Body */ .upgradePopup-body { padding: 24px 32px; } .upgradePopup-title { font-size: 20px; font-weight: 700; color: var(--upgrade-title-color, #1a1a1a); margin: 0 0 4px; line-height: 1.3; } .upgradePopup-subtitle { font-size: 15px; color: var(--upgrade-subtitle-color, #333); margin-bottom: 16px; } .upgradePopup-description { font-size: 13px; color: var(--upgrade-desc-color, #666); line-height: 1.5; margin: 0 0 20px; } /* Features */ .upgradePopup-features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; } .upgradePopup-feature { display: flex; align-items: flex-start; gap: 16px; } .upgradePopup-featureIcon { width: 32px; height: 32px; flex-shrink: 0; margin-top: 2px; } .upgradePopup-featureText { flex: 1; min-width: 0; } .upgradePopup-featureTitle { font-weight: 600; font-size: 14px; color: var(--upgrade-feature-title, #1a1a1a); margin-bottom: 2px; } .upgradePopup-featureDesc { font-size: 13px; color: var(--upgrade-feature-desc, #666); line-height: 1.4; } /* Footer / boutons */ .upgradePopup-footer { padding: 20px 32px 24px; border-top: 1px solid var(--upgrade-divider, #e5e7eb); display: flex; flex-direction: column; gap: 10px; } .upgradePopup-btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 20px; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; border: 1px solid transparent; transition: background-color 150ms ease, border-color 150ms ease; width: 100%; } .upgradePopup-btn--primary { background-color: var(--color-primary-surface); color: var(--upgrade-btn-primary-color, #ffffff); border-color: var(--color-primary-surface); } .upgradePopup-btn--primary:hover { background-color: var(--color-primary-border-unchanged-hover); border-color: var(--color-primary-surface); } .upgradePopup-btn--secondary { background-color: transparent; color: var(--upgrade-btn-secondary-color, #1a1a1a); border-color: var(--color-primary-surface); } .upgradePopup-btn--secondary:hover { background-color: var(--color-primary-border-unchanged-hover); color: #fff; } /* Animations */ @keyframes upgradePopup-fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes upgradePopup-slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* ----------------------------------------------------------------------------- * 4.7 Zone Compteurs Factures : interrupteur « Inclure les archives » * -------------------------------------------------------------------------- */ .toggle-archives { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; white-space: nowrap; } /* Checkbox native masquée, elle porte l'état et l'accessibilité clavier */ .toggle-archives input { position: absolute; opacity: 0; width: 0; height: 0; } .toggle-archives-piste { position: relative; width: 52px; height: 28px; border-radius: 14px; background-color: #ACACAC; transition: background-color 200ms ease-in-out; flex: 0 0 auto; } .toggle-archives-bouton { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background-color: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); display: flex; align-items: center; justify-content: center; transition: transform 200ms ease-in-out; } .toggle-archives-bouton img { width: 14px; height: 14px; opacity: 0.55; transition: opacity 200ms ease-in-out; } .toggle-archives input:checked + .toggle-archives-piste { background-color: var(--color-primary-surface); } .toggle-archives input:checked + .toggle-archives-piste .toggle-archives-bouton { transform: translateX(24px); } .toggle-archives input:checked + .toggle-archives-piste .toggle-archives-bouton img { opacity: 1; } .toggle-archives input:focus-visible + .toggle-archives-piste { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--color-primary-surface); } .toggle-archives-libelle { font-size: 14px; color: #232323; } .toggle-archives-libelle b { font-weight: 700; color: #6f6f6f; } .toggle-archives input:checked ~ .toggle-archives-libelle b { color: var(--color-primary-surface); } /* ----------------------------------------------------------------------------- * 4.8 Paramétrage Facture - Compte de paiement par défaut (préfixe cfd-) * -------------------------------------------------------------------------- */ .cfd-container { width: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 16px; font-family: 'Ubuntu'; font-size: 13px; color: #232323; } .cfd-entete { display: flex; flex-direction: column; gap: 10px; } .cfd-fil-ariane { font-size: 16px; } .cfd-fil-ariane b { font-weight: 500; } .cfd-layout { display: flex; flex-wrap: nowrap; gap: 16px; align-items: stretch; width: 100%; min-height: 400px; } .cfd-panel { background-color: #fff; border: 1px solid #e1e1e1; border-radius: 4px; display: flex; flex-direction: column; min-width: 400px; max-width: 800px; max-height: 450px; overflow: hidden; } /* En-têtes et pied : taille fixe */ .cfd-societes-entete, .cfd-comptes-entete, .cfd-comptes-pied { flex: 0 0 auto; } /* Zones qui défilent */ .cfd-societes-liste, .cfd-comptes-corps { flex: 1 1 auto; min-height: 0; overflow-y: auto; } .cfd-comptes-pied { margin-top: auto; padding: 12px 16px; border-top: 1px solid #e1e1e1; display: flex; justify-content: flex-end; gap: 10px; background-color: #fff; } .cfd-panel--societes { flex: 0 0 360px; } .cfd-panel--comptes { flex: 1 1 auto; } /* --- Liste des sociétés --- */ .cfd-societes-entete { padding: 10px; border-bottom: 1px solid #e1e1e1; display: flex; flex-direction: column; gap: 8px; } .cfd-compteurs { display: flex; justify-content: space-between; color: #666; font-size: 12px; } .cfd-compteur-alerte { color: var(--color-warning, #8a4300); } .cfd-societes-liste { max-height: 520px; overflow-y: auto; } .cfd-societe { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 52px; padding: 8px 12px; border: 0; border-bottom: 1px solid #eee; background-color: #fff; font-family: inherit; color: inherit; text-align: left; cursor: pointer; } .cfd-societe:hover { background-color: var(--color-primary-surface-discrete-hover, #f3f3f3); } .cfd-societe--selected, .cfd-societe--selected:hover { background-color: var(--color-primary-surface-discrete-selected, #e8edf8); } .cfd-societe-textes { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .cfd-societe-nom { font-weight: 500; font-size: 12px; text-transform: uppercase; } .cfd-societe-sous-titre { color: #666; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* --- Badges --- */ .cfd-badge { flex: 0 0 auto; font-size: 10px; padding: 2px 8px; border-radius: 10px; white-space: nowrap; } .cfd-badge--todo { background-color: var(--color-warning-bg, #fdeedd); color: var(--color-warning, #8a4300); } .cfd-badge--defaut { background-color: var(--color-success, #179e8e); color: #fff; padding: 3px 10px; } /* --- Panneau des comptes --- */ .cfd-comptes-entete { padding: 12px 16px; background-color: #f3f3f3; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; } .cfd-comptes-titre { font-size: 14px; font-weight: 500; text-transform: uppercase; } .cfd-comptes-siren { color: #666; } .cfd-comptes-corps { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; } .cfd-comptes-label { color: #555; } .cfd-compte { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid #ddd; border-radius: 4px; background-color: #fff; cursor: pointer; } .cfd-compte--checked { border-color: var(--color-primary-brand, #1f3c8f); background-color: var(--color-primary-surface-discrete-selected, #f3f6fc); } .cfd-compte-input { width: 16px; height: 16px; margin: 0; accent-color: var(--color-primary-brand, #1f3c8f); } .cfd-compte-textes { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; } .cfd-compte-nom { font-weight: 500; } .cfd-compte-banque { color: #666; } .cfd-compte-iban { font-family: monospace; color: #444; white-space: nowrap; } .cfd-comptes-pied { margin-top: auto; padding: 12px 16px; border-top: 1px solid #e1e1e1; display: flex; justify-content: flex-end; gap: 10px; } .cfd-vide { padding: 20px; text-align: center; color: #666; } .cfd-vide--cadre { border: 1px dashed #ccc; border-radius: 4px; } /* ============================================================================= * 5. FORMULAIRES * ========================================================================== */ /* ----------------------------------------------------------------------------- * 5.1 Labels et champs * -------------------------------------------------------------------------- */ .labelReact { display: block; font-weight: 400; color: #232323; font-size: 11px; margin-bottom: 0; } .popup-label { display: block; font-weight: 400; color: #666666; font-size: 11px; margin-bottom: 1px; } .header-label { display: block; font-weight: 400; color: #666666; font-size: 11px; /* margin-top: 16px;*/ margin-bottom: 2px !important; } .labelRadio { padding-top: 5px; } .formEcritureReact { font-family: 'Ubuntu'; font-weight: 400; } .inputBP { height: 30px; } .dbCustom input[type="text"] { border: none; } /* ----------------------------------------------------------------------------- * 5.2 Cases à cocher et radios * -------------------------------------------------------------------------- */ .neo-checkbox-label, .neo-radio-label { margin-bottom: 0; } .checkbox-Container { padding-top: 15px; } /* ----------------------------------------------------------------------------- * 5.3 Pop-ups et modales * -------------------------------------------------------------------------- */ .popup-modalOverlay { z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; position: fixed; } .popup-modalContent { background-color: #fff; padding: 24px; border: 1px solid #ddd; z-index: 1001; right: 0; width: 782px; position: fixed; height: 100%; box-shadow: rgba(0, 0, 0, 0.45) -10px 1px 12px -14px; } .popup-dottedBox { border: 3px dotted #ccc; padding: 10px; border-radius: 4px; margin-top: 10px; } .popup-dottedBoxContent { display: flex; align-items: center; justify-content: space-between; } .popup-bankName { margin: 0; font-weight: bold; } .popup-addButton { color: #6a1b9a; text-decoration: none; font-size: 20px; font-weight: bold; } .popup-solidBox { border: 1px solid #ccc; padding: 16px; border-radius: 4px; margin-top: 20px; } .popup-solidBox .dx-texteditor { border: 1px solid #ACACAC !important; } .popup-row { display: flex; margin-bottom: 16px; align-items: center; gap: 16px; } .popup-close { color: #333; position: absolute; top: 18px; right: 18px; font-size: 35px; font-weight: 200; cursor: pointer; } .popup-header { font-family: Ubuntu; padding: 10px 15px; border-top-left-radius: 8px; border-top-right-radius: 8px; font-size: 16px; font-weight: 400; text-align: center; } .popup-formGroup { margin-bottom: 0; } .popup-checkboxGroup { display: flex; align-items: center; } .popup-input { width: 100%; padding: 8px; border-radius: 4px; border: 1px solid #ccc; box-sizing: border-box; font-size: 14px; } .popup-radioGroup { display: flex; align-items: center; gap: 15px; padding-top: 15px; } .popup-footer { display: flex; gap: 10px; padding: 24px; font-size: 11px; color: #666; align-items: center; justify-content: center; margin-top: auto; } .popup-footer .dx-button { flex: 1; } .popup-button { padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; } .popup-primaryButton { background-color: #6a1b9a; color: white; } .popup-secondaryButton { background-color: #e0e0e0; color: #333; } .popup-options { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; } .popup-flex { display: flex; justify-content: space-between; align-items: center; } .popup-smallText { font-size: 12px; color: #777; } .popup-icon { padding-left: 16px; } .popup-icon-image { width: 24px; } .popup-item { color: black; border: 1px solid #eee; padding: 16px; margin-bottom: 15px; border-radius: 4px; cursor: pointer; display: flex; align-items: center; font-size: 16px; box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1); height: 80px; box-sizing: border-box; } .popup-item:hover { background: #f0f0f0; } .popup-content { padding: 24px; } .row-options { height: 43px; gap: 12px; } .label-opt { margin-top: 2px; } .popup-titre-opt { font-size: 16px; } .zone-options-ecr { margin-top: 24px; } /* ----------------------------------------------------------------------------- * 5.4 Pop-ups React (refonte Neo) — préfixe popup-neo-* * Source : maquette Figma « Modifier un bénéficiaire » (Neo 3). * Tokens : bordures #E1E1E1 / #808080 (inputs), fonds #F9F9F9 / #EFEFEF, * textes #232323 / #666666, icônes #454545, succès #398538. * Couleurs de marque via les variables charte (fallback = maquette). * -------------------------------------------------------------------------- */ /* Conteneur DevExtreme Popup : wrapperAttr={{ class: "popup-neo-wrapper" }} */ .popup-neo-wrapper .dx-overlay-content { border-radius: 8px !important; overflow: hidden; } .popup-neo-wrapper .dx-popup-content { padding: 0; overflow: hidden; } /* Racine du contenu */ .popup-neo { display: flex; flex-direction: column; max-height: 92vh; color: #232323; background: #FFFFFF; } /* --- En-tête -------------------------------------------------------------- */ .popup-neo-header { display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 12px 0 16px; border-bottom: 1px solid #E1E1E1; flex-shrink: 0; } .popup-neo-section-resume { display: inline-flex; gap: 4px; align-items: baseline; } /* Zone contenant un champ invalide : bordure et entête en couleur d'erreur (en plus du champ lui-même) */ .popup-neo-section--erreur { border-color: var(--color-danger, #E6434B); } .popup-neo-section--erreur .popup-neo-section-header { border-bottom-color: var(--color-danger, #E6434B); } .popup-neo-section--erreur .popup-neo-section-title { color: var(--color-danger, #E6434B); } /* Lien « Retour » (ou simple espace réservé pour centrer le titre) */ .popup-neo-back { display: inline-flex; align-items: center; gap: 4px; min-width: 40px; font-size: 13px; line-height: 20px; color: var(--color-primary-surface, #051B71); cursor: pointer; } .popup-neo-title { flex: 1; text-align: center; line-height: 24px; font-weight: 400 !important; font-size: 20px !important; color: var(--color-primary-surface); } .popup-neo-close { width: 40px; height: 40px; flex-shrink: 0; cursor: pointer; background: var(--url-img-close-btn) center / 24px 24px no-repeat; } /* --- Corps : colonne principale (scrollable) + colonne latérale ------------ */ .popup-neo-body { display: flex; gap: 24px; padding: 24px 32px; flex: 1 1 auto; min-height: 0; overflow: hidden; background-color: #F3F3F3; } .popup-neo-main { display: flex; flex-direction: column; gap: 24px; flex: 1 1 0; min-width: 0; overflow-y: auto; padding-right: 4px; } .popup-neo-aside { display: flex; flex-direction: column; gap: 24px; flex: 0 0 300px; overflow-y: auto; } /* --- Zone (carte) : entête gris + contenu ; rétractable via --closed -------- */ .popup-neo-section { display: flex; flex-direction: column; background: #FFFFFF; border: 1px solid #E1E1E1; border-radius: 8px; box-sizing: border-box; } .popup-neo-section-header { display: flex; align-items: center; gap: 10px; height: 40px; padding: 8px 12px; box-sizing: border-box; background: #F9F9F9; border-bottom: 1px solid #E1E1E1; border-radius: 8px 8px 0 0; } .popup-neo-section-header--toggle { cursor: pointer; user-select: none; } .popup-neo-section-title { flex: 1; font-weight: 700; font-size: 13px; line-height: 20px; letter-spacing: -0.03px; color: var(--color-primary-surface); } .popup-neo-section-chevron { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; font-size: 16px; color: #454545; transition: transform 200ms ease; } .popup-neo-section-content { display: flex; flex-direction: column; gap: 8px; padding: 24px 8px; } .popup-neo-section--closed .popup-neo-section-content { display: none; } .popup-neo-section--closed .popup-neo-section-header { border-bottom: 0; border-radius: 8px; } .popup-neo-section--closed .popup-neo-section-chevron { transform: rotate(180deg); display: inline-flex !important; } .popup-neo-section-chevron.dx-icon-chevronup { display: inline-flex !important; } .popup-neo-section--recap { border: 2px solid var(--color-primary-surface); } .popup-neo-section--recap .popup-neo-section-header { background: var(--color-primary-surface); border-radius: unset; } .popup-neo-section--recap .popup-neo-section-title { color: #fff; } /* --- Formulaire : rangées, champs, labels, aides --------------------------- */ .popup-neo-row { display: flex; align-items: flex-start; gap: 12px; } .popup-neo-static { display: inline-flex; gap: 8px; align-items: baseline; } .popup-neo-field { display: flex; flex-direction: column; gap: 2px; flex: 1 1 0; min-width: 0; } .popup-neo-field--xs { flex: 0 0 80px; } .popup-neo-field--s { flex: 0 0 120px; } .popup-neo-field--m { flex: 0 0 180px; } /* Champ sans label (checkbox, bouton) aligné sur les champs voisins */ .popup-neo-field--sans-label { padding-top: 19px; } .popup-neo-label { display: flex; align-items: center; gap: 4px; min-height: 17px; font-weight: 400; font-size: 11px; line-height: 16px; letter-spacing: 0.05px; color: #666666; margin-bottom: unset; } /* Message d'aide sous un champ (helper Neo) */ .popup-neo-helper { display: flex; align-items: flex-start; gap: 4px; margin: 0; font-size: 13px; line-height: 20px; color: #666666; } .popup-neo-helper .dx-icon { font-size: 16px; padding-top: 2px; } .popup-neo-helper--success .dx-icon { color: #398538; } .popup-neo-helper--error { color: var(--color-danger, #E6434B); } /* --- Panneau d'informations (colonne latérale) ----------------------------- */ .popup-neo-info-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; line-height: 20px; } .popup-neo-info-label { color: #666666; } .popup-neo-info-value { display: inline-flex; align-items: center; gap: 6px; text-align: right; font-weight: 500; color: #232323; } /* --- Contrôle segmenté (Particulier / Entreprise) -------------------------- */ .popup-neo-segmented { display: inline-flex; align-items: center; height: 32px; padding: 2px; box-sizing: border-box; background: #EFEFEF; border: 1px solid #EFEFEF; border-radius: 32px; } .popup-neo-segment { display: inline-flex; align-items: center; justify-content: center; height: 28px; padding: 4px 16px; box-sizing: border-box; background: #EFEFEF; border: 2px solid #EFEFEF; border-radius: 28px; font-family: inherit; font-weight: 400; font-size: 13px; line-height: 20px; letter-spacing: -0.03px; color: #232323; cursor: pointer; } .popup-neo-segment--active { background: #FFFFFF; border-color: #FFFFFF; font-weight: 500; color: #000000; } /* --- Pied : légende à gauche, boutons centrés ------------------------------ */ .popup-neo-footer { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 16px 24px; border-top: 1px solid #E1E1E1; flex-shrink: 0; } .popup-neo-footer-note { margin-right: auto; font-size: 11px; line-height: 16px; color: #666666; } .popup-neo-footer .dx-button { min-width: 180px; height: 32px; } .popup-neo-error { font-size: 13px; line-height: 18px; white-space: pre-line; color: var(--color-danger, #E6434B); } /* --- Surcharges DevExtreme scopées à la popup ------------------------------ */ .popup-neo .dx-texteditor { border: 1px solid #808080 !important; border-radius: 4px !important; background: #FFFFFF; } .popup-neo .dx-texteditor.dx-state-focused { border-color: var(--color-primary-surface, #051B71) !important; } .popup-neo .dx-texteditor.dx-invalid { border-color: var(--color-danger, #E6434B) !important; } .popup-neo .dx-textbox, .popup-neo .dx-numberbox, .popup-neo .dx-selectbox, .popup-neo .dx-datebox { height: 32px; } .popup-neo .dx-texteditor-input { min-height: 30px; padding: 5px 8px; font-size: 13px; line-height: 20px; color: #232323; } .popup-neo .dx-placeholder { color: #666666; } .popup-neo .dx-checkbox-icon { width: 16px; height: 16px; box-sizing: border-box; border: 2px solid var(--color-primary-surface, #051B71); border-radius: 4px; } .popup-neo .dx-checkbox-checked .dx-checkbox-icon { background: var(--color-primary-surface, #051B71); color: #FFFFFF; } .popup-neo .dx-checkbox-text { font-size: 14px; line-height: 21px; color: #232323; } .popup-neo .dx-checkbox-has-text .dx-checkbox-text { padding-left: 24px; } .dx-overlay-shader { background: linear-gradient(0deg,#0003 0% 100%),#ffffff4d !important; } .popup-neo--v2{ height: 100%; } .popup-neo--v2 .popup-neo-body { background-color: #FFFFFF; } .popup-neo--v2 .popup-neo-main { padding-right: 8px; scrollbar-width: thin; scrollbar-color: #ACACAC transparent; } .popup-neo--v2 .popup-neo-aside { flex: 0 0 330px; gap: 16px; } .popup-neo--v2 .popup-neo-section { flex: none; min-width: 0; border-color: var(--color-primary-surface-discrete-selected, #B9C3EA); } .popup-neo--v2 .popup-neo-section-header { height: 32px; background: var(--color-primary-border-inverted, #E8EAF5); border-bottom-color: var(--color-primary-surface-discrete-selected, #B9C3EA); } .popup-neo--v2 .popup-neo-section-title { font-size: 16px; font-weight: 500; line-height: 22px; color: #000000; } .popup-neo--v2 .popup-neo-header { cursor: move; user-select: none; touch-action: none; } .popup-neo--v2 .popup-neo-header .popup-neo-close, .popup-neo--v2 .popup-neo-header .popup-neo-back[role="button"] { cursor: pointer; } .popup-neo--v2 .dx-texteditor .dx-placeholder::before, .popup-neo--v2 .dx-texteditor.dx-editor-outlined .dx-placeholder::before { padding: 3px 8px; font-size: 13px; line-height: 20px; } .popup-neo--v2 .popup-neo-section-resume { align-items: center; gap: 6px; max-width: 60%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; color: #232323; } .popup-neo--v2 .popup-neo-section-resume .dx-icon { font-size: 14px; color: var(--color-primary-surface); } .popup-neo--v2 .popup-neo-lien-aide { color: var(--color-primary-surface); text-decoration: underline; cursor: pointer; } .popup-neo--v2 .popup-neo-lien-aide:hover { text-decoration: none; } .popup-neo--v2 .dx-tagbox.dx-tagbox-single-line .dx-dropdowneditor-input-wrapper, .popup-neo--v2 .dx-tagbox.dx-tagbox-single-line .dx-texteditor-container { height: 100%; } .popup-neo--v2 .dx-tagbox.dx-tagbox-single-line .dx-tag-container { display: flex; flex-wrap: nowrap; align-items: center; height: 100%; min-height: 0; padding: 0 0 0 3px; overflow: hidden; } .popup-neo--v2 .dx-tagbox.dx-tagbox-single-line .dx-tag-container .dx-tag { flex: none; align-self: center; margin: 0; } .popup-neo--v2 .dx-tagbox.dx-tagbox-single-line .dx-tag-container .dx-tag-content { margin: 0 3px 0 0; padding: 1px 18px 1px 6px; font-size: 12px; line-height: 18px; } .popup-neo--v2 .dx-tagbox.dx-tagbox-single-line .dx-tag-container .dx-tag-remove-button { width: 18px; } /* Zone de saisie à droite des tags : ne doit pas imposer sa hauteur ni ses marges verticales */ .popup-neo--v2 .dx-tagbox.dx-tagbox-single-line .dx-tag-container .dx-texteditor-input { align-self: stretch; height: auto; min-height: 0; margin: 0; padding-top: 0; padding-bottom: 0; } .popup-neo--v2 .popup-neo-section.popup-neo-section--erreur { border-color: var(--color-danger, #E6434B); } .popup-neo--v2 .popup-neo-section--erreur .popup-neo-section-header { border-bottom-color: var(--color-danger, #E6434B); } .popup-neo--v2 .popup-neo-section--erreur .popup-neo-section-title { color: var(--color-danger, #E6434B); } .popup-neo--v2 .popup-neo-section-content { gap: 12px; padding: 16px 8px 20px; } .popup-neo--v2 .popup-neo-section-content--2col { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; padding: 16px 0 20px; } .popup-neo--v2 .popup-neo-section--closed .popup-neo-section-content { display: none; } .popup-neo--v2 .popup-neo-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 0 24px 0 24px; } .popup-neo--v2 .popup-neo-col + .popup-neo-col { padding: 0 24px 0 24px; border-left: 1px solid #E1E1E1; } .popup-neo--v2 .popup-neo-col--bas { justify-content: flex-end; } .popup-neo--v2 .popup-neo-col > .popup-neo-field { flex: none; } .popup-neo-item-compte { display: flex; align-items: center; gap: 8px; min-width: 0; } .popup-neo-item-compte > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .popup-neo-item-compte-texte { display: flex; flex-direction: column; min-width: 0; } .popup-neo-item-compte-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .popup-neo-item-compte-solde { font-size: 12px; font-weight: 700; line-height: 16px; white-space: nowrap; font-variant-numeric: tabular-nums; color: #666666; } .popup-neo-item-compte-solde--pos { color: #398538; } .popup-neo-item-compte-solde--neg { color: var(--color-danger, #E6434B); } .popup-neo-item-compte-decimales { font-size: 11px; } .popup-neo--v2 .popup-neo-ancre-fleche { position: relative; } .popup-neo--v2 .popup-neo-fleche { position: absolute; left: -24px; top: 50%; z-index: 1; transform: translate(-50%, -50%); width: 28px; height: 28px; box-sizing: border-box; border-radius: 50%; background: #FFFFFF; border: 1px solid #C9CDE3; display: flex; align-items: center; justify-content: center; color: var(--color-primary-surface); } .popup-neo--v2 .popup-neo-fleche .dx-icon { font-size: 14px; color: inherit; } .popup-neo--v2 .popup-neo-carte-compte { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-height: 72px; min-width: 0; padding: 10px 12px; box-sizing: border-box; overflow: hidden; background: #F9F9F9; border: 1px dashed #BDBDBD; border-radius: 6px; } .popup-neo--v2 .popup-neo-compte-num { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 14px; font-weight: 700; line-height: 20px; letter-spacing: 0.2px; color: #000000; white-space: nowrap; } .popup-neo--v2 .popup-neo-compte-num--s { font-size: 13px; letter-spacing: 0; } .popup-neo--v2 .popup-neo-compte-sub { display: flex; align-items: baseline; gap: 6px; font-size: 12px; line-height: 18px; color: #666666; } .popup-neo--v2 .popup-neo-solde { font-size: 17px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; color: #232323; } .popup-neo--v2 .popup-neo-solde-decimales { font-size: 13px; } .popup-neo--v2 .popup-neo-solde--pos { color: #398538; } .popup-neo--v2 .popup-neo-solde--neg { color: var(--color-danger, #E6434B); } .popup-neo--v2 .popup-neo-carte-compte .popup-neo-info-row { gap: 8px; } .popup-neo--v2 .popup-neo-info-value--normal { font-weight: 400; } .popup-neo--v2 .popup-neo-row { gap: 10px; } .popup-neo--v2 .popup-neo-row--bas { align-items: flex-end; } .popup-neo--v2 .popup-neo-row--inline { align-items: center; gap: 16px; } .popup-neo--v2 .popup-neo-row--inline > .popup-neo-label { min-height: 0; } .popup-neo--v2 .popup-neo-field--devise { flex: 0 0 84px; } .popup-neo--v2 .popup-neo-field--motcle { flex: 0 0 104px; } .popup-neo--v2 .popup-neo-field--motcle .dx-dropdownbutton, .popup-neo--v2 .popup-neo-field--motcle .dx-button { width: 100%; height: 28px; } .popup-neo--v2 .popup-neo-field--motcle .dx-button-content { padding: 0 6px; justify-content: center; } .popup-neo--v2 .popup-neo-field--motcle .dx-button-text { font-size: 12px; } .popup-neo--v2 .dx-textbox, .popup-neo--v2 .dx-numberbox, .popup-neo--v2 .dx-selectbox, .popup-neo--v2 .dx-datebox { height: 28px; } .popup-neo--v2 .dx-texteditor-input { min-height: 26px; padding: 3px 8px; } .popup-neo--v2 .dx-radiobutton { font-size: 12px; } .popup-neo--v2 .popup-neo-recap { flex: none; display: flex; flex-direction: column; margin: 2px 4px 8px 0; overflow: hidden; background: #FFFFFF; border: 1px solid var(--color-primary-surface-discrete-selected, #B9C3EA); border-radius: 8px; box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.2); } .popup-neo--v2 .popup-neo-recap-hero { margin: 8px; padding: 20px 12px 14px; border-radius: 5px; background: #F9F9F9; } .popup-neo--v2 .popup-neo-recap-kicker { font-size: 15px; font-weight: 500; letter-spacing: 0.4px; text-transform: uppercase; color: var(--color-primary-surface); } .popup-neo--v2 .popup-neo-recap-montant { margin-top: 6px; font-size: 26px; line-height: 30px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--color-primary-surface); } .popup-neo--v2 .popup-neo-recap-devise { font-size: 16px; font-weight: 500; } .popup-neo--v2 .popup-neo-recap-cv { margin-top: 2px; font-size: 12px; color: #4F5470; } .popup-neo--v2 .popup-neo-recap-lignes { display: flex; flex-direction: column; padding: 0 8px 8px; } .popup-neo--v2 .popup-neo-recap-lignes .popup-neo-info-row { padding: 7px 8px; border-radius: 4px; } .popup-neo--v2 .popup-neo-recap-lignes .popup-neo-info-row:nth-child(even) { background: #F5F6FA; } .popup-neo--v2 .popup-neo-assistant { flex: none; margin: 0 4px 8px 0; overflow: hidden; background: #FFFFFF; border: 1px solid var(--color-danger, #E6434B); border-radius: 8px; } .popup-neo--v2 .popup-neo-assistant-entete { display: flex; align-items: flex-start; gap: 10px; padding: 12px; background: #FDECEC; border-bottom: 1px solid #F5C2C4; } .popup-neo--v2 .popup-neo-assistant-entete .dx-icon { font-size: 20px; color: var(--color-danger, #E6434B); } .popup-neo--v2 .popup-neo-assistant-titre { font-size: 14px; font-weight: 700; line-height: 20px; color: var(--color-danger, #E6434B); } .popup-neo--v2 .popup-neo-assistant-sous-titre { font-size: 12px; line-height: 18px; color: #666666; } .popup-neo--v2 .popup-neo-assistant-liste { list-style: none; margin: 0; padding: 4px 0; max-height: 320px; overflow-y: auto; } .popup-neo--v2 .popup-neo-assistant-item { display: flex; flex-direction: column; gap: 1px; width: 100%; padding: 8px 12px; border: 0; border-left: 3px solid transparent; background: transparent; font: inherit; text-align: left; cursor: pointer; } .popup-neo--v2 .popup-neo-assistant-item:hover, .popup-neo--v2 .popup-neo-assistant-item:focus-visible { background: #F9F9F9; border-left-color: var(--color-danger, #E6434B); outline: none; } .popup-neo--v2 .popup-neo-assistant-section { font-size: 11px; line-height: 16px; color: #666666; } .popup-neo--v2 .popup-neo-assistant-champ { font-size: 13px; font-weight: 500; line-height: 20px; color: #232323; } .popup-neo--v2 .popup-neo-assistant-message { font-size: 12px; line-height: 18px; color: var(--color-danger, #E6434B); } @media screen and (max-width: 1280px) { .popup-neo--v2 .popup-neo-recap { display: none; } .popup-neo--v2 .popup-neo-aside:not(:has(.popup-neo-assistant)) { display: none; } } .popup-neo--v2 .popup-neo-footer .dx-button { height: 36px; } .popup-neo--v2 .popup-neo-footer .dx-button-text { font-size: 14px; font-weight: 500; } /* ============================================================================= * À ajouter en fin de SiteReact.css §5.5 (Pop-ups React Neo v2) — NOUVELLES classes, toutes scopées .popup-neo--v2. * Source : maquette « Ajouter un bénéficiaire international — grand bloc ». * Aucune règle §5.4 / §5.5 existante n'est modifiée. * Nouvelles couleurs (maquette, hors charte) : #E3F1E3 / #2C6B2B (succès), #FDF1E6 / #F2C9A0 / #8A4500 (alerte). * ========================================================================== */ /* --- Sous-titre dans une colonne (ex. « COMPTE BANCAIRE ») ------------------ */ .popup-neo--v2 .popup-neo-sous-titre { margin: 8px 0 0; font-size: 11px; font-weight: 500; line-height: 16px; letter-spacing: 0.4px; text-transform: uppercase; color: var(--color-primary-surface); } /* --- Label + action à droite (ChampNeo prop action) ------------------------ */ .popup-neo--v2 .popup-neo-label-ligne { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .popup-neo--v2 .popup-neo-lien { display: inline-flex; align-items: center; gap: 3px; padding: 0; border: 0; background: transparent; font: inherit; font-size: 11px; line-height: 16px; color: var(--color-primary-surface); text-decoration: underline; cursor: pointer; } .popup-neo--v2 .popup-neo-lien .dx-icon { font-size: 10px; color: inherit; } /* --- Bloc Groupes : liste des groupes associés ----------------------------- */ .popup-neo--v2 .popup-neo-liste-groupes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .popup-neo--v2 .popup-neo-groupe { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 6px 0 10px; box-sizing: border-box; background: #F9F9F9; border: 1px solid #E1E1E1; border-radius: 6px; } .popup-neo--v2 .popup-neo-groupe--edition { border-color: var(--color-primary-surface); } .popup-neo--v2 .popup-neo-groupe > .dx-icon { font-size: 16px; color: #454545; } .popup-neo--v2 .popup-neo-groupe-nom { flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; font-weight: 500; color: var(--color-primary-surface); } .popup-neo--v2 .popup-neo-groupe-detail { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; color: #666666; } .popup-neo--v2 .popup-neo-groupe .dx-button { flex: none; } .popup-neo--v2 .popup-neo-groupe .dx-button .dx-icon { font-size: 14px; color: #454545; } /* --- Panneaux de la colonne latérale (Diamond / VOP, Ellisphere) ----------- */ .popup-neo--v2 .popup-neo-panneau { flex: none; display: flex; flex-direction: column; margin: 0 4px 0 0; overflow: hidden; background: #FFFFFF; border: 1px solid var(--color-primary-surface-discrete-selected, #B9C3EA); border-radius: 8px; } .popup-neo--v2 .popup-neo-panneau-entete { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; box-sizing: border-box; background: var(--color-primary-border-inverted, #E8EAF5); border-bottom: 1px solid var(--color-primary-surface-discrete-selected, #B9C3EA); } .popup-neo--v2 .popup-neo-panneau-titre { flex: 1; font-size: 16px; font-weight: 500; line-height: 22px; color: #000000; } .popup-neo--v2 .popup-neo-panneau-lien { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--color-primary-surface); text-decoration: underline; } .popup-neo--v2 .popup-neo-panneau-lien .dx-icon { font-size: 11px; color: inherit; } .popup-neo--v2 .popup-neo-panneau-corps { display: flex; flex-direction: column; gap: 8px; padding: 8px; } .popup-neo--v2 .popup-neo-panneau-corps > .popup-neo-helper { padding: 4px; font-size: 12px; line-height: 18px; } .popup-neo--v2 .popup-neo-panneau .dx-button { height: 28px; } .popup-neo--v2 .popup-neo-panneau .dx-button .dx-button-text { font-size: 12px; } /* Lignes zébrées libellé / valeur (LignesPanneau) */ .popup-neo--v2 .popup-neo-panneau-lignes { margin: 0; display: grid; grid-template-columns: 116px minmax(0, 1fr); overflow: hidden; border-radius: 6px; font-size: 13px; line-height: 20px; } .popup-neo--v2 .popup-neo-panneau-lignes dt { padding: 8px 12px; color: #666666; } .popup-neo--v2 .popup-neo-panneau-lignes dd { display: flex; align-items: center; gap: 6px; min-width: 0; margin: 0; padding: 8px 12px; font-weight: 500; color: #232323; } .popup-neo--v2 .popup-neo-panneau-lignes .dx-icon { font-size: 14px; color: #666666; } .popup-neo--v2 .popup-neo-panneau-lignes .popup-neo-panneau-ligne--alt { background: #F5F6FA; } .popup-neo--v2 .popup-neo-panneau-source { margin: 0 4px; font-size: 11px; line-height: 16px; color: #666666; } .popup-neo--v2 .popup-neo-montant-fort { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; color: #000000; } /* Bandeau de statut (VOP) */ .popup-neo--v2 .popup-neo-statut { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; background: #F9F9F9; border: 1px solid #E1E1E1; border-radius: 6px; color: #454545; } .popup-neo--v2 .popup-neo-statut-libelle { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; line-height: 20px; } .popup-neo--v2 .popup-neo-statut-libelle .dx-icon { font-size: 14px; color: inherit; } .popup-neo--v2 .popup-neo-statut-date { font-size: 11px; white-space: nowrap; color: #666666; } .popup-neo--v2 .popup-neo-statut--succes { background: #E3F1E3; border-color: #E3F1E3; color: #2C6B2B; } .popup-neo--v2 .popup-neo-statut--alerte { background: #FDF1E6; border-color: #F2C9A0; color: #8A4500; } .popup-neo--v2 .popup-neo-statut--danger { background: #FDECEC; border-color: #F5C2C4; color: var(--color-danger, #E6434B); } /* Pastilles (Valide, Faible…) */ .popup-neo--v2 .popup-neo-pastille { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 11px; font-size: 12px; font-weight: 500; white-space: nowrap; background: #EFEFEF; color: #454545; } .popup-neo--v2 .popup-neo-pastille--succes { background: #E3F1E3; color: #2C6B2B; } .popup-neo--v2 .popup-neo-pastille--alerte { background: #FDF1E6; color: #8A4500; } .popup-neo--v2 .popup-neo-pastille--danger { background: #FDECEC; color: var(--color-danger, #E6434B); } .popup-neo--v2 .popup-neo-pastille-point { width: 6px; height: 6px; border-radius: 3px; background: currentColor; } /* --- Responsive : popups à panneaux latéraux (modificateur popup-neo--panneaux). Sous 1280px la colonne latérale reste affichée (réduite) : VOP et Ellisphere ne sont pas masqués comme le récap. --- */ @media screen and (max-width: 1280px) { .popup-neo--v2.popup-neo--panneaux .popup-neo-aside, .popup-neo--v2.popup-neo--panneaux .popup-neo-aside:not(:has(.popup-neo-assistant)) { display: flex; flex-basis: 280px; } } /* ============================================================================= * 6. EN-TÊTE ET NAVIGATION * ========================================================================== */ /* ----------------------------------------------------------------------------- * 6.1 Barre d'en-tête * -------------------------------------------------------------------------- */ .headerBreadcrumb-muted { color: #9a9aa0; font-weight: normal; margin-left: 4px; } .breadcrumb-muted { color: #9a9aa0; font-weight: normal; } .headerContainer { height: 64px; border-bottom: 1px solid #E1E1E1; font-size: 16px; font-weight: 400; color: #232323; display: inline-flex; width: 100%; } .linkLogoBanque, .linkLogoProduit { margin-right: auto; } .centerLogo { position: absolute; left: 50%; transform: translateX(-50%); } .headerRight { right: 0; position: absolute; display: inline-flex; height: 64px; align-items: center; padding-left: 10px; } .headerRight::before { /*content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 100%; width: 1px; background-color: #e1e1e1;*/ } .headerButton { cursor: pointer; align-items: center; height: 64px; display: inline-flex; padding: 0 16px; gap: 8px; position: relative; } .headerButton:hover { background-color: #f3f3f3; } .headerButton-icon { position: relative; display: inline-flex; } .headerButton-label { position: relative; } /* Badge minimal : pastille en haut à droite du libellé */ .headerBadge-dot { position: absolute; top: -3px; right: -8px; width: 6px; height: 6px; border-radius: 50%; background-color: #960010; } /* Badge avec nombre : en haut à droite de l'icône, mode icône seule uniquement */ .headerBadge-count { display: none; position: absolute; top: -7px; right: -8px; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; border-radius: 8px; background-color: #960010; color: #fff; font-size: 10px; font-weight: 600; line-height: 16px; text-align: center; } .btnProfil::before, .btnNotif::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 50%; width: 1px; background-color: #e1e1e1; } .badge { position: relative; top: -12px; right: 5px; width: 9px; height: 9px; background-color: #960010; border-radius: 50%; } .headerLogout { background-color: var(--color-primary-surface); height: 64px; width: 64px; align-items: center; display: inline-flex; justify-content: center; cursor: pointer; } .headerLogoBanque { max-height: 50px; margin: 7px 15px; } .headerLogoProduit { max-height: 56px; padding: 4px; max-width: 250px; align-items: center; height: 64px; } .logoProduit { height: 48px; } .cstmHeader { height: 46px; box-sizing: border-box; } .neo-logout-cstm .neo-header-action-icon.sc-neo-header-action + .neo-header-action-labels.sc-neo-header-action { display: none; } /* ----------------------------------------------------------------------------- * 6.2 Navigation latérale * -------------------------------------------------------------------------- */ .svgHome { width: 24px; height: 24px; position: unset; } .isOpen { padding-top: 12px; } .homeSubmenu a { margin-left: 0; color: #333; } .homeSubmenu:hover svg path, .homeSubmenu:hover { fill: var(--color-primary-text-active); } .homeSubmenu.navItemSelected { box-shadow: inset 5px 0 0 var(--color-primary-text-selected); } .homeSubmenu.navItemSelected a { color: var(--color-primary-text-active); } .homeSubmenu.navItemSelected svg path { fill: var(--color-primary-text-active); } .navSubMenu p { display: block; margin-block-start: 0; margin-block-end: 0; margin-inline-start: 0; margin-inline-end: 0; unicode-bidi: isolate; } .subMenu .navBar-label { padding-top: 8px; } .navItemSelected { display: flex; align-items: center; } .navItemSelected > .action-item { order: 1; } .navItemSelected > .svg-loading { order: 2; position: relative; } .sidebar.collapsed .navBar-div-label { flex-direction: column; } .sidebar .navBar-div-label { flex-direction: row; } .svg-loader-menu { width: 25px; height: 100%; display: inline-block; vertical-align: middle; position: relative; margin-right: 5px; margin-top: 0; fill: none !important; } .svg-loader-menu .no-fill { fill: none !important; } .loader_svg__no-fill { fill: none; stroke: var(--main-accent-color); } .svg-menu-container { display: flex; align-content: center; align-items: center; justify-content: center; position: absolute; right: 12px; } /* Boutons de navigation */ .nav { display: inline-flex; align-items: center; gap: 0.6rem; padding: 12px 16px; border: 1.5px solid transparent; border-radius: 12px; background: transparent; color: var(--color-primary-surface); cursor: pointer; white-space: nowrap; border: 1.5px solid currentColor; opacity: 0.7; } .nav:hover { border-color: currentColor; opacity: 1; } .nav__icon { width: 1.25em; height: 1.25em; transition: transform 0.25s ease; transform: translate3d(0, 0, 0); position: relative; } .nav--prev:hover .nav__icon { transform: translate3d(-4px, 0, 0) !important; } .nav--next:hover .nav__icon { transform: translate3d(4px, 0, 0) !important; } /* ============================================================================= * 7. PAGE DE CONNEXION * ========================================================================== */ .headerBar { background-color: #fff; padding: 10px 20px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); height: 64px; box-sizing: border-box; border-bottom: 2px solid #CCCCCC; } .headerContent { display: flex; justify-content: center; align-items: center; } button.assistance { background: none; border: none; padding: 0; cursor: pointer; display: flex; align-items: center; position: absolute; right: 12px; font-size: 16px; color: var(--color-primary-surface); display: inline-flex; gap: 8px; align-items: center; } #form-login { height: 100vh; display: flex; flex-direction: column; } .loginPage { display: flex; height: calc(100vh - 64px); box-sizing: border-box; font-family: 'Ubuntu'; width: 100%; background-color: white; } .moyenAuth { width: 40%; padding: 64px; margin-right: 8px; display: flex; flex-direction: column; } .moyenAuth h2 { font-size: 28px; margin-bottom: 24px; color: black; font-weight: 400; text-align: center; } .moyenAuth label { color: #666666; } .authOption { color: black; border: 1px solid #eee; padding: 16px; margin-bottom: 15px; border-radius: 4px; cursor: pointer; display: flex; align-items: center; font-size: 16px; box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1); height: 80px; box-sizing: border-box; } .authOption:hover { background-color: rgba(172, 172, 172, 0.2); } .mentionLegales { display: inline-flex; align-items: center; gap: 15px; font-family: sans-serif; color: #44006b; } .mentionLegales a { font-family: 'Ubuntu'; text-decoration: none; color: var(--color-primary-surface); font-weight: 500; } .colDivider { width: 1px; height: 16px; background-color: #eee; } .newClientFooter { margin-bottom: 16px; background: rgba(255, 255, 255, 0.8); padding: 12px 40px; border-radius: 8px; box-sizing: border-box; height: 48px; display: flex; align-items: center; color: #666666; } .newClientFooter a { color: var(--color-primary-surface); margin-left: 12px; } .desc { font-size: 18px; color: #666; } .footer { text-align: center; font-size: 13px; color: #666; bottom: 0; width: 100%; background: white; box-sizing: border-box; height: 45px; display: flex; align-items: center; justify-content: center; } .footer-logo { width: 14px; height: 14px; } .text-descr { font-size: 16px; color: #666666; text-align: center; margin-bottom: 24px; } .bottomButtons { margin: 5px 0; margin-top: auto; text-align: center; width: -webkit-fill-available; } .backButton { height: 40px; text-align: center; box-sizing: border-box; background-color: white !important; color: var(--color-primary-surface); border: 1px solid var(--color-primary-surface) !important; font-size: 16px !important; font-weight: 500; font-family: Ubuntu; border-radius: 4px; width: -webkit-fill-available; cursor: pointer; } .backButton:hover { background-color: #f5f5f5 !important; } .thirdButton { height: 40px; text-align: center; background-color: white !important; color: var(--color-primary-surface); font-size: 16px !important; font-weight: 500; font-family: Ubuntu; border-radius: 4px; width: -webkit-fill-available; cursor: pointer; } .thirdButton:hover { background-color: #f5f5f5 !important; } input[name="Cloud3SKeyIdentifiant"], input[name="CloudCertEuropeIdentifiant"] { padding-left: 35px !important; background-color: transparent !important; } .changeAuth { color: var(--color-primary-surface); text-align: center; font-size: 13px; cursor: pointer; font-weight: 500; line-height: 150%; margin-top: 8px; } .pictoChevron { height: 16px; margin-left: auto; } .pictoHelp { height: 24px; position: unset; } .LoginPicto { width: 48px; height: 48px; position: unset !important; } .chevron { font-size: 18px; color: #666; } .btn-connection[disabled], .changeAuth[disabled] { background-color: #ccc; color: #999; cursor: not-allowed; animation: none; } .btn-connection[disabled]:hover, .changeAuth[disabled]:hover { background-color: #ccc; color: #999; cursor: not-allowed; animation: none; } /* Pop-up d'assistance */ .popup-overlay-assistance { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); display: flex; justify-content: center; align-items: center; /* Au-dessus des overlays DevExtreme (1500 et plus) : la confirmation est toujours la couche la plus haute */ z-index: 5000; } .popup-container { background: white; border-radius: 12px; width: 33%; height: 60%; max-width: 90%; max-height: 90%; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); overflow: hidden; font-family: sans-serif; display: flex; flex-direction: column; } /* Confirmations et alertes (PopupConfirmer) : hauteur ajustée au contenu */ .popup-container--compacte { height: auto; max-height: 80vh; min-width: 420px; } .popup-assistance-header { display: flex; justify-content: center; align-items: center; padding: 16px 20px; border-bottom: 1px solid #eee; font-size: 16px; height: 64px; box-sizing: border-box; color: #232323; } .close-button { background: none; border: none; cursor: pointer; margin-left: auto; } .pictoClose { width: 24px; } /* ============================================================================= * 8. WIDGETS ET GRAPHIQUES * ========================================================================== */ /* ----------------------------------------------------------------------------- * 8.1 Widgets généraux * -------------------------------------------------------------------------- */ .TitleWidget { font-size: 24px; color: var(--color-secondary-brand); font-weight: 500; font-family: Ubuntu; display: inline-flex; align-items: center; } .divTitleWidget { border-bottom: 1px solid #ACACAC; margin-bottom: 16px; cursor: move; } .pictoWidgetReact { position: unset; height: 44px; margin-right: 8px; width: 44px; } .graphTresoContainer { margin-top: 24px; margin-bottom: 24px; cursor: pointer; } .headerRow { border-left: 1px solid var(--color-primary-surface-discrete-selected); border-top: 1px solid var(--color-primary-surface-discrete-selected); border-right: 1px solid var(--color-primary-surface-discrete-selected); border-bottom: none; } .separateRowSolde { border-top: 1px solid #ACACAC; height: 12px; } .societe-list { border-bottom: 1px solid #F3F3F3; cursor: pointer; } .societe-list:hover { background: var(--color-primary-border-inverted) !important; } .wdgt-tbl-detailsEcr-wrapper { border-radius: 4px; margin-bottom: 16px; } .wdgt-tbl-titleCompte { font-size: 14px; font-weight: 500; margin-bottom: 16px; padding-left: 16px; text-align: center; } .wdgt-tbl-detailsEcr tr { height: 55px; border-bottom: 1px solid #ACACAC; cursor: pointer; } .wdgt-tbl-detailsEcr td:first-child { padding-left: 8px; } .wdgt-tbl-detailsEcr tr:not(:first-child):nth-child(even) { background-color: #F9F9F9; } .wdgt-tbl-detailsEcr tr:not(:first-child):hover { background: var(--color-primary-border-inverted) !important; } .infobanque { position: relative; box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.2); height: fit-content; } .infobanque h2 { font-size: 21px; } .infobanque h3 { font-size: 20px; font-weight: 500; } .infobanque p img:not(.pictoWidgetReact) { max-width: 100% !important; height: auto !important; } .titleFichierAEnvoyer { color: #666666; font-weight: 400; font-size: 13px; } .paramGraph { background-color: white; border: 1px solid var(--color-primary-border-inverted); padding: 8px; border-radius: 4px; z-index: 3; width: 340px; position: absolute; right: 25px; top: 70px; font-size: 12px; box-shadow: -2px 2px 5px gray; } .numeroBanque { font-size: 16px; } .nomSocFichierATraiter { max-height: 40px; overflow: hidden; text-overflow: ellipsis; white-space: normal; } .svgArrow { position: unset; width: 16px; } .titleTableauDeBord { background-image: var(--url-bg-arianne); -webkit-background-size: cover; color: white; font-size: 32px; line-height: 106px; } .dataBanque { text-align: center; align-items: center; gap: 12px; padding-left: 8px; } .reactTypeSmdVopPill { margin-bottom: 10px; } /* ----------------------------------------------------------------------------- * 8.2 Quotas et graphiques * -------------------------------------------------------------------------- */ .quotas-wrapper { padding-right: 40px; } .quotas-wrapper-title { width: 100%; background-color: rgba(81, 160, 162, 0.25); height: 40px; font-weight: 700; line-height: 150%; vertical-align: middle; display: inline-flex; align-items: center; padding-left: 24px; color: black; font-size: 14px; gap: 8px; cursor: pointer; box-sizing: border-box; } .picto-wrapper-title { background-color: #51A0A2; border-radius: 4px; transition: transform 200ms ease; } .is-closed-quotas { transform: rotate(-90deg); padding-right: 0; padding-left: 12px; } .picto-flex-right { margin-left: auto; padding-right: 12px; } .quotas-wrapper .collapse { overflow: hidden; transition: max-height 350ms ease, opacity 200ms ease, margin 200ms ease; } .quotas-wrapper .collapse--open { max-height: 4000px; opacity: 1; margin-top: 12px; } .quotas-wrapper .collapse--closed { max-height: 0; opacity: 0; margin-top: 0; margin-bottom: 10px; } .depColor { background-color: rgba(230, 67, 75, 0.25); } .pictoDepColor { background-color: rgba(230, 67, 75, 1); } .bagColor { background-color: var(--color-primary-surface-discrete-hover); } .titleGrapheTab { font-weight: 500; font-size: 19px; line-height: 130%; } .flex-container { display: flex; justify-content: space-between; align-items: center; width: 94%; } .button-group { display: flex; border: 1px solid #ccc; border-radius: 8px; overflow: hidden; } .mode-button-clients, .mode-button-fournisseurs { background: none; border: none; padding: 5px; cursor: pointer; transition: background-color 0.3s; } .mode-button-clients img, .mode-button-fournisseurs img { width: 16px; height: 16px; } .mode-button-clients.active, .mode-button-fournisseurs.active { background-color: #f0f0f0; } .td-grid-agee { height: 400px; } /* Quotas - Cards et Grid */ .quotas-grid { display: flex; gap: 16px; grid-template-columns: unset; } .quotas-card { border-radius: 12px; padding: 12px; background: #fff; width: 800px; } .quotas-card .highcharts-container, .quotas-card .highcharts-root { width: 100% !important; } .quotas-card .card-header { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .quotas-card .card-title-group { min-height: 40px; padding-top: 24px; padding-left: 40px; } .card-title-group.dx-dropdownbutton-toggle .dx-dropdowneditor-icon { display: none !important; } .card-title-group.dx-button-content .dx-dropdowneditor-icon { background-image: var(--dropdown-icon-path); background-size: 16px; background-repeat: no-repeat; background-position: center center; } .card-title { font-weight: 500; font-size: 14px; } .card-title-strong { font-weight: 700; } .card-actions { display: flex; gap: 8px; } .loading { opacity: 0.8; } .quotas-dxgrid .dx-row-alt:hover { background-color: var(--color-primary-surface-discrete-hover) !important; } .quotas-table-card { margin-top: 24px; } .quotas-dxgrid .dx-datagrid-content .dx-row > td { vertical-align: middle; } .dg-cell { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; } .dg-pct { font-size: 11px; opacity: 0.8; } .dg-amt { font-weight: 400; font-size: 14px; } /* Layout horizontal pour GraphsPiePlusGridQuotas */ .quotas-grid-horizontal { display: flex; gap: 24px; align-items: flex-start; margin-top: 16px; } .quotas-chart-left { flex: 0 0 440px; min-width: 300px; max-width: 450px; background: #fff; border: 1px solid #E1E1E1; border-radius: 8px; padding: 16px; position: sticky; top: 150px; align-self: flex-start; } .quotas-grid-right { flex: 1; min-width: 0; overflow-x: auto; } .quotas-chart-left .chart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid #EFEFEF; } .quotas-chart-left .chart-title { font-weight: 500; font-size: 14px; color: #232323; } .quotas-chart-left .chart-container { min-height: 250px; width: 100%; max-width: 100%; overflow: hidden; } .quotas-chart-left .highcharts-container, .quotas-chart-left .highcharts-root { width: 100% !important; max-width: 100% !important; } /* DataGrid dans layout horizontal */ .quotas-grid-horizontal .quotas-dxgrid { border: 1px solid #E1E1E1; border-radius: 4px; } .quotas-grid-horizontal .quotas-dxgrid .dx-datagrid-headers { background-color: #F5F5F5; top: 0; } .quotas-grid-horizontal .quotas-dxgrid .dx-header-row > td { font-weight: 500; font-size: 12px; color: #666666; white-space: normal !important; vertical-align: middle; line-height: 1.3; height: auto; min-height: 40px; } .quotas-grid-horizontal .quotas-dxgrid .dx-header-row .dx-datagrid-text-content { white-space: normal !important; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; } .quotas-grid-horizontal .quotas-dxgrid .dx-data-row { height: 50px !important; } .quotas-grid-horizontal .quotas-dxgrid .dx-data-row > td { padding: 6px 12px; font-size: 13px; height: 50px !important; max-height: 50px !important; vertical-align: middle; } .quotas-grid-horizontal .quotas-dxgrid .dx-data-row > td:first-child { white-space: normal !important; overflow: hidden; } .quotas-grid-horizontal .dg-cell { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; } .quotas-grid-horizontal .dg-amt { font-weight: 400; font-size: 13px; } .quotas-grid-horizontal .dg-pct { font-size: 10px; color: #999; } .quotas-grid-horizontal .quotas-dxgrid .dx-datagrid-total-footer { background-color: #FAFAFA; border-top: 2px solid #E1E1E1; } .quotas-grid-horizontal .quotas-dxgrid .dx-datagrid-summary-item { font-weight: 600; color: #232323; } /* Cellule banque */ .bank-cell-wrapper { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; overflow: hidden; height: 100%; } .bank-cell-logo { width: 16px; height: 16px; object-fit: contain; flex-shrink: 0; margin-top: 2px; } .bank-cell-content { display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; text-overflow: ellipsis !important; line-height: 1.35 !important; max-height: 2.7em !important; word-break: break-word !important; white-space: normal !important; flex: 1; min-width: 0; font-size: 13px; } .zoneDepense { margin-bottom: 24px; } /* ----------------------------------------------------------------------------- * 8.3 Légendes * -------------------------------------------------------------------------- */ .quotas-legend { border-radius: 12px; padding: 12px; margin-bottom: 12px; max-width: 450px; margin-right: auto; display: flex; flex-direction: column; justify-content: center; } .legend-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; gap: 12px; } .legend-title { font-weight: 400; font-size: 13px; color: #666666; } .legend-actions { display: flex; gap: 8px; } .legend-list { display: flex; flex-wrap: wrap; gap: 8px; flex-direction: column; } .legend-item { display: flex; align-items: center; gap: 6px; border: none; padding: 4px 8px; border-radius: 8px; background: #fff; cursor: pointer; transition: opacity 0.15s ease, transform 0.05s ease; user-select: none; } .legend-item:hover { transform: translateY(-1px); } .legend-item.is-hidden { opacity: 0.4; } .legend-label { font-size: 14px; } .quotas-swatch { width: 16px; height: 16px; border-radius: 16px; } /* Légende compacte */ .quotas-legend-compact { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #EFEFEF; } .legend-item-compact { display: flex; align-items: center; gap: 4px; padding: 4px 8px; border: none; background: #F9F9F9; border-radius: 4px; cursor: pointer; transition: opacity 0.15s ease, background-color 0.15s ease; font-size: 11px; text-align: left; } .legend-item-compact:hover { background: #EFEFEF; } .legend-item-compact.is-hidden { opacity: 0.4; } .quotas-swatch-small { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; } .legend-label-compact { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 150px; color: #666666; } /* ----------------------------------------------------------------------------- * 8.4 Couleurs des banques (palette 20 classes) * -------------------------------------------------------------------------- */ .bank-color-0 { background: #1f77b4; } .bank-color-1 { background: #ff7f0e; } .bank-color-2 { background: #2ca02c; } .bank-color-3 { background: #d62728; } .bank-color-4 { background: #9467bd; } .bank-color-5 { background: #8c564b; } .bank-color-6 { background: #e377c2; } .bank-color-7 { background: #7f7f7f; } .bank-color-8 { background: #bcbd22; } .bank-color-9 { background: #17becf; } .bank-color-10 { background: #4e79a7; } .bank-color-11 { background: #f28e2b; } .bank-color-12 { background: #59a14f; } .bank-color-13 { background: #e15759; } .bank-color-14 { background: #9c755f; } .bank-color-15 { background: #b07aa1; } .bank-color-16 { background: #76b7b2; } .bank-color-17 { background: #edc948; } .bank-color-18 { background: #af7aa1; } .bank-color-19 { background: #86bc86; } /* Couleur pour la section Recettes */ .recColor { background-color: rgba(0, 130, 52, 0.15); } .pictoRecColor { background-color: rgba(0, 130, 52, 1); border-radius: 4px; } /* ----------------------------------------------------------------------------- * 8.5 Widget Factures * -------------------------------------------------------------------------- */ #sortable1 .mesfactures { position: relative; background: #ffffff; padding: 0 16px 12px; box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.2); border-radius: 8px; } .wf-widget { font-family: Ubuntu; } .wf-colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .wf-colonne { padding: 12px 14px; min-width: 0; } .wf-colonne + .wf-colonne { border-left: 1px solid #E1E1E1; } .wf-entete-colonne { display: flex; align-items: baseline; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid #EFEFEF; } .wf-titre-sens { font-weight: 700; font-size: 13px; color: #232323; } .wf-en-cours { font-size: 12px; color: #666666; } .wf-ligne { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #EFEFEF; } .wf-ligne:last-child { border-bottom: none; } .wf-pastille { flex: 0 0 26px; height: 26px; border-radius: 50%; background-color: var(--color-primary-surface); color: #ffffff; font-weight: 700; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; } .wf-pastille.wf-pastille-vide { background-color: #E9EAEC; color: #666666; } .wf-texte { flex: 1; min-width: 0; } .wf-libelle { font-size: 14px; color: #232323; display: flex; align-items: center; gap: 8px; } .wf-libelle.wf-libelle-info { cursor: help; } .wf-badge-nouveau { font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 1px 6px; border-radius: 4px; background-color: #fee2e2; color: #b91c1c; } .wf-valeurs { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; white-space: nowrap; } .wf-montant { font-size: 14px; font-weight: 700; color: #232323; font-variant-numeric: tabular-nums; } .wf-action { background: none; border: none; padding: 0; cursor: pointer; font-family: Ubuntu; font-weight: 500; font-size: 13px; color: var(--color-primary-surface); } .wf-action::after { content: " \203A"; } .wf-erreur { padding: 16px; color: #666666; font-size: 13px; } /* ============================================================================= * 9. VUES SPÉCIFIQUES * ========================================================================== */ /* ----------------------------------------------------------------------------- * 9.1 Détails de compte * -------------------------------------------------------------------------- */ .globalComptesDetails { min-width: 400px; display: flex; flex-direction: column; justify-content: center; min-height: 100%; margin-left: auto; } .compte-details-container { display: flex; flex-direction: row; align-items: center; height: 100%; width: fit-content; } .compte-solde-block { padding-right: 36px; display: flex; flex-direction: column; justify-content: center; min-width: 210px; align-items: flex-end; text-align: right; } .compte-solde-montant { font-size: 32px; font-weight: 400; margin-bottom: 4px; line-height: 1; } .compte-solde-montant-green { color: #008234; } .compte-solde-montant-red { color: red; } .compte-solde-montant-orange { color: orange; } .compte-solde-euro, .compte-solde-devise { font-weight: 400; font-size: 24px; } .compte-solde-centimes { font-size: 22px; } .compte-solde-date { font-size: 13px; color: #8a8a8a; margin-bottom: 10px; } .compte-infos-block { display: flex; flex-direction: column; justify-content: center; border-left: 2px solid #cccccc; padding-left: 24px; min-width: 384px; } .compte-info-row { display: flex; flex-direction: row; align-items: center; line-height: 22px; gap: 12px; font-weight: 400; font-size: 16px; color: #666666; } .compte-info-value { text-align: right; flex: 1; } /* ----------------------------------------------------------------------------- * 9.2 Détails d'écriture * -------------------------------------------------------------------------- */ .topTitleDetailsEcr { display: flex; flex-direction: column; gap: 4px; } .titleType { font-size: 16px; } .titleTypeMontant { font-size: 32px; font-weight: 500; } .titleTypeSmall { font-size: 12px; } .detail-box-compte { border: 1px dashed #ACACAC; display: flex; flex-direction: column; padding: 16px; line-height: 22px; border-radius: 4px; margin-bottom: 12px; } .detail-box-iban { font-weight: 700; font-size: 16px; } .detail-pays { display: inline-flex; align-items: center; } .detail-compte { margin-top: 16px; } .detail-label { font-weight: 400; color: #666666; font-size: 13px; } .label-right { text-align: right; padding-right: 8px; } .detail-value { width: 65%; } .detail-text { font-size: 13px; color: #666666; font-weight: 400; text-align: right; } .detail-title { font-size: 13px; color: #666666; font-weight: 400; } .details-row { display: flex; flex-direction: column; gap: 5px; } .detail-lst-btn { display: inline-flex; width: 100%; justify-content: center; gap: 24px; } .my-button-react { padding: 4px 8px; margin: 4px 0; min-width: 60px; max-height: 32px; display: block; text-align: center; color: var(--color-primary-surface); border: 1px solid var(--color-primary-surface); border-radius: 4px; font-size: 14px; cursor: pointer; } .my-button-react.full { background-color: var(--color-primary-surface); color: white; } .creer-virement-from-details { width: 50%; height: 32px; text-align: center; color: var(--color-primary-text); font-size: 15px; font-weight: 500; border: 1px solid #E1E1E1; background-color: #EFEFEF; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; } .validationBenef { font-size: 13px; color: #666666; } /* Tableaux détails */ .table-detail-react { width: 100%; border-collapse: collapse; } .table-detail-react tr:nth-child(odd) { background-color: #f9f9f9; } .table-detail-react tr { height: 40px; vertical-align: middle; } .table-detail-react td { padding-left: 16px; } .table-detail-auth { width: 100%; border-collapse: separate; border-spacing: 0 8px; } .container-filtre-etat { padding-left: 40px; padding-bottom: 2px; } .table-detail-auth tr { height: 40px; vertical-align: middle; background: #fff; box-shadow: 0 0 0 1px #eee; border-radius: 6px; } .table-detail-auth td { padding-left: 16px; } .table-detail-auth td.detail-label { width: 40px; padding-left: 8px; padding-right: 8px; text-align: center; } .table-detail-auth td.detail-value { width: auto; } .table-detail-auth-inner { width: 100%; border-collapse: collapse; } .table-detail-auth-inner tr { height: 32px; } .table-detail-auth-inner tr:nth-child(odd) { background-color: #f9f9f9; } .table-detail-auth-inner td { padding: 6px 12px; } /* ----------------------------------------------------------------------------- * 9.3 Extraits * -------------------------------------------------------------------------- */ .detail-extrait-container { border: 1px solid var(--color-primary-surface-discrete-selected); border-radius: 4px; } .title-detailsextrait { padding-left: 12px; } .dataGrid-details-extrait .dx-datagrid-content td { vertical-align: top; } .dataGrid-details-extrait .dx-datagrid-content td { overflow-wrap: anywhere; } .dataGrid-details-extrait .dx-datagrid-content td.cell-montant { white-space: nowrap; overflow-wrap: normal; } /* Statuts VOP */ .vop-mtch { color: #30c959; } .vop-cmtc { color: #00105e; } .vop-nmtc { color: #AF4000; } .vop-noap { color: unset; } .vop-etch { color: red; } .vop-icon-img-grid { width: 26px; position: relative; bottom: 1px; margin-right: 5px; } /* Pop-up ajout bénéficiaire */ .wrapper-popupAddBenef > .dxpc-contentWrapper > .dxpc-content { height: 430px !important; } .content-grid-echeances { margin-top: 40px; } /* ----------------------------------------------------------------------------- * 9.4 Plateforme Agrée EFacture * -------------------------------------------------------------------------- */ .pa-badge-mini { display: inline-flex; align-items: center; border-radius: 999px; padding: 2px 7px; background: #e5e7eb; color: #374151; font-size: 10px; font-weight: 600; white-space: nowrap; } .pa-badge-englobant { background: #ffedd5; color: #c2410c; } /* ============================================================================= * 10. UTILITAIRES * ========================================================================== */ /* ----------------------------------------------------------------------------- * 10.1 Espacements et marges * -------------------------------------------------------------------------- */ .mtop32 { margin-top: 32px; } .minus32 { margin-top: -32px; } .top0 { top: unset !important; } .padR40 { padding-right: 40px; width: 95%; } .cbTestReact { padding-left: 400px; } .last-col-opt { margin-left: auto; padding-right: 9.5px; } .rightbtn { margin-left: auto; } /* ----------------------------------------------------------------------------- * 10.2 Flexbox utilitaires * -------------------------------------------------------------------------- */ .inflc { display: inline-flex; align-items: center; height: 30px; } .inline8 { display: inline-flex; gap: 8px; align-items: center; } .inline12 { display: inline-flex; gap: 12px; align-items: center; } .flexCol2 { display: flex; gap: 2px; flex-direction: column; } .select-container { flex: 1; display: flex; flex-direction: column; gap: 2px; } .cstmItemRow { display: flex; align-items: center; font-family: Ubuntu; font-size: 14px; } .cstmLblSlctRow { margin-left: 8px; } /* ----------------------------------------------------------------------------- * 10.3 Couleurs et états * -------------------------------------------------------------------------- */ .primarySvg { fill: var(--color-primary-surface); } .secondarySvg { fill: var(--color-secondary-brand); } .couleurSVGMain { fill: var(--color-primary-brand); } .couleurSVGSecondary { fill: var(--color-secondary-brand); } /* Montants */ .amount { font-size: 20px; font-weight: 400; letter-spacing: -0.1px; } .amount.positive { color: #008234; } .amount.negative { color: #FF0000; } .amount.indispo { font-size: 19px; color: #666666; } .amount-section { flex: 1; display: flex; flex-direction: column; align-items: flex-end; padding-right: 68px; } .date-text { font-size: 12px; color: #555; } .separator { height: 60px; width: 2px; background-color: #EFEFEF; margin: 0 20px; } .separatorReact { border-left: 1px solid #ACACAC; margin: 0 20px; height: 32px; } .details-section { flex: 2; display: flex; flex-direction: column; align-items: flex-start; } .details-section div { display: flex; justify-content: space-between; width: 100%; } .label-devise { font-family: Ubuntu; font-weight: 400; font-size: 13px; line-height: 150%; color: rgba(35, 35, 35, 1); height: 32px; display: flex; align-items: center; gap: 4px; } .iconInfo { padding-right: 4px; padding-top: 2px; } .help-icon { width: 16px; } .svgDataGrid { width: 24px; height: 24px; position: unset; } .pictoElli { position: unset; } .selectItemsReact:hover { background-color: lightgray; cursor: pointer; } .btnDataGridAdd { width: 32px; height: 32px; background-color: var(--color-primary-surface); display: flex; align-items: center; justify-content: center; border-radius: 4px; cursor: pointer; } /* Colonnes nowrap */ .dx-datagrid .col-debit-nowrap .dx-datagrid-cell-content, .dx-datagrid .col-credit-nowrap .dx-datagrid-cell-content { white-space: nowrap !important; text-overflow: clip !important; overflow: visible !important; } .col-credit-nowrap { text-align: right; width: 100%; } .col-info-multiline { white-space: normal !important; line-height: 20px !important; } .bottom-form { z-index: 4; } /* ----------------------------------------------------------------------------- * 10.4 Accessibilité * -------------------------------------------------------------------------- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ----------------------------------------------------------------------------- * 10.5 eReporting * -------------------------------------------------------------------------- */ .regime-ereporting { display: flex; flex-direction: column; gap: 12px; height: 100%; overflow-y: auto; padding-right: 4px; } .regime-ereporting--chargement { align-items: center; justify-content: center; flex-direction: row; } .regime-ereporting__alerte { background: #fff4e5; border-left: 4px solid #f0a020; padding: 10px 12px; border-radius: 4px; } .regime-ereporting__liste { display: flex; flex-direction: column; gap: 8px; } .regime-ereporting__option { display: flex; gap: 10px; align-items: flex-start; border: 1px solid #d6d9e0; border-radius: 6px; padding: 10px 12px; cursor: pointer; } .regime-ereporting__option:hover { border-color: #8a94b8; } .regime-ereporting__option--choisie { border-color: #1f3a93; background: #f2f5fc; } .regime-ereporting__option input { margin-top: 3px; } .regime-ereporting__titre { font-weight: 600; } .regime-ereporting__code { font-family: monospace; font-size: .85em; background: #eef0f5; border-radius: 3px; padding: 1px 5px; margin-left: 6px; } .regime-ereporting__periodicite { font-size: .85em; color: #4a5068; margin-top: 2px; } .regime-ereporting__explication { font-size: .85em; color: #5d6375; margin-top: 4px; } .regime-ereporting__note { font-size: .85em; color: #5d6375; } .regime-ereporting__note--attention { color: #8a5a00; } .regime-ereporting__autres { display: flex; flex-direction: column; gap: 4px; } .regime-ereporting__erreur { background: #fdecea; border-left: 4px solid #c62828; padding: 10px 12px; border-radius: 4px; white-space: pre-wrap; font-size: .85em; } .regime-ereporting__pied { display: flex; justify-content: flex-end; gap: 8px; margin-top: auto; padding-top: 8px; } /*========================================================================== Origine des lignes dans la popup de détail e-reporting ==========================================================================*/ .origine-ereporting { padding: 1px 8px; border-radius: 10px; font-size: 11px; white-space: nowrap; cursor: help; } .origine-ereporting--turbo { background: #e8f0fe; color: #1a4fa0; } .origine-ereporting--manuelle { background: #f1e8fb; color: #5b2a86; } .origine-ereporting--depot { background: #eef1f4; color: #4a5068; } /*========================================================================== Suivi Facture : cadre blanc de chaque onglet collé sous la barre d'onglets. Marges et paddings hauts neutralisés sur tous les conteneurs qui mènent au cadre .workBoxZone (padding de .contentPageUnderReactToolbar et de .gridAndDetails, remontée de 32px de .gridsReact...) : seul l'écart de la barre d'onglets subsiste, soulignement de l'onglet actif visible ==========================================================================*/ .suiviFac .dxtc-content :has(.workBoxZone):not(.workBoxZone) { margin-top: 1px !important; padding-top: 0 !important; } /* e-Reporting : la zone de grille ne s'élargit plus à la somme des largeurs minimales des colonnes ; la grille défile horizontalement dans sa zone et suit la largeur de la fenêtre, du volet et du zoom. Les ancêtres de mise en page (table td.td-gridview) se dimensionnent sur la largeur minimale du contenu : colonne minmax(0, 1fr), comme .zone-grille-factures > .content-grid, et contain: inline-size la ramènent à zéro ; overflow-x: clip coupe un débordement transitoire sans créer de conteneur de défilement (sticky préservé) */ .suiviFac #gridEReportingContainer .gridAndDetails > .workBoxZone { flex: 1 1 0; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); contain: inline-size; overflow-x: clip; } .suiviFac #gridEReportingContainer .barre-filtres-ereporting { padding-top: 0; margin-bottom: 8px; } /* ============================================================================= * 11. RESPONSIVE * ========================================================================== */ .container-form-ecriture { position: relative; max-height: calc(100vh - 160px); overflow-y: auto; overflow-x: hidden; padding-right: 10px; } .container-form-ecriture .footer-form-ecriture { position: sticky; bottom: 0; display: flex; justify-content: space-between; align-items: center; background: #fff; padding: 8px 0 0; margin-top: 10px; z-index: 2; } .container-form-ecriture .boutons-form-ecriture { display: flex; gap: 8px; } .creer-virement-unitaire { position: relative; top: 25px; left: -10px; display: flex; flex-wrap: wrap; width: fit-content; max-width: 100%; height: auto; } @media screen and (max-width: 1536px) { #sortable1 { grid-template-columns: repeat(2, 1fr) !important; } .fichiersatraiter { max-width: 45% !important; min-width: 450px !important; } .infobanque { max-width: 45% !important; min-width: 350px !important; } } @media screen and (max-width: 1400px) { .quotas-grid-horizontal { flex-direction: column; } .quotas-chart-left { width: 95%; max-width: 95%; flex: none; position: relative; top: unset; } .quotas-grid-right { width: 100%; } .loader-cert { margin-top: 5px !important; } } @media screen and (max-width: 1280px) { .right-section .dx-button-text { display: none; } .right-section .dx-button-content .dx-icon { margin-inline-end: 0 !important; } } /*========================================================================== Liens d'action en tête de la liste des filtres e-reporting ==========================================================================*/ .dd-menu .dd-actions { display: flex; align-items: center; gap: 6px; padding: 2px 0 8px; margin-bottom: 6px; border-bottom: 1px solid rgba(0, 0, 0, 0.08); } .dd-menu .dd-lien { background: none; border: 0; padding: 0; font-size: 12px; color: #1f6fb2; cursor: pointer; } .dd-menu .dd-lien:hover:not(:disabled) { text-decoration: underline; } .dd-menu .dd-lien:disabled { opacity: 0.4; cursor: default; } .dd-menu .dd-separateur { color: rgba(0, 0, 0, 0.35); } .dd-menu .dd-lien-raccourci { margin-left: auto; font-weight: 600; } .dd-menu .dd-lien-actif { text-decoration: underline; } /*========================================================================== Proposition de la recherche de contrepartie e-reporting ==========================================================================*/ .contrepartie-connue { display: flex; flex-direction: column; line-height: 1.25; } .contrepartie-connue__id { font-size: 11px; opacity: 0.65; } /*========================================================================== Pastille de transmission partielle dépliable ==========================================================================*/ .transmission-partielle { display: inline-flex; flex-direction: column; gap: 4px; } .transmission-partielle__bascule { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 0; cursor: pointer; } .transmission-partielle__messages { display: flex; flex-direction: column; gap: 2px; } .ligne-message { display: grid; grid-template-columns: 14px auto 1fr; column-gap: 4px; text-align: left; background: none; border: 0; padding: 1px 2px; font-size: 12px; line-height: 1.3; cursor: pointer; border-radius: 4px; } .ligne-message:hover { background: rgba(0, 0, 0, 0.05); } .ligne-message__nom { font-weight: 600; } .ligne-message__etat { opacity: 0.8; } .ligne-message__contenu { grid-column: 2 / 4; font-size: 11px; opacity: 0.7; } .ligne-message--OK .ligne-message__symbole { color: #2e7d32; } .ligne-message--KO .ligne-message__symbole { color: #c62828; } .ligne-message--EN_COURS .ligne-message__symbole, .ligne-message--A_ENVOYER .ligne-message__symbole { color: #ef6c00; } /*========================================================================== Volet de transmission : synthèse, cartes par message et historique ==========================================================================*/ .synthese-transmission { margin: 10px 0; display: flex; flex-direction: column; gap: 6px; } .synthese-transmission__groupe { padding: 6px 10px; border-left: 3px solid; border-radius: 4px; background: rgba(0, 0, 0, 0.02); } .synthese-transmission__groupe--ok { border-color: #2e7d32; } .synthese-transmission__groupe--attente { border-color: #ef6c00; } .synthese-transmission__groupe--ko { border-color: #c62828; } .synthese-transmission__titre { font-weight: 600; margin-bottom: 2px; } .synthese-transmission__ligne { font-size: 12px; } .synthese-transmission__contenu { opacity: 0.7; } .carte-message-ereporting { border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 6px; padding: 8px 10px; margin: 8px 0; } .carte-message-ereporting--cible { box-shadow: 0 0 0 2px #1f6fb2; } .carte-message-ereporting__entete { display: flex; justify-content: space-between; align-items: center; font-weight: 600; } .carte-message-ereporting--OK .carte-message-ereporting__statut { color: #2e7d32; } .carte-message-ereporting--KO .carte-message-ereporting__statut { color: #c62828; } .carte-message-ereporting__contenu { font-size: 12px; opacity: 0.7; margin-bottom: 4px; } .carte-message-ereporting .dx-button { margin-top: 6px; } .historique-transmission { margin: 8px 0; } .historique-transmission > summary { cursor: pointer; font-size: 12px; opacity: 0.8; } /*========================================================================== Encaissements reportés sur la 3e décade (réel normal mensuel) ==========================================================================*/ .cellule-flux-montant--differe a { color: inherit; opacity: 0.55; font-style: italic; } .cellule-flux-differe { margin-left: 4px; padding: 0 4px; font-size: 10px; border-radius: 3px; background: rgba(0, 0, 0, 0.06); opacity: 0.8; white-space: nowrap; } /*========================================================================== Volet de transmission e-reporting : zones repliables et catégories ==========================================================================*/ .zone-volet-ereporting { margin: 8px 0; } .zone-volet-ereporting__entete { display: flex; align-items: center; gap: 6px; width: 100%; background: none; border: 0; padding: 4px 0; text-align: left; font-weight: 600; cursor: pointer; } .zone-volet-ereporting__entete--fixe { cursor: default; } .zone-volet-ereporting__chevron { font-size: 14px; opacity: 0.7; } .zone-volet-ereporting__resume { margin-left: auto; font-weight: 400; font-size: 12px; opacity: 0.8; text-align: right; } .zone-volet-ereporting__contenu { padding-top: 4px; } .carte-message-ereporting { padding: 4px 10px 8px; } .carte-message-ereporting .zone-volet-ereporting { margin: 0; } .table-categories-ereporting { width: 100%; border-collapse: collapse; font-size: 12px; } .table-categories-ereporting td { padding: 4px 6px; border-bottom: 1px solid rgba(0, 0, 0, 0.06); vertical-align: top; } .categorie-ereporting__nom { font-weight: 600; white-space: nowrap; } .categorie-ereporting__montant { text-align: right; white-space: nowrap; } .categorie-ereporting--vide td { opacity: 0.55; } .categorie-ereporting--differe .categorie-ereporting__etat { font-style: italic; opacity: 0.75; } .categorie-ereporting--ok .categorie-ereporting__etat { color: #2e7d32; } .categorie-ereporting--ko .categorie-ereporting__etat { color: #c62828; } .categorie-ereporting--alerte .categorie-ereporting__etat, .categorie-ereporting--attente .categorie-ereporting__etat { color: #ef6c00; } /*========================================================================== Synthèse e-reporting : pastille de retrait et sélecteur de vue ==========================================================================*/ .cellule-flux-retirees { margin-left: 4px; padding: 0 5px; border-radius: 8px; font-size: 11px; line-height: 16px; background: #fff4e5; color: #8a5a00; cursor: help; } .vue-ereporting.dx-buttongroup .dx-button { height: 32px; border-color: #ACACAC !important; color: #232323 !important; background-color: #fff !important; } .vue-ereporting.dx-buttongroup .dx-button .dx-button-content { padding: 0 14px; } .vue-ereporting.dx-buttongroup .dx-button.dx-item-selected { border-color: var(--color-primary-surface) !important; background-color: var(--color-primary-border-inverted) !important; color: var(--color-primary-surface) !important; font-weight: 500; } .vue-ereporting.dx-buttongroup .dx-buttongroup-first-item { border-radius: 24px 0 0 24px !important; } .vue-ereporting.dx-buttongroup .dx-buttongroup-last-item { border-radius: 0 24px 24px 0 !important; } /*========================================================================== Barre de filtres e-reporting : mode simple ou avancé, puces de rubriques, regroupement ==========================================================================*/ .barre-filtres-ereporting { flex-wrap: wrap; align-items: center; row-gap: 8px; } .filtres-avances-ereporting { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; } .puce-filtre-ereporting { display: inline-flex; align-items: center; gap: 2px; padding: 2px 4px 2px 10px; border-radius: 12px; background: var(--color-primary-border-inverted); color: var(--color-primary-surface); font-size: 12px; white-space: nowrap; } .puce-filtre-ereporting__retirer { border: 0; background: none; color: inherit; cursor: pointer; font-size: 15px; line-height: 1; padding: 0 4px; } .groupement-courant { font-weight: 600; color: var(--color-primary-surface); } .dg-ereporting .dx-group-row td { background: #f6f7f9; } .groupe-ereporting { display: inline-flex; align-items: baseline; gap: 12px; } .groupe-ereporting__libelle { font-weight: 600; } .groupe-ereporting__compte { font-size: 12px; color: #5d6375; } .groupe-ereporting__a-transmettre { padding: 0 6px; border-radius: 8px; font-size: 11px; background: #e8f5e9; color: #2e7d32; } /*========================================================================== Retraits du dépôt e-reporting : cellule de synthèse et lignes de détail ==========================================================================*/ .cellule-flux-montant--retire a { color: #8a5a00; font-style: italic; } .ligne-retiree-ereporting td { color: #9a9a9a; } .ligne-retiree-ereporting td.cell-montant { text-decoration: line-through; } .etat-retrait-ereporting { padding: 0 6px; border-radius: 8px; font-size: 11px; background: #fff4e5; color: #8a5a00; cursor: help; } .dx-data-row .btn-add-virement-dg.btn-reintegrer-ereporting { visibility: visible; opacity: 1; } .bandeau-retraits-ereporting { margin: 4px 12px 8px; padding: 8px 10px; border-left: 3px solid #f0a020; border-radius: 4px; background: #fff8ec; color: #6b4a00; font-size: .85em; } /*========================================================================== Popup de détail e-reporting : factures B2C TURBO et encaissements du mois ==========================================================================*/ .bloc-factures-turbo { margin: 4px 12px 12px; padding: 8px 12px 10px; border: 1px solid #d6d9e0; border-radius: 6px; background: #fafbfc; } .bloc-factures-turbo__entete { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .bloc-factures-turbo__titre { font-weight: 600; } .bloc-factures-turbo__total { font-size: 12px; white-space: nowrap; } .bloc-factures-turbo__aide { margin: 4px 0 6px; font-size: .8em; color: #5d6375; } .titre-saisies-caisse-ereporting { margin: 8px 12px 0; font-weight: 600; } .bandeau-mois-entier-ereporting { margin: 4px 12px 8px; padding: 8px 10px; border-left: 3px solid #2f6fd6; border-radius: 4px; background: #f4f7fd; color: #1a3d78; font-size: .85em; } /* ============================================================================= * 12. ANIMATIONS * ========================================================================== */ @keyframes circle-anim { 0% { stroke-dashoffset: 280; transform: rotate(0deg); } 50% { stroke-dashoffset: 75; transform: rotate(45deg); } 100% { stroke-dashoffset: 280; transform: rotate(360deg); } } @keyframes spin-anim { 100% { transform: rotate(360deg); } } /* ============================================================================= * Header : Logos + Breadcrumb (gauche) + Sélecteurs & Actions (droite) * ----------------------------------------------------------------------------- * Layout : * [LogoZone 250/90px] | [Breadcrumb ← flex:1 →] [Sélecteurs | Notifs | Profil | Out] * ========================================================================== */ /* ── Zone logos (alignée avec le sidebar) ── */ .headerLogoZone { display: flex; align-items: center; justify-content: center; gap: 8px; width: 250px; min-width: 250px; height: 64px; transition: width 0.3s ease, min-width 0.3s ease; overflow: hidden; flex-shrink: 0; box-sizing: border-box; padding: 0 12px; } .headerLogoZone--collapsed { width: 90px; min-width: 90px; } .headerLogoZone-banque { display: flex; align-items: center; flex-shrink: 0; } .headerLogoZone-banque .headerLogoBanque { max-height: 50px; margin: 0; float: none; } .headerLogoZone-produit { display: flex; align-items: center; overflow: hidden; opacity: 1; max-width: 200px; transition: opacity 0.25s ease, max-width 0.3s ease; width: 200px; } .headerLogoZone-produit--hidden { opacity: 0; max-width: 0; pointer-events: none; } .headerLogoZone-produit .headerLogoProduit { max-height: 48px; max-width: 180px; padding: 4px 0; height: auto; } /* ── Zone centrale : Breadcrumb seul, flex:1 pour pousser headerRight ── */ .headerCenter { display: flex; align-items: center; flex: 1; min-width: 0; height: 64px; padding-left: 16px; /*border-left: 1px solid #E1E1E1;*/ } /* ── Fil d'Ariane ── */ .headerBreadcrumb { display: flex; align-items: center; white-space: nowrap; font-family: Ubuntu, sans-serif; font-size: 16px; font-weight: 400; color: #232323; flex-shrink: 0; } .headerBreadcrumb-item { display: inline-flex; align-items: center; } .headerBreadcrumb-separator { display: inline-block; margin: 0 6px; font-size: 18px; color: #ACACAC; font-weight: 300; } .headerBreadcrumb-parent { font-size: 24px; color: #232323; } .headerBreadcrumb-current { font-weight: 300; font-size: 24px; color: #232323; position: relative; top: 1px; } /* ── Sélecteurs dans le headerRight ── */ .headerSelectors { display: flex; align-items: center; padding-right: 16px; border-right: 1px solid #ACACAC; height: 32px; } /*.headerSelector--reactGlobalInfoComptes .headerSelectors { height: 48px; }*/ .headerSelectors .header-label { margin-top: 0; margin-bottom: 0; line-height: 1; display: none; } .headerSelectors .dropdownSelectGroupe { gap: 8px; margin-right: 120px; } .headerSelectors .selectbox-with-icon .dx-placeholder { padding-left: 24px; padding-top: 2px; } .headerSelectors .selectbox-with-icon .dx-texteditor-input { padding-left: 35px; } } /* ── Masquer l'ancien .pageTitle vide ── */ .pageTitle:empty { display: none; } /* ============================================================================= * Header Solde Compte — Affichage compact du solde dans le header * ========================================================================== */ .headerSolde { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; padding-left: 16px; height: 48px; flex-shrink: 0; font-family: Ubuntu, sans-serif; min-width: 200px; box-sizing: border-box; } .headerSolde-montant { font-size: 24px; font-weight: 500; letter-spacing: -0.3px; line-height: 1; white-space: nowrap; transition: opacity 0.2s ease; } .headerSolde-date { font-size: 11px; font-weight: 400; color: #8a8a8a; margin-top: 3px; white-space: nowrap; } .headerSolde-centimes { font-size: 14px; font-weight: 400; } .headerSolde-devise { font-size: 14px; font-weight: 400; margin-left: 4px; } /* Couleurs */ .headerSolde--green { color: #008234; } .headerSolde--orange { color: #E67E00; } .headerSolde--red { color: #D32F2F; } /* Loading shimmer */ .headerSolde-loading { display: inline-block; width: 100px; height: 20px; border-radius: 4px; background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: headerSolde-shimmer 1.2s ease-in-out infinite; } @keyframes headerSolde-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .headerSolde-error, .headerSolde-empty { font-size: 16px; color: #ACACAC; } @media screen and (max-width: 1366px) { .headerSolde-montant { font-size: 16px; } .headerSolde-centimes, .headerSolde-devise { font-size: 12px; } .headerSolde-date { font-size: 10px; } .headerButton span { display: none; } .headerBadge-count { display: block; } } /* ============================================================================= * Compte Dropdown — Sélecteur de compte compact 2 lignes pour le header * ========================================================================== */ .compteDropdown { min-width: 280px; } .compteDropdown .dx-dropdowneditor-icon { height: 32px; } /* ── Champ fermé : logo + 2 lignes ── */ .compteField { display: flex; align-items: center; gap: 10px; padding: 4px 0 4px 4px; height: 100%; } .compteField-logo { width: 36px; height: 36px; border-radius: 50%; object-fit: contain; flex-shrink: 0; } .compteField-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; } /* ── TextBox intégré comme nom du compte (sert aussi de champ de recherche) ── */ .compteField-input { border: none !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; min-height: unset !important; height: auto !important; } .compteField-input .dx-texteditor-input { font-family: Ubuntu, sans-serif; font-size: 14px; font-weight: 500; color: #232323; padding: 0 !important; height: auto !important; min-height: unset !important; line-height: 1.2; } .compteField-input .dx-texteditor-input-container { height: auto !important; } .compteField-input.dx-state-focused { border: none !important; box-shadow: none !important; } .compteField-banque { font-family: Ubuntu, sans-serif; font-size: 11px; font-weight: 400; color: #8a8a8a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── SelectBox : hauteur adaptée 2 lignes ── */ .compteSelectBox { height: 48px !important; } .compteSelectBox .dx-texteditor-input-container { height: 48px; } .compteSelectBox .dx-placeholder::before { padding: unset !important; } /* ── Responsive ── */ @media screen and (max-width: 1366px) { .compteDropdown { min-width: 220px; } .compteField-logo { width: 28px; height: 28px; } .compteField-input .dx-texteditor-input { font-size: 13px; } .compteField-banque { font-size: 10px; } .compteSelectBox { height: 42px !important; } } body { font-family: Ubuntu; } #background { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: url("Images/bp_2019.jpg") 0 0 no-repeat; background-size: cover !important; -moz-background-size: cover !important; -webkit-background-size: cover !important; /* background:url("Images/Banques/BPvoile2.jpg") -25px -50px; position:fixed ; top:0; width:100%; z-index:0; height:100%; background-size: calc(100% + 50px); */ } #error-browser { position: absolute; width: 360px; left: 50%; margin-left: -180px; top: 50%; height: 200px; background: rgba(255, 255, 255, 0.95); margin-top: -150px; color: black; font-size: 105%; } a { text-decoration: none; } .menu-box { position: relative; height: 50px; background: #43508f; width: 100%; color: White; margin-bottom: 10px; font-size: 14px; } .menu-box h1 { float: left; margin-bottom: 30px; line-height: 50px; } .logo-banque { background-image: url('Images/logo_bp.png'); } .menu-item { position: relative; height: 50px; background: #43508f; float: right; line-height: 65px; padding: 0 15px; cursor: pointer; margin: 0 5px; } .menu-file { background: #16A085; } .menu-mail { background: #F39C12; } .menu-item:hover img { top: 3px; opacity: 1; } .menu-item img { position: relative; top: 0px; z-index: 1; } .pour-mobile { display: none; } .opac { opacity: 0.7; } .loaderIntro { position: absolute; left: 0; margin-left: 55px; margin-top: 10px; } .loaderLoginIntro { position: absolute; bottom: 50px; left: 50%; margin-left: -80px; width: 180px; text-align: center; color: #0072c6; font-size: larger; /*background: white;*/ padding-top: 20px; } .alert { position: absolute; width: 20px; height: 20px; line-height: 20px; border-radius: 10px; background: #34495E; color: rgb(228, 228, 228); right: 4px; top: 4px; opacity: 1; text-align: center; z-index: 2; } .logoBanqueLogin { position: relative; top: 0px; height: 85px; margin-bottom: 20px; display: none; } .logo { position: relative; right: 5px; margin-bottom: 10px; } #login-sem { text-align: center; background: rgba(255, 255, 255, 0.95); } #strongAuth { position: absolute; top: 5px; margin: 10px; padding: 5px 10px; width: 350px; z-index: 2; color: rgb(77, 77, 77); background: rgb(249, 255, 171); left: 50%; margin-left: -175px; border-radius: 2px; } .container-login-form { position: absolute; top: 45%; height: 340px; width: 515px; font-size: 16px; z-index: 1; transform: scale(1); } .container-login-onglet { position: absolute; height: 440px; width: 515px; left: 50%; margin-left: -250px; margin-top: -250px; top: 50%; font-size: 14px; z-index: 0; transform: scale(1); } .error-send-email-reset { color: red; margin: 0 6px; font-weight: 800; } .send-email-reset, .annuler-reset { padding: 2px 10px; } .loading-reset { position: relative; top: 5px; } .container-recover-password { top: 50%; margin-top: -115px; min-height: 230px; } .container-forms, .container-recover-password { position: relative; width: inherit; min-height: 400px; background: rgb(255, 255, 255); color: black; } .block_row { margin-top: 45px; } .first-login-form { position: relative; float: left; width: 475px; min-height: 325px; max-height: 325px; margin: 50px 20px 0px; padding: 5px; text-align: center; animation: blowUpContent 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } .second-login-form { position: relative; float: left; width: 475px; min-height: 325px; max-height: 325px; margin: 50px 20px 0px; padding: 5px; text-align: center; } .third-login-form { position: relative; float: left; width: 475px; min-height: 325px; max-height: 325px; margin: 50px 20px 0px; padding: 5px; text-align: center; } .fourth-login-form { position: relative; float: left; width: 475px; min-height: 325px; max-height: 325px; margin: 50px 20px 0px; padding: 5px; text-align: center; } h2#title-choix { margin: 10px 0 -38px 0; } .separator-login-form { position: relative; float: left; width: 1px; text-align: center; min-height: 330px; padding-top: 15px; } .sep { position: relative; border-left: 1px solid #ececec; height: 290px; } .ou-text { position: absolute; top: 50%; height: 20px; margin-top: -20px; font-size: larger; left: -10px; background: white; padding: 10px 0; display: none; } .header-form { color: white; padding: 10px; font-size: 14px; } .logo { position: absolute; top: -110px; opacity: 0.8; } .login1 { position: relative; float: right; margin-right: 40px; } .login2 { max-width: 78px; position: relative; } .login2-large-icon { max-width: 128px; position: relative; } .login3 { max-width: 250px; position: relative; } .loginCert, .inputBP { width: 180px; border: none; font-size: 13px; color: white; padding: 7px; top: 20px; cursor: pointer; -webkit-appearance: none !important; } .loginCert:hover, .inputBP:hover { opacity: 0.7; } .input-form { height: 32px; /*line-height: 100% !important;*/ font-size: 14px; border: none; background-image: none; background-repeat: no-repeat; background-position: left center; margin: 8px 0; border: 1px solid #BDC3C7; width: 320px; } .input-form-email { border-radius: 4px; border: 1px solid #ACACAC; width: -webkit-fill-available; height: 40px; box-sizing: border-box; } .input-form-password { border-radius: 4px; border: 1px solid #ACACAC; width: -webkit-fill-available; height: 40px; box-sizing: border-box; } .input-form-phone { background-image: url("Images/Telephone-login.png") !important; } .input-form-name { background-image: url("Images/user-login.png") !important; } .input-form-iban { background-image: url("Images/Debit-Card-32.png") !important; } .input-form-code { background-image: url("Images/user-login.png") !important; } .input-form-rs { background-image: url("Images/Raison-Sociale.png") !important; } .input-form-adresse { background-image: url("Images/Home-32.png") !important; } .input-form-3skey { background-image: url("Images/Swift-32.png") !important; border-radius: 4px; } .input-form-certeurope { background-image: url("Images/InfoCert-32.png") !important; border-radius: 4px; } #Cloud3SKeyIdentifiant { width: 100%; border: 1px solid #ACACAC; font-size: 14px; } #CloudCertEuropeIdentifiant { width: 100%; border: 1px solid #ACACAC; font-size: 14px; } .input-form-certeurope { background-image: url("Images/InfoCert-32.png") !important; } .input-validation-error { border: 1px solid red !important; } .input-form:focus { border: 1px solid #0072c6; color: #5E5E5E; } .input-form-cp { width: 50px; margin: 0; height: 28px; padding: 0 5px; left: -3px; position: relative; margin-right: 2px; } .loader-content { position: relative; margin-left: 40%; margin-top: 10%; } .select-soc { position: relative; padding: 10px 20px; background: #f1f1f1; margin: 10px 0; box-shadow: 0 2px 2px rgb(213, 213, 213); } .select-soc:hover { background: #BABABA; cursor: pointer; } .details-select-soc { position: absolute; padding: 5px 7px; margin-top: 4px; transform: translateY(-30px); z-index: 2; background: transparent; left: 445px; font-size: 11px; height: 30px; opacity: 0; transition: opacity 0.3s, left 0.3s; } .select-soc:hover .details-select-soc, .soc-selected .details-select-soc { display: block; left: 345px; opacity: 1; } .soc-selected { background: #0072c6 !important; color: white; } .my-button-confirmer { padding: 4px 8px; margin: 4px 0; width: 60px; display: block; text-align: center; background: #0072c6; color: #fff; border-radius: 4px; } .my-button-confirmer-cyber { padding: 4px 8px; margin: 4px 0; width: 60px; display: block; text-align: center; background: #0072c6; color: #fff; } .my-button-confirmer-cloudsignature { padding: 4px 8px; margin: 4px 0; width: 60px; display: block; text-align: center; background: #0072c6; color: #fff; } .loader-cert { text-align: center; } .loading-user { position: relative; bottom: 0; font-size: 12px; color: #0072c6; } .loading-user img { width: 32px; margin: 0 15px; } .error-detection { color: red; font-size: smaller; } .btn-double-auth { padding: 3px 9px; font-size: 13px; margin: auto; position: absolute; bottom: 10px; text-align: center; display: block; margin-left: -70px; left: 50%; width: 140px; } .details-sem { color: black; width: 100%; text-align: left; font-size: small; margin-bottom: 10px; margin-top: 10px; } .details-sem tr { line-height: 24px; } .details-sem td.message { font-size: smaller; font-weight: 800; } .error-perso { display: block; font-size: 11px; color: red; padding: 0 10px; } ul.options-constructeurs { list-style: none; position: relative; width: -webkit-fill-available; max-height: 200px; overflow-y: auto; border: 1px solid #ACACAC; z-index: 1; border-radius: 4px; margin-left: 0; } ul.options-constructeurs li { padding: 4px 10px; font-size: 14px; height: 24px; line-height: 24px; } ul.options-constructeurs li:hover { background: lightgray; cursor: pointer; } ul.options-constructeurs li:hover span { } ul.options-constructeurs li span { display: block; font-size: smaller; color: gray; margin: 3px 0; } ul.options { list-style: none; position: relative; width: -webkit-fill-available; max-height: 200px; overflow-y: auto; border: 1px solid #ACACAC; z-index: 1; border-radius: 4px; margin-left: 0; margin-top: 0px; } ul.options li { padding: 4px 10px; font-size: smaller; color: @colorDefault; } ul.options li:hover { background: lightgray; cursor: pointer; } ul.options li:hover span { } ul.options li span { display: block; font-size: smaller; color: gray; margin: 3px 0; } .combo-banques { border: 1px solid #ACACAC; padding: 5px; text-align: center; position: relative; color: black; border-radius: 4px; height: 40px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; } .combo-banques .img-arrow { position: absolute; right: 10px; opacity: 0.35; } .combo-banques:hover .img-arrow { opacity: 0.5; } .combo-banques:hover { color: @colorDefault; border-color: @colorDefault; cursor: pointer; } .combo-infras { border: 1px solid #ACACAC; padding: 5px; text-align: center; position: relative; color: black; height: 40px; display: flex; align-items: center; justify-content: center; margin-top: 24px; box-sizing: border-box; border-radius: 4px; } .combo-infras .img-arrow { position: absolute; right: 10px; opacity: 0.35; } .combo-infras:hover .img-arrow { opacity: 0.5; } .combo-infras:hover { color: @colorDefault; border-color: @colorDefault; cursor: pointer; } .combo-constructeurs { border: 1px solid #ACACAC; padding: 5px; text-align: center; margin: auto; color: black; width: 100%; border-radius: 4px; height: 40px; box-sizing: border-box; } .cloud-menu { text-align: center; } .combo-constructeurs .img-arrow { position: absolute; right: 10px; opacity: 0.35; margin-top: 2px; } .combo-constructeurs:hover .img-arrow { opacity: 0.5; } .combo-constructeurs:hover { color: @colorDefault; border-color: @colorDefault; cursor: pointer; } .ligne { position: relative; left: 140px; } /* Chrome, Safari, Opera */ @-webkit-keyframes myfirst { from { opacity: 0; } to { opacity: 1; } } /* Standard syntax */ @keyframes myfirst { from { opacity: 0; top: 0px; } to { opacity: 1; top: 0px; } } .field-validation-error { color: red; font-size: smaller; } /* Chrome, Safari, Opera */ @-webkit-keyframes myfirst2 { from { opacity: 0; } to { opacity: 1; } } /* Standard syntax */ @keyframes myfirst2 { from { opacity: 0; } to { opacity: 1; } } .logo-sem-connexion { position: absolute; left: 10px; margin-top: -50px; } .first-login-form.mode-connexion, .first-login-button.mode-connexion, .third-login-button.mode-connexion { transform: scale(0.95) translateX(10px); opacity: 0.4; } .second-login-form.mode-connexion, .second-login-button.mode-connexion, .fourth-login-button.mode-connexion { transform: scale(0.95) translateX(-10px); opacity: 0.4; } .first-login-form.mode-connexion-hover, .first-login-button.mode-connexion-hover, .third-login-button.mode-connexion-hover { transform: scale(1) translateX(10px); opacity: 1; } .second-login-form.mode-connexion-hover, .second-login-button.mode-connexion-hover, .fourth-login-button.mode-connexion-hover { transform: scale(1) translateX(-10px); opacity: 1; } .btn-connection { font-size: smaller; width: -webkit-fill-available; height: 40px; background-color: var(--color-primary-surface); color: white; font-size: 16px; font-weight: 500; font-family: Ubuntu; border-radius: 4px; } .container-connexion2 { position: relative; top: -25px; } .text-connectezvous-mobile { display: none; position: relative; top: 20px; } #connexionError { background: rgba(255,255,255,0.94); color: black; text-align: center; position: absolute; margin-top: 10%; width: 100%; margin-bottom: 10%; } .widget-cyberseo { border: 1px solid lightgray; width: 350px; margin: 20px auto; background: #e4e4e4; } .liensiteseo { display: block; opacity: 0.7; transform: scale(0.90); cursor: pointer; } .liensiteseo:hover { transform: scale(1); opacity: 1; } .menu-mode-connexion { margin: auto; width: 99%; } .menu-mode-connexion .row { /*overflow: auto;*/ } .menu-mode-connexion .row .logo-connexion { display: block; width: 250px; height: 200px; cursor: pointer; } .menu-mode-connexion .row .logo-connexion-left { float: left; } .menu-mode-connexion .row .logo-connexion-right { float: right; } .menu-mode-connexion .row .logo-connexion .logo-accueil { width: 130px; position: absolute; left: 20%; top: 10%; } .menu-mode-connexion .row .logo-connexion .logo-accueil.logo-sem { } .menu-mode-connexion .row .logo-connexion .logo-accueil.logo-cert { left: 25%; } .menu-mode-connexion .row .logo-connexion .logo-accueil.logo-cyber { width: 175px; left: 13%; } .menu-mode-connexion .row .logo-connexion .logo-accueil.logo-cenet { width: 165px; left: 10%; top: 35%; } .menu-mode-connexion .row .logo-connexion .logo-accueil.logo-ccoop { width: 125px; left: 13%; top: 10%; } .menu-mode-connexion .row .logo-connexion .logo-accueil.logo-btp { width: 125px; left: 17%; top: 11%; } .menu-mode-connexion .row .logo-connexion .logo-accueil.logo-palatine { width: 125px; left: 17%; top: 11%; } .menu-mode-connexion .row .logo-connexion .logo-accueil.logo-fido { width: 80px; left: 35%; top: 23%; } .menu-mode-connexion .row .logo-connexion .title-accueil-button { position: absolute; top: 140px; font-size:15px; } .menu-mode-connexion .row .logo-connexion .title-accueil-button.title-sem { left: 70px; } .menu-mode-connexion .row .logo-connexion .title-accueil-button.title-cert { left: 62px; } .menu-mode-connexion .row .logo-connexion .title-accueil-button.title-cyber { left: 10px; } .menu-mode-connexion .row .logo-connexion .title-accueil-button.title-cenet { left: 36px; } .menu-mode-connexion .row .logo-connexion .title-accueil-button.title-ccoop { left: 55px; } .menu-mode-connexion .row .logo-connexion .title-accueil-button.title-btp { left: 55px; } .menu-mode-connexion .row .logo-connexion .title-accueil-button.title-palatine { left: 55px; } .menu-mode-connexion .row .logo-connexion .title-accueil-button.title-fido { left: 90px; } .menu-mode-connexion .separator-login-button-horizontal { position: absolute; left: 15px; float: left; height: 1px; text-align: center; min-width: 150px; } .menu-mode-connexion .separator-login-button-horizontal.right { left: 290px } .menu-mode-connexion .separator-login-button-horizontal .sep-button { position: relative; border-top: 1px solid #ececec; width: 200px; } .menu-mode-connexion .row .separator-login-button-verti { position: relative; float: left; width: 1px; text-align: center; min-height: 150px; padding-top: 15px; } .menu-mode-connexion .row .separator-login-button-verti .sep-button { position: relative; border-left: 1px solid #ececec; height: 150px; } img.onglet-logo-mobile { width: 32px; } .onglet { background: white; position: absolute; left: -40px; top: 80px; padding: 5px; width: 6%; box-shadow: 0 0 5px grey; cursor: pointer; background: #f0f0f0; } .onglet span { font-size: 12px; color: black; margin: 0 25px; } .onglet.secondogl { top: 130px; } .onglet.thirdogl { top: 180px; } .onglet.fourthogl { top: 230px; } .selectionned { background: white; } .hiddenRight { opacity: 0; transform: translateX(40px); } .showLeft { opacity: 1; transform: translateX(0px); } div#retour-menu { position: relative; top: -25px; left: 360px; font-size: 12px; cursor: pointer; height: 15px; width: auto; } } .wrapper-info-cyber { position: relative; width: 280px; height: 170px; } #connexionError .icon-bp-cyber { position: absolute; bottom: 50px; left: 70px; } .card-activation:hover { background: #0072c6; box-shadow: 0px 0px 5px #cacaca; cursor: pointer; } .card-activation { background: #dcdcdc; font-size: smaller; } .card-to-animate { position: absolute; bottom: 10px; background: #f0f0f0; font-size: smaller; width: 114px; height: 106px; } .card-to-animate-cert { right: 5px; } .card-to-animate-sem { left: 5px; } .card-to-animate .content-card { top: -30px; opacity: 0; padding: 10px 20px; } .card-imgok { opacity: 0; transform: translateZ(-30px); width: 32px; } .connforteOk1, .connforteOk2 { transition: all 0.3s ease-in-out; opacity: 0; } .connforteOk1 { transform: scale(0.7); } .connforteOk2 { transform: translateY(35px); } @-webkit-keyframes shake { 0%, 100% { -webkit-transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-6px); } 20%, 40%, 60%, 80% { -webkit-transform: translateX(6px); } } @-moz-keyframes shake { 0%, 100% { -moz-transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -moz-transform: translateX(-6px); } 20%, 40%, 60%, 80% { -moz-transform: translateX(6px); } } @keyframes shake { 0%, 100% { -ms-transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -ms-transform: translateX(-6px); } 20%, 40%, 60%, 80% { -ms-transform: translateX(6px); } } @-o-keyframes shake { 0%, 100% { -o-transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -o-transform: translateX(-6px); } 20%, 40%, 60%, 80% { -o-transform: translateX(6px); } } input.shake { -webkit-animation-name: shake; -moz-animation-name: shake; -ms-animation-name: shake; -o-animation-name: shake; animation-name: shake; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; } @keyframes shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); } 20%, 40%, 60%, 80% { transform: translateX(10px); } } @media only screen and (min-width : 1281px) and (max-width : 1366px) { .first-login-form { /*margin-top: -5px;*/ } .loaderLoginIntro { bottom: 75px; left: 235px; padding: 0; } .sep { height: 250px; } .logo-sem-connexion { left: 0px; width: 112px; } .container-login-form { /*width: 850px; height: 400px; overflow: hidden; margin-left: -425px;*/ } .login2 { width: 112px; } .input-form { width: 250px; font-size: 13px; height: 28px; } } @media only screen and (min-width : 1024px) and (max-width : 1280px) { .container-connexion2 { position: relative; top: -5px; } .loaderLoginIntro { bottom: 80px; left: 180px; padding: 0; } .sep { height: 240px; } /*.container-connexion { }*/ .text-connectezvous { margin: 15px 0 5px; } .logo-sem-connexion { width: 86px; } .text-descr { font-size: 16px; color: #666666; text-align: center; } .container-login-form { /*width: 700px; height: 370px; overflow: hidden; margin-left: -350px; margin-top: -220px; font-size: 13px;*/ } .login2 { width: 100px; } .input-form { width: 220px; font-size: 12px; height: 26px; } .first-login-form, .second-login-form { /*margin: 0; padding: 0 2%; border-right: none; padding-top: 10px;*/ } /*.loginCert, .inputBP { font-size: 12px; padding: 5px; }*/ .loaderIntro { margin: 10px 0 0px 25px; } .footer-login p { margin: 5px 0; } } @media only screen and (min-width : 801px) and (max-width : 1023px) { .sep { height: 220px; } .container-connexion2 { position: relative; top: 5px; padding-left: 15px; } .text-connectezvous { margin: 15px 0 5px; } .logo-sem-connexion { position: absolute; left: 0px; margin-top: -35px; width: 60px; } .text-descr { font-size: 11px; } .container-login-form { /*width: 550px; height: 350px; overflow: hidden; margin-left: -275px; margin-top: -210px; font-size: 12px;*/ } /*.text-descr { display: none; }*/ .login2 { width: 80px; } .input-form { width: 170px; height: 24px; font-size: 11px; } .first-login-form, .second-login-form { /*margin: 0; padding: 0 2%; border-right: none; padding-top: 5px;*/ } .loginCert, .inputBP { width: 170px; font-size: 11px; padding: 5px; } .loaderIntro { width: 24px; margin-left: 10px; } .footer-login p { margin: 4px 0; } } @media only screen and (min-width : 0px) and (max-width : 800px) { .first-login-form.mode-connexion { transform: scale(1) translateX(0px); opacity: 1; transition-delay: 0s; } .text-connectezvous { margin: 0px 0 0px; padding-top: 20px; } .logo-sem-connexion, .text-descr, .text-connectezvous, .separator-login-form, .footer-liens, .header-form, .second-login-form { display: none; } .text-connectezvous-mobile { display: block; } .loaderLoginIntro { bottom: 15px !important; padding: 0; font-size: 14px; } .container-login-form { /*width: 290px; margin-left: -145px; font-size: 15px; height: 370px; margin-top: -220px;*/ } .container-forms { height: 370px; } .pour-mobile { display: initial; } .aide { font-size: 12px; } .login2 { width: 100px; } .input-form { width: 270px; height: 26px; font-size: 13px; } div#retour-menu { top: -55px; } .first-login-form { width: 400px; margin: 10px 0; } .loginCert, .inputBP { width: 170px; font-size: 13px; padding: 5px; } .loaderIntro { width: 24px; margin-left: 10px; } .footer-login p { margin: 4px 0; } .footer-login { font-size: 10px !important; } .first-login-form { width: 100%; margin: 0 !important; padding: 15px 0 !important; } .input-form { width: 185px !important; height: 28px; font-size: 14px; } } #lien-publicite-produit { display: flex; flex-direction: column; align-content: center; justify-content: center; align-items: center; margin-top: 20px; font-style: italic; } #lien-publicite-produit-content{ } #lien-publicite-link{ text-decoration: underline; color: blue; } #install-chrome .bottomButtons { margin-top: 32px; display: flex; flex-direction: row; /* boutons les uns sous les autres */ align-items: center; gap: 8px; /* espace entre les boutons */ } .div-popup-login-sem { display: flex; min-width: 450px; margin-bottom: 10px; align-items: center; justify-content: center; flex-direction: column; } /* style générique des boutons */ #install-chrome .bottomButtons button { width: 260px; padding: 10px 16px; border-radius: 4px; border: 1px solid #ccc; font-size: 14px; cursor: pointer; transition: background .15s, color .15s, border-color .15s, box-shadow .15s; } #PopupLoginSEM_PWC-1 { padding: 10px; padding-top: 25px; } #PopupLoginSEM_PWH-1T { font-size: 15px !important; height: 26px !important; } #PopupLoginSEM_HCB-1 {/* position: relative; *//* top: -15px; *//* right: 20px; */display: block !important;position: absolute;top: 0px;right: 0px;} #PopupLoginSEM_PWH-1 { position: relative; /* left: 25px; */ top: 5px; display: none; } #popup-login-sem-titre {font-size: 32px;margin-bottom: 30px;font-family: 'Ubuntu';font-style: normal;font-weight: 500;font-size: 24px;line-height: 31px;text-align: center;letter-spacing: -0.46px;font-weight: 400;} #popup-login-sem-sous-titre { font-family: 'Ubuntu'; font-style: normal; font-weight: 400; font-size: 16px; line-height: 24px; display: flex; align-items: center; letter-spacing: -0.18px; color: #000000; margin-top: 30px; } #popup-skip-semauth {margin-left: 10px;} #popup-login-sem-retourner-accueil {/* margin-right: 15px; */} #popup-sem-bottom-buttons{ position: relative; bottom: -5px; right: -155px; display: flex; width: 200px; justify-content: right; } .details-sem { display: flex; flex-direction: column; gap: 10px; } .auth-card { border: 1px solid #d0d0d0; border-radius: 8px; padding: 10px 12px; background-color: white; box-shadow: 0 1px 2px rgba(0,0,0,0.05); width: 400px; } .auth-card .row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid #e0e0e0; } .auth-card .row:last-child { border-bottom: none; } .auth-card .label { font-weight: 600; color: #333; } .auth-card .value { display: flex; align-items: center; gap: 8px; color: #444; } .auth-card .etape { font-size: 12px; padding: 2px 6px; background-color: #e6f0ff; color: #0366d6; border-radius: 8px; border: 1px solid #C3DEFF; } #neo-loader-success { } #neo-loader-success-img {width: 65px;} #neo-loader-ko { } #neo-loader-ko-img {width: 65px;} .popup-login-sem-content { margin-bottom: 10px; max-height: 300px; overflow-y: auto; } /*End Compteselector*/ /* Begin PopupStyles.css */ /*.dxpc-header { height: 60px !important; } .dxpc-headerContent { line-height: 40px !important; } .dxpc-headerText { font-weight: 400 !important; font-size: 20px !important; }*/ #select-cloud-constructor{ text-align: center; width: 100%; padding: 5px; margin: 20px 0 10px 0; height: 40px; border-radius: 8px; } /* bouton principal */ #install-chrome .bottomButtons .btn-primary { background: #0072C6; border-color: #0072C6; color: #fff; font-weight: 600; } #install-chrome .bottomButtons .btn-primary:hover { box-shadow: 0 0 0 2px rgba(0,114,198,.2); } /* boutons secondaires */ #install-chrome .bottomButtons .btn-secondary, #install-chrome .bottomButtons .btn-tertiary { background: #fff; color: #333; } #install-chrome .bottomButtons .btn-secondary:hover, #install-chrome .bottomButtons .btn-tertiary:hover { background: #f3f3f3; } #install-chrome .bottomButtons input { width: 260px; padding: 10px 16px; border-radius: 4px; border: 1px solid #ccc; font-size: 14px; cursor: pointer; transition: background .15s, color .15s, border-color .15s, box-shadow .15s; } #install-chrome { width: 600px; max-width: 90vw; background: white; border-radius: 6px; box-shadow: 0 10px 28px rgba(0,0,0,0.25); box-sizing: border-box; padding: 24px 32px; /* Hauteur auto mais limitée */ max-height: 85vh; overflow-y: auto; } #install-chrome-content { box-sizing: border-box; } /* centrer la popup verticalement */ #install-chrome-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.3); z-index: 9999; } /*========================================================================================= Détails plateforme - popup de sélection Cloud Signature =========================================================================================*/ .container-popup-cloudsignature .details-select-soc { left: 335px; } .container-popup-cloudsignature .select-soc:hover .details-select-soc, .container-popup-cloudsignature .soc-selected .details-select-soc { left: 265px; }