/* =========================== NALIE DESIGN SYSTEM =========================== */ :root { /* Couleurs principales */ --primary: #4f46e5; --primary-dark: #3730a3; --primary-light: #e0e7ff; --success: #059669; --success-light: #d1fae5; --warning: #d97706; --warning-light: #fef3c7; --danger: #dc2626; --danger-light: #fee2e2; --info: #0891b2; --info-light: #cffafe; /* Neutres — GRIS TEINTÉS BLEU-MARINE, et non gris neutres. ─────────────────────────────────────────────────────────────────── Relevé dans le manager OVHcloud : le texte des titres y est en #131a3f et celui des cellules en #3a4a87. Ce ne sont pas des gris, ce sont des bleus très désaturés, et c'est ce qui donne à l'ensemble son air posé — un gris neutre à côté d'un bleu de marque paraît sale, alors qu'un gris qui tire vers la même teinte paraît choisi. Les DEUX bouts de la rampe sont repris tels quels d'OVH (900 et 600) ; les stops intermédiaires sont interpolés. Les noms restent « gray-* » : soixante-deux écrans les appellent, et les renommer n'apporterait rien qu'un diff illisible. */ --gray-50: #f7f8fc; --gray-100: #eef1f8; --gray-200: #dee3f0; --gray-300: #c2c9de; --gray-400: #8d97b8; --gray-500: #5e6a91; --gray-600: #3a4a87; --gray-700: #2c3a6d; --gray-800: #1e2858; --gray-900: #131a3f; /* Layout ─────────────────────────────────────────────────────────────────── PREMIÈRE VERSION FAUSSE, CORRIGÉE D'APRÈS L'ORIGINAL. J'avais supposé que les extranets récents posaient des cartes blanches sur un fond gris. Mesuré dans le manager OVHcloud, le `body` est en blanc pur : le gris n'apparaît que sur deux surfaces, le bandeau de titre et la ligne d'en-tête des tableaux. Le tableau lui-même n'est pas dans une carte du tout — ni bordure, ni ombre, ni rayon : il est posé à même le blanc. La conséquence est contre-intuitive et mérite d'être écrite : ce qui fait l'allure aérée n'est pas le nombre de surfaces, c'est leur RARETÉ. Chaque encadré ajouté est une frontière de plus à lire. Les rayons redescendent donc à 6/8 px : ils n'ont plus à détacher des cartes d'un fond, seulement à adoucir des boutons et des champs. Et les ombres deviennent presque nulles, réservées à ce qui flotte réellement (menu déroulant, dialogue, calculatrice). */ --sidebar-width: 248px; --header-height: 60px; --border-radius: 6px; --border-radius-lg: 8px; /* Hauteur commune à tout ce qui se pose dans une barre d'actions : bouton d'icône, menu déroulant, liste de choix. Elles avaient dérivé à 26, 30 et 38 px côte à côte. */ --h-commande: 38px; --shadow-sm: 0 1px 2px rgba(19,26,63,0.05); --shadow: 0 2px 4px -2px rgba(19,26,63,0.06), 0 4px 12px -2px rgba(19,26,63,0.08); --shadow-lg: 0 4px 6px -2px rgba(19,26,63,0.05), 0 12px 24px -4px rgba(19,26,63,0.10); /* Typographie ─────────────────────────────────────────────────────────────────── La base passe de 14 à 16 px, avec un interligne de 24 px. C'est l'écart le plus visible avec l'original, et le plus simple à rater : on croit qu'un extranet moderne se reconnaît à ses couleurs, alors qu'il se reconnaît d'abord à ce qu'il écrit plus gros. Sans danger pour les largeurs : `html` ne porte aucune taille, donc les 436 valeurs en `rem` de cette feuille — dont toutes les colonnes calibrées u-col-* — restent indexées sur les 16 px du navigateur et ne bougent pas d'un pixel. Seul ce qui hérite de `body` grandit. */ --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-size-base: 16px; --line-height: 1.5; /* Le bandeau de titre : la seule surface teintée d'un écran de liste. OVH y met un dégradé lavande ; ici une teinte dérivée de l'indigo maison, pour que la parenté se voie sans copier la marque. */ --bandeau-bg: linear-gradient(105deg, #eef0fb 0%, #e6e9f8 60%, #dfe3f4 100%); /* ── Compatibility aliases ────────────────────────────────────────── Every page across the app (admin/*, services/*, auth/*, the KNX module) was built against these variable names in the old assets/css/style.css / heures.css. Keeping the names and pointing them at the new tokens means all existing markup re-themes for free, with zero markup changes. --shadow/--shadow-lg/--primary are already shared names above and need no alias. */ /* Fond de page BLANC. Voir la note sur la rareté des surfaces plus haut : le gris est réservé au bandeau de titre et à l'en-tête de tableau. */ --page-bg: #ffffff; --bg: var(--page-bg); --card-bg: #ffffff; /* --surface était appelé par trois règles (choix des groupes médians, zone de dépôt, titre de médian) sans avoir jamais été déclaré : la propriété était simplement invalide et le fond restait transparent. Invisible tant que le fond de page frôlait le blanc, la faute se voyait dès qu'il a foncé. Déclaré ici, l'intention d'origine s'applique enfin. */ --surface: var(--card-bg); --text: var(--gray-800); --text-muted: var(--gray-500); --border: var(--gray-200); --success-bg: var(--success-light); --success-text: #065f46; --error-bg: var(--danger-light); --error-text: #991b1b; --radius: var(--border-radius-lg); } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font); font-size: var(--font-size-base); line-height: var(--line-height); color: var(--gray-800); background: var(--page-bg); min-height: 100vh; } /* Les liens prennent la couleur de leur texte, visités ou non. Sans cette règle, le navigateur applique son bleu puis son violet : dans une même liste, deux lignes s'affichaient de couleurs différentes selon qu'on avait ouvert la fiche ou non, ce qui laissait croire à une différence de nature entre les enregistrements. Le soulignement au survol conserve l'indication qu'on peut cliquer ; les boutons, eux, portent déjà la leur et n'en ont pas besoin. */ /* :where() ne compte pas dans le calcul de spécificité, et c'est tout l'intérêt ici : écrit « a:visited », le sélecteur pèse autant qu'une classe et l'emporte sur .btn-primary — les boutons bleus déjà cliqués perdaient leur texte blanc. Enveloppé, la règle ne pèse que son élément et s'efface devant n'importe quel habillage de composant. */ a:where(:link, :visited) { color: inherit; text-decoration: none; } a:where(:link, :visited):where(:hover) { text-decoration: underline; } a.btn:hover, a.sidebar-link:hover, a.filter-pill:hover, a.service-card:hover { text-decoration: none; } /* ========== LAYOUT ========== */ .app-wrapper { display: flex; min-height: 100vh; } /* SIDEBAR ───────────────────────────────────────────────────────────────────── Claire, et COLLÉE AU BORD — séparée du contenu par un simple cheveu. J'avais d'abord détaché la colonne de 10 px, en croyant que c'était ce qui donnait aux extranets récents leur air aéré. Vérification faite dans le manager OVHcloud : la colonne y touche le bord et descend sur toute la hauteur. Détachée, elle ajoutait une ombre, un rayon et une frontière de plus à lire — l'inverse de l'effet recherché. Un fond différent du contenu n'est même plus nécessaire : la colonne et la page sont toutes deux blanches, et seule la bordure les sépare. */ .sidebar { width: var(--sidebar-width); background: var(--card-bg); color: var(--gray-700); border-right: 1px solid var(--gray-200); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 200; transition: transform 0.25s ease; overflow-y: auto; } .sidebar-logo { padding: 18px 16px; border-bottom: 1px solid var(--gray-100); display: flex; align-items: center; justify-content: center; } /* Le symbole seul remplace le monogramme : il peut être nettement plus grand qu'un logo comportant du texte, puisque rien n'y a besoin d'être lu. */ .sidebar-logo img { height: 56px; width: auto; display: block; } .sidebar-logo-mark { width: 32px; height: 32px; border-radius: 8px; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; } /* Les séparateurs de section disparaissent : sur fond clair, un trait tous les quatre items hachait la colonne. L'intitulé de section et l'espace suffisent à regrouper. */ .sidebar-section { padding: 6px 8px; } /* Casse normale, comme partout ailleurs dans Nalie depuis que les en-têtes de tableau ont quitté les capitales. J'avais gardé les majuscules ici en invoquant OVH, qui écrit « TRANSVERSE » — mais chez eux c'est une étiquette posée au-dessus d'une liste toujours ouverte. Ici l'intitulé est devenu un BOUTON qu'on clique : un bouton se lit comme un mot, et 10 px capitalisés espacés se lisent mal et se visent mal. La taille monte donc aussi. */ .sidebar-section-label { font-size: 0.8125rem; font-weight: 600; /* gray-600 et non gray-400 : sur le fond sombre d'avant, gray-400 était un gris clair bien détaché ; sur blanc il tombe à 2,5:1, sous le seuil lisible. Et depuis que l'intitulé est un bouton, il remonte encore d'un cran — une commande ne doit pas être plus pâle que ce qu'elle commande. */ color: var(--gray-600); padding: 9px 8px; } /* ── NOUVEAUTÉS ────────────────────────────────────────────────────── Une colonne étroite, et c'est délibéré : c'est le seul écran de Nalie qui se lit comme un texte suivi. La borne est posée en `ch`, sur la mesure du texte lui-même, et non sur la page — la règle générale reste la pleine largeur. */ .changelog { max-width: 72ch; } .changelog-entree + .changelog-entree { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--gray-100); } .changelog-date { font-size: 0.8125rem; color: var(--gray-500); margin-bottom: 4px; } .changelog-titre { font-size: 1.25rem; font-weight: 600; color: var(--gray-900); margin: 0 0 12px; } .changelog-liste { margin: 0; padding-left: 1.25rem; } .changelog-liste li { margin-bottom: 8px; line-height: 1.6; } /* ── BOUTON EN ICÔNE SEULE ─────────────────────────────────────────── Pour les actions dont le symbole est compris sans lecture : partager, modifier, revenir. Une règle vaut d'être écrite, parce qu'elle décide de tout le reste : une icône seule n'est acceptable que si l'action est RÉVERSIBLE ou inoffensive. Supprimer, valider, envoyer gardent leur mot — une icône mal reconnue s'y paie trop cher. Et chacune porte un title ET un aria-label : le premier pour la souris, le second pour qui n'a ni souris ni vue de l'écran. 44 px de côté : c'est la cible tactile minimale, déjà retenue ailleurs dans cette feuille. Un bouton d'icône est précisément le cas où l'on est tenté de descendre à 28 px. */ .btn-icone { display: inline-flex; align-items: center; justify-content: center; width: var(--h-commande); height: var(--h-commande); padding: 0; border: 1px solid var(--gray-200); border-radius: var(--border-radius); background: var(--card-bg); color: var(--gray-600); font-size: 15px; line-height: 1; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; } .btn-icone:where(:link, :visited) { color: var(--gray-600); } .btn-icone:hover { background: var(--gray-50); color: var(--gray-900); border-color: var(--gray-300); text-decoration: none; } /* 44 px sur téléphone : la cible tactile minimale, pour toute la rangée et pas seulement pour les icônes — un menu déroulant se vise au doigt aussi mal qu'un bouton. */ @media (max-width: 768px) { :root { --h-commande: 44px; } } /* La liste d'état de la fiche dossier est de la même rangée : elle suit. Sans ça elle reste à 30 px et casse l'alignement à elle seule. */ .actions-cell .form-control-sm { height: var(--h-commande); } /* ── MENU D'ACTIONS ────────────────────────────────────────────────── Un bouton qui déploie une liste d'actions. Il réunit les « + Ajouter … » qui étaient éparpillés, un par section. Ce qu'on gagne n'est pas seulement de la place : les quatre boutons étaient posés chacun au-dessus de sa section, si bien qu'il fallait faire défiler la page pour savoir ce qu'on pouvait ajouter à un dossier. Réunis, la réponse tient en un clic et au même endroit. Ce qu'on perd, et il faut le dire : une action dans un menu est moins visible qu'un bouton posé. C'est acceptable ici parce qu'aucune de ces actions n'est une étape obligée — on ouvre un dossier pour le consulter, pas pour y ajouter un contrat. */ .menu-actions { position: relative; display: inline-block; } /* Le bouton qui déploie le menu. ───────────────────────────────────────────────────────────────────── Il portait .btn-secondary, et jurait : dans la même rangée, la liste d'état mesurait 30 px, lui 26, les icônes 38, et il était le seul sur fond gris. Trois hauteurs et deux fonds pour quatre commandes qui font le même travail. D'où un jeton plutôt qu'une valeur recopiée : --h-commande fixe la hauteur de tout ce qui se pose dans une barre d'actions. Si on la change un jour, elle change pour les quatre à la fois — c'est précisément la divergence qu'on vient de corriger qu'on s'interdit de reproduire. Même fond blanc et même bordure en cheveu que .btn-icone : rien ne distingue « + Ajouter » d'une icône sinon qu'il porte un mot. */ .menu-actions-bouton { display: inline-flex; align-items: center; gap: 8px; height: var(--h-commande); padding: 0 12px; border: 1px solid var(--gray-200); border-radius: var(--border-radius); background: var(--card-bg); color: var(--gray-600); font: inherit; font-size: 0.875rem; line-height: 1; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; } .menu-actions-bouton:hover { background: var(--gray-50); color: var(--gray-900); border-color: var(--gray-300); } /* Le chevron tourne quand le menu s'ouvre : le bouton dit dans quel état il est, plutôt que de laisser la liste le dire à sa place. */ .menu-actions-bouton .menu-actions-chevron { font-size: 11px; line-height: 1; transition: transform 0.18s ease; } .menu-actions-bouton[aria-expanded="true"] .menu-actions-chevron { transform: rotate(180deg); } .menu-actions-liste { position: absolute; top: calc(100% + 6px); right: 0; min-width: 230px; background: var(--card-bg); border: 1px solid var(--gray-200); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-lg); padding: 6px; z-index: 300; } .menu-actions-liste[hidden] { display: none; } .menu-actions-liste a, .menu-actions-liste button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: none; background: none; border-radius: var(--border-radius); font: inherit; font-size: 0.875rem; color: var(--gray-700); text-align: left; cursor: pointer; } .menu-actions-liste a:where(:link, :visited) { color: var(--gray-700); } .menu-actions-liste a:hover, .menu-actions-liste button:hover { background: var(--gray-50); color: var(--gray-900); text-decoration: none; } .menu-actions-liste .menu-actions-icone { width: 18px; text-align: center; flex-shrink: 0; } /* ── CHAMPS VIDES ──────────────────────────────────────────────────── Un champ sans valeur n'affiche plus « — » : il disparaît. Sur une fiche dossier, quatre tirets alignés occupaient autant de place que quatre renseignements et n'apprenaient rien. Mais SEULEMENT EN LECTURE. En édition (.editing), tout revient : sans ça, un champ jamais rempli deviendrait impossible à remplir — l'écran cacherait la seule chose qu'on vient y faire. C'est le piège de cette optimisation, et c'est pour ça que la règle est écrite avec :not(). */ .project-info:not(.editing) [data-info-field].est-vide, .project-info:not(.editing) .est-vide { display: none; } /* ── LE CADRE DANS LE CADRE ────────────────────────────────────────── .project-info portait son propre fond, sa bordure et son ombre. Posée dans un .card-body, elle dessinait un second encadré à quinze pixels du premier, sans rien séparer de plus. La carte suffit. */ .card-body > .project-info { background: none; border: none; box-shadow: none; border-radius: 0; padding: 0; } /* ── LISTE D'AUTOCOMPLÉTION ────────────────────────────────────────── Partagée : les communes s'en servaient déjà sous le nom .commune-suggestions, les adresses KNX la reprennent. Deux listes qui se comporteraient différemment dans la même application s'apprendraient deux fois. */ .auto-suggestions { position: absolute; z-index: 400; max-height: 320px; overflow-y: auto; background: var(--card-bg); border: 1px solid var(--gray-200); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-lg); padding: 4px; } .auto-suggestions[hidden] { display: none; } .auto-suggestion { display: block; width: 100%; padding: 8px 10px; border: none; background: none; border-radius: var(--border-radius); font: inherit; font-size: 0.875rem; color: var(--gray-700); text-align: left; cursor: pointer; } .auto-suggestion:hover, .auto-suggestion.est-surligne { background: var(--gray-50); color: var(--gray-900); } /* L'adresse en tête, en chiffres tabulaires : les 0/1/12 s'alignent d'une ligne à l'autre, ce qui rend la liste parcourable d'un coup d'œil. */ .auto-suggestion-clef { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--primary-dark); margin-right: 2px; } .auto-suggestion-note { display: block; font-size: 0.75rem; color: var(--gray-500); margin-top: 1px; } /* ── GRILLE DE BOUTONS ─────────────────────────────────────────────── Le nombre de colonnes vient de l'appareil, par une variable posée sur l'élément : c'est la seule façon de dessiner une grille dont la forme est une donnée et non une classe connue d'avance. */ /* Le formulaire au-dessus, la grille en dessous. Côte à côte, cela tient tant qu'un appareil a quatre boutons ; à dix, la grille prend toute la largeur et le formulaire se retrouve comprimé. */ .kx-button-panel--empile { flex-direction: column; gap: 16px; } /* ── LE FORMULAIRE D'UN BOUTON, SUR UNE LIGNE ──────────────────────── Empilé, il faisait défiler la page entre deux boutons : on cliquait un bouton, on descendait remplir, on remontait cliquer le suivant. Quatre champs de suite se lisent aussi bien côte à côte, et la grille reste visible pendant la saisie — ce qui est tout l'intérêt de l'avoir au-dessus. Les largeurs sont données en `flex-basis` et non en pourcentage : l'étiquette et l'adresse ont besoin de place, les notes s'accommodent de ce qui reste. Sur un écran étroit, la ligne se replie d'elle-même en deux, puis en colonne. */ /* UNE GRILLE, ET NON UN FLUX QUI S'ENROULE. En flex avec retour à la ligne, chaque champ se plaçait où il restait de la place : l'adresse, plus haute parce qu'elle porte un lien en dessous, décalait ses voisins, et la rangée partait en escalier. Une grille pose des colonnes fixes et des lignes qui s'alignent — c'est exactement ce qu'on demande ici. Trois colonnes, deux lignes : étiquette, action, adresse ; puis notes, appui long, enregistrement. Les champs qui portent une aide en dessous ne débordent plus sur les autres, puisque chaque cellule est indépendante. */ .kx-button-config-form--ligne { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 14px; align-items: start; padding: 14px; background: var(--gray-50); border-radius: var(--border-radius-lg); } .kx-button-config-form--ligne h4 { grid-column: 1 / -1; margin: 0; font-size: 0.9375rem; color: var(--gray-900); } .kx-button-config-form--ligne .form-group, .kx-button-config-form--ligne .kx-address-field { display: flex; flex-direction: column; gap: 3px; margin: 0; min-width: 0; } .kx-button-config-form--ligne label { font-size: 0.75rem; color: var(--gray-500); margin: 0; } /* L'appui long se déplie sur toute la largeur : c'est un second jeu de champs, pas une cellule de plus dans la rangée. */ .kx-button-config-form--ligne .kx-appui-long { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 14px; align-items: start; } .kx-button-config-form--ligne .kx-appui-long-ouvrir { margin: 0; align-self: center; } /* L'état du bouton — ce que la déduction a proposé, une action disparue — occupe la dernière cellule de la rangée. L'enregistrement, lui, a quitté le formulaire : il porte maintenant sur l'appareil entier. */ .kx-button-config-form--ligne .kx-button-etat { align-self: center; font-size: 0.8125rem; min-height: 1em; /* sinon la rangée se tasse quand il est vide */ } /* ── `hidden` DOIT TOUJOURS GAGNER ─────────────────────────────────── Un `display` posé par une classe l'emporte sur l'attribut `hidden`, qui ne vaut qu'un `display: none` de feuille par défaut. Ce piège s'est refermé DEUX FOIS sur ce même formulaire : d'abord sur la zone de configuration entière, qui s'affichait avant tout clic ; puis sur le bloc d'appui long, qui restait déplié alors que le lien « + Ajouter un appui long » s'affichait juste à côté — l'écran proposait d'ouvrir ce qui était déjà ouvert. La règle est donc posée une fois pour TOUT ce que le formulaire contient, et non élément par élément. `!important` est ici l'intention même : rien de ce qu'une classe décide ne doit rendre visible un élément que le code a masqué. */ .kx-button-config-form--ligne[hidden], .kx-button-config-form--ligne [hidden] { display: none !important; } /* ── DISTINGUER LE MÉTIER DE SES ACTIONS ───────────────────────────── Le titre de rubrique et les actions se ressemblaient trop : même graisse, même famille, à deux pixels de taille près. On lisait une liste plate de trente lignes dont certaines étaient des titres. Trois marques cumulées, parce qu'une seule ne suffit pas quand on parcourt vite : un fond, des capitales espacées — ici elles sont justifiées, c'est une étiquette de regroupement et non un mot à lire — et un retrait des actions sous leur rubrique. */ .kx-actions-metier-titre { background: var(--gray-100); color: var(--gray-600); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.6875rem; } .kx-actions-metier-titre:hover { background: var(--gray-200); color: var(--gray-900); } .kx-actions-metier-corps { padding-left: 10px; } .kx-actions-metier + .kx-actions-metier { margin-top: 14px; } .kx-button-grid { display: grid; /* `auto` et non `1fr` : une colonne se dimensionne sur son contenu, pas sur une part de la largeur disponible. Avec 1fr, deux boutons s'étalaient sur tout l'écran et dix se serraient à rien — la grille changeait d'échelle selon l'appareil, alors qu'un bouton fait la même taille partout. */ grid-template-columns: repeat(var(--kx-colonnes, 1), auto); gap: 6px; width: fit-content; max-width: 100%; /* Au-delà, on défile plutôt que de rapetisser : un appareil à quatre colonnes sur un écran étroit doit rester lisible. */ overflow-x: auto; } /* LA TAILLE D'UN BOUTON, ET CE QU'ELLE DOIT TENIR. Le calcul : un poussoir de dix boutons fait cinq lignes sur deux colonnes, ou trois sur quatre. À 96 px de large, quatre colonnes tiennent dans 400 px — la moitié d'un écran d'ordinateur portable, et l'appareil reste dessiné à une échelle plausible. La hauteur est fixe, et c'est délibéré : des boutons de hauteurs différentes selon la longueur de l'étiquette ne ressembleraient plus à un appareil. L'étiquette est donc bornée à deux lignes et tronquée au-delà — le nom entier se lit dans le formulaire, qui est juste au-dessus. */ .kx-button-grid .kx-device-button { width: 96px; min-width: 0; height: 62px; min-height: 0; padding: 4px 6px; gap: 2px; overflow: hidden; } .kx-button-grid .kx-device-button-number { font-size: 0.75rem; line-height: 1; } .kx-button-grid .kx-device-button-label { font-size: 0.6875rem; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; } .kx-button-vide { width: 96px; height: 62px; } /* Une case vide occupe sa place sans rien afficher : resserrer les boutons ferait ressembler la grille à un autre appareil que celui posé au mur. */ .kx-button-vide { display: block; } /* L'appui long, replié. Le lien reste discret : c'est une exception, pas une étape du réglage d'un bouton. */ .kx-appui-long { margin: 0; } .kx-appui-long-ouvrir { display: inline-block; margin: 2px 0 12px; font-size: 0.875rem; } .kx-appui-long-ouvrir[hidden] { display: none; } /* ── RÉDUIRE LE MENU ───────────────────────────────────────────────── La colonne s'efface entièrement et le contenu prend toute la largeur. Effacer et non rétrécir en rail d'icônes : un rail reprend la moitié de la largeur gagnée pour des symboles qu'il faut deviner. Quand on demande l'écran entier, c'est l'écran entier. La classe est posée sur par le script du — voir header.php. Sur et non sur , parce que n'existe pas encore au moment où il faut décider. */ .sidebar-reduire { display: flex; align-items: center; gap: 8px; width: calc(100% - 16px); margin: 4px 8px 12px; padding: 9px 10px; border: none; border-top: 1px solid var(--gray-100); border-radius: var(--border-radius); background: none; color: var(--gray-500); font: inherit; font-size: 0.8125rem; text-align: left; cursor: pointer; /* Poussé en bas de la colonne : c'est une commande qu'on règle une fois, pas une entrée de navigation. */ margin-top: auto; } .sidebar-reduire:hover { background: var(--gray-50); color: var(--gray-900); } .sidebar-reduire-fleche { font-size: 14px; line-height: 1; } .menu-reduit .sidebar { transform: translateX(-100%); } .menu-reduit .main-content { margin-left: 0; } /* Le ☰ de la barre reparaît sur grand écran : sans lui, le menu effacé serait sans retour. C'est la seule façon de le rouvrir, donc il ne peut pas rester caché. */ .menu-reduit .sidebar-toggle { display: flex; align-items: center; justify-content: center; } /* La transition ne porte que sur ce qui bouge. `transform` et `margin` s'animent sans redessiner la page ; animer `width` ferait recalculer la mise en page du tableau à chaque image. */ .main-content { transition: margin-left 0.25s ease; } /* ── SECTIONS REPLIABLES ───────────────────────────────────────────── Comme le menu du manager OVHcloud : chaque rubrique s'ouvre au clic. Les trois premiers liens — Accueil, Contacts, Dossiers — restent toujours visibles : ils ne sont pas une rubrique, ce sont les entrées qu'on utilise à chaque visite, et les replier ferait payer un clic à chaque fois pour économiser trois lignes. Repliable ne veut pas dire refermé d'office : la section qui contient la page affichée est ouverte dès le rendu, sinon le menu contredirait l'écran. */ .sidebar-section-bouton { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: none; cursor: pointer; font: inherit; text-align: left; } .sidebar-section-bouton:hover { color: var(--gray-700); } .sidebar-chevron { font-size: 13px; line-height: 1; transition: transform 0.18s ease; /* Fermé, le chevron pointe vers la droite ; ouvert, vers le bas. La rotation part de -90° pour que l'animation aille dans le sens de l'ouverture. */ transform: rotate(-90deg); } .sidebar-section--pliable.est-ouverte .sidebar-chevron { transform: rotate(0deg); } /* La fermeture passe par `display: none` et non par une hauteur animée : une section fermée ne doit pas rester atteignable au clavier, ce qu'une hauteur nulle avec overflow caché laisserait faire. */ .sidebar-section--pliable .sidebar-section-corps { display: none; } .sidebar-section--pliable.est-ouverte .sidebar-section-corps { display: block; } .sidebar-link { display: flex; align-items: center; gap: 10px; padding: 9px 10px; color: var(--gray-700); text-decoration: none; font-size: 13.5px; /* Arrondi : l'entrée active devient une pastille dans la colonne, et non une bande qui la traverse de bord à bord. */ border-radius: var(--border-radius); transition: background 0.15s, color 0.15s; cursor: pointer; border: none; background: none; width: 100%; text-align: left; } .sidebar-link:hover { background: var(--gray-100); color: var(--gray-900); } /* Actif : un fond teinté et un texte de couleur, plutôt qu'un aplat plein. Sur une colonne claire, l'aplat indigo pleine largeur pèse trop lourd et tire l'œil loin du contenu, qui est ce qu'on vient lire. */ .sidebar-link.active { background: var(--primary-light); color: var(--primary-dark); font-weight: 500; } .sidebar-link .icon { width: 18px; text-align: center; flex-shrink: 0; font-size: 15px; } /* Pastille de rappel dans le menu — migrations restant à appliquer. Poussée à droite pour rester lisible quelle que soit la longueur du libellé. */ .sidebar-badge { margin-left: auto; min-width: 20px; padding: 1px 6px; border-radius: 10px; /* Pastille TEINTÉE, plus pleine. Un rond rouge vif se justifiait sur une colonne sombre, où il fallait ce contraste pour exister ; sur la colonne claire il devient l'élément le plus criard de l'écran alors qu'il ne compte que des lignes en attente. Le fond pâle et le texte foncé se lisent aussi bien et ne hurlent pas. */ background: var(--danger-light, #fee2e2); color: #991b1b; font-size: 11px; font-weight: 700; text-align: center; } /* MAIN CONTENT La colonne est revenue au bord : la largeur réservée redevient sa seule largeur, sans la marge qu'exigeait la version détachée. */ .main-content { margin-left: var(--sidebar-width); flex: 1; display: flex; flex-direction: column; min-height: 100vh; width: 100%; } /* TOP BAR ───────────────────────────────────────────────────────────────────── Épurée : plus de bandeau blanc barré d'un trait et souligné d'une ombre. Le raisonnement tient à ce qu'on regarde. Une barre blanche sur fond gris crée une troisième surface, en concurrence avec la barre latérale et les cartes, pour ne porter qu'un titre et un menu de compte. Posée sur le fond de page, elle disparaît en tant qu'objet et laisse les cartes seules à détacher l'information. Le fond reste OPAQUE malgré tout : la barre est collante, et une barre transparente laisserait défiler les lignes d'un tableau sous le titre. Le cheveu du bas revient, en revanche : depuis que la page est blanche, la barre et le contenu ont la même couleur, et sans trait un tableau qui défile semble passer À TRAVERS le titre plutôt que derrière. */ .topbar { height: var(--header-height); background: var(--page-bg); border-bottom: 1px solid var(--gray-200); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; position: sticky; top: 0; z-index: 100; } /* BANDEAU DE DÉMONSTRATION — sous la barre du haut, sur chaque page de la société bac à sable (includes/header.php). Ambre, comme les avertissements : il ne signale pas une erreur, il prévient. */ .bandeau-demo { background: var(--warning-light); color: #92400e; border-bottom: 1px solid #fde68a; padding: 8px 24px; font-size: 0.85rem; line-height: 1.45; } .topbar-title { font-size: 16px; font-weight: 600; color: var(--gray-800); } .topbar-actions { display: flex; align-items: center; gap: 12px; } .topbar-user { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 6px 10px; border-radius: var(--border-radius); transition: background 0.15s; text-decoration: none; color: var(--gray-700); font-size: 13px; } .topbar-user:hover { background: var(--gray-100); } /* CALCULATRICE — petite fenêtre flottante, dans l'esprit de la calculatrice d'Apple : fond sombre, touches rondes, opérateurs en orange. Elle se déplace en attrapant sa barre de titre. */ .calc-zone { position: relative; display: flex; align-items: center; } .calc-bouton { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--gray-200); background: #fff; color: var(--gray-700); border-radius: var(--border-radius); cursor: pointer; font-size: 14px; transition: background 0.15s, border-color 0.15s; } .calc-bouton:hover { background: var(--gray-100); } .calc-bouton[aria-expanded="true"] { background: var(--primary); border-color: var(--primary); color: #fff; } .calc-fenetre { position: absolute; top: calc(100% + 10px); right: 0; width: 288px; padding: 0 14px 16px; background: #1c1c1e; border-radius: 14px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.08); z-index: 200; user-select: none; } .calc-fenetre:focus { outline: none; } /* Sans cette règle, le display du conteneur écraserait l'attribut hidden. */ .calc-fenetre[hidden] { display: none; } /* Une fois déplacée, la fenêtre quitte l'ancrage sous le bouton. */ .calc-fenetre.calc-libre { position: fixed; top: auto; right: auto; } .calc-barre { height: 30px; display: flex; align-items: center; gap: 8px; cursor: grab; margin: 0 -14px; padding: 0 14px; } .calc-barre:active { cursor: grabbing; } .calc-titre { font-size: 11px; color: #8e8e93; letter-spacing: 0.02em; } .calc-fermer { width: 11px; height: 11px; border-radius: 50%; border: 0; background: #ff5f57; cursor: pointer; padding: 0; flex-shrink: 0; } .calc-fermer:hover { background: #ff3b30; } .calc-ecran { text-align: right; padding: 2px 4px 10px; overflow: hidden; } .calc-ecran-apercu { min-height: 16px; font-size: 12px; color: #8e8e93; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .calc-ecran-valeur { font-size: 42px; line-height: 1.15; font-weight: 300; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .calc-touches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; } .calc-t { height: 58px; border: 0; border-radius: 50%; background: #505050; color: #fff; font-size: 24px; font-weight: 400; cursor: pointer; transition: filter 0.1s; } .calc-t:hover { filter: brightness(1.25); } .calc-t:active { filter: brightness(1.5); } .calc-t-fonction { background: #a5a5a5; color: #1c1c1e; font-weight: 500; } .calc-t-op { background: #ff9f0a; color: #fff; font-size: 27px; } /* L'opérateur en attente s'inverse : on voit d'un coup d'œil ce qu'on est en train de poser après avoir tapé le premier nombre. */ .calc-t-op.est-actif { background: #fff; color: #ff9f0a; } .calc-t-zero { grid-column: span 2; border-radius: 30px; text-align: left; padding-left: 25px; } /* Sortie : discrète au repos, rouge au survol. Un bouton toujours rouge à côté du nom attire l'œil sur l'action la moins fréquente de la barre. */ .topbar-sortie { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: var(--border-radius); color: var(--gray-500); font-size: 14px; transition: background 0.15s, color 0.15s; } .topbar-sortie:hover { background: var(--danger-light, #fee2e2); color: var(--danger, #dc2626); text-decoration: none; } .user-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; flex-shrink: 0; } /* PAGE CONTENT La garniture passe par un jeton : le bandeau de titre doit la compenser en marge négative pour aller au bord, et sur téléphone elle change. Deux endroits à garder d'accord — un seul chiffre. */ .page-content { --page-pad: 24px; padding: var(--page-pad); flex: 1; /* Plus de plafond à 1400 px. Sur un écran large, il laissait un tiers de la fenêtre vide à droite pendant que les colonnes des tableaux se tronquaient à gauche — le pire des deux mondes. Le plafond existait pour la raison habituelle : une ligne de texte de 2000 px est illisible, l'œil perd sa ligne en revenant à la marge. Sauf que Nalie n'affiche presque jamais de prose ; elle affiche des tableaux, qui eux profitent de chaque pixel. Là où il y a vraiment du texte suivi — la phrase sous un titre de page — la borne est posée sur le paragraphe lui-même, en `ch`, et non sur la page entière. C'est le bon endroit : elle suit le texte au lieu de contraindre tout le reste. */ max-width: none; width: 100%; } .page-content.full-width { max-width: 100%; } .page-header { margin-bottom: 24px; } /* 2,25 rem = 36 px, graisse 600 : la valeur relevée chez OVH. Nalie titrait à 22 px en graisse 700. Plus petit ET plus gras — c'est le réglage d'un titre qui doit s'imposer faute de place. Plus grand et moins gras s'impose mieux, et laisse le gras aux mots qui comptent dans la page. */ .page-header h1 { font-size: 2.25rem; font-weight: 600; color: var(--gray-900); line-height: 1.2; } /* La phrase sous le titre n'est plus une mention en petits caractères : chez OVH elle explique à quoi sert la section, en pleine taille. */ .page-header p { font-size: 1rem; color: var(--gray-600); margin-top: 8px; max-width: 70ch; } /* ══════════════════════════════════════════════════════════════════════ GABARIT DE LISTE ══════════════════════════════════════════════════════════════════════ Relevé dans le manager OVHcloud, où les trois pièces vont ensemble : fil d'Ariane → situe la page dans l'arborescence bandeau → le titre, en grand, ET une phrase qui dit à quoi sert la section barre d'outils→ l'action principale à gauche, chercher et filtrer à droite La phrase d'intention est la pièce que Nalie n'avait nulle part, et c'est celle qui manquait le plus. Un écran qui affiche « Dossiers » puis un tableau suppose que le lecteur sait déjà ce qu'il regarde ; celui qui ajoute « Chaque affaire suivie pour un client » l'apprend à celui qui ne le sait pas, sans gêner celui qui le sait. */ .bandeau { background: var(--bandeau-bg); /* Au bord : la garniture de .page-content est compensée pour que la teinte file jusqu'aux bords, comme chez OVH. Sans ça le bandeau flotte en carte, ce qui est précisément le patron qu'on quitte. */ margin: calc(var(--page-pad, 24px) * -1) calc(var(--page-pad, 24px) * -1) 0; padding: 16px var(--page-pad, 24px) 28px; } /* Le fil d'Ariane se place DANS le bandeau, pas au-dessus. Vu à l'écran : posé dessus, il laissait une bande blanche de 30 px entre la barre du haut et la teinte — une lame de fond qui n'avait aucune raison d'être là. Chez OVH il est dans la teinte, et c'est cohérent : il appartient au titre, il en est l'adresse. */ .bandeau .fil-ariane { margin-bottom: 8px; } /* ── L'EN-TÊTE DE PAGE ─────────────────────────────────────────────── Le fil d'Ariane EN HAUT, collé sous la barre : c'est la première ligne de la page, sans marge au-dessus. Le nom de la page en dessous, en grand. Le tout dans la teinte, comme le manager OVHcloud. Sans phrase d'intention : leurs sections portent des noms que le client ne connaît pas (« Bare Metal Cloud »), d'où l'explication sous le titre. « Dossiers » n'en a pas besoin. On garde la forme, on laisse la pièce qui ne répond à aucun besoin ici. */ /* ── L'EN-TÊTE DE PAGE ─────────────────────────────────────────────── Le fil d'Ariane est dans la BARRE DU HAUT (voir header.php), et le bloc de titre que chaque écran porte déjà — .admin-header ou .page-header — prend la teinte juste en dessous. À l'écran : fil d'Ariane collé tout en haut, nom de la page en grand dessous, teinte filant jusqu'aux bords. Le gabarit du manager OVHcloud. Pourquoi le CSS plutôt que les cinquante-neuf pages : le

de chaque écran reste le sien. Aucun titre ne peut devenir faux, puisqu'aucun n'est réécrit. Et un écran qui n'a ni .admin-header ni .page-header garde simplement son fil d'Ariane, sans rien de cassé. La classe .a-fil-ariane est posée par header.php. Elle est nécessaire parce que le fil d'Ariane a quitté .page-content pour la barre : un :has() ne pouvait plus le trouver depuis le contenu. */ /* Le fil d'Ariane dans la barre : il doit se COUPER, jamais pousser. ───────────────────────────────────────────────────────────────────── Sur iPhone, « Aménagement d'une cuisine — GRANGE » repliait le fil sur trois lignes, qui passaient sous les icônes : la barre a une hauteur fixe, et ce qui déborde ne la repousse pas, il la traverse. Donc nowrap, et min-width:0 — sans ce zéro, un élément flex refuse de descendre sous la largeur de son contenu et l'ellipsis n'arrive jamais à s'appliquer. C'est le piège classique, et il ne se voit qu'à l'écran. */ .topbar .fil-ariane--auto { margin: 0; font-size: 0.9375rem; flex-wrap: nowrap; min-width: 0; overflow: hidden; } .topbar .fil-ariane--auto > * { flex-shrink: 0; } .topbar .fil-ariane--auto [aria-current="page"] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 1; } .fil-ariane-section { color: var(--gray-500); } .topbar .fil-ariane--auto [aria-current="page"] { color: var(--gray-900); font-weight: 600; } /* Sur téléphone, seul le dernier maillon reste. Les ancêtres coûtent la largeur dont le nom de la page a besoin, et la remontée se fait de toute façon par le menu — qui est à un pouce du fil d'Ariane. */ @media (max-width: 768px) { .topbar .fil-ariane--auto a, .topbar .fil-ariane--auto .fil-ariane-sep, .topbar .fil-ariane--auto .fil-ariane-section { display: none; } /* Le prénom laisse la place au nom de la page : il occupait 104 px des 375 d'un iPhone pour une information qu'on connaît déjà — personne n'a besoin qu'on lui rappelle qui il est. La pastille aux initiales reste, elle sert de repère au compte et de cible de clic vers la fiche. */ .topbar-user span:not(.user-avatar) { display: none; } .topbar-user { padding: 6px; } } /* Le bloc de gauche de la barre doit pouvoir rétrécir, lui aussi : sinon il garde la largeur de son contenu et recouvre les actions de droite, quelles que soient les règles posées à l'intérieur. */ .topbar > .d-flex:first-child { min-width: 0; flex: 1 1 auto; } .topbar > .topbar-actions { flex: 0 0 auto; } /* :first-child, et c'est tout le sujet. .admin-header ne désigne pas seulement l'en-tête d'une page : la fiche dossier s'en sert aussi pour titrer chacune de ses sections — Contrats, Matériel installé, Nature des travaux. Sans cette borne, la teinte du bandeau se répétait en travers de la page à chaque section, et l'écran devenait un empilement de bandes grises. Vu à l'écran, pas dans le code. Le premier enfant de .admin-page ou de .page-content, donc : les en-têtes de section sont, eux, imbriqués dans un .chantier-contrats ou un .chantier-hub et ne peuvent pas satisfaire cette condition. */ .main-content.a-fil-ariane .admin-page > .admin-header:first-child, .main-content.a-fil-ariane .page-content > .admin-header:first-child, .main-content.a-fil-ariane .admin-page > .page-header:first-child, .main-content.a-fil-ariane .page-content > .page-header:first-child { background: var(--bandeau-bg); margin: calc(var(--page-pad, 24px) * -1) calc(var(--page-pad, 24px) * -1) 24px; padding: 18px var(--page-pad, 24px) 22px; align-items: flex-end; } .admin-header h1 { font-size: 2.25rem; font-weight: 600; color: var(--gray-900); line-height: 1.15; } /* Nalie porte DEUX gabarits de titre : .admin-header sur soixante-deux écrans, .page-header sur deux. Le second n'est pas une coquille à supprimer — il sert là où le titre est accompagné d'une phrase — mais il doit prendre la teinte comme l'autre, sinon deux écrans voisins ne commencent pas pareil. */ .main-content.a-fil-ariane .page-header p { color: var(--gray-600); margin-top: 6px; } /* Le .admin-page enveloppe le contenu. S'il ouvrait une marge en haut, elle se glisserait entre la barre et le bandeau et couperait la teinte du haut de la page. */ .main-content.a-fil-ariane .admin-page { margin-top: 0; } /* L'ACCUEIL n'a pas de fil d'Ariane — il EST la racine — donc pas de .a-fil-ariane et pas de teinte automatique. Il la prend quand même : chez OVH c'est le grand aplat « Bonjour Grégory ! » qui ouvre la page, et c'est la seule page où le bandeau porte un vrai message plutôt qu'une étiquette de section. */ .main-content:not(.a-fil-ariane) .page-content > .page-header:first-child { background: var(--bandeau-bg); margin: calc(var(--page-pad, 24px) * -1) calc(var(--page-pad, 24px) * -1) 24px; padding: 32px var(--page-pad, 24px) 36px; } .page-header h1 { font-size: 2.25rem; font-weight: 600; color: var(--gray-900); line-height: 1.15; } /* ── FOND DE PAGE GRIS, CONTENU SUR SURFACES BLANCHES ──────────────── Posé par $pageFondGris. Deux familles d'écrans s'en servent : l'accueil, qui aligne une dizaine de blocs, et les LISTES, où le gris encadre le tableau. CE QUI A CHANGÉ D'AVIS, ET POURQUOI C'EST ÉCRIT ICI. Le fond des listes était passé au blanc en septembre après avoir relevé la page « Hébergements » du manager OVHcloud, où le tableau est posé à même le blanc. La note disait : un cadre autour d'un tableau pleine largeur ne délimite rien. Puis la page « Domaines & DNS » du même manager a montré l'inverse — fond gris, tableau en surface blanche à bord arrondi. OVH n'est donc pas d'accord avec lui-même d'une section à l'autre, et aucune mesure ne pouvait trancher : c'est un choix, pas un relevé. Grégory a tranché pour le gris sur les listes. Le blanc reste partout ailleurs — fiches et formulaires — parce que les passer au gris obligerait à faire de chacun une surface, soit une soixantaine d'écrans à reprendre pour un liseré. Le bandeau de titre garde sa teinte et reste au bord : le gris ne commence qu'après lui, comme chez OVH. */ .page-grise { background: #f4f5f8; } /* LA LISTE DEVIENT UNE SURFACE. Sur fond blanc, le tableau se délimitait tout seul — le vide autour de lui suffisait. Sur gris, il flotte : la bordure et le rayon ne sont pas une décoration ajoutée, ils remplacent ce que le blanc faisait gratuitement. L'en-tête passe à un blanc à peine teinté plutôt qu'au gris habituel : sur une surface blanche posée sur gris, un en-tête gris rappellerait le fond de page et couperait la carte en deux. */ .page-grise .table-responsive { background: var(--card-bg); border: 1px solid var(--gray-200); border-radius: 10px; } .page-grise .data-table th { background: #fbfcfe; } .page-grise .data-table th:first-child { border-top-left-radius: 10px; } .page-grise .data-table th:last-child { border-top-right-radius: 10px; } /* La dernière ligne n'a pas de trait : il doublerait la bordure de la carte, à un pixel près, et ce genre de doublon se voit. */ .page-grise .data-table tbody tr:last-child td { border-bottom: none; } /* La colonne collante s'adosse à la carte, donc au blanc : laissée au gris clair, elle dessinait une bande grise au milieu d'une surface blanche dès qu'on faisait défiler. */ .page-grise .table-responsive .data-table th.u-col-sticky { background: #fbfcfe; } .page-grise .table-responsive .data-table td.u-col-sticky, .page-grise .data-table tbody tr:hover td.u-col-sticky { background: var(--card-bg); } /* .form-card ne portait AUCUN style. Sept écrans l'utilisaient pour leur formulaire de création, en attendant d'une classe nommée « carte » qu'elle en dessine une : ils affichaient un formulaire nu. Sur fond blanc le défaut passait inaperçu ; sur gris, le formulaire flotterait. La classe tient enfin ce que son nom annonce. */ .form-card { background: var(--card-bg); border: 1px solid var(--gray-200); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-sm); padding: 16px 18px; margin-bottom: 18px; } .page-grise .cockpit-tuile, .page-grise .stat-card, .page-grise .service-card, .page-grise .form-card, .page-grise .card { background: var(--card-bg); border: 1px solid var(--gray-200); border-radius: 12px; box-shadow: none; } /* Le liseré de gauche des tuiles reste : il porte un sens (alerte, attention, neutre) que ni la couleur de fond ni le titre ne disent. */ .page-grise .cockpit-tuile { border-left-width: 4px; } .page-grise .stat-card, .page-grise .service-card, .page-grise .cockpit-tuile { padding: 18px 20px; } .bandeau-titre { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .bandeau h1 { font-size: 2.25rem; font-weight: 600; color: var(--gray-900); line-height: 1.15; margin: 0; } .bandeau-intention { font-size: 1rem; color: var(--gray-600); margin: 8px 0 0; /* 70 caractères : au-delà, l'œil perd sa ligne en revenant à la marge. Le bandeau étant pleine largeur, sans cette borne la phrase courrait sur 160 caractères et personne ne la lirait. */ max-width: 70ch; } .barre-outils { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 20px 0 16px; } /* Tout ce qui suit est repoussé à droite : chercher et filtrer agissent sur la liste déjà à l'écran, tandis que l'action principale, à gauche, en crée une entrée de plus. Les séparer évite de cliquer « Nouveau » en voulant filtrer. */ .barre-outils-fin { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } /* Le champ de recherche des listes. Il vivait dans le