/* ========================================================= Charte graphique — esprit « Vuexy » (cf. CHARTE-GRAPHIQUE.md) Bootstrap 5.3 + Public Sans. Tous les tokens sont des variables CSS : le thème sombre ne fait que les redéfinir. Écrit à la main, aucun fichier du template n'est repris. ========================================================= */ :root { /* --- Couleurs de marque --- */ --primary-rgb: 14, 165, 164; /* #0EA5A4 teal / bleu pétrole */ --primary-hover: #0B8F8E; --primary-soft: #E0F5F5; --accent-rgb: 249, 112, 102; /* #F97066 corail */ --secondary-rgb: 168, 170, 174; /* #A8AAAE */ --success-rgb: 40, 199, 111; /* #28C76F */ --info-rgb: 0, 207, 232; /* #00CFE8 */ --warning-rgb: 245, 165, 36; /* #F5A524 */ --danger-rgb: 234, 84, 85; /* #EA5455 */ --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); --accent: rgb(var(--accent-rgb)); /* Dégradés signature */ --gradient-brand: linear-gradient(72deg, #0EA5A4, #2DD4BF); --gradient-brand-soft: linear-gradient(72deg, #0EA5A4, #2DD4BF); --gradient-accent: linear-gradient(72deg, #F97066, #FDBA74); --gradient-header: var(--gradient-brand); /* --- Fonds / bordures / textes (thème clair) --- */ --body-bg: #F4F6FA; --surface: #FFFFFF; --surface-alt: #F7F8FB; --border: #E6E8F0; --border-card: transparent; --input-border: #E6E8F0; --input-bg: #FFFFFF; --hover-bg: #F4F6FA; --text: #2F3349; --text-menu: #2F3349; --text-muted: #6F6B7D; --text-header: #6F6B7D; --placeholder: #A8AAAE; --gray-1: #F7F8FB; --gray-2: #F0F2F6; --gray-3: #E6E8F0; --gray-4: #D6D9E2; --gray-5: #A8AAAE; --gray-6: #8E96A6; --gray-7: #6F6B7D; --gray-8: #4B4F66; --gray-9: #2F3349; /* Ombres */ --shadow-sm: 0 2px 8px rgba(47, 51, 73, .06); --shadow-card: 0 4px 24px rgba(47, 51, 73, .08); --shadow-card-hover: 0 10px 32px rgba(47, 51, 73, .13); --shadow-pop: 0 30px 70px -20px rgba(47, 51, 73, .35); --shadow-primary: 0 6px 16px -4px rgba(var(--primary-rgb), .55); --shadow-menu-active: var(--shadow-primary); --header-glass: rgba(255, 255, 255, .8); --backdrop: rgba(47, 51, 73, .45); /* --- Typographie --- */ --font-family: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --font-size-base: 14px; --font-size-sm: 12.5px; --font-size-btn: 13.5px; --line-height: 1.55; /* --- Formes --- */ --radius-sm: 6px; --radius: 10px; /* boutons, champs */ --radius-lg: 12px; --radius-card: 16px; /* cartes, panneaux */ --radius-pill: 50rem; /* --- Layout --- */ --header-height: 64px; --sidebar-width: 260px; --sidebar-rail: 80px; --card-padding: 24px; --card-gap: 24px; /* --- Menu latéral clair --- */ --sidebar-bg: var(--surface); --sidebar-text: #4B4F66; --sidebar-text-strong: #2F3349; --sidebar-muted: #8E96A6; --sidebar-hover: #F4F6FA; --sidebar-border: #E6E8F0; color-scheme: light; } /* Thème sombre : mêmes tokens, redéfinis. Le bloc est dupliqué sous prefers-color-scheme pour que la préférence système soit respectée même sans JavaScript (le script inline du pose l'attribut sinon). */ [data-theme="dark"] { --primary-soft: rgba(14, 165, 164, .18); --body-bg: #161D31; --surface: #283046; --surface-alt: #2F3A52; --border: #3B4253; --border-card: transparent; --input-border: #3B4253; --input-bg: #283046; --hover-bg: #2F3A52; --text: #D0D2D6; --text-menu: #D0D2D6; --text-muted: #8E96A6; --text-header: #B4B7BD; --placeholder: #6F7A8E; --gray-1: #2F3A52; --gray-2: #34405A; --gray-3: #3B4253; --gray-4: #4A5268; --gray-5: #6F7A8E; --gray-6: #8E96A6; --gray-7: #A9B0BC; --gray-8: #C5C9D1; --gray-9: #D0D2D6; --shadow-sm: 0 2px 8px rgba(0, 0, 0, .18); --shadow-card: 0 4px 24px rgba(0, 0, 0, .24); --shadow-card-hover: 0 10px 32px rgba(0, 0, 0, .34); --shadow-pop: 0 30px 70px -20px rgba(0, 0, 0, .7); --header-glass: rgba(40, 48, 70, .8); --backdrop: rgba(0, 0, 0, .55); --sidebar-text: #B4B7BD; --sidebar-text-strong: #F0F1F3; --sidebar-muted: #8E96A6; --sidebar-hover: #2F3A52; --sidebar-border: #3B4253; color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --primary-soft: rgba(14, 165, 164, .18); --body-bg: #161D31; --surface: #283046; --surface-alt: #2F3A52; --border: #3B4253; --border-card: transparent; --input-border: #3B4253; --input-bg: #283046; --hover-bg: #2F3A52; --text: #D0D2D6; --text-menu: #D0D2D6; --text-muted: #8E96A6; --text-header: #B4B7BD; --placeholder: #6F7A8E; --gray-1: #2F3A52; --gray-2: #34405A; --gray-3: #3B4253; --gray-4: #4A5268; --gray-5: #6F7A8E; --gray-6: #8E96A6; --gray-7: #A9B0BC; --gray-8: #C5C9D1; --gray-9: #D0D2D6; --shadow-sm: 0 2px 8px rgba(0, 0, 0, .18); --shadow-card: 0 4px 24px rgba(0, 0, 0, .24); --shadow-card-hover: 0 10px 32px rgba(0, 0, 0, .34); --shadow-pop: 0 30px 70px -20px rgba(0, 0, 0, .7); --header-glass: rgba(40, 48, 70, .8); --backdrop: rgba(0, 0, 0, .55); --sidebar-text: #B4B7BD; --sidebar-text-strong: #F0F1F3; --sidebar-muted: #8E96A6; --sidebar-hover: #2F3A52; --sidebar-border: #3B4253; color-scheme: dark; } } /* ========================================================= Base ========================================================= */ html { background: var(--body-bg); } 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; transition: background-color .25s ease, color .25s ease; } a { color: var(--primary); text-decoration: none; } a:hover { color: var(--primary-hover); } h1,h2,h3,h4,h5,h6 { color: var(--text); font-weight: 600; margin: 0 0 .5rem; } h5 { font-size: 18px; } .text-muted { color: var(--text-muted) !important; } code { color: var(--accent); background: var(--surface-alt); padding: .1em .35em; border-radius: var(--radius-sm); font-size: .9em; } pre code { background: transparent; padding: 0; } hr { border-color: var(--border); opacity: 1; } ::selection { background: var(--primary-02); } /* Ponts vers Bootstrap 5.3 (thèmes clair et sombre) */ :root, [data-theme], [data-bs-theme] { --bs-body-bg: var(--body-bg); --bs-body-color: var(--text); --bs-body-color-rgb: 47, 51, 73; --bs-secondary-color: var(--text-muted); --bs-tertiary-bg: var(--surface-alt); --bs-body-font-family: var(--font-family); --bs-body-font-size: var(--font-size-base); --bs-border-color: var(--border); --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); --bs-emphasis-color: var(--text); --bs-heading-color: var(--text); --bs-code-color: var(--accent); } [data-theme="dark"] { --bs-body-color-rgb: 208, 210, 214; } /* ========================================================= Transitions de page (View Transitions API, multi-documents). Ignoré par les navigateurs qui ne le supportent pas. ========================================================= */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: vt-sortie .18s ease-in both; } ::view-transition-new(root) { animation: vt-entree .26s cubic-bezier(.2, .8, .2, 1) both; } @keyframes vt-sortie { to { opacity: 0; } } @keyframes vt-entree { from { opacity: 0; transform: translateY(8px); } } /* Le menu et l'en-tête restent en place, seul le contenu change. */ .app-sidebar { view-transition-name: app-sidebar; } .app-header { view-transition-name: app-header; } ::view-transition-old(app-sidebar), ::view-transition-new(app-sidebar), ::view-transition-old(app-header), ::view-transition-new(app-header) { animation: none; } /* ========================================================= Layout : en-tête flottant translucide + menu clair ========================================================= */ .app-header { position: sticky; top: 1rem; z-index: 100; height: var(--header-height); margin: 1rem 1.5rem 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 1rem 0 .75rem; background: var(--header-glass); -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4); color: var(--text); border-radius: var(--radius-card); box-shadow: var(--shadow-card); transition: background-color .25s ease, box-shadow .25s ease; } .app-header .header-title { font-weight: 600; font-size: 15px; color: var(--text); } .app-header .header-icon { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); background: transparent; font-size: 19px; transition: background .15s, color .15s, transform .12s; } .app-header .header-icon:hover { background: var(--primary-01); color: var(--primary); } .app-header .header-icon:active { transform: scale(.94); } .app-header .header-icon:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--primary-02); } /* Bascule clair / sombre : une seule icône visible selon le thème. */ .theme-toggle .ri-sun-line { display: none; } [data-theme="dark"] .theme-toggle .ri-sun-line { display: inline; } [data-theme="dark"] .theme-toggle .ri-moon-line { display: none; } .header-user { display: inline-flex; align-items: center; gap: .55rem; padding: 4px 12px 4px 4px; border-radius: var(--radius-pill); background: transparent; text-decoration: none; transition: background .15s; } .header-user:hover { background: var(--primary-01); } .header-user:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--primary-02); } @media (max-width: 767.98px) { .header-user { padding: 4px; gap: 0; } } .header-user__avatar { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--gradient-brand); color: #fff; font-size: 12px; font-weight: 700; box-shadow: 0 4px 10px -3px rgba(var(--primary-rgb), .6); } .header-user__name { font-size: 13px; font-weight: 500; color: var(--text); } /* ========================================================= Menu latéral (clair) ========================================================= */ .app-sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 110; width: var(--sidebar-width); background: var(--sidebar-bg); color: var(--sidebar-text); display: flex; flex-direction: column; box-shadow: var(--shadow-card); transition: width .22s ease, background-color .25s 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); } .sidebar-brand__logo { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--gradient-brand); color: #fff; font-size: 20px; box-shadow: var(--shadow-primary); } .sidebar-brand__label { font-size: 17px; font-weight: 700; line-height: 1.15; white-space: nowrap; letter-spacing: -.2px; } .sidebar-brand__label small { display: block; font-size: 10.5px; font-weight: 500; 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: .5rem .9rem .25rem; padding: 9px 11px; background: var(--surface-alt); border: 1px solid transparent; border-radius: var(--radius); 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: var(--primary-01); color: var(--primary); } .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: var(--surface); color: var(--sidebar-muted); box-shadow: var(--shadow-sm); } .side-menu { list-style: none; margin: 0; padding: .5rem 12px 1rem; flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: var(--gray-4) transparent; } .side-menu::-webkit-scrollbar { width: 6px; } .side-menu::-webkit-scrollbar-thumb { background: var(--gray-4); border-radius: 10px; } .side-menu__label-group { padding: 14px 12px 8px 14px; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--sidebar-muted); } /* Pastille pleine : l'entrée active porte le dégradé primaire + ombre colorée. */ .side-menu__item { position: relative; display: flex; align-items: center; gap: 11px; padding: 10px 12px 10px 14px; margin-bottom: 3px; font-size: 13.5px; font-weight: 500; color: var(--sidebar-text); border-radius: var(--radius); transition: background .15s ease, color .15s ease, box-shadow .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); color: #fff; box-shadow: var(--shadow-menu-active); } .side-menu__item.active:hover { color: #fff; } .side-menu__item.active .side-menu__icon { opacity: 1; } .side-menu__icon { flex: 0 0 auto; width: 20px; font-size: 19px; opacity: .8; 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: .6; 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 : accent corail. */ .side-menu__tag { flex: 0 0 auto; padding: 1px 6px; border-radius: var(--radius-sm); background: rgba(var(--accent-rgb), .15); color: var(--accent); font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .side-menu__item--dev .side-menu__icon { color: var(--accent); opacity: 1; } .side-menu__item.active .side-menu__tag { background: rgba(255,255,255,.25); color: #fff; } /* Sous-menus : retrait + puce. */ .side-menu__sub { list-style: none; margin: 2px 0 6px; padding: 0; } .side-menu__sub .side-menu__item { font-size: 13px; padding: 8px 12px 8px 36px; font-weight: 400; } .side-menu__sub .side-menu__sub .side-menu__item { padding-left: 52px; } .side-menu__sub .side-menu__icon { width: 16px; font-size: 15px; } .side-menu__dot { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--gray-4); transition: background .15s, transform .15s; } .side-menu__item:hover .side-menu__dot { background: var(--primary); transform: scale(1.3); } .side-menu__item.active .side-menu__dot { background: #fff; transform: scale(1.3); } /* Bloc utilisateur, ancré en bas */ .sidebar-user { flex: 0 0 auto; display: flex; align-items: center; gap: .65rem; padding: .85rem 1rem; border-top: 1px solid var(--sidebar-border); } .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); color: inherit; text-decoration: none; transition: background .15s; } .sidebar-user__lien:hover { background: var(--sidebar-hover); color: inherit; } .sidebar-user__lien.active { background: var(--primary-01); } .sidebar-user__lien:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--primary-02); } .sidebar-user__avatar { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--gradient-brand); color: #fff; font-weight: 600; font-size: 13px; box-shadow: 0 4px 10px -3px rgba(var(--primary-rgb), .6); } .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: 34px; height: 34px; 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), .12); color: rgb(var(--danger-rgb)); } .sidebar-version { flex: 0 0 auto; padding: .45rem 1rem .7rem; font-size: 10.5px; line-height: 1.5; text-align: center; color: var(--sidebar-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-version span { display: block; opacity: .8; } .app-content { margin-left: var(--sidebar-width); min-height: 100vh; transition: margin-left .2s; } /* Repli du menu — desktop : rail d'icônes (80px). */ @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-search { margin-left: .6rem; margin-right: .6rem; } 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: 20px; } html.sidebar-desktop-collapsed .side-menu { padding: .5rem 10px 1rem; } } /* 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%); box-shadow: none; transition: transform .22s ease, background-color .25s ease; } body.sidebar-mobile-open .app-sidebar { transform: none; box-shadow: var(--shadow-pop); } .app-content { margin-left: 0; } .app-header { margin: .75rem 1rem 0; top: .75rem; } } /* En-tête de page (titre + fil d'Ariane), dans le flux */ .page-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: 1.5rem; } .page-title { font-size: 22px; font-weight: 600; margin: 0; letter-spacing: -.2px; } .breadcrumb { margin: 0; font-size: 13px; } .breadcrumb-item + .breadcrumb-item::before { content: "›"; color: var(--text-muted); } .breadcrumb-item.active { color: var(--text-muted); } .breadcrumb-item a { color: var(--text-muted); } .breadcrumb-item a:hover { color: var(--primary); } /* ========================================================= Composants ========================================================= */ .card { --bs-card-bg: var(--surface); --bs-card-color: var(--text); --bs-card-cap-bg: transparent; background: var(--surface); color: var(--text); border: 0; border-radius: var(--radius-card); box-shadow: var(--shadow-card); margin-bottom: var(--card-gap); transition: transform .18s ease, box-shadow .18s ease, background-color .25s ease; } .card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); } .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: 15px; font-weight: 600; text-transform: none; letter-spacing: 0; 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 pastel + chiffres) */ .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: var(--primary-01); color: var(--primary); } .stat-card__icon.danger { background: rgba(var(--danger-rgb), .14); color: rgb(var(--danger-rgb)); } .stat-card__icon.success { background: rgba(var(--success-rgb), .14); color: rgb(var(--success-rgb)); } .stat-card__icon.warning { background: rgba(var(--warning-rgb), .16); color: rgb(var(--warning-rgb)); } .stat-card__icon.accent { background: rgba(var(--accent-rgb), .14); color: var(--accent); } .stat-card__icon.info { background: rgba(var(--info-rgb), .14); color: rgb(var(--info-rgb)); } .stat-card__title { font-weight: 600; 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); font-variant-numeric: tabular-nums; } .stat-card__row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stat-card__row strong { color: var(--text); font-weight: 600; } /* Boutons — relief discret, léger scale au clic, anneau de focus net */ .btn { --btn-shadow: none; font-size: var(--font-size-btn); padding: 9px 18px; border-radius: var(--radius); 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: scale(.97); } .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); --bs-btn-bg: var(--primary); --bs-btn-border-color: var(--primary); --bs-btn-hover-bg: var(--primary-hover); --bs-btn-hover-border-color: var(--primary-hover); --bs-btn-active-bg: var(--primary-hover); --bs-btn-active-border-color: var(--primary-hover); --bs-btn-disabled-bg: var(--primary); --bs-btn-disabled-border-color: var(--primary); background: var(--gradient-brand); border-color: transparent; color: #fff; } .btn-primary:hover, .btn-primary:focus-visible { --btn-shadow: 0 8px 18px -6px rgba(var(--primary-rgb), .7); background: var(--primary-hover); border-color: transparent; color: #fff; } .btn-primary:active { background: var(--primary-hover) !important; border-color: transparent !important; } .btn-outline-primary { color: var(--primary); border-color: rgba(var(--primary-rgb), .5); background: transparent; } .btn-outline-primary:hover { background: var(--primary); border-color: var(--primary); color: #fff; } .btn-outline-secondary { color: var(--text-muted); border-color: var(--border); } .btn-outline-secondary:hover { background: var(--surface-alt); border-color: var(--gray-5); color: var(--text); } /* Bouton neutre : surface bordée */ .btn-light { --bs-btn-bg: var(--surface); --bs-btn-border-color: var(--input-border); --bs-btn-color: var(--text); --bs-btn-hover-bg: var(--surface); --bs-btn-hover-border-color: var(--primary); --bs-btn-hover-color: var(--primary); --bs-btn-active-bg: var(--surface-alt); --bs-btn-active-border-color: var(--primary); --bs-btn-active-color: var(--primary); background: var(--surface); border-color: var(--input-border); color: var(--text); } .btn-light:hover { background: var(--surface); border-color: var(--primary); color: var(--primary); } .btn-gradient { --btn-shadow: 0 6px 16px -6px rgba(var(--primary-rgb), .7); background: var(--gradient-brand); border: 0; color: #fff; } .btn-gradient:hover { --btn-shadow: 0 10px 22px -6px rgba(var(--primary-rgb), .8); color: #fff; } /* Variantes pastel */ .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), .12); 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), .12); 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 13px; border-radius: 8px; } .btn-lg { font-size: 15px; padding: 11px 24px; border-radius: var(--radius-lg); } /* Formulaires */ .form-label { font-size: 13px; font-weight: 500; color: var(--text); margin-bottom: .35rem; } .form-control, .form-select { background-color: var(--input-bg); color: var(--text); border: 1px solid var(--input-border); border-radius: var(--radius); font-size: var(--font-size-base); padding: .5rem .8rem; transition: border-color .15s, box-shadow .15s, background-color .25s; } .form-control:focus, .form-select:focus { background-color: var(--input-bg); color: var(--text); border-color: var(--primary); box-shadow: 0 0 0 .2rem var(--primary-02); outline: 0; } .form-control::placeholder { color: var(--placeholder); } .form-control:disabled, .form-select:disabled { background-color: var(--surface-alt); color: var(--text-muted); } .form-text { color: var(--text-muted); } .form-check-input { background-color: var(--input-bg); border-color: var(--gray-4); } .form-check-input:checked { background-color: var(--primary); border-color: var(--primary); } .form-check-input:focus { border-color: var(--primary); box-shadow: 0 0 0 .2rem var(--primary-02); } .form-switch .form-check-input { width: 2.4em; height: 1.3em; margin-top: .1em; } .form-switch .form-check-input:checked { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"); } [data-theme="dark"] .form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23adb5bd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); } .input-group-text { background: var(--surface-alt); border-color: var(--input-border); color: var(--text-muted); } /* Tableaux */ .table { --bs-table-bg: transparent; --bs-table-color: var(--text); --bs-table-hover-bg: var(--hover-bg); --bs-table-hover-color: var(--text); --bs-table-border-color: var(--border); color: var(--text); font-size: var(--font-size-base); margin-bottom: 0; font-variant-numeric: tabular-nums; } .table th { font-size: 12px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--text-muted); background: var(--surface-alt); border-bottom: 1px solid var(--border); padding: .7rem .75rem; } .table thead tr:first-child th:first-child { border-top-left-radius: var(--radius); } .table thead tr:first-child th:last-child { border-top-right-radius: var(--radius); } .table td { border-bottom: 1px solid var(--border); vertical-align: middle; padding: .7rem .75rem; } .table tbody tr:last-child td { border-bottom: 0; } .table-hover tbody tr:hover { background: var(--hover-bg); } .table thead.table-light th { background: var(--surface-alt); } .table-sm th, .table-sm td { padding: .45rem .6rem; } /* Badges pastel (fond doux + texte de la couleur, jamais d'aplat) */ .badge { border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; padding: 4px 9px; display: inline-flex; align-items: center; gap: .25rem; line-height: 1.3; } .badge.bg-primary-transparent { background: var(--primary-01); color: var(--primary); } .badge.bg-success-transparent { background: rgba(var(--success-rgb), .14); color: #1FA35A; } .badge.bg-warning-transparent { background: rgba(var(--warning-rgb), .16); color: #C77E0A; } .badge.bg-danger-transparent { background: rgba(var(--danger-rgb), .12); color: rgb(var(--danger-rgb)); } .badge.bg-info-transparent { background: rgba(var(--info-rgb), .14); color: #0997AA; } .badge.bg-secondary-transparent { background: rgba(var(--secondary-rgb), .18); color: var(--text-muted); } .badge.bg-accent-transparent { background: rgba(var(--accent-rgb), .14); color: var(--accent); } [data-theme="dark"] .badge.bg-success-transparent { color: rgb(var(--success-rgb)); } [data-theme="dark"] .badge.bg-warning-transparent { color: rgb(var(--warning-rgb)); } [data-theme="dark"] .badge.bg-info-transparent { color: rgb(var(--info-rgb)); } /* Les badges pleins de Bootstrap passent eux aussi en pastel : cohérence. */ .badge.text-bg-success { background: rgba(var(--success-rgb), .14) !important; color: #1FA35A !important; } .badge.text-bg-warning { background: rgba(var(--warning-rgb), .16) !important; color: #C77E0A !important; } .badge.text-bg-danger { background: rgba(var(--danger-rgb), .12) !important; color: rgb(var(--danger-rgb)) !important; } .badge.text-bg-primary { background: var(--primary-01) !important; color: var(--primary) !important; } [data-theme="dark"] .badge.text-bg-success { color: rgb(var(--success-rgb)) !important; } [data-theme="dark"] .badge.text-bg-warning { color: rgb(var(--warning-rgb)) !important; } .avatar { display: inline-flex; width: 36px; height: 36px; border-radius: var(--radius-sm); 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, onglets */ .alert { border-radius: var(--radius-lg); border: 0; font-size: var(--font-size-base); } .alert-info { background: rgba(var(--info-rgb), .12); color: #0997AA; } .alert-warning { background: rgba(var(--warning-rgb), .14); color: #C77E0A; } .alert-danger { background: rgba(var(--danger-rgb), .12); color: rgb(var(--danger-rgb)); } .alert-success { background: rgba(var(--success-rgb), .14); color: #1FA35A; } [data-theme="dark"] .alert-info { color: rgb(var(--info-rgb)); } [data-theme="dark"] .alert-warning { color: rgb(var(--warning-rgb)); } [data-theme="dark"] .alert-success { color: rgb(var(--success-rgb)); } .dropdown-menu { background: var(--surface); border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-card-hover); font-size: var(--font-size-base); padding: .4rem; } .dropdown-item { color: var(--text); border-radius: var(--radius-sm); } .dropdown-item:hover { background: var(--primary-01); color: var(--primary); } .pagination .page-link { color: var(--text); background: var(--surface); border-color: var(--border); border-radius: var(--radius-sm); margin: 0 2px; } .pagination .page-item.active .page-link { background: var(--primary); border-color: var(--primary); color: #fff; } .nav-tabs { border-bottom: 1px solid var(--border); gap: .25rem; } .nav-tabs .nav-link { color: var(--text-muted); border: 0; border-radius: var(--radius) var(--radius) 0 0; font-weight: 500; padding: .6rem 1rem; position: relative; } .nav-tabs .nav-link:hover { color: var(--primary); background: var(--primary-01); } .nav-tabs .nav-link.active { color: var(--primary); background: transparent; } .nav-tabs .nav-link.active::after { content: ""; position: absolute; left: .5rem; right: .5rem; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--gradient-brand); } /* Toasts : glissent depuis la droite, coins arrondis, ombre douce */ .toast { border-radius: var(--radius-lg); box-shadow: var(--shadow-card-hover); border: 0; } .toast.show { animation: toast-glisse .32s cubic-bezier(.2, .8, .2, 1); } @keyframes toast-glisse { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } } .toast.text-bg-success { background: rgb(var(--success-rgb)) !important; } .toast.text-bg-danger { background: rgb(var(--danger-rgb)) !important; } .toast.text-bg-warning { background: rgb(var(--warning-rgb)) !important; color: #fff !important; } .toast.text-bg-info { background: var(--primary) !important; } /* Modales, listes, définitions */ .modal-content { background: var(--surface); color: var(--text); border: 0; border-radius: var(--radius-card); box-shadow: var(--shadow-pop); } .modal-header, .modal-footer { border-color: var(--border); } .list-group-item { background: var(--surface); color: var(--text); border-color: var(--border); } dt { font-weight: 500; color: var(--text-muted); } dd { color: var(--text); } kbd { background: var(--surface-alt); color: var(--text); border: 1px solid var(--border); border-radius: 4px; } /* ========================================================= Squelettes de chargement (recherches Ajax) ========================================================= */ .skeleton { position: relative; overflow: hidden; display: inline-block; height: 12px; width: 100%; border-radius: 6px; background: var(--gray-2); } .skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); animation: skeleton-shimmer 1.3s ease-in-out infinite; } [data-theme="dark"] .skeleton::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .09), transparent); } @keyframes skeleton-shimmer { to { transform: translateX(100%); } } .skeleton--texte { height: 12px; max-width: 100%; } .skeleton--pastille { height: 20px; width: 64px; border-radius: var(--radius-pill); } .skeleton--rond { width: 32px; height: 32px; border-radius: 50%; } .skeleton-ligne td { padding-top: .95rem; padding-bottom: .95rem; } /* ========================================================= État vide (partial etat_vide.php) ========================================================= */ .etat-vide { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 2.25rem 1rem; gap: .35rem; color: var(--text-muted); } .etat-vide__illu { width: 96px; height: 96px; margin-bottom: .5rem; } .etat-vide__titre { font-size: 15px; font-weight: 600; color: var(--text); margin: 0; } .etat-vide__texte { font-size: 13px; margin: 0; max-width: 360px; } .etat-vide__action { margin-top: .85rem; } .etat-vide--grande { padding: 3rem 1rem; } .etat-vide--grande .etat-vide__illu { width: 140px; height: 140px; } .etat-vide--grande .etat-vide__titre { font-size: 22px; } .etat-vide--grande .etat-vide__texte { font-size: 14px; } /* ========================================================= 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: var(--backdrop); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .palette__panel { position: relative; z-index: 1; width: min(620px, calc(100vw - 2rem)); margin-top: 12vh; background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow-pop); overflow: hidden; animation: palette-in .18s cubic-bezier(.2, .8, .2, 1); } @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(--placeholder); } .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); 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(--surface-alt); 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) ========================================================= */ .choix { position: relative; width: 100%; min-width: 0; } .choix > select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; } .choix__declencheur { position: relative; text-align: left; overflow: hidden; cursor: pointer; } .choix__declencheur:disabled { cursor: not-allowed; } .choix__valeur { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .choix__valeur.is-vide { color: var(--text-muted); } .choix-panneau { position: fixed; inset: 0; z-index: 1200; display: none; } .choix-panneau.is-ouvert { display: block; } .choix-panneau__fond { position: absolute; inset: 0; background: rgba(47, 51, 73, .12); } .choix-panneau--feuille .choix-panneau__fond { background: var(--backdrop); } .choix-panneau__boite { position: absolute; display: flex; flex-direction: column; overflow: hidden; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card-hover); animation: choix-apparition .14s ease-out; } @keyframes choix-apparition { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .choix-panneau__entete { display: none; } .choix-panneau--feuille .choix-panneau__entete { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); } .choix-panneau__titre { font-weight: 600; color: var(--text); font-size: 15px; } .choix-panneau__fermer { border: 0; background: var(--surface-alt); color: var(--text-muted); width: 34px; height: 34px; border-radius: var(--radius-pill); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; flex: 0 0 auto; } .choix-panneau__recherche { position: relative; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); color: var(--text-muted); } .choix-panneau__recherche input { flex: 1 1 auto; border: 0; outline: 0; background: transparent; font: inherit; color: var(--text); font-size: 16px; min-width: 0; } .choix-panneau__liste { flex: 1 1 auto; margin: 0; padding: 6px; list-style: none; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .choix-panneau__liste::-webkit-scrollbar { width: 8px; } .choix-panneau__liste::-webkit-scrollbar-thumb { background: var(--gray-4); border-radius: 8px; } .choix-panneau__groupe { padding: 10px 12px 4px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); } .choix-option { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border-radius: var(--radius-sm); color: var(--text-menu); cursor: pointer; } .choix-option__marque { font-size: 17px; color: var(--gray-5); flex: 0 0 auto; } .choix-option__texte { flex: 1 1 auto; } .choix-option.is-active { background: var(--hover-bg); } .choix-option.is-choisie { color: var(--primary); font-weight: 500; } .choix-option.is-choisie .choix-option__marque { color: var(--primary); } .choix-panneau__vide { padding: 22px 12px; text-align: center; color: var(--text-muted); } .choix-panneau__pied { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--border); background: var(--surface-alt); } .choix-panneau--feuille .choix-panneau__boite { inset: 0; width: auto; max-height: none; border: 0; border-radius: 0; animation: none; } .choix-panneau--feuille .choix-option { min-height: 52px; font-size: 15px; } .choix-panneau--feuille .choix-panneau__pied { padding-bottom: calc(10px + env(safe-area-inset-bottom)); } body.choix-ouvert { overflow: hidden; } /* Utilitaires */ .text-primary { color: var(--primary) !important; } .text-accent { color: var(--accent) !important; } .border-card { border: 1px solid var(--border); } .tabular { font-variant-numeric: tabular-nums; } /* Mouvement réduit : plus d'animations ni de transitions décoratives. */ @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } .card, .card:hover { transform: none; transition: none; } .btn:hover, .btn:active { transform: none; } .toast.show, .palette__panel, .choix-panneau__boite { animation: none; } .skeleton::after { animation: none; } }