diff --git a/Bootstrap_new/css/style_office.css b/Bootstrap_new/css/style_office.css index 7bfec23..a53b146 100644 --- a/Bootstrap_new/css/style_office.css +++ b/Bootstrap_new/css/style_office.css @@ -244,30 +244,26 @@ content-area { position: fixed; top: var(--header-height); left: var(--sidebar-width); - right: 0; + right: 24px; /* Au lieu de right: 0 */ z-index: 1000; - width: calc(100% - var(--sidebar-width)); /* Largeur dynamique */ - max-width: 1400px; /* Largeur max fixe */ - margin: 0 auto; + margin: 0 24px 0 0; /* Marge à droite */ padding: 0 24px; overflow-x: auto; height: 56px; display: flex; align-items: center; - transition: all var(--transition-speed) ease; + transition: left var(--transition-speed) ease; background: linear-gradient(135deg, #ffffff 0%, #fef8f7 100%); - transform: translateX(calc((100vw - min(100vw, 1400px)) / 2)); /* Centrage précis */ } .nav-tabs { display: flex; - gap: 4px; + gap: 8px; overflow-x: auto; - padding: 0; + padding: 8px 0; height: 100%; align-items: center; flex-wrap: nowrap; - width: 100%; } .nav-tab { @@ -301,67 +297,35 @@ content-area { font-size: 16px; } +@media (max-width: 1400px) { + .nav-bar { + right: 24px; + margin: 0 24px 0 0; + } +} + /* ============================================ CONTENT AREA - AJUSTÉ POUR LA NAV-BAR FIXE ============================================ */ .content-area { - padding: calc(var(--header-height) + 56px + 20px) 24px 24px 24px; + padding: calc(var(--header-height) + 56px + 16px) 24px 24px 24px; max-width: 1400px; margin: 0 auto; position: relative; - width: 100%; } /* ============================================ - CONTENT CARDS - HARMONISÉ AVEC NAV-BAR + CONTENT CARDS - AJUSTÉ POUR LA NAV-BAR FIXE ============================================ */ .content-card { background-color: white; - border-radius: 12px; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); - border: 1px solid rgba(183, 71, 42, 0.12); + border-radius: 8px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); + border: 1px solid var(--office-border); margin-bottom: 24px; overflow: hidden; - width: 100%; } -/* Bordure subtile en haut pour lier visuellement avec nav-bar */ -.content-card::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - height: 4px; - background: linear-gradient(90deg, var(--office-primary), #d15a3a, #ff7b5c); - opacity: 0.8; -} - -/* Ajustement pour responsive */ -@media (max-width: 1200px) { - .nav-bar { - left: var(--sidebar-collapsed); - width: calc(100% - var(--sidebar-collapsed)); - transform: translateX(calc((100vw - min(100vw, 1400px)) / 2)); - } - - .content-area { - padding-left: calc(var(--sidebar-collapsed) + 24px); - } -} - -/* Pour les écrans larges (au-delà de 1400px) */ -@media (min-width: 1400px) { - .nav-bar { - left: calc(50% - 700px + var(--sidebar-width) / 2); /* Centrage précis */ - right: auto; - width: calc(1400px - var(--sidebar-width)); - } - - .app-sidebar { - left: calc(50% - 700px); /* Sidebar aussi centrée */ - } -} .card-header { background-color: #fafafa; @@ -376,9 +340,7 @@ content-area { } .card-body { - padding: 28px; - background-color: #fefcfb; - min-height: 400px; + padding: 24px; } /* ============================================ @@ -751,6 +713,11 @@ content-area { right: -100%; } + .nav-bar { + left: var(--sidebar-collapsed); + right: 24px; + margin: 0 24px 0 0; + } } @@ -790,34 +757,19 @@ content-area { .nav-bar { left: 0; - width: 100%; padding: 0 16px; max-width: 100%; border-radius: 0; top: var(--header-height); - box-shadow: 0 2px 12px rgba(183, 71, 42, 0.1); - transform: none; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } - - .content-area { - padding: calc(var(--header-height) + 56px) 16px 16px 16px; - } - - .content-card { - border-radius: 8px; - margin: 0 0 16px 0; - } - - .card-body { - padding: 20px; - } -} -/* Correction pour éviter le débordement sur écrans étroits */ -@media (max-width: 1400px) { .nav-bar { - max-width: calc(100% - 48px); - transform: none; + left: 0; + right: 0; + margin: 0; + border-radius: 0; + padding: 0 16px; } } @@ -844,25 +796,4 @@ content-area { .app-sidebar::-webkit-scrollbar-thumb:hover, .context-body::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.4); -} - -/* ============================================ - STYLE DE SCROLLBAR POUR NAV-TABS - ============================================ */ -.nav-tabs::-webkit-scrollbar { - height: 4px; -} - -.nav-tabs::-webkit-scrollbar-track { - background: rgba(183, 71, 42, 0.05); - border-radius: 2px; -} - -.nav-tabs::-webkit-scrollbar-thumb { - background: rgba(183, 71, 42, 0.2); - border-radius: 2px; -} - -.nav-tabs::-webkit-scrollbar-thumb:hover { - background: rgba(183, 71, 42, 0.3); } \ No newline at end of file diff --git a/Vue/gabarit.php b/Vue/gabarit.php index c130fd9..6f6afa4 100755 --- a/Vue/gabarit.php +++ b/Vue/gabarit.php @@ -145,7 +145,7 @@ console.groupEnd(); - +