/* ========================================================= Charte graphique — inspirée du template "Azira" (Spruko) Bootstrap 5 + Roboto. Tokens à surcharger via :root. ========================================================= */ :root { /* --- Couleurs de marque --- */ --primary-rgb: 56, 88, 249; /* #3858F9 bleu principal */ --secondary-rgb: 121, 135, 161; /* #7987A1 gris bleuté */ --success-rgb: 11, 163, 96; /* #0BA360 */ --info-rgb: 23, 162, 184; /* #17A2B8 */ --warning-rgb: 232, 178, 16; /* #E8B210 */ --danger-rgb: 245, 60, 91; /* #F53C5B */ --pink-rgb: 231, 145, 188; /* #E791BC */ --purple-rgb: 177, 75, 213; /* #B14BD5 */ --teal-rgb: 18, 194, 194; /* #12C2C2 */ --orange-rgb: 255, 165, 5; /* #FFA505 */ --dark-rgb: 35, 35, 35; --light-rgb: 240, 238, 255; --primary: rgb(var(--primary-rgb)); --primary-01: rgba(var(--primary-rgb), .1); --primary-02: rgba(var(--primary-rgb), .2); --primary-05: rgba(var(--primary-rgb), .5); /* Dégradé signature (menu actif, avatars, boutons dégradés) */ --gradient-brand: linear-gradient(45deg, #F33057, #3858F9); --gradient-brand-soft: linear-gradient(45deg, #F54266, #3858F9); /* Dégradé du bandeau supérieur. Horizontal à dessein : l'en-tête et le bandeau de page sont deux éléments distincts empilés ; un dégradé qui ne varie que sur l'axe X les rend parfaitement continus, sans raccord visible à leur jonction (ce qu'un dégradé à 45° ne permet pas). */ --gradient-header: linear-gradient(90deg, #F33057 0%, #9A3AD0 52%, #3858F9 100%); /* --- Fonds / bordures / textes --- */ --body-bg: #E9E7F7; /* fond de page lavande clair */ --surface: #FFFFFF; /* cartes, sidebar, tables */ --surface-alt: #F2F4F7; --border: #EDEDF5; --border-card: #F3F3F3; --input-border: #E4E9F4; --hover-bg: #F5F6F7; --text: #031B4E; /* bleu nuit — texte principal */ --text-menu: #2D3144; --text-muted: #818995; --text-header: #768394; --gray-1: #F9FAFB; --gray-2: #F2F4F5; --gray-3: #E6EAEB; --gray-4: #DBDFE1; --gray-5: #949EB7; --gray-6: #7987A1; --gray-7: #4D5875; --gray-8: #383853; --gray-9: #323251; /* --- Typographie --- */ --font-family: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif; --font-size-base: 14px; --font-size-sm: 12.5px; --font-size-btn: 13.6px; --line-height: 1.5; /* --- Formes --- */ --radius-sm: 4px; --radius: 6px; /* cartes, boutons, inputs */ --radius-lg: 8px; --radius-pill: 50rem; --shadow-menu-active: 0 6px 14px 2px rgba(0,0,0,.10); --shadow-card-hover: 0 8px 24px rgba(3,27,78,.08); /* --- Layout --- */ --header-height: 64px; --sidebar-width: 262px; --sidebar-rail: 76px; /* largeur du menu replié en rail d'icônes */ --card-padding: 24px; --card-gap: 24px; /* --- Menu latéral sombre (contraste avec le contenu clair) --- */ --sidebar-bg: linear-gradient(180deg, #161A38 0%, #10132B 100%); --sidebar-text: #B9BEDA; --sidebar-text-strong: #FFFFFF; --sidebar-muted: #6E769F; --sidebar-hover: rgba(255, 255, 255, .06); --sidebar-border: rgba(255, 255, 255, .07); } /* Mode sombre (optionnel) */ [data-theme-mode="dark"] { --body-bg: #1B1D2E; --surface: #232640; --surface-alt: #2A2D48; --border: #2F3253; --border-card: #2F3253; --input-border: #3A3E63; --hover-bg: #2A2D48; --text: #E6E8F5; --text-menu: #D2D5EA; --text-muted: #9AA0BD; --text-header: #B5BAD6; } /* ========================================================= Base ========================================================= */ body { margin: 0; background: var(--body-bg); color: var(--text); font-family: var(--font-family); font-size: var(--font-size-base); line-height: var(--line-height); -webkit-font-smoothing: antialiased; } a { color: var(--primary); text-decoration: none; } a:hover { color: rgba(var(--primary-rgb), .85); } h1,h2,h3,h4,h5,h6 { color: var(--text); font-weight: 500; margin: 0 0 .5rem; } h5 { font-size: 18px; } .text-muted { color: var(--text-muted) !important; } /* Ponts vers Bootstrap 5 */ :root, [data-theme-mode] { --bs-body-bg: var(--body-bg); --bs-body-color: var(--text); --bs-body-font-family: var(--font-family); --bs-body-font-size: var(--font-size-base); --bs-border-color: var(--border); /* Le gris « secondaire » de Bootstrap ne suit pas le mode sombre de la charte : la barre des listes (« Lignes », « 1-50 sur 284 ») y etait sombre sur sombre, donc invisible. */ --bs-secondary-color: var(--text-muted); --bs-border-radius: var(--radius); --bs-primary: var(--primary); --bs-primary-rgb: var(--primary-rgb); --bs-secondary-rgb: var(--secondary-rgb); --bs-success-rgb: var(--success-rgb); --bs-info-rgb: var(--info-rgb); --bs-warning-rgb: var(--warning-rgb); --bs-danger-rgb: var(--danger-rgb); --bs-link-color-rgb: var(--primary-rgb); --bs-link-hover-color-rgb: var(--primary-rgb); } /* ========================================================= Layout : header dégradé + sidebar blanche ========================================================= */ /* En-tête sur le dégradé de marque, prolongé sans raccord par le bandeau de page juste en dessous (même --gradient-header, horizontal). */ .app-header { position: sticky; top: var(--preprod-h); z-index: 100; height: var(--header-height); display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 1.25rem; background: var(--gradient-header); color: #fff; border-bottom: 0; } .app-header .header-title { font-weight: 600; font-size: 15px; color: #fff; } .app-header .header-icon { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: rgba(255, 255, 255, .14); font-size: 18px; transition: background .15s; } .app-header .header-icon:hover { background: rgba(255, 255, 255, .26); color: #fff; } .header-user { display: inline-flex; align-items: center; gap: .55rem; padding: 4px 12px 4px 4px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .16); text-decoration: none; transition: background .15s; } .header-user:hover { background: rgba(255, 255, 255, .28); } .header-user:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(255, 255, 255, .5); } /* Sur petit écran seul l'avatar reste : la pastille se resserre autour. */ @media (max-width: 767.98px) { .header-user { padding: 4px; gap: 0; } } /* Avatar en blanc plein : un avatar dégradé disparaîtrait sur l'en-tête dégradé. */ .header-user__avatar { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #fff; color: rgb(var(--primary-rgb)); font-size: 12px; font-weight: 700; } .header-user__name { font-size: 13px; font-weight: 500; color: #fff; } /* Le passage vers l'application terrain. Un contour et pas un fond plein : ce bouton quitte le bureau, il ne doit pas peser autant que le bloc utilisateur juste à côté de lui. */ .header-terrain { display: inline-flex; align-items: center; gap: .4rem; height: 36px; padding: 0 14px; border-radius: var(--radius-pill); border: 1px solid rgba(255, 255, 255, .45); color: #fff; font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: background .15s, border-color .15s; } .header-terrain:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .75); color: #fff; } .header-terrain:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(255, 255, 255, .5); } .header-terrain i { font-size: 17px; line-height: 1; } /* Le bouton d'installation du bandeau porte la pastille « Terrain » : un bouton n'a ni le fond transparent ni la police d'un lien. */ .header-installer { background: transparent; font-family: inherit; cursor: pointer; } .header-installer[hidden] { display: none; } /* Sur téléphone le libellé disparaît déjà (d-none d-md-inline) : la pastille se resserre pour ne pas voler la place du bloc utilisateur. */ @media (max-width: 767.98px) { .header-terrain { padding: 0 9px; } } /* ========================================================= Menu latéral ========================================================= */ .app-sidebar { position: fixed; top: var(--preprod-h); bottom: 0; left: 0; z-index: 110; width: var(--sidebar-width); background: var(--sidebar-bg); color: var(--sidebar-text); display: flex; flex-direction: column; transition: width .22s ease, transform .22s ease; } .app-sidebar .sidebar-brand { flex: 0 0 auto; height: var(--header-height); display: flex; align-items: center; gap: .7rem; padding: 0 1.15rem; color: var(--sidebar-text-strong); border-bottom: 1px solid var(--sidebar-border); } .sidebar-brand__logo { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--gradient-brand); color: #fff; font-size: 19px; box-shadow: 0 6px 16px rgba(243, 48, 87, .35); } .sidebar-brand__label { font-size: 17px; font-weight: 600; line-height: 1.15; white-space: nowrap; } .sidebar-brand__label small { display: block; font-size: 10.5px; font-weight: 400; color: var(--sidebar-muted); letter-spacing: .3px; } /* Déclencheur de la palette de commandes (Ctrl + K) */ .sidebar-search { flex: 0 0 auto; display: flex; align-items: center; gap: .55rem; margin: .9rem .9rem .25rem; padding: 9px 11px; background: rgba(255, 255, 255, .05); border: 1px solid var(--sidebar-border); border-radius: var(--radius-lg); color: var(--sidebar-muted); font-size: 12.5px; font-family: inherit; text-align: left; cursor: pointer; transition: background .15s, border-color .15s, color .15s; } .sidebar-search:hover { background: rgba(255, 255, 255, .09); color: var(--sidebar-text); border-color: rgba(255,255,255,.14); } .sidebar-search__text { flex: 1 1 auto; white-space: nowrap; } .sidebar-search__kbd { font-size: 10px; font-weight: 600; letter-spacing: .4px; padding: 2px 6px; border-radius: 5px; background: rgba(255, 255, 255, .08); color: var(--sidebar-muted); } /* Pas de marge à gauche : les entrées viennent affleurer le bord du menu, c'est ce qui donne la forme en pilule ouverte à gauche (cf. .side-menu__item). */ .side-menu { list-style: none; margin: 0; padding: .5rem 10px 1rem 0; flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; } .side-menu::-webkit-scrollbar { width: 6px; } .side-menu::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 10px; } .side-menu__label-group { padding: 14px 12px 8px 20px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.1px; color: var(--sidebar-muted); } /* Forme d'origine conservée : bord gauche droit affleurant le menu, extrémité droite entièrement arrondie. */ .side-menu__item { position: relative; display: flex; align-items: center; gap: 11px; padding: 11px 18px 11px 20px; margin-bottom: 2px; font-size: 13px; font-weight: 500; color: var(--sidebar-text); border-radius: 0 100px 100px 0; transition: background .15s ease, color .15s ease; cursor: pointer; white-space: nowrap; } .side-menu__item:hover { background: var(--sidebar-hover); color: var(--sidebar-text-strong); } .side-menu__item.is-open { background: var(--sidebar-hover); color: var(--sidebar-text-strong); } .side-menu__item.active { background: var(--gradient-brand-soft); color: #fff; box-shadow: 0 8px 18px -6px rgba(243, 48, 87, .55); } .side-menu__item.active .side-menu__icon { opacity: 1; } .side-menu__icon { flex: 0 0 auto; width: 19px; font-size: 18px; opacity: .75; text-align: center; } .side-menu__label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; } .side-menu__angle { flex: 0 0 auto; font-size: 16px; opacity: .55; transition: transform .2s ease; } .side-menu__item[aria-expanded="true"] .side-menu__angle { transform: rotate(90deg); } .side-menu__badge { flex: 0 0 auto; min-width: 20px; padding: 1px 6px; border-radius: var(--radius-pill); background: rgb(var(--danger-rgb)); color: #fff; font-size: 10.5px; font-weight: 700; text-align: center; } /* Entrée réservée au compte développeur : repérable d'un coup d'œil, pour qu'on sache que ce qu'on y voit n'est pas visible des autres comptes. */ .side-menu__tag { flex: 0 0 auto; padding: 1px 6px; border-radius: var(--radius-sm); background: rgba(var(--warning-rgb), .18); color: rgb(var(--warning-rgb)); font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .side-menu__item--dev .side-menu__icon { color: rgb(var(--warning-rgb)); opacity: 1; } /* Sous-menus : hiérarchie marquée par le retrait + une puce, pas par un liseré vertical (qui serait recoupé par la pilule de chaque entrée). */ .side-menu__sub { list-style: none; margin: 2px 0 6px; padding: 0; } .side-menu__sub .side-menu__item { font-size: 12.5px; padding: 8px 18px 8px 42px; font-weight: 400; } .side-menu__sub .side-menu__sub .side-menu__item { padding-left: 58px; } .side-menu__sub .side-menu__icon { width: 16px; font-size: 15px; } .side-menu__dot { flex: 0 0 auto; width: 5px; height: 5px; border-radius: 50%; background: var(--sidebar-muted); transition: background .15s, transform .15s; } .side-menu__item:hover .side-menu__dot { background: var(--sidebar-text); transform: scale(1.3); } .side-menu__item.active .side-menu__dot { background: #fff; transform: scale(1.3); } /* Bloc utilisateur, ancré en bas (utilitaire, séparé de la navigation) */ .sidebar-user { flex: 0 0 auto; display: flex; align-items: center; gap: .65rem; padding: .85rem 1rem; border-top: 1px solid var(--sidebar-border); background: rgba(0, 0, 0, .15); } /* Le bloc identité est cliquable (→ Mon compte) ; seul le bouton de déconnexion reste à part. */ .sidebar-user__lien { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: .65rem; padding: .3rem .4rem; margin: -.3rem -.4rem; border-radius: var(--radius-lg); color: inherit; text-decoration: none; transition: background .15s; } .sidebar-user__lien:hover { background: var(--sidebar-hover); } .sidebar-user__lien.active { background: rgba(255, 255, 255, .10); } .sidebar-user__lien:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--primary-05); } .sidebar-user__avatar { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--gradient-brand); color: #fff; font-weight: 600; font-size: 13px; } .sidebar-user__meta { flex: 1 1 auto; min-width: 0; } .sidebar-user__name { font-size: 13px; font-weight: 600; color: var(--sidebar-text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sidebar-user__role { font-size: 11px; color: var(--sidebar-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sidebar-user__logout { flex: 0 0 auto; margin: 0; } .sidebar-user__logout button { width: 32px; height: 32px; border: 0; border-radius: var(--radius); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--sidebar-muted); font-size: 17px; transition: background .15s, color .15s; } .sidebar-user__logout button:hover { background: rgba(var(--danger-rgb), .18); color: rgb(var(--danger-rgb)); } /* Version installée, toujours lisible quelque part dans l'appli. */ .sidebar-version { flex: 0 0 auto; padding: .55rem 1rem .7rem; font-size: 10.5px; line-height: 1.5; text-align: center; color: var(--sidebar-muted); background: rgba(0, 0, 0, .15); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-version span { display: block; opacity: .75; } .app-content { margin-left: var(--sidebar-width); padding: 1.5rem; min-height: calc(100vh - var(--header-height)); transition: margin-left .2s; } /* Repli du menu — desktop : rail d'icônes (les repères visuels restent, on gagne ~190px de contenu). État mémorisé (localStorage) et appliqué sur pour éviter un flash au chargement. */ @media (min-width: 992px) { html.sidebar-desktop-collapsed .app-sidebar { width: var(--sidebar-rail); } html.sidebar-desktop-collapsed .app-content { margin-left: var(--sidebar-rail); } html.sidebar-desktop-collapsed .sidebar-brand, html.sidebar-desktop-collapsed .sidebar-search, html.sidebar-desktop-collapsed .sidebar-user { justify-content: center; } html.sidebar-desktop-collapsed .sidebar-brand__label, html.sidebar-desktop-collapsed .sidebar-search__text, html.sidebar-desktop-collapsed .sidebar-search__kbd, html.sidebar-desktop-collapsed .side-menu__label, html.sidebar-desktop-collapsed .side-menu__angle, html.sidebar-desktop-collapsed .side-menu__badge, html.sidebar-desktop-collapsed .side-menu__tag, html.sidebar-desktop-collapsed .sidebar-user__meta, html.sidebar-desktop-collapsed .sidebar-user__logout, html.sidebar-desktop-collapsed .sidebar-version { display: none; } html.sidebar-desktop-collapsed .side-menu__label-group { text-align: center; padding: 14px 0 8px; font-size: 0; } html.sidebar-desktop-collapsed .side-menu__label-group::after { content: "•••"; font-size: 10px; letter-spacing: 1px; color: var(--sidebar-muted); } html.sidebar-desktop-collapsed .side-menu__item, html.sidebar-desktop-collapsed .side-menu__sub .side-menu__item { justify-content: center; padding: 11px 0; } html.sidebar-desktop-collapsed .side-menu__icon { width: auto; font-size: 19px; } html.sidebar-desktop-collapsed .side-menu { padding-right: 8px; } } /* Repli du menu — mobile : hors-champ par défaut, glissé au clic sur le burger */ @media (max-width: 991.98px) { .app-sidebar { transform: translateX(-100%); } body.sidebar-mobile-open .app-sidebar { transform: none; } .app-content { margin-left: 0; } } /* En-tête de page (titre + fil d'Ariane) */ .page-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: 1.5rem; } .page-title { font-size: 20px; font-weight: 500; margin: 0; } .breadcrumb { margin: 0; font-size: var(--font-size-base); } .breadcrumb-item + .breadcrumb-item::before { content: "›"; color: var(--text-muted); } .breadcrumb-item.active { color: var(--text-muted); } /* ========================================================= Composants ========================================================= */ .card { background: var(--surface); border: 1px solid var(--border-card); border-radius: var(--radius); box-shadow: none; margin-bottom: var(--card-gap); } .card-header { background: transparent; border-bottom: 0; padding: var(--card-padding) var(--card-padding) 0; display: flex; align-items: center; justify-content: space-between; gap: .75rem; } .card-title { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--text); margin: 0; } .card-body { padding: var(--card-padding); } .card-footer { background: transparent; border-top: 1px solid var(--border); padding: 1rem var(--card-padding); } /* Tuile KPI (icône carrée colorée + chiffres) */ /* min-width:0 : sans lui, le bloc texte refuse de se réduire sous sa largeur min-content et déborde la carte — d'où une barre de défilement horizontale dans les petits widgets du tableau de bord sur écran étroit. */ .stat-card { display: flex; gap: 1rem; align-items: flex-start; min-width: 0; } .stat-card > * { min-width: 0; } .stat-card__icon { flex: 0 0 48px; width: 48px; height: 48px; border-radius: var(--radius-lg); display: inline-flex; align-items: center; justify-content: center; font-size: 22px; color: #fff; } .stat-card__icon.primary { background: rgb(var(--primary-rgb)); } .stat-card__icon.danger { background: rgb(var(--danger-rgb)); } .stat-card__icon.success { background: rgb(var(--success-rgb)); } .stat-card__icon.warning { background: rgb(var(--warning-rgb)); } .stat-card__title { font-weight: 500; font-size: 15px; margin-bottom: .25rem; overflow-wrap: break-word; } .stat-card__row { display: flex; justify-content: space-between; gap: .5rem; font-size: 13px; color: var(--text-muted); } .stat-card__row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stat-card__row strong { color: var(--text); } /* Boutons — relief discret, léger soulèvement au survol, anneau de focus net */ .btn { --btn-shadow: none; font-size: var(--font-size-btn); padding: 9px 16px; border-radius: var(--radius-lg); font-weight: 500; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; box-shadow: var(--btn-shadow); transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .18s ease, transform .12s ease; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--primary-02); } .btn i { font-size: 1.05em; line-height: 1; } .btn-primary { --btn-shadow: 0 4px 12px -4px rgba(var(--primary-rgb), .55); background: var(--primary); border-color: var(--primary); color: #fff; } .btn-primary:hover { --btn-shadow: 0 8px 18px -6px rgba(var(--primary-rgb), .7); background: rgba(var(--primary-rgb), .92); border-color: rgba(var(--primary-rgb), .92); } .btn-outline-primary { color: var(--primary); border-color: rgba(var(--primary-rgb), .45); background: transparent; } .btn-outline-primary:hover { background: var(--primary); border-color: var(--primary); color: #fff; } /* Bouton neutre : blanc bordé plutôt que gris plat (plus net sur fond clair) */ .btn-light { background: var(--surface); border-color: var(--input-border); color: var(--text-menu); } .btn-light:hover { background: var(--surface); border-color: var(--primary); color: var(--primary); } .btn-gradient { --btn-shadow: 0 6px 16px -6px rgba(243, 48, 87, .6); background: var(--gradient-brand); border: 0; color: #fff; } .btn-gradient:hover { --btn-shadow: 0 10px 22px -6px rgba(243, 48, 87, .75); color: #fff; } /* Variantes teintées : couleur d'intention sans le poids d'un aplat plein */ .btn-soft-primary { background: var(--primary-01); border-color: transparent; color: var(--primary); } .btn-soft-primary:hover { background: var(--primary); color: #fff; } .btn-soft-danger { background: rgba(var(--danger-rgb), .1); border-color: transparent; color: rgb(var(--danger-rgb)); } .btn-soft-danger:hover { background: rgb(var(--danger-rgb)); color: #fff; } .btn-soft-success { background: rgba(var(--success-rgb), .1); border-color: transparent; color: rgb(var(--success-rgb)); } .btn-soft-success:hover { background: rgb(var(--success-rgb)); color: #fff; } .btn-sm { font-size: 12.5px; padding: 6px 12px; border-radius: var(--radius); } .btn-lg { font-size: 15px; padding: 11px 22px; } /* Formulaires */ .form-label { font-size: 13px; font-weight: 500; color: var(--text); margin-bottom: .35rem; } .form-control, .form-select { background: var(--surface); color: var(--text); border: 1px solid var(--input-border); border-radius: var(--radius); font-size: var(--font-size-base); padding: .45rem .65rem; } .form-control:focus, .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 .2rem var(--primary-02); outline: 0; } .form-control::placeholder { color: var(--gray-5); } /* ========================================================= Tableaux --------------------------------------------------------- Les 48 listes du bureau passent par ces regles : une seule facon de lire un tableau, quel que soit l'ecran. Le comportement (lignes cliquables, tri, en-tete collant, surlignage de la recherche, apparition) est dans public/assets/js/tableaux.js ; ici, l'apparence seulement, et tout reste lisible si le script ne se charge pas. ========================================================= */ .table { /* Bootstrap 5.3 peint chaque cellule de `--bs-body-bg`, que la charte fait pointer sur le fond de PAGE (lavande). D'ou des tableaux violaces au milieu de cartes blanches : la cellule doit laisser voir la carte. */ --bs-table-bg: transparent; --bs-table-color: var(--text); --bs-table-striped-bg: transparent; /* Le survol en gris neutre, sans bleu : il sert a suivre la ligne sous la souris, pas a la signaler. */ --bs-table-hover-bg: var(--hover-bg); --bs-table-hover-color: var(--text); --bs-table-active-bg: var(--primary-01); --bs-table-border-color: var(--border); color: var(--text); font-size: var(--font-size-base); font-variant-numeric: tabular-nums; /* les chiffres s'alignent en colonne */ margin-bottom: 0; } /* Le bandeau est peint sur l'en-tete ENTIER, et pas seulement cellule par cellule : le navigateur arrondit chaque fond de cellule au pixel, et laissait un filet blanc d'un pixel entre deux colonnes. Le fond de l'en-tete passe dessous et le comble. */ .table > thead { background: var(--surface-alt); } .table > thead th { padding: .65rem .5rem; background: var(--surface-alt); /* Le filet du bas en ombre et non en bordure : en bordures fusionnees, une bordure d'en-tete collant defile avec le corps, l'ombre reste. */ border-bottom: 0; box-shadow: inset 0 -1px 0 var(--border); color: var(--text-muted); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; line-height: 1.3; vertical-align: middle; } .table thead.table-light th { background: var(--surface-alt); } /* De l'air en hauteur, pas en largeur : .5rem de cote comme avant. La liste du personnel tient tout juste dans sa carte a 1440 pixels, et 0,1 rem de plus sur ses neuf colonnes repoussait ses actions hors de l'ecran - mesure faite. */ .table > tbody > tr > td { padding: .7rem .5rem; border-bottom: 1px solid var(--border); vertical-align: middle; transition: background-color .15s ease, box-shadow .15s ease; } .table > tbody > tr:last-child > td { border-bottom: 0; } /* Les tableaux compacts le restent : la matrice des droits d'acces aligne une trentaine de colonnes, et des en-tetes en capitales espacees avec les marges des autres listes la rendaient deux fois plus large. */ .table-sm > thead th { padding: .5rem .25rem; font-size: 11.5px; letter-spacing: 0; text-transform: none; } .table-sm > tbody > tr > td { padding: .4rem .25rem; } /* Les liens du corps en couleur de texte, en gras : deux colonnes de liens bleus cote a cote (numero et nom de chantier) faisaient une rayure bleue sans hierarchie. Ils le restent au survol : pas de bleu qui s'allume en passant la souris. */ .table > tbody a:not(.btn):not(.action-icon):not(.badge) { color: var(--text); font-weight: 500; transition: color .15s ease; } /* L'identifiant de la ligne - le premier lien, en premiere colonne - pese un cran de plus que le reste. */ .table > tbody > tr > td:first-child a:not(.btn):not(.action-icon):not(.badge) { font-weight: 600; } /* Pose par tableaux.js sur les colonnes courtes : un numero « DS26-0902 » ou une date ne se coupent pas en deux lignes. */ .table td.sans-coupure { white-space: nowrap; } /* E-mails et liens : coupure apres l'arobase (posee par tableaux.js), et au besoin n'importe ou dans un mot trop long pour sa colonne. */ .table td.coupe-libre { overflow-wrap: break-word; } .table > tbody > tr.est-cliquable { cursor: pointer; } /* Les pastilles d'ETAT (oui / non, actif, termine...) precedees d'un point de leur couleur : on lit l'etat d'une colonne entiere d'un coup d'oeil. Les LIBELLES en bleu (fonction, role) n'en ont pas : ce ne sont pas des etats, et le point elargissait d'autant la colonne la plus large. */ .table .badge { font-size: 11px; padding: .3em .62em; } .table .badge[class*="-transparent"]:not(.bg-primary-transparent)::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: .35em; border-radius: 50%; background: currentColor; vertical-align: .12em; } /* Les cases « oui / non » dessinees en icone : la case vide s'efface, la case cochee ressort. Sinon les deux pesaient pareil. */ .table i.ri-checkbox-blank-line { opacity: .35; } .table i.ri-checkbox-line { font-size: 1.15em; } /* La ligne « aucun resultat » : une illustration plutot qu'une phrase perdue au milieu d'un grand blanc. */ .table td.empty { padding: 3rem 1rem !important; color: var(--text-muted); text-align: center; font-size: 13.5px; } .table td.empty::before { content: ""; display: block; width: 52px; height: 52px; margin: 0 auto .8rem; border-radius: 50%; background: var(--surface-alt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23949EB7' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E") center / 24px no-repeat; } /* --- Ce que tableaux.js ajoute -------------------------------------- */ /* L'apparition : les lignes arrivent l'une apres l'autre, en un quart de seconde. Assez pour donner du mouvement, pas assez pour faire attendre. */ @keyframes ligne-apparait { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .table.est-anime > tbody > tr { animation: ligne-apparait .32s cubic-bezier(.2, .7, .3, 1) both; animation-delay: calc(var(--rang, 0) * 22ms); } @media (prefers-reduced-motion: reduce) { .table.est-anime > tbody > tr { animation: none; } } /* Le tri : l'en-tete devient un bouton, avec sa fleche. */ .table th .tri { display: inline-flex; align-items: center; gap: .4em; padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer; } .table th .tri::after { content: ""; width: 0; height: 0; border: 4px solid transparent; border-top-color: currentColor; opacity: .3; transform: translateY(2px); transition: opacity .15s ease; } .table th .tri:hover { color: var(--text); } .table th .tri:hover::after { opacity: .7; } .table th[aria-sort] { color: var(--primary); } .table th[aria-sort] .tri::after { opacity: 1; } .table th[aria-sort="ascending"] .tri::after { border-top-color: transparent; border-bottom-color: currentColor; transform: translateY(-2px); } /* L'en-tete collant, pose seulement quand rien ne l'en empeche - un tableau plus large que la carte defile a l'horizontale, et un en-tete colle dans un cadre qui defile se placerait au milieu des lignes. */ .table-responsive.est-ajuste { overflow: visible; } /* L'en-tete entier colle, et non ses cellules une a une : il emporte son fond, qui comble les interstices. */ .table.en-tete-collant > thead { position: sticky; top: calc(var(--header-height) + var(--preprod-h)); z-index: 3; } /* Le mot cherche, surligne dans les lignes trouvees. */ .table mark.surligne { padding: 0 .1em; border-radius: 3px; background: rgba(var(--warning-rgb), .35); color: inherit; } /* Badges & avatars */ .badge { border-radius: var(--radius-pill); font-size: 10.5px; font-weight: 600; padding: 4px 7.2px; } .badge.bg-primary-transparent { background: var(--primary-01); color: var(--primary); } .badge.bg-success-transparent { background: rgba(var(--success-rgb), .1); color: rgb(var(--success-rgb)); } .badge.bg-warning-transparent { background: rgba(var(--warning-rgb), .14); color: #9a7000; } [data-theme-mode="dark"] .badge.bg-warning-transparent { color: rgb(var(--warning-rgb)); } .badge.bg-danger-transparent { background: rgba(var(--danger-rgb), .1); color: rgb(var(--danger-rgb)); } /* Bootstrap ne fournit pas cette variante : sans elle, les badges neutres (« Fermé », « Non ») s'affichaient sans fond ni couleur, donc invisibles. */ .badge.bg-secondary-transparent { background: var(--surface-alt); color: var(--text-muted); } .avatar { display: inline-flex; width: 36px; height: 36px; border-radius: 6.4px; overflow: hidden; object-fit: cover; } .avatar-sm { width: 28px; height: 28px; } .avatar-lg { width: 56px; height: 56px; } .avatar-rounded { border-radius: 50%; } /* Alertes, dropdowns, pagination */ .alert { border-radius: var(--radius); border: 0; font-size: var(--font-size-base); } .dropdown-menu { border: 1px solid var(--border-card); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(3,27,78,.08); font-size: var(--font-size-base); } .dropdown-item:hover { background: var(--hover-bg); color: var(--primary); } .pagination .page-link { color: var(--text); border-color: var(--border); border-radius: var(--radius); margin: 0 2px; } .pagination .page-item.active .page-link { background: var(--primary); border-color: var(--primary); color: #fff; } /* ========================================================= Palette de commandes (Ctrl + K) ========================================================= */ .palette { position: fixed; inset: 0; z-index: 1090; display: flex; justify-content: center; align-items: flex-start; } .palette[hidden] { display: none; } .palette__backdrop { position: absolute; inset: 0; background: rgba(9, 12, 32, .55); backdrop-filter: blur(3px); } .palette__panel { position: relative; z-index: 1; width: min(620px, calc(100vw - 2rem)); margin-top: 12vh; background: var(--surface); border: 1px solid var(--border-card); border-radius: 14px; box-shadow: 0 30px 70px -20px rgba(3, 27, 78, .45); overflow: hidden; animation: palette-in .16s ease-out; } @keyframes palette-in { from { opacity: 0; transform: translateY(-10px) scale(.98); } to { opacity: 1; transform: none; } } .palette__search { display: flex; align-items: center; gap: .65rem; padding: 1rem 1.15rem; border-bottom: 1px solid var(--border); } .palette__search > i { font-size: 19px; color: var(--text-muted); } .palette__search input { flex: 1 1 auto; border: 0; outline: 0; background: transparent; font-family: inherit; font-size: 15px; color: var(--text); } .palette__search input::placeholder { color: var(--gray-5); } .palette__results { list-style: none; margin: 0; padding: .45rem; max-height: 330px; overflow-y: auto; } .palette__item { display: flex; align-items: center; gap: .7rem; padding: 10px 12px; border-radius: var(--radius-lg); font-size: 13.5px; color: var(--text-menu); cursor: pointer; } .palette__item > i { font-size: 17px; color: var(--text-muted); width: 20px; text-align: center; } .palette__item.is-active { background: var(--primary-01); color: var(--primary); } .palette__item.is-active > i { color: var(--primary); } .palette__label { flex: 1 1 auto; } .palette__group { font-size: 11px; color: var(--text-muted); padding: 2px 8px; border-radius: var(--radius-pill); background: var(--surface-alt); } .palette__empty { padding: 1.5rem; text-align: center; color: var(--text-muted); font-size: 13px; } .palette__footer { display: flex; gap: 1.1rem; padding: .6rem 1.15rem; border-top: 1px solid var(--border); background: var(--gray-1); font-size: 11px; color: var(--text-muted); } .palette kbd { display: inline-block; padding: 1px 5px; margin: 0 1px; font-family: inherit; font-size: 10.5px; font-weight: 600; color: var(--text-menu); background: var(--surface); border: 1px solid var(--border); border-radius: 4px; } body.palette-ouverte { overflow: hidden; } /* ========================================================= Sélecteur enrichi (select-recherche.js) Liste déroulante ancrée sur ordinateur, feuille plein écran sur téléphone : toutes les options restent atteignables même quand la liste est longue. ========================================================= */ /* width:100% reproduit exactement le comportement du .form-select natif, aussi bien en flux normal que comme élément d'un conteneur flex (le style en ligne éventuel du select, ex. width:110px, est reporté sur l'enveloppe et prend le dessus). */ /* min-width:0 : sans lui, l'enveloppe (élément flex) refuse de se réduire sous la largeur du libellé et chasse le bouton « + » voisin. */ .choix { position: relative; width: 100%; min-width: 0; } /* Le