au lieu de mettre l'icône et le sous-titre dans le
. */
.content-subtitle {
color: var(--text-secondary);
font-size: var(--font-size-base);
font-weight: 400;
line-height: 1.4;
margin: 0 0 16px;
}
.content-subtitle:empty { display: none; }
/* Si une icône traîne dans un .content-title (legacy), on la neutralise — la
convention v3.4.1 interdit les icônes dans les titres de page. */
.content-title .fa-solid, .content-title .fa-regular,
.content-title .fa-brands, .content-title .fa-light { display: none !important; }
/* ════════════════════════════════════════════════════════════════════════
Convention v3.4.3 (2026-05-21) — Cellules de tableau à 2 lignes
────────────────────────────────────────────────────────────────────────
Pour densifier les list_view sans multiplier les colonnes, on combine
2 informations dans une même cellule :
════════════════════════════════════════════════ */
.empty-state {
padding: 48px 24px;
text-align: center;
color: var(--text-secondary);
max-width: 420px;
margin: 0 auto;
}
.empty-state-icon {
font-size: 40px;
color: var(--text-secondary);
opacity: 0.5;
margin-bottom: 16px;
display: block;
}
.empty-state-title {
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
margin: 0 0 8px;
}
.empty-state-hint {
font-size: var(--font-size-base);
color: var(--text-secondary);
margin: 0 0 20px;
line-height: 1.5;
}
.empty-state-action {
margin-top: 4px;
}
.btn, .btn-sm { border-radius: 7px; font-weight: 500; transition: background .15s, border-color .15s; }
.btn-sm { padding: 6px 12px; font-size: var(--font-size-base); }
.btn-primary { box-shadow: none; }
.btn-outline-primary:hover { box-shadow: none; }
.btn:focus, .form-control:focus, .form-select:focus, .form-check-input:focus {
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent) !important;
border-color: var(--accent) !important;
}
/* ════════════════════════════════════════════════
Respecte prefers-reduced-motion — a11y
Les utilisateurs avec vestibular disorders ou en mode économie
de batterie désactivent les animations système. On respecte.
════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
.ms-bar {
display: flex;
align-items: flex-start;
gap: 0;
padding: 20px 0 10px;
overflow-x: auto;
position: relative;
}
.ms-node {
flex: 1 1 0;
min-width: 140px;
text-align: center;
position: relative;
padding: 0 8px;
}
.ms-node::before {
content: '';
position: absolute;
top: 16px;
left: 50%;
right: -50%;
height: 2px;
background: #e2e8f0;
z-index: 0;
}
.ms-node:last-child::before { display: none; }
.ms-circle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 50%;
background: linear-gradient(135deg, #00B4D8, #0891b2);
color: #fff;
font-weight: 600;
font-size: 14px;
position: relative;
z-index: 1;
box-shadow: 0 1px 3px rgba(0, 180, 216, 0.25);
}
.ms-label {
font-size: var(--font-size-base);
font-weight: 500;
color: #0f172a;
margin-top: 10px;
line-height: 1.3;
}
.ms-code {
display: block;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 11px;
color: #64748b;
margin-top: 3px;
}
.ms-desc {
font-size: var(--font-size-sm);
color: #64748b;
margin-top: 4px;
line-height: 1.4;
}
.ms-node.ms-done .ms-circle { background: linear-gradient(135deg, #10B981, #059669); box-shadow: 0 1px 3px rgba(16, 185, 129, 0.25); }
.ms-node.ms-active .ms-circle { background: linear-gradient(135deg, #00B4D8, #0891b2); }
.ms-node.ms-todo .ms-circle { background: #e2e8f0; color: #64748b; box-shadow: none; }
.ms-node.ms-done::before { background: #10B981; }
/* ════════════════════════════════════════════════
Print — règles canoniques iManage
Cache le chrome UI, neutralise les positions fixes, formate la page A4.
Les apps peuvent ajouter leurs règles spécifiques dans leur app.css.
════════════════════════════════════════════════ */
@media print {
.navbar,
#notification_box,
#page_header,
#busy_overlay,
.print_toolbar,
.form-actions,
.record_tools,
.session_controls,
.no-print {
display: none !important;
}
body {
background: #fff !important;
color: #000 !important;
padding-top: 0 !important;
font-size: 9pt !important;
}
#page, #page_content {
position: static !important;
overflow: visible !important;
padding: 0 !important;
margin: 0 !important;
background: #fff !important;
}
#requested_content,
#requested_content > div {
background: #fff !important;
padding: 0 !important;
}
table { width: 100%; }
td { vertical-align: top; }
a { text-decoration: none !important; color: #000 !important; }
.card-header { padding: 4px 8px !important; }
.card-body { padding: 0 !important; }
h5 { font-size: 11pt !important; }
.report-header { margin-bottom: 16px; }
.report-header img { width: 140px; }
.report-main-title { margin-top: 8px; }
@page { size: A4 landscape; margin: 15mm; }
}
/* ════════════════════════════════════════════════════════════════════════
RESPONSIVE — exploitation optimale de l'espace horizontal sur tous mobiles
════════════════════════════════════════════════════════════════════════ */
/* ─── container-fluid : cap visuel + paddings adaptatifs ─────────────────
Variable CSS --app-px définit le padding horizontal commun à TOUTES les
container-fluid de la page (navbar, header, breadcrumb, requested_content)
pour garantir un alignement parfait entre menu et contenu.
Bootstrap met par défaut padding-inline 12px sur container-fluid. On
l'augmente avec la taille de l'écran pour aérer sur grands écrans.
*/
:root {
--app-px: 12px;
/* Cap horizontal du contenu — appliqué à navbar, header, breadcrumb et
requested_content via .container-fluid. 1400px = largeur confortable
pour tableaux, dashboards et formulaires sans dispersion visuelle sur
les écrans 4K. Le contenu se centre automatiquement (margin: auto). */
--app-max-w: 1400px;
}
@media (min-width: 768px) { :root { --app-px: 20px; } }
@media (min-width: 1200px) { :root { --app-px: 28px; } }
@media (min-width: 1600px) { :root { --app-px: 40px; } }
.container-fluid {
max-width: var(--app-max-w);
margin-inline: auto;
padding-inline: var(--app-px);
}
/* La navbar n'a PAS de padding horizontal — c'est son .container-fluid
interne qui le porte (alignement parfait avec #requested_content). */
.navbar { padding-inline: 0; }
/* ─── Mobile : navbar plus compact + touch targets ≥ 44px ──────────────── */
@media (max-width: 767.98px) {
.navbar { padding-block: 8px; padding-inline: 0; }
.navbar-toggler { padding: 8px 10px; min-width: 44px; min-height: 44px; }
/* Le user account devient un avatar circulaire seul sur mobile pour
économiser l'espace — le nom complet et le rôle vont dans le panneau
qui s'ouvre au clic. */
@media (max-width: 575.98px) {
#user .ua-name,
#user .ua-job,
#user .ua-clinic { display: none !important; }
#user .ua-avatar-wrap { margin: 0; }
}
}
/* ─── Mobile : footer compact, items wrappent proprement ───────────────── */
@media (max-width: 575.98px) {
#page_footer { padding: 0 8px; height: auto; min-height: 48px; }
#page_footer .footer-row {
flex-wrap: wrap;
justify-content: center;
gap: 6px 12px;
padding: 6px 0;
}
#page_footer .footer-brand,
#page_footer .footer-datetime { flex: 1 1 auto; justify-content: center; }
body:has(#page_footer) { padding-bottom: 68px; } /* hauteur réelle augmentée */
}
/* ─── Modal Bootstrap : plein écran sous 576px (login, change-password) ── */
@media (max-width: 575.98px) {
.modal-dialog:not(.modal-fullscreen) {
margin: 0;
max-width: 100%;
min-height: 100vh;
}
.modal-dialog:not(.modal-fullscreen) .modal-content {
border-radius: 0;
min-height: 100vh;
}
}
/* ─── Tables responsives — scroll horizontal sur mobile au lieu d'écraser
Les tableaux Bootstrap (.table) qui ne sont pas dans un wrapper responsive
obtiennent un scroll horizontal natif sur petits écrans. */
@media (max-width: 767.98px) {
table.table:not(.table-borderless):not(.table-ticket) {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
/* ─── Form panels (record-detail, form-container) : fullscreen mobile ── */
@media (max-width: 575.98px) {
.form-panel,
.form-panel.form-panel-xl,
.form-panel.form-panel-xxl {
max-width: 100% !important;
width: 100% !important;
height: 100vh !important;
max-height: 100vh !important;
border-radius: 0 !important;
margin: 0 !important;
}
.record-detail {
max-width: 100% !important;
width: 100% !important;
border-radius: 0 !important;
}
}
/* ─── Dashboard sur tablette : KPIs en 2 colonnes au lieu de 1 large ───
Le grid auto-fit minmax(200px, 1fr) défini dans .g-kpis gère déjà la
plupart des cas. On force juste un comportement clean entre 576-900px. */
@media (min-width: 576px) and (max-width: 899.98px) {
.dashboard-v3 .g-kpis {
grid-template-columns: repeat(2, 1fr);
}
}
/* ─── Tile-view : déjà responsive via tile-view.css (1 col mobile,
2 cols tablette, 3-4 cols desktop). Rien à ajouter ici. */
/* ─── List-view : table compactée sur mobile ─────────────────────────── */
@media (max-width: 575.98px) {
.lv-actions { flex-wrap: wrap; gap: 8px; }
.lv-search { flex: 1 1 100%; }
.lv-footer {
flex-direction: column;
align-items: stretch;
gap: 8px;
text-align: center;
}
.lv-pager { justify-content: center; }
}
/* ─── Inputs : taille touch confortable sur mobile (≥ 16px évite zoom iOS) */
@media (max-width: 767.98px) {
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="time"],
textarea,
select {
font-size: 16px; /* évite le zoom auto sur iOS Safari */
}
.btn {
min-height: 40px; /* touch target accessibilité */
}
}
/* ─── Accessibilité — respect du prefers-reduced-motion ──────────────
Désactive toutes les animations/transitions pour les utilisateurs qui
l'ont configuré dans leur OS (WCAG 2.1 — 2.3.3 Animation from Interactions).
À appliquer globalement plutôt que dans chaque composant. */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ════════════════════════════════════════════════════════════════════════
ENTÊTE DE PAGE — im-page-header
------------------------------------------------------------------------
POURQUOI CE COMPOSANT (recensement du 05/09/2026 sur LEMAI, pris comme
modèle). L'entête de page — l'élément le plus répété d'une application —
avait 109 implémentations réparties sur 32 écrans, avec cinq préfixes
concurrents (lm-, otd-, content-, pd-, dash-). Pire : DEUX systèmes
coexistaient, et 28 écrans les employaient EN MÊME TEMPS — le
`h3.content-title` du framework et un `lm-page-header-top` bâti par-dessus.
CE N'EST PAS UN TROISIÈME SYSTÈME. C'est la réconciliation des deux :
la structure vient de LEMAI (titres empilés, zone d'actions ordonnée),
le point d'ancrage reste `.content-title`. Ce nom n'est pas décoratif :
content.js n'injecte son propre titre QUE s'il n'en trouve pas
(« si le report a déjà un .content-title, on ne touche pas »). En le
conservant, le composant cohabite avec le framework au lieu de le
combattre.
STRUCTURE CANONIQUE :
Titre de la page
Sous-titre facultatif
…sélecteurs (période, entité) puis UN bouton principal…
ÉCRIT EN MOBILE D'ABORD, ET C'EST DÉLIBÉRÉ. Au moment de la mesure, 36
des 41 écrans à tableau de LEMAI n'avaient AUCUNE règle responsive : le
mobile n'était pas imparfait, il était absent. Tant qu'il est une
surcouche, on l'oublie. Ici les règles de base SONT le mobile ; les deux
media queries n'ajoutent que ce que l'espace permet en plus. Oublier le
mobile devient impossible.
DEUX POINTS DE RUPTURE, PAS DIX-SEPT. 768px et 1200px — ceux que le socle
emploie déjà. LEMAI en comptait dix-sept, inventés écran par écran.
════════════════════════════════════════════════════════════════════════ */
.im-page-header {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
/* Bloc majeur : ≥ 20px le sépare de ce qui suit (DESIGN.md §2). */
margin-bottom: var(--spacing-xl);
}
/* MOBILE (défaut) — une colonne. Le titre occupe toute la largeur, les
actions passent dessous : sur 375px, titre et boutons sur une même ligne
écrasent l'un ou l'autre. */
.im-page-header-top {
display: flex;
flex-direction: column;
align-items: stretch;
gap: var(--spacing-md);
}
.im-page-titles { min-width: 0; }
/* Le titre de page est le SEUL texte autorisé à dépasser le menu : 21px,
soit R × φ (DESIGN.md §1). La marge propre du .content-title est reprise
par le conteneur — c'est lui qui possède l'espacement, sinon les deux
s'additionnent. */
.im-page-titles .content-title {
margin: 0;
font-size: var(--font-size-xl);
line-height: 1.25;
}
/* Sous-titre : explicatif, donc petit et gris (DESIGN.md §1). Sa marge basse
native de 16px est annulée ici, le `gap` du conteneur s'en charge. */
.im-page-titles .content-subtitle {
margin: var(--spacing-xs) 0 0;
font-size: var(--font-size-sm);
color: var(--text-secondary);
}
/* ZONE D'ACTIONS — UN SEUL bouton principal, à droite du titre.
L'ordre n'est pas cosmétique : sur mobile la colonne se lit de haut en
bas, et le dernier élément est le plus proche du pouce. Le bouton
principal est donc TOUJOURS en dernier, après les sélecteurs. */
.im-page-actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--spacing-sm);
}
.im-page-actions > * { order: 3; }
.im-page-actions > .im-period-host,
.im-page-actions > [data-role="periode"] { order: 1; }
.im-page-actions > .im-entite-host,
.im-page-actions > [data-role="entite"] { order: 2; }
/* Cible tactile de 40px minimum sur toute action (DESIGN.md §5). Aucune
action d'entête n'est JAMAIS repliée dans un menu : l'action principale
d'un écran se fait en un clic, à toutes les tailles.
Les secondaires se PARTAGENT la ligne, seule la principale la prend
entière. Constaté en migrant rprt_service_detail (05/09/2026), qui porte
trois actions : les mettre toutes en pleine largeur empilait trois barres
avant le contenu et repoussait l'information hors de l'écran. */
.im-page-actions > .btn,
.im-page-actions > .im-cta {
flex: 1 1 auto;
min-width: 0;
}
/* CIBLE TACTILE — 40px minimum QUAND LE POINTEUR EST GROSSIER (un doigt).
DESIGN.md §5 exige 40px ; mesuré le 05/09/2026, les boutons de LEMAI font
30px (--btn-h), et cette hauteur ne varie jamais.
On ne conditionne PAS cela à la largeur d'écran : la largeur ne dit rien du
périphérique. Un portable de 1100px se pilote à la souris, une tablette de
1024px au doigt. `pointer: coarse` interroge le vrai mode de saisie ; 30px
restent donc la densité voulue à la souris, et seul le doigt obtient 40px.
La spécificité est délibérée : app.css impose
`.btn:not(.btn-xs):not(.btn-link)` (trois classes) et se charge APRÈS le
socle. Une règle plus faible serait écrasée en silence — c'est exactement
ce qui est arrivé à la première version de ce composant. */
@media (pointer: coarse) {
.im-page-header .im-page-actions > .btn:not(.btn-link),
.im-page-header .im-page-actions > .im-cta {
min-height: 40px;
}
}
.im-page-actions > .im-cta,
.im-page-actions > .btn-primary,
.im-page-actions > .btn-outline-primary {
flex: 1 1 100%;
}
/* ── TABLETTE ET AU-DELÀ (≥ 768px) — l'espace permet une seule rangée ──── */
@media (min-width: 768px) {
.im-page-header-top {
flex-direction: row;
align-items: center; /* le titre reste centré face aux boutons,
même avec un sous-titre sur deux lignes */
justify-content: space-between;
gap: var(--spacing-lg);
flex-wrap: wrap;
}
.im-page-actions { flex-shrink: 0; }
.im-page-actions > .btn,
.im-page-actions > .im-cta,
.im-page-actions > .btn-primary,
.im-page-actions > .btn-outline-primary { flex: 0 0 auto; }
}
/* ── BUREAU (≥ 1200px) — seule l'aération augmente, rien ne se réorganise.
Un changement de structure à 1200px surprendrait sans rien apporter. */
@media (min-width: 1200px) {
.im-page-header { margin-bottom: var(--spacing-2xl); }
.im-page-header-top { gap: var(--spacing-xl); }
}
/* SOUS-MENU DE PAGE — les onglets se placent SOUS la rangée de titre.
Il appartient à l'entête (il qualifie la page), pas au contenu. */
.im-page-header > .im-subnav { margin-top: calc(var(--spacing-xs) * -1); }
/* ════════════════════════════════════════════════════════════════════════
ONGLETS DE CLASSEUR — im-tabs
------------------------------------------------------------------------
Deuxième composant promu au socle (05/09/2026), après im-page-header. Le
recensement comptait 16 variantes d'onglets sur 4 écrans, avec cinq
préfixes ; celui-ci les remplace.
POURQUOI L'ONGLET DE CLASSEUR plutôt qu'un onglet souligné : l'onglet actif
OCCULTE le filet du conteneur et fusionne avec le panneau qu'il ouvre. C'est
ce raccord — et lui seul — qui fait lire « dossier ». Un onglet souligné dit
« lien courant » ; un onglet de classeur dit « voici le contenu attaché ».
MÉCANIQUE : le conteneur porte un filet bas ; chaque onglet descend d'un
pixel pour venir à cheval dessus ; l'onglet actif reprend le fond du panneau,
ce qui efface le filet sous lui.
SUR FOND SOMBRE, ajouter `im-tabs--sombre` au conteneur. Ce n'est pas un
raffinement : le style clair posé sur une carte sombre rend le texte
illisible, et le raccord ne se voit plus. Le variant reprend des blancs
translucides et laisse l'onglet actif montrer le fond de la carte.
ACCESSIBILITÉ : role="tablist" / role="tab" / aria-selected sur le balisage,
focus visible par --shadow-focus, cible tactile portée à 40px au doigt.
════════════════════════════════════════════════════════════════════════ */
.im-tabs {
display: flex;
align-items: flex-end;
flex-wrap: wrap;
gap: 2px;
border-bottom: 1px solid var(--border-color);
margin-bottom: var(--spacing-lg);
}
.im-tab {
appearance: none;
margin-bottom: -1px; /* à cheval sur le filet du conteneur */
padding: var(--spacing-sm) var(--spacing-md);
display: inline-flex;
align-items: center;
gap: var(--spacing-sm);
background: var(--bg-subtle);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
font-size: var(--font-size-base);
color: var(--text-secondary);
cursor: pointer;
transition: background .15s ease, color .15s ease;
}
.im-tab:hover { background: var(--bg-surface); color: var(--text-primary); }
.im-tab:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
/* L'onglet ouvert : fond du panneau, et son bord bas se fond dedans. */
.im-tab.is-active {
background: var(--bg-content);
border-bottom-color: var(--bg-content);
color: var(--text-primary);
font-weight: 600;
}
/* Fente d'actions sur la rangée d'onglets : sélecteurs et filtres se rangent à
DROITE, sur la même ligne que les onglets. Ils cadrent ce que les panneaux
montrent — les mettre ailleurs obligerait à remonter les chercher.
`align-self: center` et non `flex-end` : les onglets s'alignent par le bas
pour que leur raccord tombe sur le filet, un contrôle aligné de même
paraîtrait tomber dans le vide. */
.im-tabs-actions {
margin-left: auto;
align-self: center;
display: flex;
align-items: center;
gap: var(--spacing-sm);
padding-bottom: var(--spacing-sm);
}
.im-tabpane { display: none; }
.im-tabpane.is-active { display: block; }
/* ── Variante fond sombre ─────────────────────────────────────────────── */
.im-tabs--sombre { border-bottom-color: var(--voile-clair-fort); }
.im-tabs--sombre .im-tab {
background: var(--voile-clair);
border-color: var(--voile-clair-fort);
color: color-mix(in srgb, var(--text-on-dark) 72%, transparent);
}
.im-tabs--sombre .im-tab:hover { background: var(--voile-clair-vif); color: var(--text-on-dark); }
/* Sur fond sombre l'onglet actif laisse voir la carte : `transparent` suffirait
à montrer le fond, mais laisserait AUSSI passer le filet du conteneur et
casserait le raccord. D'où la couleur pleine, héritée par variable. */
.im-tabs--sombre .im-tab.is-active {
background: var(--im-tabs-fond, transparent);
border-bottom-color: var(--im-tabs-fond, transparent);
color: var(--text-on-dark);
}
/* Cible tactile : 40px au DOIGT seulement — la largeur d'écran ne dit rien du
mode de saisie, le pointeur si (même règle que im-page-header). */
@media (pointer: coarse) {
.im-tabs .im-tab { min-height: 40px; }
}