/* * registre.css — la feuille de système de la charte A2 (docs/CHARTE.md). * Jetons, composants et retaillage Bootstrap : un écran lit ces jetons, il ne * recopie jamais une valeur. Se charge en dernier (index.php) : il redéclare * des jetons de app.css et gagne par l'ordre, pas par !important. */ /* Fontes auto-hébergées, jamais de CDN : le comptoir s'affiche hors ligne. Sous-ensemble latin (œ compris). Chiffres de Plex Sans tous à 600 unités. */ @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/ibm-plex-sans-v530-latin-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/ibm-plex-sans-v530-latin-500.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/ibm-plex-sans-v530-latin-600.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/ibm-plex-sans-v530-latin-700.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* Encres, du plus lu au moins lu. */ --ink: #1B1F24; --ink-2: #4B5563; --ink-3: #7B8592; /* Fond de page, panneau, lavis en retrait. */ --paper: #F4F5F7; --panel: #FFFFFF; --wash: #ECEFF2; --rule: #E3E7EC; --rule-2: #C9D0D8; /* L'accent : l'action et la sélection. */ --acc: #1F5FBF; --acc-w: #E8F0FC; --acc-h: #184C99; /* Le rouge : ce qui coûte du temps ou de l'argent (urgent, retard, erreur). */ --red: #C0261C; --red-w: #FCE9E7; /* La marque Honda : logo et compteurs du menu, jamais un état. */ --marque: #C8102E; /* Échelles d'information, nommées par leur sens. Le manque reprend --red. */ --ecart-plus: #1E7B4B; --ecart-plus-w: #E3F3E9; --etat-neutre: #8A94A1; --etat-neutre-w: #EEF0F3; --etat-ok: var(--ecart-plus); --etat-ok-w: var(--ecart-plus-w); --etat-attention: #9A6400; --etat-attention-w:#FFF6E0; --etat-ecart: var(--red); --etat-ecart-w: var(--red-w); --actif: var(--acc); --actif-w: var(--acc-w); /* Repères de calendrier : un fond que l'œil trouve et ne lit pas. */ --repere-ferie-w: #EEF2F8; --repere-aujourdhui-w: #FFF8E1; /* Indisponibilité : une hachure, pas une teinte. */ --trame-indispo: repeating-linear-gradient( 135deg, transparent 0 6px, var(--rule-2) 6px 7px); /* Coins : rendez-vous, bouton ou champ, menu. Pas d'ombre portée. */ --coin-s: 3px; --coin: 5px; --coin-l: 8px; /* La barre de pied, à hauteur fixe. */ --h-pied: 28px; /* Une seule famille ; --fonte-mono reste pour les écrans qui la nomment. */ --fonte: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --fonte-mono: var(--fonte); } /* ── Retaillage Bootstrap : ses variables de composant remontent vers ces jetons racine ; les régler ici règle les composants sans !important. */ :root { --bs-border-radius: var(--coin); --bs-border-radius-sm: 4px; --bs-border-radius-lg: 6px; --bs-border-radius-xl: var(--coin-l); --bs-border-radius-xxl: var(--coin-l); --bs-border-radius-pill: 50rem; --bs-box-shadow: none; --bs-box-shadow-sm: none; --bs-box-shadow-lg: none; --bs-box-shadow-inset: none; --bs-body-bg: var(--paper); --bs-body-color: var(--ink); --bs-secondary-color: var(--ink-2); --bs-tertiary-color: var(--ink-3); --bs-border-color: var(--rule); --bs-emphasis-color: var(--ink); --bs-secondary-bg: var(--wash); --bs-tertiary-bg: var(--wash); --bs-body-font-family: var(--fonte); --bs-font-sans-serif: var(--fonte); --bs-font-monospace: var(--fonte); --bs-body-font-size: 0.875rem; --bs-body-line-height: 1.4; --bs-primary: var(--acc); --bs-primary-rgb: 31, 95, 191; --bs-danger: var(--red); --bs-danger-rgb: 192, 38, 28; --bs-link-color: var(--acc); --bs-link-color-rgb: 31, 95, 191; --bs-link-hover-color: var(--acc-h); --bs-link-hover-color-rgb: 24, 76, 153; --bs-link-decoration: none; } body { font-family: var(--fonte); font-size: 14px; font-variant-numeric: tabular-nums; color: var(--ink); background: var(--paper); } a:hover { text-decoration: underline; } /* Un numéro ne se coupe jamais : on le lit et on le compose d'un bloc. */ a[href^="tel:"] { white-space: nowrap; } /* Le focus clavier se voit toujours (tout au clavier). */ :focus-visible { outline: 2px solid var(--acc); outline-offset: 1px; } .btn { --bs-btn-focus-box-shadow: none; } /* Un champ est un panneau blanc sous un filet marqué, posé sur le fond gris. */ .form-control, .form-select { background-color: var(--panel); border-color: var(--rule-2); } .form-control:disabled, .form-select:disabled { background-color: var(--wash); } .input-group-text { background-color: var(--wash); border-color: var(--rule-2); } .form-control:focus, .form-select:focus { border-color: var(--acc); outline: 1px solid var(--acc); outline-offset: -1px; box-shadow: none; } /* Boutons : accent plein pour l'action principale, filet pour le reste, rouge pour ce qui détruit. Pas de vert, jaune ni cyan Bootstrap. */ .btn-primary { --bs-btn-bg: var(--acc); --bs-btn-border-color: var(--acc); --bs-btn-color: #fff; --bs-btn-font-weight: 600; --bs-btn-hover-bg: var(--acc-h); --bs-btn-hover-border-color: var(--acc-h); --bs-btn-active-bg: var(--acc-h); --bs-btn-active-border-color: var(--acc-h); --bs-btn-disabled-bg: var(--ink-3); --bs-btn-disabled-border-color: var(--ink-3); } /* Bootstrap déclare la couleur désactivée variante par variante : la régler ici. */ .btn-secondary, .btn-outline-primary, .btn-outline-secondary { --bs-btn-bg: var(--panel); --bs-btn-border-color: var(--rule-2); --bs-btn-color: var(--ink); --bs-btn-hover-bg: var(--wash); --bs-btn-hover-border-color: var(--ink-3); --bs-btn-hover-color: var(--ink); --bs-btn-active-bg: var(--wash); --bs-btn-active-border-color: var(--ink-2); --bs-btn-active-color: var(--ink); --bs-btn-disabled-color: var(--ink-3); --bs-btn-disabled-border-color: var(--rule-2); } /* Un choix à positions : la position qui vaut est à l'encre, comme la maquette. */ .btn-check:checked + .btn-outline-secondary, .btn-check:active + .btn-outline-secondary, .btn-check:checked + .btn-outline-primary, .btn-check:active + .btn-outline-primary { --bs-btn-active-bg: var(--ink); --bs-btn-active-border-color: var(--ink); --bs-btn-active-color: #fff; } .btn-danger { --bs-btn-bg: var(--red); --bs-btn-border-color: var(--red); --bs-btn-hover-bg: #A11F17; --bs-btn-hover-border-color: #A11F17; --bs-btn-active-bg: #A11F17; --bs-btn-active-border-color: #A11F17; --bs-btn-disabled-bg: var(--red); --bs-btn-disabled-border-color: var(--red); } .btn-outline-danger { --bs-btn-color: var(--red); --bs-btn-border-color: var(--red); --bs-btn-hover-bg: var(--red-w); --bs-btn-hover-color: var(--red); --bs-btn-hover-border-color: var(--red); --bs-btn-disabled-color: var(--red); --bs-btn-disabled-border-color: var(--red); } /* Feuilles posées : un filet, jamais une ombre. ⛔ `.toast` EST PARTIE LE 12.09.2026 : plus aucun écran ne pose cette classe (lot « Retour »), et un sélecteur sans porteur se lit comme un composant encore là. */ .card, .modal-content, .dropdown-menu, .popover { border: 1px solid var(--rule-2); box-shadow: none; } .card { --bs-card-bg: var(--panel); --bs-card-cap-bg: var(--wash); } .modal-content { --bs-modal-bg: var(--panel); } /* ── LA LISTE FLOTTANTE DE SUGGESTIONS ───────────────────────────────────── ⛔ CE QUI SURVOLE SE DISTINGUE PAR SON FILET, PAS PAR UNE ÉLÉVATION (12.09.2026, lot Z). La liste du champ client était une `list-group` Bootstrap coiffée d'un `shadow-sm` : un cadre, des coins, un fond au survol et une ombre — quatre choses que la charte n'a pas. C'est une FEUILLE POSÉE, au même titre que `.dropdown-menu` et `.popover` juste au-dessus : fond `--panel`, un filet, rien d'autre. ⚠️ LA LIGNE ATTEINTE AU CLAVIER EST CELLE D'UN REGISTRE — fond `--wash` et filet d'encre dans la marge, comme `.wb-registre-ligne--choisie`, et non un bleu de sélection. Le filet est posé sur TOUTES les lignes, transparent par défaut, pour que la ligne courante ne décale pas son texte de trois pixels au moment où ↓ l'atteint. */ .wb-suggestions { margin: 0; padding: 0; list-style: none; background: var(--panel); border: 1px solid var(--rule-2); max-height: 15rem; overflow-y: auto; /* ⚠️ AU-DESSUS DE CE QUI PEUT LA COIFFER : la liste s'ouvre parfois dans un dialogue, et cinq hôtes portaient déjà cette valeur en style en ligne — elle appartient au composant, pas à chaque écran. */ z-index: 1080; } .wb-suggestions-item { display: block; width: 100%; margin: 0; padding: 4px 8px; background: none; border: 0; border-top: 1px solid var(--rule); border-left: 3px solid transparent; color: var(--ink); font: inherit; text-align: left; } .wb-suggestions-item:first-child { border-top: 0; } button.wb-suggestions-item, .wb-suggestions-item[role="option"] { cursor: pointer; } .wb-suggestions-item--active, button.wb-suggestions-item:hover { background: var(--wash); border-left-color: var(--acc); } /* ⭐ ET LA PALETTE EST LA MÊME FEUILLE (13.09.2026, lot AA). `js/palette.js` bâtissait sa boîte sur `shadow-lg rounded-3` et ses lignes sur `list-group` : la dernière carte qui lévite du produit, et la dernière liste Bootstrap. Ses lignes sont des `.wb-suggestions-item`, sa boîte un fond `--panel` dans un filet — ni coin, ni ombre. ⚠️ SES LIGNES RESPIRENT UN PEU PLUS QUE CELLES D'UN CHAMP : la palette s'ouvre au milieu de l'écran et se parcourt à la flèche, là où une liste de suggestion se lit collée sous le champ qu'on est en train de remplir. */ .wb-palette-boite { background: var(--panel); border: 1px solid var(--rule-2); } .wb-palette-liste .wb-suggestions-item { padding: .35rem .75rem; } .wb-palette-liste .lbl { padding-top: .6rem; } /* ── L'échelle typographique (planche 02) ─────────────────────────────────── La hiérarchie vient d'ELLE — plus jamais d'un fond, d'une ombre ou d'une couleur de plus. */ /* Le libellé réglé : 9,5 px, capitales interlettrées. C'est l'étiquette de TOUT — en-tête de colonne, clé d'un .kv, légende d'un bloc. */ .lbl { font-size: 12.5px; line-height: 1.4; font-weight: 600; color: var(--ink-3); } /* Le titre de bloc : 17 px. */ .ttl { font-size: 17px; line-height: 1.25; font-weight: 600; color: var(--ink); } /* Le titre d'écran : 34 px. */ .dsp { font-size: 22px; line-height: 1.2; font-weight: 700; color: var(--ink); } /* Les chiffres qui commandent l'écran : mono, tabulaires, trois corps. */ .fig, .fig-2, .fig-3 { font-family: var(--fonte-mono); font-variant-numeric: tabular-nums; font-weight: 600; line-height: 1.1; color: var(--ink); } .fig { font-size: 52px; } .fig-2 { font-size: 30px; } .fig-3 { font-size: 20px; } /* Le chiffre courant : mono et tabulaire, sans changer de corps. Une référence, un compte, un numéro — tout ce qui se COMPARE d'une ligne à l'autre s'aligne sur la même chasse, sinon l'œil doit relire au lieu de balayer. */ .mono { font-family: var(--fonte-mono); font-variant-numeric: tabular-nums; } /* Toute colonne numérique : chiffres tabulaires, alignés à droite. */ .num { font-variant-numeric: tabular-nums; text-align: right; } /* ── Composants de la planche ─────────────────────────────────────────────── */ /* L'état : un mot dans une étiquette à coin discret. Le rouge dit ce qui coûte. */ .et { display: inline-block; border: 1px solid var(--rule-2); border-radius: var(--coin-s); padding: 0 5px; font-size: 12px; line-height: 17px; font-weight: 600; color: var(--ink-2); background: var(--panel); white-space: nowrap; } .et--rouge { color: var(--red); border-color: var(--red); background: var(--red-w); } .et--plein { color: #fff; background: var(--ink); border-color: var(--ink); } /* ⭐ TROIS VARIANTES DE PLUS, ET AUCUNE COULEUR NOUVELLE (13.09.2026, lot AJ1). Le bac a retiré les huit teintes d'état du planning : l'état y est un MOT, et trois de ces mots ne se lisent pas au même volume que les autres. `--ok` est ce qui est FINI (« terminé non facturé »), `--att` ce qui manque (« sans facture »), `--non` ce qui est SORTI de la journée (« facturé », « web ») — et pâlir est la bonne façon de le dire. Les trois reprennent les jetons d'état de la charte ; le rouge reste réservé à ce qui coûte du temps. */ .et--ok { color: var(--etat-ok); border-color: var(--etat-ok); background: var(--etat-ok-w); } .et--att { color: var(--etat-attention); border-color: var(--etat-attention); background: var(--etat-attention-w); } .et--non { color: var(--ink-3); border-color: var(--rule); } /* ── LA LÉGENDE : une SUITE D'ÉTATS, pas une rangée de pastilles ──────────── ⛔ UNE LÉGENDE EXPLIQUE UNE COULEUR — ELLE N'A PAS À EN ÊTRE UNE (13.09.2026, lot AA). Les trois calendriers du produit — le planning de l'atelier, les locations, les absences de l'équipe — écrivaient chacun la leur : un fond de couleur, des coins, du gras, parfois du blanc dessus. Trois fois le même objet, trois apparences (règle 6). Or une légende ne dit que deux choses : VOICI LA TEINTE, VOICI CE QU'ELLE VEUT DIRE. Le carré porte la teinte, le mot reste du texte courant — l'item lui-même n'a ni fond, ni filet, ni coin. ⚠️ LA TEINTE SE TRANSMET, ELLE NE SE RECOPIE PAS : `--teinte` posée sur le carré, ou la classe d'état que la grille pose déjà (`.wb-etape-*`, `.wb-abs-type-*`). Une légende qui recopie la couleur de sa grille devient fausse le jour où la grille change, et personne ne s'en aperçoit — c'est le seul endroit de l'écran que l'œil ne compare jamais à rien. ⚠️ ET UN REPÈRE QUI N'EST PAS UNE COULEUR EST UN ITEM DU MÊME COMPOSANT : une icône, une trame, un numéro d'ordre se mettent À LA PLACE du carré. Sans cela, « urgent » et « planifié » se liraient comme deux valeurs d'une même échelle, alors que l'un se pose PAR-DESSUS l'autre. */ .wb-legende { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; color: var(--ink-2); } .wb-legende-item { display: inline-flex; align-items: center; gap: .4em; color: var(--ink-2); } /* ⚠️ `position: relative` PARCE QU'UNE TRAME SE POSE EN `::after` (le travail interne du planning) : sans elle, la trame se calerait sur la page entière. */ .wb-legende-teinte { position: relative; display: inline-block; flex: 0 0 auto; inline-size: 10px; block-size: 10px; border: 1px solid rgb(0 0 0 / .18); border-radius: var(--coin-s); background: var(--teinte, transparent); } /* ⭐ LE CHIFFRE D'UN ITEM DE LÉGENDE (13.09.2026, lot AE) : ce que cette teinte pèse sur ce qu'on regarde. Une légende qui compte cesse d'être une notice et devient un récapitulatif — c'est gratuit, le chiffre est déjà calculé pour la grille. ⚠️ En chiffres tabulaires et en retrait d'encre : il accompagne le mot, il ne le remplace pas. */ .wb-legende-n { font-size: 12px; color: var(--ink-3); } /* Ce qui se superpose à une teinte, et n'en est donc pas une de plus. */ .wb-legende-sep { inline-size: 1px; block-size: 1em; background: var(--rule-2); } /* La paire clé-valeur : l'étiquette au-dessus, la valeur en courant. */ .kv { margin: 0; } .kv > dt { font-size: 12.5px; font-weight: 400; color: var(--ink-3); } .kv > dd { margin: 0 0 8px; color: var(--ink); } /* Le raccourci clavier, affiché au pied de page (règle 2 de CLAUDE.md). ⛔ ET UNE TOUCHE DE L'AIDE EN LIGNE EST LA MÊME TOUCHE (21.09.2026, revue de l'aide). Sept sujets montrent une touche en `` — que Bootstrap habille en INVERSE du corps (fond presque noir, texte clair) : la même touche se lisait donc en blanc sur noir dans l'aide et en encre sur papier partout ailleurs. Deux composants pour un objet, c'est la règle 6 ; la déclaration n'est pas recopiée, le sélecteur est ajouté ici. */ .k, .wb-aide-corps kbd { display: inline-block; font-size: 12px; line-height: 16px; padding: 0 4px; border: 1px solid var(--rule-2); border-radius: var(--coin-s); color: var(--ink-3); background: var(--paper); } /* La jauge : une barre de 5 px, remplie en gris, en rouge au-delà. */ .jauge { position: relative; height: 5px; border-radius: var(--coin-s); overflow: hidden; background: var(--rule); } .jauge > i { position: absolute; top: 0; left: 0; height: 100%; background: var(--ink-3); } .jauge > i.rouge { background: var(--red); } /* Le tableau : tête en libellé réglé sous un FILET D'ENCRE, lignes sous un filet clair, l'alerte en lavis rouge. Vaut pour les .table Bootstrap des écrans WB 2.0 — Tabulator suit par ses propres jetons (--wb-dt-*, plus bas). */ .table { --bs-table-bg: transparent; --bs-table-color: var(--ink); --bs-table-border-color: var(--rule); --bs-table-striped-bg: var(--wash); --bs-table-hover-bg: var(--wash); } .table > thead th { font-size: 12.5px; font-weight: 600; color: var(--ink-3); border-bottom: 1px solid var(--rule-2); } .table > tbody td { border-bottom: 1px solid var(--rule); } .table tr.alerte > td, .table > tbody .table-danger > td { background: var(--red-w); } /* Le libellé de formulaire est le libellé réglé (même rôle, même composant). */ .form-label { font-size: 12.5px; font-weight: 500; color: var(--ink-2); margin-bottom: 3px; } /* Une case dans une rangée de champs se centre sur leur ligne de saisie. */ .wb-case-alignee { margin-top: 31px; } /* ── Remap des jetons existants ───────────────────────────────────────────── app.css déclare --wb-dt-* plus haut dans la cascade : les redéclarer ici les fait basculer sur le Registre, et TOUTES les grilles Tabulator suivent sans toucher au JS. Il ne reste qu'une couleur sémantique de grille, --wb-dt-warn (le trait de la relance GED) — voir l'écart assumé n° 2 en tête de fichier. */ :root { --wb-dt-border: var(--rule); --wb-dt-border-strong: var(--rule-2); --wb-dt-surface: var(--panel); --wb-dt-surface-alt: var(--wash); --wb-dt-text: var(--ink); --wb-dt-text-muted: var(--ink-3); --wb-dt-accent: var(--ink-2); --wb-dt-accent-soft: var(--wash); } /* ── LE DOSSIER EN DEUX VOLETS — ce qui remplace le tiroir ───────────────── Décision du mandant : plus aucune fiche en offcanvas. Le remplaçant des maquettes est un volet maître-détail INTÉGRÉ — deux colonnes séparées d'un filet, pas une couche par-dessus. ⛔ CE N'EST PAS UN TIROIR REPEINT. Trois différences, et ce sont elles qui règlent les défauts du tiroir : le détail ne MASQUE pas la liste (on garde sous les yeux ce à quoi le panneau se rapporte), il ne piège pas le focus, et il ne pose ni fond assombri ni couche flottante. ⚠️ LA LARGEUR EST FIXE, LA LISTE PREND LE RESTE. L'inverse — un détail en pourcentage — donnait un formulaire qui rétrécissait quand on élargissait la fenêtre de la liste, ce que personne n'attend. ⚠️ EN DESSOUS DE 992 px, LES DEUX VOLETS S'EMPILENT. Un formulaire dans une colonne étroite est exactement le défaut qu'on corrige : sur un écran étroit, le détail passe sous la liste et prend toute la largeur. */ .wb-maitre-detail { display: flex; align-items: flex-start; gap: 0; } .wb-maitre-detail > .wb-maitre { flex: 1 1 auto; min-width: 0; /* sans lui, une grille large pousse le volet hors de l'écran */ } .wb-maitre-detail > .wb-detail { flex: 0 0 380px; max-width: 380px; border-left: 1px solid var(--rule); background: var(--panel); margin-left: 1rem; padding-left: 1rem; /* Le détail suit la liste au défilement, sans jamais la recouvrir. */ position: sticky; top: 0.5rem; max-height: calc(100vh - var(--h-pied) - 1rem); overflow-y: auto; } /* ── LE VOLET QUI SAISIT — 40 rem, et c'est une mesure (14.09.2026) ──────── ⛔ 380 px EST LA LARGEUR D'UNE LECTURE, PAS D'UNE SAISIE. Capture du mandant du 14.09.2026, `?page=client&no=649` sur un poste 4K à 150 % (2 560 px CSS) : le volet de création client y pose TROIS champs par ligne — les points de rupture de Bootstrap se mesurent sur la FENÊTRE, jamais sur la colonne qui les accueille, donc `col-sm-3/5/4` s'appliquent en entier dans 380 px. On y lisait « Civilité » sur 85 px, un nom de famille coupé en deux sur 140 px, et six lignes d'aide sous « Permis moto » dans 5/12 de colonne. Le volet véhicule fait pire : QUATRE `col-sm-3` sur une ligne. ⚠️ TROIS MESURES, ET PAS UNE DE PLUS : 380 px pour LIRE un détail (aperçu, résumé), 40 rem pour SAISIR un formulaire, 44 rem pour COMPARER deux fiches. ⚠️ 40, ET PAS 32 : à 32 rem (première livraison du jour), la seconde capture du mandant montrait encore un NPA coupé (« CW97TW UN ») et une civilité de 113 px — trois champs par ligne veulent 640 px, soit 150 / 250 / 200. Un volet sans formulaire garde 380 px — une largeur qu'on prend sans en avoir besoin est prise à la liste d'à côté. ⚠️ LA CLASSE SE POSE DANS LE GABARIT, ET ELLE NE BOUGE JAMAIS : c'est la NATURE du volet, pas son état. `hidden` reste l'unique pilote de l'ouverture, et aucun script ne pose ni ne retire celle-ci. ⛔ ET ELLE S'ÉCRIT AVANT LE REPLI DE 992 px, délibérément. Sa spécificité est celle de la règle générale (deux classes) : à égalité, c'est l'ORDRE qui tranche, et sous 992 px c'est l'empilement qui doit gagner. Écrite après le `@media`, cette ligne aurait rendu 40 rem à un volet censé passer pleine largeur sous la liste. */ .wb-maitre-detail > .wb-detail--saisie { flex: 0 0 40rem; max-width: 40rem; } /* ⚠️ ET UN VOLET DE 40 rem S'EMPILE PLUS TÔT — 1 200 px, pas 992 : sous cette largeur, 640 px de volet ne laissent plus de quoi lire la fiche à côté (même raisonnement que la comparaison à 1 400 px). Mêmes déclarations que le repli général de 992 px, plus bas ; `:has()` fait passer le conteneur en `wrap` sans qu'aucun script ne pose de classe. */ @media (max-width: 1199.98px) { .wb-maitre-detail:has(> .wb-detail--saisie) { flex-wrap: wrap; } .wb-maitre-detail > .wb-detail--saisie { flex: 1 1 100%; max-width: none; border-left: 0; border-top: 1px solid var(--rule); margin-left: 0; padding-left: 0; padding-top: 1rem; position: static; max-height: none; } } /* La ligne de contexte d'un volet : POUR QUI l'on saisit, sous le titre. ⚠️ ELLE N'EST PAS UN SOUS-TITRE DÉCORATIF. « Nouvelle personne rattachée » dit ce qu'on fait ; cette ligne dit chez qui — la seule chose que le volet ne pouvait pas deviner avant qu'on la lui passe. Masquée (`hidden`) quand il n'y a pas de contexte : une ligne vide se lirait comme une donnée manquante. */ .wb-detail-contexte { margin: -.5rem 0 .75rem; font-size: 12px; color: var(--ink-2); } /* ⛔ `hidden` NE DOIT JAMAIS PERDRE, ET IL POUVAIT (01.09.2026). La règle n'était ni `!important` ni générale : elle ne valait que pour un `.wb-detail` ENFANT DIRECT d'un `.wb-maitre-detail`, et une future règle `display:` sur `.wb-detail` l'aurait emporté sur le défaut du navigateur — le volet resterait ouvert, par-dessus la colonne, sans que rien ne l'explique. ⚠️ ET LES TROIS GABARITS ANNONÇAIENT DÉJÀ CETTE FORME dans leur en-tête (« `.wb-detail[hidden]` porte `display:none !important` ») : le commentaire décrivait la règle qu'il fallait, pas celle qui était écrite. C'est la CSS qui a été mise d'accord avec eux, pas l'inverse — `hidden` est l'unique pilote de l'état d'un volet. */ .wb-detail[hidden] { display: none !important; } .wb-detail-titre { display: flex; align-items: center; gap: .5rem; border-bottom: 1px solid var(--rule); padding-bottom: .5rem; margin-bottom: .75rem; color: var(--ink); } .wb-detail-pied { border-top: 1px solid var(--rule); padding: .75rem 0; margin-top: .75rem; display: flex; gap: .5rem; justify-content: flex-end; } @media (max-width: 991.98px) { .wb-maitre-detail { flex-wrap: wrap; } .wb-maitre-detail > .wb-detail { flex: 1 1 100%; max-width: none; border-left: 0; border-top: 1px solid var(--rule); margin-left: 0; padding-left: 0; padding-top: 1rem; position: static; max-height: none; } } /* ── LE VOLET QUI COMPARE — 44 rem, et c'est une mesure (12.09.2026, lot W) ─ ⛔ 380 px EST LA LARGEUR D'UNE ENTITÉ, PAS DE DEUX. La revue des doublons y mettait DEUX fiches en vis-à-vis : 170 px chacune, un nom sur trois lignes, une adresse e-mail coupée — pendant que la liste gardait 1 600 px pour une ligne de texte et un chevron (capture du mandant, 12.09.2026). Une comparaison a deux colonnes de LECTURE : 20 rem chacune, plus la gouttière. ⚠️ ET L'EMPILEMENT ARRIVE PLUS TÔT — 1 400 px, pas 992. Sous cette largeur, 44 rem de volet ne laissent plus de quoi lire la liste à côté. ⛔ ET C'EST LA LISTE QUI PASSE DESSOUS, PAS LA COMPARAISON. L'ordre habituel — détail sous liste — obligerait à faire défiler tout le registre après chaque clic pour voir ce qu'on vient d'ouvrir. Tant qu'aucune paire n'est ouverte, le volet est `hidden` : la liste occupe le haut de l'écran comme avant, et rien ne bouge. */ .wb-maitre-detail--comparaison > .wb-detail { flex: 0 0 44rem; max-width: 44rem; } @media (max-width: 1399.98px) { .wb-maitre-detail--comparaison { flex-wrap: wrap; } .wb-maitre-detail--comparaison > .wb-detail { order: -1; flex: 1 1 100%; max-width: none; /* Le filet sépare du VOISIN, et le voisin est en dessous : il descend. */ border-left: 0; border-bottom: 1px solid var(--rule); margin-left: 0; margin-bottom: 1rem; padding-left: 0; padding-bottom: 1rem; position: static; max-height: none; } } /* ── LA COMPARAISON — clé, A, B ──────────────────────────────────────────── Une grille de trois colonnes : la clé à gauche en libellé réglé, les deux valeurs en vis-à-vis. Ni fond, ni coin, ni pastille — ce qui distingue les lignes, c'est l'ENCRE : la clé passe au rouge quand les deux valeurs diffèrent, et les valeurs qui concordent passent en pâle. L'œil n'a alors qu'à lire ce qui reste noir. */ .wb-comparaison { display: grid; grid-template-columns: 7rem 1fr 1fr; column-gap: 1rem; row-gap: .35rem; align-items: baseline; } /* L'en-tête d'une colonne : le nom de la fiche, sa référence en mono dessous. */ .wb-comparaison-tete { align-self: end; } /* ⚠️ LA RÉFÉRENCE ET LE LIEN SORTENT DU LIBELLÉ RÉGLÉ. `.lbl` met en capitales interlettrées : bon pour « FICHE A », illisible pour un numéro et pour « Voir la fiche ». Ils reprennent donc la casse et la chasse du texte courant, sous le libellé. */ .wb-comparaison-tete > .mono, .wb-comparaison-tete > a { display: block; text-transform: none; letter-spacing: 0; font-weight: 400; } .wb-comparaison-tete > .mono { color: var(--ink-3); } .wb-comparaison-tete > a { font-size: 12px; } /* La clé du DIFFÉRENT est la seule chose rouge de la grille. */ .wb-comparaison-cle--differe { color: var(--red); } /* Deux valeurs égales n'ont plus rien à apprendre : elles s'effacent. */ .wb-comparaison-egal { color: var(--ink-3); } /* Une valeur absente : un tiret, de la même encre pâle qu'un vide ailleurs. */ .wb-comparaison-absent { color: var(--ink-3); } /* ── LA LIGNE CHOISIE D'UN REGISTRE ──────────────────────────────────────── ⚠️ UN FILET D'ENCRE DANS LA MARGE, PAS UNE OMBRE : la feuille de système n'a aucune `box-shadow` non nulle. Le filet est posé sur TOUTES les lignes, transparent par défaut, pour que la ligne choisie ne décale pas le texte de trois pixels au moment où on la choisit. */ .wb-registre-ligne > td:first-child { border-left: 3px solid transparent; } .wb-registre-ligne--choisie > td { background: var(--wash); } .wb-registre-ligne--choisie > td:first-child { border-left-color: var(--acc); } /* Le compteur d'un titre : mono, pâle — il chiffre, il ne titre pas. */ .wb-compte { font-family: var(--fonte-mono); font-variant-numeric: tabular-nums; font-weight: 400; color: var(--ink-3); } /* ── LA BARRE D'OUTILS DE PAGE ───────────────────────────────────────────── ⛔ CE QUE L'EN-TÊTE NE PORTE PAS (12.09.2026, lot Y). L'en-tête rend un titre, un compteur et des GESTES ; une période, un seuil, un sélecteur de caisse ou un champ de recherche ne sont pas des gestes — ce sont les CRITÈRES de ce qu'on regarde, et douze écrans les avaient glissés dans la rangée du titre, chacun avec ses classes. Ils vivent désormais sur une ligne à eux, juste sous l'en-tête, séparée du contenu par un filet. ⚠️ UN FORMULAIRE PORTE LA CLASSE LUI-MÊME quand la barre EST le formulaire : un conteneur de plus autour d'un `
` n'ajouterait qu'un niveau. */ .wb-outils { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; padding-bottom: .65rem; border-bottom: 1px solid var(--rule); } .wb-outils .form-label, .wb-outils label { margin-bottom: 0; } /* Le compte de la séance d'un poste à la douchette (réception, inventaire) : un seul composant, dans la barre d'outils, chiffre mono sur son libellé. */ .wb-poste-compteur { padding: .2rem .75rem; border: 1px solid var(--rule); text-align: center; line-height: 1.1; } .wb-poste-compteur-val { display: block; font-family: var(--fonte-mono); font-variant-numeric: tabular-nums; font-size: 28px; /* lu debout, douchette en main : plus grand que .fig-3 */ font-weight: 700; color: var(--ink); } .wb-poste-compteur-lbl { font-size: 12px; font-weight: 600; color: var(--ink-3); } /* ── LA FICHE — le dossier comme page imprimée ───────────────────────────── Le patron des maquettes, arbitré le 03.09.2026 : une MANCHETTE qui dit de qui il s'agit, une bande d'ALERTES pleine largeur juste dessous, puis le dossier en deux colonnes — les champs à gauche, l'INDEX à droite. ⛔ L'ORDRE N'EST PAS DÉCORATIF. Les alertes viennent avant tout le reste parce qu'elles ARRÊTENT ; les deux autres panneaux informent. Les ranger dans la colonne de droite les rendrait trouvables, pas visibles — ce qui n'est pas la même chose (le mandant, 12.08.2026). ⚠️ ET C'EST UN PATRON, PAS UNE PAGE. `.wb-fiche` habille aussi bien la fiche client que la fiche véhicule ou article : deux écrans de même nature ont le même composant (règle 6). Un écran qui recopierait ces valeurs en dur les verrait diverger au premier ajustement. */ .wb-fiche-manchette { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.25rem; } .wb-fiche-identite { flex: 1 1 auto; min-width: 0; } .wb-fiche-surtitre { display: flex; align-items: center; gap: .5rem; margin-bottom: .15rem; } /* Le numéro se lit comme une référence : mono, tabulaire, en encre pâle. */ .wb-fiche-reference { font-size: 12px; color: var(--ink-3); } .wb-fiche-titre { margin: 0; overflow-wrap: anywhere; } /* La NATURE d'une fiche client — personne ou entreprise — devant son nom : à la manchette, au titre du volet, dans la grille, la palette et les listes. Encre pâle : elle CLASSE, elle ne crie pas. ⛔ Jamais une couleur seule — l'icône porte son `aria-label` (`js/nature-personne.js`). */ .wb-nature-icone { color: var(--ink-3); margin-right: .3rem; } /* ⛔ LA NATURE PROPOSÉE À LA SAISIE, ET SON `hidden` QUI NE DOIT JAMAIS PERDRE (07.09.2026). La ligne est un `.form-text` que le socle montre et cache par `el.hidden` — l'unique pilote de son état, comme pour les volets. La règle est écrite AVANT qu'une feuille pose un `display:` sur cette classe : sans elle, la proposition resterait à l'écran ce jour-là, et rien ne l'expliquerait (c'est mot pour mot ce qui est arrivé à `.wb-detail`, plus haut). ⚠️ Aucune couleur ici : la ligne prend celle de `.form-text`, et le bouton celle de `.btn-link` — toutes deux retaillées par les jetons du Registre. */ .wb-nature-propose[hidden] { display: none !important; } .wb-fiche-titre-nature { font-size: .8em; } /* Les classifieurs : ce qui CLASSE la fiche, sur une ligne sous son titre. */ .wb-fiche-classifieurs { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem .75rem; margin-top: .5rem; } .wb-fiche-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-left: auto; } /* La bande d'alertes : filet ROUGE pleine largeur, le seul de l'écran. */ .wb-fiche-alertes { border-top: 1px solid var(--red); padding-top: .35rem; margin-bottom: .5rem; } .wb-fiche-alertes > .lbl { color: var(--red); } .wb-fiche-corps { display: flex; align-items: flex-start; gap: 0; } .wb-fiche-principal { flex: 1 1 auto; min-width: 0; } /* ⚠️ UN FORMULAIRE SE BORNE (12.09.2026). Sur un écran de 2 000 px, « Nom commercial » faisait 1 800 px et le NPA 400 : des champs qu'on lit d'un coup d'œil devenaient des lignes à parcourir, et la page était blanche aux deux tiers. ⛔ ET « UNE FICHE À GRILLE GARDE TOUTE LA LARGEUR » ÉTAIT ÉCRIT ICI JUSQU'AU 14.09.2026 (huitième revue) — c'était une exception que rien ne justifiait, et qu'un seul écran respectait déjà à l'envers : `?page=collaborateur` portait la borne, `?page=client`, `?page=vehicule` et `?page=article` non. Mesuré dans Chromium : « Adresse » y faisait 966 px à 1 366, puis 1 392 px à 1 920 ET à 2 560 — un champ qui grandit avec l'écran, c'est-à-dire ce que le § « Largeur, hauteur, densité » refuse. Les six fiches portent maintenant la même borne, qui ne mord sur rien en dessous de ~1 420 px. ⭐ ET SUR UNE FICHE, ELLE SE POSE SUR LA COLONNE MAÎTRE (`.wb-maitre`), pas sur le corps : le corps borné, la colonne gardait ses 110 rem, et le volet ouvert s'installait à 384 px de la fiche sur un poste 4K — il cessait de se lire comme la colonne d'à côté. Posée sur la colonne, elle arrête d'un seul geste la manchette, les alertes, le corps et le pied ; une manchette rendue HORS de la colonne la porte elle-même (`?page=atelier`, `?page=location`), parce qu'un en-tête ne doit pas rétrécir à l'ouverture d'un volet. */ /* ⛔ ET SUR UNE PAGE DE RÉGLAGES, ELLE SE POSE SUR LE FORMULAIRE, PAS SUR SA COLONNE (12.09.2026) : bornée à la colonne seule, la barre d'action restait pleine largeur et « Enregistrer » partait au bord droit d'un écran de 2 000 px, à un mètre du dernier champ. 64rem de formulaire, l'index de 340px et sa marge : la barre s'arrête sous l'index, le bouton sous la dernière colonne. */ .wb-fiche-bornee { max-width: calc(64rem + 1.75rem + 340px); } /* ⚠️ ET SANS INDEX, LA BORNE EST CELLE DU FORMULAIRE SEUL (12.09.2026, lot V) : la plupart des écrans de réglages n'ont pas de colonne d'index, et leur laisser 1 392 px revient à leur laisser tout l'écran — le formulaire est le seul objet de la page. 64rem, c'est-à-dire la même colonne que chez les deux écrans qui ont un index. */ .wb-fiche-bornee--sans-index { max-width: 64rem; } /* ⚠️ LARGEUR FIXE, MÊME RAISON QUE LE VOLET MAÎTRE-DÉTAIL : un index en pourcentage rétrécit quand on élargit la fenêtre — ce que personne n'attend. Le formulaire prend le reste. */ .wb-fiche-index { flex: 0 0 340px; max-width: 340px; border-left: 1px solid var(--rule); margin-left: 1.75rem; padding-left: 1.75rem; } @media (max-width: 1199.98px) { .wb-fiche-corps { flex-wrap: wrap; } .wb-fiche-index { flex: 1 1 100%; max-width: none; border-left: 0; border-top: 1px solid var(--rule); margin-left: 0; padding-left: 0; padding-top: 1rem; } } /* ⭐ UN PANNEAU QUI N'A RIEN À DIRE TIENT SUR SA LIGNE DE TITRE (23.09.2026, lot FICHEV) : « Prise en charge — Aucun tiers · Ouvrir un dossier… ». Le panneau marque sa ligne `.wb-vide` ; le libellé flotte, la ligne coule à côté. Les hauteurs réservées en ligne (`min-height`) sont parties : un bloc vide ne garde pas de blanc. */ .wb-fiche-index > .wb-bloc { clear: both; } .wb-fiche-index > .wb-bloc:has(+ :has(> .wb-vide)) > .lbl { float: left; margin-right: .6rem; padding-top: .2em; } .wb-fiche-index :is([data-pec-form], [data-fin-form]):empty { display: none; } /* ── LE COMPTEUR — le kilométrage, et la distance au prochain service ────── En tête du centre du dossier véhicule. La jauge va du dernier service fait (à gauche) au service proposé (le trait rouge, à droite) ; les chiffres viennent de `lib/vehicule_compteur.inc.php`, la largeur du remplissage est la seule valeur posée en ligne. */ .wb-compteur { flex: 0 0 15rem; display: grid; gap: .25rem; align-content: start; } .wb-compteur-valeur { display: flex; align-items: baseline; gap: .4rem; } .wb-compteur-unite { color: var(--ink-3); } .wb-jauge { position: relative; height: 10px; background: var(--wash); border-bottom: 1px solid var(--rule-2); } .wb-jauge > i { position: absolute; top: 0; bottom: 0; left: 0; background: var(--ink-3); opacity: .55; } .wb-jauge::after { content: ''; position: absolute; top: -3px; bottom: -3px; right: 0; width: 2px; background: var(--red); } .wb-jauge-legende { display: flex; justify-content: space-between; gap: .5rem; font-family: var(--fonte-mono); font-size: 12px; color: var(--ink-3); } .wb-jauge-legende .rouge { color: var(--red); } @media (max-width: 1199.98px) { .wb-compteur { flex: 1 1 100%; } } /* ── LE PLI — ce qui ne se consulte pas à chaque passage, replié sous sa légende (sections repliées des dossiers, `App\Datatable::renderModalFieldsGrid()`). */ details.wb-pli > summary { list-style: none; cursor: pointer; } details.wb-pli > summary::-webkit-details-marker { display: none; } details.wb-pli > summary > span { display: block; } /* ── LA RÉCEPTION QUI N'A PAS PU COUVRIR LA MOTO ──────────────────────────── (28.09.2026) Datée après la 1re immatriculation, elle se replie (`VinDecoderTas::rangeParPremiereImmat()`) ; pli ouvert, elle se lit en retrait. ⚠️ SUR LES CELLULES, PAS SUR LA LIGNE : Bootstrap donne sa couleur à chaque cellule d'un tableau, et une couleur posée sur `` n'y descend pas. */ .wb-posterieure, .table > tbody > tr.wb-posterieure > * { color: var(--ink-3); } /* ── Le bloc : un libellé réglé sous un filet d'encre ────────────────────── La légende de section, rendue par `App\Datatable::legendeSection()`. Ni carte, ni ombre, ni couleur : c'est le filet qui sépare, et le libellé qui nomme. */ .wb-bloc { border-top: 1px solid var(--rule-2); padding-top: .35rem; margin-top: .75rem; } .wb-bloc > .lbl { display: block; } /* ── L'APERÇU : le document tel qu'il s'imprimera ────────────────────────── Le seul endroit de la charte où un fond blanc est une INFORMATION et non une décoration : c'est du papier, posé sur le papier de l'écran. Il sert aux deux écrans de réglage du garage (identité, facturation) — même nature, même composant (règle 6) — et c'est `js/garage-apercu.js` qui le remplit à la frappe. */ .wb-apercu { background: var(--panel); border: 1px solid var(--rule); padding: .9rem 1rem; margin-top: .6rem; } .wb-apercu-logo { max-width: 100%; max-height: 44px; object-fit: contain; } /* L'expéditeur : le corps du document, pas un libellé. */ .wb-apercu-expediteur { color: var(--ink); } /* Ce que le document imprime en second rang — contact, IDE, compte. */ .wb-apercu-ligne { font-size: 12px; color: var(--ink-2); } .wb-apercu-note { border-top: 1px solid var(--rule); padding-top: .5rem; margin-top: .9rem; } /* ── La barre d'action d'un écran de réglages ────────────────────────────── ⛔ EN PIED DE PAGE, JAMAIS FIXÉE À L'ÉCRAN : un bandeau flottant coûte une bande de hauteur sur un comptoir en 1366 px, et ces formulaires tiennent sur une page. À gauche ce qui reste à enregistrer, à droite la touche et le bouton — un seul par écran (`tests/Unit/RaccourcisActionsTest.php`). ⛔ ET RIEN NE S'OUVRE SOUS ELLE (14.09.2026) : une carte posée après le bouton semble relever d'un autre geste. Ce que le bouton n'enregistre pas passe au-dessus, et le bouton désigne son formulaire par `form=` quand la barre sort du ``. */ .wb-barre-action { border-top: 1px solid var(--rule); padding-top: .75rem; margin-top: 1.5rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } /* ══ LA NOTE — ce qu'il faut savoir, sans boîte ═════════════════════════════ ⛔ ELLE REMPLACE LES `alert alert-*` DES ÉCRANS WB 2.0 (12.09.2026). Cent trente-neuf boîtes Bootstrap se répondaient d'un écran à l'autre — jaune, bleue, grise, verte —, chacune avec son fond, son coin arrondi et son icône, et aucune ne disait ce que sa couleur promettait : le bleu portait aussi bien un mode d'emploi qu'un avertissement. La charte du Registre n'a ni pastille ni fond de couleur : une note est du TEXTE COURANT tenu par un filet d'encre à gauche, et on la lit parce qu'elle est là, pas parce qu'elle crie. ⚠️ DEUX TONS, PAS CINQ. L'encre pour ce qu'il faut savoir ; le rouge pour ce qui REFUSE ou BLOQUE — un droit manquant, un envoi impossible. Le succès d'une action n'est pas une note : c'est le retour du geste, à l'endroit du geste (`js/retour.js`). Un « rien à montrer » non plus : c'est une phrase (`js/etat.js`). */ .wb-note { border-left: 3px solid var(--rule-2); border-radius: 0 var(--coin) var(--coin) 0; background: var(--panel); padding: 6px 10px; margin: .75rem 0; color: var(--ink-2); } .wb-note--rouge { border-left-color: var(--red); background: var(--red-w); color: var(--ink); } /* ⭐ UN TROISIÈME FILET, ET IL A FALLU LE JUSTIFIER (13.09.2026, lot AE). La note a DEUX tons — l'encre pour ce qu'il faut savoir, le rouge pour ce qui REFUSE —, et c'était assez tant que rien ne PRÉVENAIT sans bloquer. L'avertissement d'équipe du volet d'absence est exactement cela : « deux collègues de l'atelier sont déjà absents ce jour-là », et l'enregistrement passe. En encre, il se lirait comme un mode d'emploi et personne ne s'arrêterait ; en rouge, il se lirait comme un refus et on chercherait le bouton qui débloque. Le filet est donc celui de l'ATTENTION de la charte (`--etat-attention`), qui existe déjà et ne dit que ça. */ .wb-note--attention { border-left-color: var(--etat-attention); background: var(--etat-attention-w); color: var(--ink); } /* Le titre d'une note, quand elle en a un : le mot qui la classe. */ .wb-note > .lbl { display: block; } /* ── L'ÉTAT D'UNE ZONE : j'attends, ou il n'y a rien ─────────────────────── Rendu par `js/etat.js`. Une PHRASE, jamais une animation ni une coche — une zone qui tourne 80 ms est un clignotement, et une liste vide n'est pas un succès. L'échec, lui, prend le filet rouge de la note. */ .wb-etat { color: var(--ink-3); margin: .5rem 0; } /* ── LA LECTURE : une colonne de texte, pas une ligne d'écran ────────────── ⛔ 44rem, ET C'EST UNE MESURE, PAS UN GOÛT (12.09.2026) : au-delà d'environ quatre-vingts caractères, l'œil perd le début de la ligne suivante et relit la même. Un sujet d'aide sur un écran de 2 000 px faisait des lignes de deux cents caractères — le texte était là, il ne se lisait pas. Seul le corps d'un texte suivi la porte ; un tableau et une grille n'ont pas de longueur de ligne. */ .wb-lecture { max-width: 44rem; } /* ⚠️ LE ROUGE EST CELUI DE LA CHARTE, et il ne dit qu'une chose : ce qui n'est pas encore enregistré est ce qui peut se perdre. */ .wb-barre-action-etat { color: var(--red); } /* ── LE RETOUR D'UN GESTE, À L'ENDROIT DU GESTE ──────────────────────────── Rendu par `js/retour.js`. ⛔ Sur un écran de 2 000 px, le coin bas-droite n'est jamais là où l'œil est : la phrase se pose dans la barre d'action à côté du bouton, sur la ligne ou la carte du geste, ou — quand le geste n'a pas d'endroit (une impression partie, un courriel envoyé) — dans la ligne d'état de la page. ⚠️ RIEN DE COLORÉ HORS LE ROUGE DU REFUS : un succès est du texte courant. C'est l'HEURE qui porte l'information — « Enregistré » seul ne dit pas s'il parle du geste d'il y a dix minutes ou de celui d'il y a trois secondes. */ .wb-retour { color: var(--ink-2); margin: .35rem 0; } .wb-retour-heure { font-family: var(--fonte-mono); font-variant-numeric: tabular-nums; color: var(--ink-3); margin-left: .4rem; } /* Un emplacement qui PORTE un retour cesse d'être le témoin rouge du non enregistré : c'est la même place, ce n'est plus la même chose qui s'y dit. */ .wb-barre-action-etat.wb-retour--pose { color: var(--ink-2); text-transform: none; letter-spacing: normal; font-size: inherit; font-weight: 400; } .wb-retour--rouge, .wb-retour--rouge .wb-retour-texte { color: var(--red); } /* La ligne d'état de la page : sous le titre, à gauche, elle garde le DERNIER événement et son heure jusqu'au suivant. Elle ne clignote pas et ne se ferme pas seule — ce qui est parti à l'imprimante reste vrai. */ #wb-page-etat { margin: 0 0 .5rem; color: var(--ink-2); } #wb-page-etat > .lbl { margin-right: .5rem; } /* ── Ce qu'un retour porte EN PLUS de sa phrase ──────────────────────────── Deux retours ne sont pas des phrases à lire mais des choses à FAIRE : le « Annuler » d'un rendez-vous déplacé, et le lien vers le message qui vient d'arriver. Ils vivent DANS la note, à côté de l'heure — au même endroit que le reste du retour, donc là où l'œil est déjà. */ .wb-retour-lien { margin-left: .5rem; color: var(--ink); } .wb-retour-action { margin-left: .5rem; vertical-align: baseline; } /* La note de refus accrochée à une ligne, une carte ou une commande : c'est la `.wb-note--rouge` de la charte, resserrée pour tenir dans une carte. */ .wb-retour-note { margin: .35rem 0 0; padding-left: .4rem; white-space: normal; } .wb-barre-action-droite { margin-left: auto; display: flex; align-items: center; gap: .75rem; } /* « Le dossier » : ce qui se rattache à la fiche, et combien. Une ligne, un filet, le chiffre à droite en mono tabulaire — la colonne de chiffres se lit d'un coup d'œil parce qu'ils sont alignés. */ .wb-dossier { list-style: none; margin: 0; padding: 0; } .wb-dossier > li { border-bottom: 1px solid var(--rule); } /* ⭐ LA RUBRIQUE À ZÉRO EST DU TEXTE, PAS UN LIEN (21.09.2026, lot UXK2, K2) : « Locations 0 » menait à une liste filtrée vide. Même ligne, même place, même compte — l'encre secondaire dit qu'il n'y a rien à ouvrir, et la ligne reste lisible : « il n'y en a pas » se lit, une rubrique absente ne se lit pas. */ .wb-dossier > li > a, .wb-dossier > li > .wb-dossier-nul { display: flex; align-items: baseline; gap: .5rem; padding: .5rem 0; color: var(--ink); text-decoration: none; } .wb-dossier > li > .wb-dossier-nul { color: var(--ink-3); } .wb-dossier > li > a:hover { color: var(--ink-2); text-decoration: underline; } .wb-dossier > li > a > :first-child, .wb-dossier > li > .wb-dossier-nul > :first-child { flex: 1 1 auto; } .wb-dossier .mono { font-size: 12px; color: var(--ink-3); } /* La liste d'une carte se tient à la marge de son en-tête ; le cadre ferme la dernière ligne. */ .card > .wb-dossier { padding: 0 1rem; } .card > .wb-dossier > li:last-child { border-bottom: 0; } /* ══ « PERSONNES RATTACHÉES » — la liste d'une entreprise ═══════════════════ ⛔ UNE LISTE, PAS UN TABLEAU ET PAS DES CARTES. Un tableau demanderait des en-têtes pour quatre colonnes dont trois se lisent d'elles-mêmes (un nom, un rôle, un téléphone) ; des cartes mettraient un cadre autour de chaque personne, là où la charte ne connaît que le filet. Une ligne par personne, séparée par un filet — comme « Le dossier », trois blocs plus haut. ⚠️ AUCUNE COULEUR EN DUR : la marque « Contact » est un `.et`, le rôle et les coordonnées prennent les encres secondaires du Registre. */ .wb-rattaches { list-style: none; margin: 0 0 .75rem; padding: 0; } .wb-rattaches > li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; padding: .4rem 0; border-bottom: 1px solid var(--rule); } /* ⚠️ LE LIEN DE LIGNE DES PANNEAUX, ET IL SERT AU-DELÀ DE CETTE LISTE : le collaborateur d'une fiche article, et depuis le 21.09.2026 (lot UXK2, K7) le véhicule écarté du panneau « Rappels de service », qui portait `.et` — un modèle de moto n'est pas un état (règle 6). Une quatrième déclaration identique aurait été une règle recopiée. */ .wb-rattache-nom { color: var(--ink); text-decoration: none; font-weight: 600; } .wb-rattache-nom:hover { color: var(--ink-2); text-decoration: underline; } .wb-rattache-role { font-size: 12px; color: var(--ink-2); } .wb-rattache-coord { font-size: 12px; color: var(--ink-3); } /* La colonne des gestes est poussée à droite : l'œil descend la liste des noms sans que la longueur des rôles ne la fasse serpenter. */ .wb-rattache-actions { margin-left: auto; display: flex; gap: .35rem; } .wb-rattache-ajout > .lbl { display: block; margin-bottom: .25rem; } /* ══ « PASSAGES ATELIER » — les dix derniers, sur la fiche véhicule ═════════ ⛔ MÊME GRAMMAIRE QUE « LE DOSSIER » ET « PERSONNES RATTACHÉES » : une ligne par passage, un filet entre deux, aucune carte et aucun fond. Trois listes de même nature dans le même index doivent se lire de la même façon (règle ⭐ 6), sinon il faut réapprendre la mise en page à chaque bloc. ⚠️ LA DATE ET LE MONTANT SONT DES LIENS — l'ordre d'atelier et le document qui porte la somme (règle ⭐ 8). Le kilométrage et le mécanicien n'en sont pas : ils n'ont pas de source propre, et leur `title` le dit. */ .wb-passages { list-style: none; margin: 0 0 .5rem; padding: 0; } .wb-passages > li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem; padding: .4rem 0; border-bottom: 1px solid var(--rule); } .wb-passage-date { color: var(--ink); text-decoration: none; font-weight: 600; } .wb-passage-date:hover { color: var(--ink-2); text-decoration: underline; } /* Le libellé du service prend la place qui reste : c'est la seule longueur variable de la ligne, et la pousser à gauche garde le montant aligné. */ .wb-passage-quoi { flex: 1 1 auto; min-width: 0; font-size: 12px; color: var(--ink-2); } .wb-passage-repere { font-size: 12px; color: var(--ink-3); } .wb-passage-montant { margin-left: auto; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--ink); text-decoration: none; } a.wb-passage-montant:hover { color: var(--ink-2); text-decoration: underline; } .wb-passages-tout { display: inline-block; margin-top: .25rem; } /* La trace au pied du dossier : d'où vient cette fiche, et de quand. */ .wb-fiche-provenance { border-top: 1px solid var(--rule); padding-top: .35rem; margin-top: 1.25rem; font-size: 12px; color: var(--ink-3); } /* ══ LE MENU LATÉRAL (A2) : rail de 52 px, 272 px déplié ══════════════════ Clair, l'item actif porte le trait marque à gauche. Replié, les écrans d'une section s'ouvrent en volant au survol ou au focus ; déplié, sous la section. */ .wb-shell { display: grid; grid-template-columns: 52px minmax(0, 1fr); min-height: 100vh; } .wb-shell.wb-menu-deplie { grid-template-columns: 272px minmax(0, 1fr); } .wb-rail { position: sticky; top: 0; z-index: 1030; height: 100vh; display: flex; flex-direction: column; gap: 2px; padding: 10px 6px; background: var(--wash); border-right: 1px solid var(--rule); } .wb-rail-espace { flex: 1 1 auto; } .wb-rail-lib { display: none; } .wb-menu-deplie .wb-rail-lib { display: inline; } .wb-rail-marque { display: flex; align-items: center; gap: 10px; margin: 0 5px 10px; color: var(--ink); text-decoration: none; --wb-logo-accent: var(--marque); } .wb-rail-marque:hover { text-decoration: none; } .wb-rail-logo { flex: 0 0 auto; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 7px; background: var(--marque); color: #fff; font-weight: 700; font-size: 15.5px; } .wb-rail-marque .wb-rail-lib { min-width: 0; line-height: 1.1; } .wb-rail-marque svg, .wb-rail-marque img { display: block; height: 16px; width: auto; } .wb-rail-marque small { display: block; margin-top: 3px; font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wb-rail-item { position: relative; display: flex; align-items: center; gap: 10px; width: 40px; height: 40px; padding: 0; justify-content: center; border: 0; border-radius: var(--coin-l); background: none; color: var(--ink-2); font: inherit; font-size: 14.5px; text-decoration: none; white-space: nowrap; cursor: pointer; } .wb-rail-item .bi { font-size: 18px; line-height: 1; } .wb-rail-item:hover { background: var(--rule); color: var(--ink); text-decoration: none; } .wb-rail-item.wb-actif { background: var(--panel); color: var(--ink); box-shadow: inset 3px 0 0 var(--marque); } .wb-menu-deplie .wb-rail-item { width: auto; height: 34px; justify-content: flex-start; padding: 0 10px; color: var(--ink-2); } .wb-menu-deplie .wb-rail-item.wb-actif { color: var(--ink); font-weight: 600; } .wb-rail-item .wb-hint { display: none; } .wb-menu-deplie .wb-rail-item .wb-hint { display: inline-block; margin-left: auto; } /* Le compteur : la pastille marque, sur l'angle replié, en bout de ligne déplié. */ .wb-rail-n { position: absolute; top: 3px; right: 2px; min-width: 14px; padding: 0 3px; border-radius: 7px; background: var(--marque); color: #fff; font-size: 11px; font-weight: 600; line-height: 14px; text-align: center; } .wb-menu-deplie .wb-rail-n { position: static; margin-left: auto; font-size: 12px; line-height: 16px; padding: 0 6px; border-radius: 8px; } .wb-rail-groupe { position: relative; } .wb-rail-sous { display: none; position: absolute; top: -6px; left: calc(100% + 7px); z-index: 1031; min-width: 220px; padding: 6px; background: var(--panel); border: 1px solid var(--rule-2); border-radius: var(--coin-l); flex-direction: column; gap: 1px; } .wb-rail-sous::before { content: ""; position: absolute; top: 0; bottom: 0; left: -9px; width: 9px; } .wb-rail-groupe:hover > .wb-rail-sous, .wb-rail-groupe:focus-within > .wb-rail-sous { display: flex; } /* Sous l'espace (Réglages), le volant s'ouvre vers le haut : vers le bas, il passait sous l'écran, la page gagnait un ascenseur, le survol se perdait et le volant clignotait. */ .wb-rail-espace ~ .wb-rail-groupe > .wb-rail-sous { top: auto; bottom: -6px; } .wb-rail-sous-titre { padding: 4px 10px 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); } .wb-rail-sous-item { padding: 5px 10px; border-radius: 6px; color: var(--ink-2); font-size: 14px; text-decoration: none; white-space: nowrap; } .wb-rail-sous-item:hover { background: var(--wash); color: var(--ink); text-decoration: none; } .wb-rail-sous-item.wb-actif { background: var(--acc-w); color: var(--ink); font-weight: 600; } .wb-rail-sous-item.wb-a-venir { color: var(--ink-3); cursor: default; } .wb-rail-sous-item.wb-a-venir:hover { background: none; } /* Déplié : les écrans de la section active sous elle, les autres en volant. */ .wb-menu-deplie .wb-rail-groupe.wb-actif > .wb-rail-sous { display: flex; position: static; min-width: 0; padding: 2px 0 6px; background: none; border: 0; } .wb-menu-deplie .wb-rail-groupe.wb-actif .wb-rail-sous-titre { display: none; } .wb-menu-deplie .wb-rail-groupe.wb-actif .wb-rail-sous-item { padding: 4px 10px 4px 38px; } /* La touche se cale à droite ; si le libellé ne lui laisse pas la place, elle passe à la ligne, masquée : le volet garde sa largeur et le raccourci reste dans l'infobulle. */ .wb-menu-deplie .wb-rail-groupe.wb-actif .wb-rail-sous-item { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 6px; height: 29px; overflow: hidden; } .wb-menu-deplie .wb-rail-groupe.wb-actif .wb-rail-sous-item .wb-hint { margin-left: auto; } .wb-menu-deplie .wb-rail-groupe.wb-actif .wb-rail-sous-item.wb-actif { background: var(--panel); } .wb-rail-recherche { cursor: text; } .wb-menu-deplie .wb-rail-recherche { border: 1px solid var(--rule-2); background: var(--panel); color: var(--ink-3); margin-bottom: 6px; } .wb-rail-plier .bi { transition: transform .18s; } .wb-menu-deplie .wb-rail-plier .bi { transform: rotate(180deg); } @media (prefers-reduced-motion: reduce) { .wb-rail-plier .bi { transition: none; } } .wb-rail .dropdown-menu { margin-left: 6px !important; } .wb-notif-count { min-width: 20px; padding: 0 .3rem; border: 1px solid var(--rule-2); border-radius: 8px; color: var(--ink-3); font-size: 12px; font-weight: 600; text-align: center; } .wb-notif-count-actif { border-color: var(--marque); background: var(--marque); color: #fff; } .wb-main { min-width: 0; overflow-x: clip; } /* La barre de page (A2 « outils ») : un panneau blanc sous un filet, de bord à bord ; le fond déborde à droite d'une page plafonnée. */ .wb-pagebar { position: relative; isolation: isolate; margin: 0 -1rem .9rem; padding: 8px 1rem; } .wb-pagebar::before { content: ""; position: absolute; inset: 0 -100vw 0 0; z-index: -1; background: var(--panel); border-bottom: 1px solid var(--rule); } .wb-pagebar:has(> .wb-onglets) { padding-bottom: 0; } .wb-pagebar > .wb-onglets { border-bottom: 0; margin-top: 0; } .wb-page-header h1 { font-size: 17px; font-weight: 700; } /* Un écran qui porte sa propre manchette (tableau de bord, fiche) n'a pas de bande. */ .wb-pagebar:not(:has(h1, .wb-onglets)) { padding-block: 0; margin-bottom: 0; } .wb-pagebar:not(:has(h1, .wb-onglets))::before { content: none; } /* Sur une fiche, le « ? » flotte à droite de la manchette, qui lui laisse sa place. ⚠️ Pas de `:has()` dans un `:has()` : le navigateur rejette la règle entière. */ .wb-pagebar--aide-flottante > .wb-pagebar-haut { position: absolute; top: 22px; right: 1rem; } .wb-page:has(> .wb-pagebar--aide-flottante) :is(.dossier-manchette, .wb-fiche-manchette) { padding-right: 1.75rem; } /* ══ TROIS LARGEURS ET UN PLAFOND — le contenu d'une page ═══════════════════ ⛔ LA RÉSOLUTION N'EST PAS UNE RESSOURCE À CONSOMMER (12.09.2026). Sur le poste de 2 000 px du comptoir, « Identité du garage » étirait le NPA à 400 px et posait « Enregistrer » à un mètre du dernier champ ; une ligne de liste occupait 1 600 px pour six mots. LARGEUR FIXE, DENSITÉ VARIABLE : ce qui se LIT — corps de texte, largeur d'un champ, longueur d'une ligne, largeur d'un volet — ne grandit pas avec l'écran ; ce qui gagne de la place, c'est le NOMBRE de choses visibles côte à côte ou en hauteur. ⚠️ ALIGNÉ À GAUCHE, PAS CENTRÉ. Un contenu centré déplace la première colonne quand on change d'écran ou qu'on branche un second moniteur : au comptoir, la souris et l'œil vont toujours au même endroit. ⚠️ LE PLAFOND NE CONCERNE QUE LE CONTENU. La manchette, le bandeau et la sous-navigation sont hors de `.wb-page` et restent pleine largeur : une barre de navigation qui s'arrête au deux tiers de l'écran se lit comme une page cassée. */ .wb-page { max-width: 110rem; } /* ── UN VOLET OUVERT S'AJOUTE AU PLAFOND, IL NE LE CONSOMME PAS (14.09.2026) ─ ⛔ LE VOLET ROGNAIT LA FICHE. Capture du mandant, `?page=client&no=649` sur 2 560 px CSS : ouvrir le volet de création poussait 396 px DANS les 110 rem, la fiche perdait d'un coup sa troisième colonne — pendant que 800 px restaient blancs à droite. Or la règle du 12.09.2026 dit aussi l'inverse de ce qu'on en avait tiré : ce qui gagne de la place sur un grand écran, c'est le NOMBRE de choses côte à côte, et un volet ouvert est exactement cela. ⚠️ LE PLAFOND DE LA FICHE NE CHANGE PAS : 110 rem restent 110 rem, le volet s'ajoute À CÔTÉ, avec sa gouttière (`margin-left: 1rem`). Sur un poste de 2 000 px, rien ne bouge — la place manque, et `flex` resserre la colonne maître comme aujourd'hui. ⚠️ `hidden` RESTE L'UNIQUE PILOTE : ces règles lisent l'état du volet là où il est écrit, dans le HTML. Aucune classe posée par un script, donc aucun second état à tenir d'accord. `:has()` est déjà employé par `css/collaborateurs.css`. ⛔ ET `.wb-page--pleine` DOIT L'EMPORTER, ce que l'ordre seul ne donnait PAS : `:has()` prend la spécificité de son argument, ces sélecteurs pèsent donc quatre classes contre une. Plutôt que de gonfler l'exception, on l'EXCLUT — une page sans plafond n'a rien à quoi ajouter le volet. ⚠️ L'ORDRE COMPTE ENTRE CES TROIS-LÀ : un volet de saisie et un volet de comparaison sont aussi des `.wb-detail`, donc les trois règles les visent à spécificité égale. La plus précise s'écrit en dernier. */ .wb-page:not(.wb-page--pleine):has(.wb-maitre-detail > .wb-detail:not([hidden])) { max-width: calc(110rem + 380px + 1rem); } .wb-page:not(.wb-page--pleine):has(.wb-maitre-detail > .wb-detail--saisie:not([hidden])) { max-width: calc(110rem + 40rem + 1rem); } .wb-page:not(.wb-page--pleine):has(.wb-maitre-detail--comparaison > .wb-detail:not([hidden])) { max-width: calc(110rem + 44rem + 1rem); } /* ⛔ ON S'AFFRANCHIT DU PLAFOND EN LE DÉCLARANT, JAMAIS PAR DÉFAUT : la route porte `pleineLargeur: true` (`app/routes.php`), `app/layout.php` pose la classe. Un écran qui montre un AXE — le planning d'atelier, dont la largeur EST du temps — gagne vraiment à s'étendre ; un formulaire, jamais. */ .wb-page--pleine { max-width: none; } /* ── La poignée de rangement d'une liste ordonnée ────────────────────────── ⭐ 11.09.2026 (lot E) — `?page=config-categories-location` range son référentiel au glisser. La poignée ne porte AUCUNE couleur : elle est une icône Bootstrap, encrée comme le reste de la ligne. Ce qu'elle déclare tient en deux propriétés, et les deux sont fonctionnelles : · `cursor` dit que la ligne se prend — sans quoi rien ne l'annonce ; · ⛔ `touch-action: none` est INDISPENSABLE au tactile : sans lui, le navigateur interprète le glisser comme un défilement et la page bouge au lieu de la ligne. C'est la même raison qui l'a posé sur `.div_rdv` (`css/webbike.css`). */ .wb-clc-poignee { cursor: grab; touch-action: none; display: inline-block; padding: 0 .25rem; } .wb-clc-poignee:active { cursor: grabbing; } /* ── L'écran se lit comme un document imprimé — et s'imprime tel quel ─────── Le socle : chrome masqué, papier blanc, encre noire. Chaque écran migré ajoute son propre @media print par-dessus (décision d'exécution du Lot 6). */ @media print { nav, .btn, .dropdown-menu, .modal-backdrop { display: none !important; } /* ⛔ `.toast-container` EST PARTIE LE 12.09.2026, avec le message éphémère lui-même : plus un seul écran ne pose cette classe (lot « Retour »). Le retour d'un geste vit maintenant DANS la page — barre d'action, ligne, carte, ligne d'état —, et il s'imprime donc avec elle, ce qui est la bonne réponse : une trace datée sur un document imprimé se lit comme une trace. ⛔ `.wb-sidebar` A ÉTÉ RETIRÉE D'ICI LE 01.09.2026, avec un jour de retard sur la sidebar elle-même. Son commentaire disait « elle disparaîtra avec le bandeau de navigation du Registre ; d'ici là, l'impression n'a pas à l'attendre » — ce jour est venu, le sélecteur n'avait plus aucun porteur, et une règle sans porteur se lit comme un composant encore là. Le chrome horizontal est masqué vingt lignes plus haut. */ /* Sans chrome, le contenu prend toute la feuille. */ .wb-main { padding-top: 0 !important; } body { background: #fff; color: #000; font-size: 12px; } .table > thead th { border-bottom-color: #000; } } /* ══ L'HARMONIE DU BALISAGE — quatre rôles, quatre composants ══════════════ ⭐ 13.09.2026. La charte neutralisait les coins et les ombres par jetons (`--bs-border-radius: 0`, `--bs-box-shadow: none`), mais le balisage continuait de les DEMANDER : soixante-douze `card shadow-sm`, quatorze `rounded*`, des `bg-white`/`bg-light`/`bg-body-tertiary` et vingt-huit `text-primary` d'icône. Une classe morte est une décision d'écran qui survit à la charte : elle ne se voit plus, mais elle revit au premier thème, et elle se recopie. ⚠️ CE QUI SUIT NE SONT PAS DES UTILITAIRES, CE SONT DES RÔLES. Un rôle qui n'avait pas de composant en reçoit UN, nommé par ce qu'il fait, et tous les écrans de ce rôle le portent (règle 6 de CLAUDE.md). */ /* Le titre d'une carte ou d'une section de formulaire. Il existait sous quatre écritures — `wb-card-title h6`, `h6 mb-3`, `ttl`, `h6` — dont trois lisaient l'échelle de Bootstrap au lieu de celle de la charte. C'est le corps de `.ttl`, plus la marge basse que tous portaient déjà. ⚠️ IL REDÉCLARE `.wb-card-title` DE `css/app.css`, qui posait 1,05 rem et `--bs-emphasis-color` : c'est l'ordre de chargement qui le fait gagner. */ .wb-card-title { font-size: 17px; line-height: 1.25; font-weight: 650; color: var(--ink); margin: 0 0 .5rem; } /* Le bloc de code : une commande à recopier, une trace à lire. Le lavis du retrait et un filet — ni coin, ni ombre. Il sert les écrans de réglage (décodeur VIN, GED, technique) ET le corps de l'aide en ligne : même nature, même composant. */ .wb-code { font-family: var(--fonte-mono); font-size: 12px; background: var(--wash); border: 1px solid var(--rule); padding: .5rem .75rem; margin: 0; overflow-x: auto; } /* La zone de dépôt d'un fichier : quatre écrans d'import la recopiaient, avec quatre jeux de classes et un `border-dashed` QUI N'EXISTE PAS dans Bootstrap — le pointillé promis était un trait plein depuis le début. ⚠️ LE FILET EST `--rule-2`, PAS `--rule` : un pointillé du filet clair sur le papier de la page ne se trouve pas du regard à 1 366 px, et une zone de dépôt qu'on ne trouve pas est un champ de fichier de moins. L'état « le fichier survole » est le seul moment où elle s'encre. */ .wb-depot { display: block; border: 1px dashed var(--rule-2); background: var(--paper); padding: 1.25rem 1rem; text-align: center; cursor: pointer; } .wb-depot--actif { border-color: var(--acc); background: var(--wash); } /* Le champ de fichier est `visually-hidden` derrière son `