/* ============================================================ Ingest — thème back-office « Comptoir », famille de marques. TOUTES les couleurs viennent des variables --m-* injectées par config/marques.php (marqueCssVariables()) dans : la même feuille sert ingest (cuivre), incent (terracotta), x-haccp (bleu glacier), salaries (prune). Les valeurs ci-dessous ne sont que des REPLIS si l'injection manque. Sémantique réservée : --ok (conforme), --attention (tolérance), --critique (non conforme) — jamais des couleurs de marque. Boutons pilule, coins 16px (cartes) / 10px (champs), pas d'ombres lourdes. ============================================================ */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('../fonts/montserrat-latin.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/inter-latin.woff2') format('woff2'); } :root { /* Replis (marque ingest) — écrasés par le bloc :root injecté par le header */ --m-texte: #2E2015; --m-texte-doux: #7A6A5C; --m-fond: #FAF4EA; --m-carte: #FFFFFF; --m-encre: #33241A; --m-encre-2: #4A3527; --m-creme: #F7EFE2; --m-primaire: #9C4A17; --m-primaire-fonce: #7A3810; --m-secondaire: #3D5528; --ok: #3D5528; --attention: #E8A13C; --critique: #A3341B; /* Alias historiques (vues héritées d'incent) : pointent sur les --m-* */ --inc-primary: var(--m-primaire); --inc-primary-dark: var(--m-primaire-fonce); --inc-accent: var(--attention); --inc-ink: var(--m-texte); --inc-ink-2: var(--m-texte-doux); --inc-grey: var(--m-texte-doux); --inc-bg: var(--m-fond); --inc-bg-soft: #F1E3CF; --inc-bg-dark: var(--m-encre); --inc-bg-dark-2: var(--m-encre-2); --inc-cream: var(--m-creme); --inc-success: var(--ok); --inc-border: rgba(51, 36, 26, .12); /* Rampe de neutres chauds — UI denses (tableaux, formulaires) */ --inc-n0: #FFFFFF; --inc-n1: #FAF4EA; --inc-n2: #F1E3CF; --inc-n3: #E2D3BC; --inc-n4: #B9A992; --inc-n5: #8B7B69; --inc-n6: #6E5C4B; --inc-n7: #52443A; --inc-n8: #33241A; /* Rayons */ --inc-radius-carte: 16px; --inc-radius-champ: 10px; /* Bootstrap bridge */ --bs-primary: var(--m-primaire); --bs-link-color: var(--m-primaire); --bs-link-hover-color: var(--m-primaire-fonce); --bs-body-font-family: 'Inter', 'Segoe UI', Arial, sans-serif; --bs-body-color: var(--m-texte); --bs-border-radius: 10px; } body { background: var(--m-fond); color: var(--m-texte); font-family: 'Inter', 'Segoe UI', Arial, sans-serif; } h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 { font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif; font-weight: 700; color: var(--m-texte); } ::selection { background: var(--m-primaire); color: #fff; } /* ---------- Boutons (pilule) ---------- */ .btn { border-radius: 999px; font-weight: 600; } .btn-primary { --bs-btn-bg: var(--m-primaire); --bs-btn-border-color: var(--m-primaire); --bs-btn-hover-bg: var(--m-primaire-fonce); --bs-btn-hover-border-color: var(--m-primaire-fonce); --bs-btn-active-bg: var(--m-primaire-fonce); --bs-btn-active-border-color: var(--m-primaire-fonce); } .btn-outline-primary { --bs-btn-color: var(--m-primaire); --bs-btn-border-color: var(--m-primaire); --bs-btn-hover-bg: var(--m-primaire); --bs-btn-hover-border-color: var(--m-primaire); --bs-btn-active-bg: var(--m-primaire-fonce); --bs-btn-active-border-color: var(--m-primaire-fonce); } .btn-success, .btn-accent { --bs-btn-bg: var(--ok); --bs-btn-border-color: var(--ok); --bs-btn-hover-bg: #2F4220; --bs-btn-hover-border-color: #2F4220; --bs-btn-active-bg: #2F4220; --bs-btn-active-border-color: #2F4220; color: #fff; } .btn-warning { --bs-btn-bg: var(--attention); --bs-btn-border-color: var(--attention); --bs-btn-hover-bg: #CE8A26; --bs-btn-hover-border-color: #CE8A26; color: var(--m-texte); } .btn-danger { --bs-btn-bg: var(--critique); --bs-btn-border-color: var(--critique); --bs-btn-hover-bg: #7E2814; --bs-btn-hover-border-color: #7E2814; } /* ---------- Topbar ---------- */ .inc-topbar { background: var(--m-carte); border-bottom: 1px solid var(--inc-border); } .inc-logo-app svg, .inc-logo-app img { height: 34px; width: auto; display: block; } .inc-selecteur-etab .form-select { border-radius: 999px; padding-top: .25rem; padding-bottom: .25rem; font-size: .85rem; background-color: var(--inc-n1); border-color: var(--inc-n3); max-width: 260px; } /* ---------- Sidebar encre ---------- */ .sidebar { min-height: calc(100vh - 56px); background: linear-gradient(180deg, var(--m-encre) 0%, var(--m-encre-2) 100%); border-right: none; } .sidebar .nav-link { color: var(--inc-n4); border-radius: 10px; margin: 0 .5rem; padding: .45rem .75rem; } .sidebar .nav-link:hover { color: #fff; background: rgba(255, 255, 255, .07); } .sidebar .nav-link.active { background: color-mix(in srgb, var(--m-primaire) 60%, transparent); color: #fff; font-weight: 600; } .sidebar .nav-link.active i { color: var(--attention); } .sidebar i { color: var(--inc-n4); margin-right: .35rem; } .sidebar .menu-groupe-tete { color: #B9A89B; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; text-decoration: none; padding: .5rem .75rem; border-radius: .375rem; } .sidebar .menu-groupe-tete:hover { background: rgba(255,255,255,.06); color: var(--m-fond); } .sidebar .menu-groupe-tete[aria-expanded="true"] .menu-groupe-chevron { transform: rotate(180deg); } .sidebar .menu-groupe-chevron { transition: transform .15s ease; font-size: .75rem; } .sidebar .nav { flex-wrap: nowrap; } .sidebar .nav-item { min-width: 0; } .sidebar .collapsing { will-change: height; } .sidebar .menu-systeme { border-top: 1px solid rgba(255,255,255,.1); } .sidebar .menu-systeme-titre { color: #B9A89B; } @media (max-width: 767.98px) { .sidebar { display: none; } /* remplacée par l'offcanvas */ } #inc-menu-offcanvas { background: linear-gradient(180deg, var(--m-encre) 0%, var(--m-encre-2) 100%); color: #E4D8C8; } #inc-menu-offcanvas .offcanvas-header { border-color: rgba(255,255,255,.1) !important; color: var(--m-fond); } #inc-menu-offcanvas .btn-close { filter: invert(1); } @media (prefers-reduced-motion: reduce) { .sidebar .collapsing { transition: none !important; } .sidebar .menu-groupe-chevron { transition: none !important; } } /* ---------- Cartes / tableaux ---------- */ .card { background: var(--m-carte); border: 1px solid var(--inc-border); border-radius: var(--inc-radius-carte); box-shadow: none; } .card-header { background: transparent; border-bottom-color: var(--inc-border); font-weight: 600; } .table { --bs-table-bg: transparent; } .table thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--inc-n6); border-bottom: 2px solid var(--inc-n3); background: var(--inc-n1); } .table tbody tr:hover { background: var(--inc-n1); } .table tbody td { border-color: var(--inc-n2); } .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: var(--inc-n1); } /* KPI cards */ .inc-kpi { border-top: 3px solid var(--inc-n3); background: var(--m-carte); transition: border-color .15s ease; } .inc-kpi:hover { border-top-color: var(--inc-n4); } .inc-kpi .inc-kpi-icon { font-size: 1rem; margin-right: .25rem; } .inc-kpi-neutre { border-top-color: var(--inc-n5); } .inc-kpi-neutre .inc-kpi-icon { color: var(--inc-n5); } .inc-kpi-info { border-top-color: var(--m-primaire); } .inc-kpi-info .inc-kpi-icon { color: var(--m-primaire); } .inc-kpi-success { border-top-color: var(--ok); } .inc-kpi-success .inc-kpi-icon { color: var(--ok); } .inc-kpi-attention { border-top-color: var(--attention); } .inc-kpi-attention .inc-kpi-icon { color: var(--attention); } .inc-kpi-danger { border-top-color: var(--critique); } .inc-kpi-danger .inc-kpi-icon { color: var(--critique); } .inc-kpi-brand { border-top-color: var(--m-primaire); background: var(--m-creme); } .inc-kpi-brand .inc-kpi-icon { color: var(--m-primaire); } .inc-kpi-brand .display-6 { color: var(--m-primaire-fonce); } /* Pills de niveau (sémantique) */ .alerte-niv-info { background: var(--inc-bg-soft); color: var(--inc-n7); } .alerte-niv-ok { background: #E4EBD8; color: var(--ok); } .alerte-niv-attention { background: #F8E8CB; color: #8a5a00; } .alerte-niv-danger { background: #F5DAD2; color: var(--critique); } .alerte-niv-critique { background: #EFC9BE; color: #6E2610; } /* Pills */ .pill { display: inline-block; padding: .125rem .5rem; border-radius: 999px; font-size: .75rem; font-weight: 600; white-space: nowrap; line-height: 1.4; } /* ---------- Formulaires ---------- */ .form-control, .form-select { background: var(--m-carte); border-color: var(--inc-n3); border-radius: var(--inc-radius-champ); } .form-control:focus, .form-select:focus { border-color: var(--m-primaire); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--m-primaire) 15%, transparent); background: #fff; } .form-label { color: var(--inc-n7); font-weight: 600; } .form-text { color: var(--inc-n5); } .input-group-text { background: var(--inc-n1); border-color: var(--inc-n3); color: var(--inc-n6); border-radius: var(--inc-radius-champ); } .form-check-input:checked { background-color: var(--m-primaire); border-color: var(--m-primaire); } /* ---------- Badges / progression ---------- */ .progress { background: var(--inc-n2); } .progress-bar { background-color: var(--m-primaire); } .progress-bar.bg-warning { background-color: var(--attention) !important; } .badge.bg-primary { background-color: var(--m-primaire) !important; } .badge.bg-success { background-color: var(--ok) !important; } .badge.bg-danger { background-color: var(--critique) !important; } /* ---------- Écrans publics (connexion, inscription, invitation) ---------- */ .inc-auth { min-height: 100vh; display: flex; align-items: center; background: linear-gradient(135deg, var(--m-encre-2) 0%, var(--m-encre) 55%, #241910 100%); } .inc-auth .card { border: none; border-radius: var(--inc-radius-carte); box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .5); } .inc-auth .inc-logo-app svg, .inc-auth .inc-logo-app img { height: 44px; margin-inline: auto; } .inc-auth-baseline { color: #C9B9A8; } .inc-auth-liens a { color: #D9C6B3; } .inc-auth-liens a:hover, .inc-auth-liens a:focus { color: #fff; } /* Bandeau de marque d'un service (liste « Mes services ») */ .inc-marque-bord { border-left: 4px solid var(--m-primaire); } /* Utilitaires */ .text-primary { color: var(--m-primaire) !important; } .bg-primary { background-color: var(--m-primaire) !important; } .border-primary { border-color: var(--m-primaire) !important; } .text-ink-2 { color: var(--m-texte-doux) !important; } .bg-cream { background-color: var(--m-creme) !important; } .bg-soft { background-color: var(--inc-bg-soft) !important; } .text-ok { color: var(--ok) !important; } .text-attention { color: var(--attention) !important; } .text-critique { color: var(--critique) !important; } a { text-decoration: none; }