/* * Design system léger et réutilisable ("RS moderne") pour les interfaces publiques/formulaires * client (ex: rdv/index.php). Objectif : un seul jeu de variables (tokens) + composants de base * (cartes, puces, stepper, badges, état vide...) à réutiliser sur toute nouvelle interface, * plutôt que de réinventer un style à chaque écran. * * Usage : inclure ce fichier, ajouter la classe .rs-page-body sur , puis utiliser les * classes .rs-* ci-dessous. Les variables (--rs-*) peuvent être surchargées localement (ex: * changer --rs-color-accent sur une page précise) sans dupliquer les règles. * * Ne pas renommer les classes existantes ici sans vérifier leurs usages JS (souvent des * sélecteurs jQuery en dur, ex: .rs-chip, .rs-stepper-item, .is-selected). */ :root { --rs-color-accent: #33A3DD; --rs-color-accent-dark: #1c7bab; --rs-color-accent-bg: #d8eefb; --rs-color-success: #54AE54; --rs-color-success-dark: #2f8f4e; --rs-color-success-bg: #eafaf0; --rs-color-danger: #d9534f; --rs-color-danger-dark: #8f3634; --rs-color-danger-bg: #fbecec; --rs-color-warning: #b98016; --rs-color-warning-dark: #8f620f; --rs-color-warning-bg: #fdf3e2; --rs-color-text: #22303c; --rs-color-muted: #6b7684; --rs-color-faint: #8a94a6; --rs-color-border: #e1e6ec; --rs-color-surface: #ffffff; --rs-color-surface-alt: #f7f9fb; --rs-color-nav-dark: #0d1b2a; /* Fond de page hors design system (css/style.css .panel-body, de enTete.php/enTete2.php) : ces fichiers n'utilisent pas .rs-page-body, donc ce token existe pour qu'un futur thème sombre n'ait qu'une seule valeur à changer ici plutôt que plusieurs couleurs codées en dur dans 3 fichiers. */ --rs-color-page-bg: #F4FAFF; /* Repris à 107px par défaut (65px bandeau + ~42px menu principal, valeur historique), mais réécrit en JS (voir enTete.php / enTete2.php) avec la hauteur réellement rendue de .zone-des-menus, qui varie selon les icônes conditionnelles par garage. */ --rs-menu-total-height: 107px; --rs-radius-sm: 6px; --rs-radius-md: 10px; --rs-radius-pill: 999px; --rs-shadow-sm: 0 1px 3px rgba(20, 30, 40, 0.05); --rs-shadow-md: 0 4px 16px rgba(20, 30, 40, 0.08); --rs-transition: all .18s ease; } /* Thème sombre — préversion/test, activée en posant data-theme="dark" sur (bouton de bascule : views/page/entete_bandeau_menu.php, choix persisté en localStorage). Ne recolore QUE les tokens --rs-* ci-dessus : tout ce qui est déjà construit avec ces variables (.rs-card, .rs-btn, .rs-table, .rs-input-outline, badges, alertes...) suit automatiquement, sans toucher aux fichiers consommateurs. Le reste de l'appli (Bootstrap 3 brut, fonds blancs/textes noirs codés en dur dans les ~90% de pages pas encore migrées vers le design system, couleurs métier inline) n'est délibérément PAS concerné : un thème sombre cohérent sur toute l'appli suppose que ces pages soient d'abord migrées vers les classes .rs-*. */ :root[data-theme="dark"] { --rs-color-accent: #4db8f0; --rs-color-accent-dark: #7cd3ff; --rs-color-accent-bg: #163348; --rs-color-success: #6bc96b; --rs-color-success-dark: #8fdb8f; --rs-color-success-bg: #16341f; --rs-color-danger: #e5837e; --rs-color-danger-dark: #f2a19d; --rs-color-danger-bg: #3a1f1e; --rs-color-warning: #dba338; --rs-color-warning-dark: #eec06a; --rs-color-warning-bg: #3a2e14; --rs-color-text: #e8edf2; --rs-color-muted: #a7b1bd; --rs-color-faint: #7b8695; --rs-color-border: #313c47; --rs-color-surface: #1b232c; --rs-color-surface-alt: #242e38; --rs-color-page-bg: #141a20; --rs-shadow-sm: 0 1px 3px rgba(0, 0, 0, .35); --rs-shadow-md: 0 4px 16px rgba(0, 0, 0, .45); } :root[data-theme="dark"] .rs-page-body { background: linear-gradient(180deg, #141a20 0%, #10151a 260px, #10151a 100%); color: var(--rs-color-text); } /* Exception délibérée à la règle "le thème sombre ne touche que les composants .rs-*" ci-dessus : .input-group-addon est du Bootstrap brut (fond gris clair #eee + bordure #ccc codés en dur dans bootstrap.min.css, jamais modifié directement) — resté clair sur fond sombre, il tranche fortement à côté d'un .form-control déjà recoloré ailleurs. */ :root[data-theme="dark"] .input-group-addon { background-color: var(--rs-color-surface-alt) !important; border-color: var(--rs-color-border) !important; color: var(--rs-color-text) !important; } /* Fond de page + typo par défaut, à poser sur (class="rs-page-body"). */ .rs-page-body { background: linear-gradient(180deg, #eef4fa 0%, #f4f6f8 260px, #f4f6f8 100%); color: #33414e; } /* Conteneur centré, largeur confortable pour un formulaire mobile-first. */ .rs-page-shell { max-width: 640px; margin: 30px auto 50px; padding: 0 15px; } /* En-tête "marque" (logo + nom + sous-titre), centré. */ .rs-brand-header { text-align: center; margin-bottom: 24px; } .rs-brand-header img { max-height: 56px; margin-bottom: 10px; } .rs-brand-header-name { font-size: 18px; font-weight: 700; color: var(--rs-color-text); } .rs-brand-header-subtitle { color: var(--rs-color-faint); font-size: 13px; margin-top: 2px; } /* Stepper horizontal numéroté (étapes d'un parcours). */ .rs-stepper { display: flex; justify-content: space-between; margin: 20px 0 26px; padding: 0 5px; } .rs-stepper-item { flex: 1; text-align: center; position: relative; font-size: 12px; color: #a7afba; transition: var(--rs-transition); } .rs-stepper-item:not(:last-child)::after { content: ''; position: absolute; top: 14px; left: 55%; width: 90%; height: 2px; background: var(--rs-color-border); z-index: 0; transition: background .25s ease; } .rs-stepper-item.actif:not(:last-child)::after, .rs-stepper-item.complete:not(:last-child)::after { background: var(--rs-color-accent); } .rs-stepper-bubble { width: 28px; height: 28px; line-height: 28px; border-radius: 50%; background: var(--rs-color-border); color: var(--rs-color-faint); font-weight: 700; margin: 0 auto 6px; position: relative; z-index: 1; transition: var(--rs-transition); box-shadow: 0 0 0 4px #fff; } .rs-stepper-item.actif .rs-stepper-bubble { background: var(--rs-color-accent); color: #fff; box-shadow: 0 0 0 4px #fff, 0 2px 8px rgba(51, 163, 221, .35); } .rs-stepper-item.complete .rs-stepper-bubble { background: var(--rs-color-success); color: #fff; } .rs-stepper-item.actif { color: var(--rs-color-text); font-weight: 600; } /* Carte de contenu générique (section d'un formulaire, panneau...). */ .rs-card { background: var(--rs-color-surface); border-radius: var(--rs-radius-md); box-shadow: var(--rs-shadow-md); padding: 26px; margin-bottom: 20px; animation: rs-fade-in .25s ease; } @keyframes rs-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .rs-card-title { font-size: 18px; font-weight: 700; color: var(--rs-color-text); margin-bottom: 4px; } .rs-card-title-sm { font-size: 15px; } /* Conteneur à utiliser autour d'un graphe placé directement dans une .rs-card (Chart.js sur , ou CanvasJS sur un
cible selon le fichier). Deux précautions distinctes, pas de recouvrement entre elles : - largeur : les libs de graphes redimensionnent parfois le graphe à partir de mesures de son parent qui peuvent se dérégler (padding inclus dans le calcul...) et le rendent alors plus large que l'espace réellement disponible dans la carte, débordant de son cadre arrondi. max-width sur le plafonne sa taille de rendu CSS quelle que soit la largeur qu'il s'est lui-même attribuée en style inline. - hauteur : ne JAMAIS mettre overflow:hidden ici — CanvasJS (contrairement à Chart.js) lit la hauteur CSS réelle du conteneur AU MOMENT DU RENDU pour dimensionner son graphe ; sans hauteur définie il mesure 0 et n'affiche rien du tout (testé : le graphe disparaissait complètement). min-height lui donne une hauteur garantie dès le départ, sans empêcher Chart.js de calculer la sienne via son propre ratio largeur/hauteur. */ .rs-chart-canvas-wrap { width: 100%; min-height: 320px; padding: 0; position: relative; } .rs-chart-canvas-wrap canvas { max-width: 100% !important; } .rs-subtitle { color: var(--rs-color-faint); font-size: 13px; margin-bottom: 18px; } .rs-help-text { color: var(--rs-color-faint); font-size: 12px; margin-top: 5px; margin-bottom: 0; } /* Grille de créneaux + bouton "pilule" sélectionnable. */ .rs-slot-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 5px; } .rs-slot-btn { border: 1px solid var(--rs-color-border); color: #33414e; background: #fff; border-radius: var(--rs-radius-pill); padding: 8px 16px; cursor: pointer; font-size: 13px; transition: var(--rs-transition); } .rs-slot-btn:hover { border-color: var(--rs-color-accent); transform: translateY(-1px); box-shadow: var(--rs-shadow-sm); } .rs-slot-btn.is-selected { background: var(--rs-color-accent); color: #fff; border-color: var(--rs-color-accent); box-shadow: 0 4px 12px rgba(51, 163, 221, .35); } /* Puce à cocher/radio déguisée en chip (choix visuel rapide). */ .rs-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--rs-color-border); border-radius: var(--rs-radius-pill); padding: 8px 16px; margin: 0 8px 8px 0; font-size: 13px; color: #33414e; cursor: pointer; background: #fff; transition: var(--rs-transition); } .rs-chip:hover { border-color: var(--rs-color-accent); transform: translateY(-1px); } .rs-chip input { display: none; } .rs-chip.rs-chip-active { background: var(--rs-color-accent-bg); border-color: var(--rs-color-accent); color: var(--rs-color-accent-dark); font-weight: 600; } /* Badges d'état (pastille arrondie). */ .rs-badge { display: inline-block; padding: 3px 10px; border-radius: var(--rs-radius-pill); font-size: 12px; font-weight: 600; } .rs-badge-info { background: var(--rs-color-accent-bg); color: var(--rs-color-accent-dark); } .rs-badge-success { background: var(--rs-color-success-bg); color: var(--rs-color-success-dark); } .rs-badge-muted { background: #f2f3f5; color: var(--rs-color-faint); } /* État vide (liste/rubrique sans contenu). */ .rs-empty-state { text-align: center; padding: 30px 10px; color: var(--rs-color-faint); } .rs-empty-state i { font-size: 32px; color: #c8d0d8; margin-bottom: 10px; display: block; } /* Icône ronde (illustration d'étape, ex: scan carte grise). */ .rs-icon-circle { font-size: 34px; color: var(--rs-color-accent); background: var(--rs-color-accent-bg); width: 64px; height: 64px; line-height: 64px; text-align: center; border-radius: 50%; margin: 0 auto 15px; } .rs-icon-circle-success { color: var(--rs-color-success); background: var(--rs-color-success-bg); } .rs-icon-circle-warning { color: #d99a1b; background: #fef6e4; } /* Icône de confirmation (grande, centrée, sans fond). */ .rs-confirmation-icon { font-size: 48px; color: var(--rs-color-success); display: block; text-align: center; margin-bottom: 12px; } /* Champ piège anti-bot (honeypot), invisible mais présent dans le DOM/tabulation. */ .rs-honeypot { position: absolute; left: -9999px; top: -9999px; } /* Bouton principal pleine largeur (action de fin de formulaire). */ .rs-btn-block { width: 100%; padding: 13px; font-size: 15px; font-weight: 600; border-radius: var(--rs-radius-sm); box-shadow: var(--rs-shadow-sm); transition: var(--rs-transition); } .rs-btn-block:hover { box-shadow: var(--rs-shadow-md); transform: translateY(-1px); } @media (max-width: 480px) { .rs-card { padding: 18px; } .rs-page-shell { padding: 0 10px; margin-top: 16px; } } /* Icône carrée sombre accolée à un titre de modale/section (ex: "+" avant "Prix Unitaire TTC"). */ .rs-modal-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: var(--rs-color-text); color: #fff; border-radius: var(--rs-radius-sm); font-size: 13px; margin-right: 10px; vertical-align: middle; } /* Carte d'affichage d'une valeur (montant éditable ou lecture seule), utilisée en grille dans les modales de calcul (ex: modal_pu_ttc.php) : libellé discret au-dessus, valeur en gros en dessous. */ .rs-value-card { background: var(--rs-color-surface-alt); border: 1px solid var(--rs-color-border); border-radius: var(--rs-radius-md); padding: 12px 16px; margin-bottom: 16px; transition: var(--rs-transition); } .rs-value-card:focus-within { border-color: var(--rs-color-accent); box-shadow: 0 0 0 3px var(--rs-color-accent-bg); } .rs-value-label { font-size: 12.5px; color: var(--rs-color-muted); margin-bottom: 6px; } .rs-value-required { color: var(--rs-color-danger); font-weight: 700; } .rs-value-amount { display: block; width: 100%; border: none; background: transparent; padding: 0; font-size: 21px; font-weight: 700; color: var(--rs-color-text); box-shadow: none; } .rs-value-amount:focus { outline: none; box-shadow: none; } .rs-value-amount:disabled { color: var(--rs-color-text); background: transparent; opacity: 1; -webkit-text-fill-color: var(--rs-color-text); } .rs-value-note { font-size: 11.5px; color: var(--rs-color-muted); font-style: italic; margin-top: 6px; } .rs-value-note s { color: #c0392b; } /* Cartes KPI d'un tableau de bord (ex: TDB Synthèse > Signatures OR) : ligne de cartes compactes avec un chiffre-clé, éventuellement un donut avec valeur centrée. */ .rs-tdb-kpi-row { display: flex; flex-wrap: wrap; gap: 15px; margin-bottom: 15px; } .rs-tdb-kpi-card { flex: 1 1 220px; background: var(--rs-color-surface); border: 1px solid var(--rs-color-border); border-radius: var(--rs-radius-md); box-shadow: var(--rs-shadow-sm); padding: 18px 20px; } .rs-tdb-kpi-label { font-size: 13px; color: var(--rs-color-muted); margin-bottom: 8px; } .rs-tdb-kpi-number { font-size: 28px; font-weight: 700; color: var(--rs-color-text); line-height: 1.2; } .rs-tdb-kpi-number-danger { color: var(--rs-color-danger); } .rs-tdb-kpi-sub { font-size: 12px; color: var(--rs-color-faint); margin-top: 4px; } .rs-tdb-donut-wrap { position: relative; width: 110px; height: 110px; margin: 0 auto 10px; } .rs-tdb-donut-value { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 20px; font-weight: 700; color: var(--rs-color-text); } .rs-tdb-donut-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--rs-color-text); } .rs-tdb-donut-legend-item { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } .rs-tdb-donut-legend-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; } /* Barre d'outils au-dessus d'un tableau (titre + filtres multi-select + export) : le titre reste sur sa propre ligne, les filtres se placent en dessous sur une ligne qui peut passer à la ligne suivante sur petit écran, chaque filtre ayant une largeur confortable pour afficher plusieurs "tags" sélectionnés (select2) sans s'écraser. */ .rs-tdb-table-toolbar { margin-bottom: 12px; } .rs-tdb-table-toolbar-title { margin: 0 0 10px; } .rs-tdb-table-toolbar-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } /* Wrapper autour de chaque lui-même : select2 le remplace par son propre conteneur, qui doit hériter cette largeur via son option width: '100%' plutôt que porter la classe directement — sinon le select2-container ignore les règles flex ci-dessous et repasse en largeur 100% de la page). */ .rs-tdb-filter-select { flex: 1 1 260px; max-width: 380px; min-width: 220px; } .rs-tdb-toolbar-btn { flex: 0 0 auto; } /* Pastilles de statut (ex: colonne "Statuts" d'un tableau de dossiers OR) et texte coloré de nature de dossier (ex: colonne "Nature"). Palette fixe à 6 couleurs, réutilisable telle quelle pour tout nouveau tableau de dossiers. */ .rs-tdb-pill { display: inline-block; padding: 3px 10px; border-radius: var(--rs-radius-pill); font-size: 11.5px; font-weight: 600; color: #fff; white-space: nowrap; } .rs-tdb-pill-orange { background: #b8860b; } .rs-tdb-pill-blue { background: #2f6fb0; } .rs-tdb-pill-green { background: #3fa34d; } .rs-tdb-pill-red { background: #8b2e2e; } .rs-tdb-pill-purple { background: #7c4dab; } .rs-tdb-pill-gray { background: #8a94a6; } .rs-tdb-nature-text { font-weight: 600; font-size: 12.5px; } .rs-tdb-nature-blue { color: #2f6fb0; } .rs-tdb-nature-red { color: #c0392b; } .rs-tdb-nature-green { color: #3fa34d; } .rs-tdb-nature-purple { color: #7c4dab; } .rs-tdb-nature-gray { color: #6b7684; } /* Bandeau d'avertissement (information réglementaire/fiscale à ne pas manquer). */ .rs-alert-warning { display: flex; gap: 12px; align-items: flex-start; background: #fef6e4; border: 1px solid #f2ddaa; border-radius: var(--rs-radius-md); padding: 14px 16px; color: #7a5b1e; font-size: 13px; line-height: 1.5; } .rs-alert-warning i { font-size: 17px; color: #d99a1b; margin-top: 2px; } /* ============================================================ Menus applicatifs (niveaux 2/3) + sidenav mobile — modernisation. Ce bloc restylise les sélecteurs EXISTANTS de l'appli interne (#menu-nav, .zone-onglets, .sidenav...) plutôt que d'introduire de nouvelles classes .rs-*, pour ne pas avoir à toucher les ~110 pages qui les utilisent déjà (chacune inclut son propre sous_menu_*.php avec