/* Pcfact — overrides charte Provence Cloud (v1.25 + thème bleu v1.28 + v1.30 thème global). */ :root { /* Thème vert (défaut, charte historique Provence Cloud) */ --pc-primary: #00897B; --pc-primary-dark: #00695C; --pc-primary-light: #4DB6AC; --pc-primary-ring: rgba(0, 137, 123, 0.35); --pc-slate: #37474F; --pc-slate-dark: #263238; --pc-accent-bg: #F5F5F5; } /* Thème bleu (azur Provence) — opt-in via data-theme="bleu" sur . */ body[data-theme="bleu"] { --pc-primary: #1565C0; --pc-primary-dark: #0D47A1; --pc-primary-light: #64B5F6; --pc-primary-ring: rgba(21, 101, 192, 0.35); --pc-slate: #1A2D3F; --pc-slate-dark: #102030; } body { font-family: "Roboto", "Liberation Sans", "DejaVu Sans", Arial, sans-serif; color: #263238; } /* ============================================================================ * Overrides Tailwind « teal-x / slate-x » vers variables de thème. * On préfixe par `body` pour garantir la spécificité contre les utilitaires * Tailwind pré-compilés. * ============================================================================ */ /* Header principal */ body header.bg-slate-800 { background: var(--pc-slate-dark); } /* Navigation principale avec sous-menus */ .pc-icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } [x-cloak] { display: none !important; } .pc-icon-sprite symbol, .pc-nav svg { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .pc-nav { position: relative; z-index: 30; } .pc-nav-bar { display: flex; align-items: center; gap: 0.25rem; min-height: 2.65rem; } .pc-nav-home, .pc-nav-trigger { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.15rem; padding: 0.45rem 0.7rem; border-radius: 0.375rem; color: #E2E8F0; line-height: 1.15; white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease; } .pc-nav-home:hover, .pc-nav-trigger:hover, .pc-nav-trigger[aria-expanded="true"] { background: rgba(255, 255, 255, 0.08); color: var(--pc-primary-light); } .pc-nav-group { position: relative; } .pc-nav-icon, .pc-nav-link svg { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; } .pc-nav-chevron { width: 0.9rem; height: 0.9rem; flex: 0 0 auto; opacity: 0.75; transition: transform 0.15s ease; } .pc-nav-trigger[aria-expanded="true"] .pc-nav-chevron { transform: rotate(180deg); } .pc-nav-menu { position: absolute; top: calc(100% + 0.35rem); left: 0; min-width: 14rem; padding: 0.35rem; background: #FFFFFF; color: #263238; border: 1px solid #DDE5EA; border-radius: 0.5rem; box-shadow: 0 14px 28px rgba(15, 23, 42, 0.18); /* z-index pour s'assurer que le menu actif reste au-dessus des cartes du dashboard ET des autres triggers de menu (pas de chevauchement visuel quand on passe d'un menu à l'autre). */ z-index: 50; } .pc-nav-menu-right { left: auto; right: 0; } .pc-nav-link { display: flex; align-items: center; gap: 0.6rem; min-height: 2.25rem; padding: 0.5rem 0.65rem; border-radius: 0.375rem; color: #334155; line-height: 1.2; } .pc-nav-link svg { color: var(--pc-primary-dark); } .pc-nav-link:hover { background: #EEF7F6; color: var(--pc-primary-dark); } /* Branding teal */ body .text-teal-300 { color: var(--pc-primary-light) !important; } body .text-teal-500 { color: var(--pc-primary) !important; } body .text-teal-600 { color: var(--pc-primary-dark) !important; } body .text-teal-700 { color: var(--pc-primary-dark) !important; } body .text-teal-800 { color: var(--pc-primary-dark) !important; } body .bg-teal-500 { background-color: var(--pc-primary) !important; } body .bg-teal-700 { background-color: var(--pc-primary) !important; } body .bg-teal-800 { background-color: var(--pc-primary-dark) !important; } body .hover\:bg-teal-700:hover { background-color: var(--pc-primary) !important; } body .hover\:bg-teal-800:hover { background-color: var(--pc-primary-dark) !important; } body .hover\:text-teal-300:hover { color: var(--pc-primary-light) !important; } body .focus\:ring-teal-500:focus { --tw-ring-color: var(--pc-primary-ring) !important; } body .focus\:border-teal-500:focus { border-color: var(--pc-primary) !important; } /* Bandeau-titre PCFACT (sous le header) */ .pc-banner { background: var(--pc-slate); color: #fff; padding: 1rem 1.5rem; display: flex; align-items: center; gap: 1rem; } .pc-banner img.logo { display: block; width: auto; height: auto; max-width: 7.5rem; max-height: 3rem; object-fit: contain; flex: 0 0 auto; } .pc-banner .titles { line-height: 1.15; } .pc-banner .brand { font-weight: 700; font-size: 1.4rem; letter-spacing: 0.04em; } .pc-banner .subbrand{ font-size: 0.9rem; opacity: 0.9; } .pc-banner .version { font-size: 0.7rem; opacity: 0.65; } /* Responsive : compacte le bandeau sur mobile (v1.35) */ @media (max-width: 767px) { .pc-nav-bar { display: block; padding-top: 0.45rem; padding-bottom: 0.5rem; } .pc-nav-home, .pc-nav-trigger { width: 100%; justify-content: flex-start; min-height: 2.45rem; padding: 0.6rem 0.5rem; } .pc-nav-chevron { margin-left: auto; } .pc-nav-group { margin-top: 0.15rem; } .pc-nav-menu, .pc-nav-menu-right { position: static; min-width: 0; margin: 0 0 0.35rem 1.75rem; padding: 0.2rem; background: rgba(15, 23, 42, 0.25); border: 1px solid rgba(148, 163, 184, 0.25); box-shadow: none; color: #E2E8F0; } .pc-nav-link { color: #E2E8F0; } .pc-nav-link svg { color: var(--pc-primary-light); } .pc-nav-link:hover { background: rgba(255, 255, 255, 0.08); color: #FFFFFF; } .pc-banner { padding: 0.5rem 0.75rem; gap: 0.5rem; } .pc-banner img.logo { max-height: 2rem; max-width: 5rem; } .pc-banner .brand { font-size: 1.05rem; } .pc-banner .subbrand { display: none; } .pc-banner .version { font-size: 0.65rem; } } /* Cartes dashboard avec bordure gauche teal */ .pc-card { background: #fff; border-left: 4px solid var(--pc-primary); border-radius: 0.5rem; box-shadow: 0 1px 2px rgba(0,0,0,0.06); padding: 1rem; } /* ============================================================================ * Composants Pcfact — source de vérité unique (plain CSS, plus de @apply). * .btn-*, .input, table.tbl : tout est défini ici, sans dépendre de la * compilation Tailwind d'utilitaires (le bloc