/* ========================================================================= HAZE DISPATCH — le socle de marque ========================================================================= Chantier visuel, passe 2 du 31/08/2026, d'après `docs/DIRECTION-ARTISTIQUE_HAZE-DISPATCH.md`. > **La marque est un accent, pas un décor.** Marine pour la structure, bleu > pour l'état et l'action ; les zones de travail restent neutres. Une > couleur saturée en aplat large fatigue à la longue — et cet outil se > regarde des heures, pas trente secondes. ## Deux thèmes, une seule écriture Chaque couleur est déclarée **une fois**, par `light-dark(clair, sombre)`. Le thème suit `prefers-color-scheme` ; un choix explicite pose `data-theme` sur ``, **côté serveur**, ce qui bascule `color-scheme` et donc toutes les couleurs d'un coup — sans JavaScript, donc sans le flash blanc qu'un thème appliqué après chargement produit à chaque page. De nuit, ce flash se remarque. L'alternative — dupliquer toute la palette sous `@media (prefers-color-scheme: dark)` **et** sous `[data-theme="sombre"]` — a été écartée : elle triple chaque bloc de surface, et deux copies finissent toujours par diverger. Un repli minimal pour les navigateurs sans `light-dark()` est posé en fin de fichier. ## Une surface est un fond qui porte du texte > 🔴 **La leçon du 31/08.** `discret-texte` mesurait 5.99 sur le fond de > page — conforme — et **2.31 dans l'en-tête**, où le même gris tombait sur > un fond marine. Le test de contraste ne pouvait pas le voir : il calculait > des paires déclarées, sans savoir sur quel fond un gabarit pose une > classe. > > Le remède est structurel : **tout fond qui porte du texte redéclare ses > propres couleurs de texte.** `--texte`, `--texte-discret` et `--lien` sont > relatifs à la surface où ils se trouvent, et la cascade s'en charge. La > paire testée devient la paire rendue. ========================================================================= */ /* ========================================================================= La police — Inter, **auto-hébergée** ========================================================================= 🔴 **Aucun CDN, ici comme ailleurs.** Les deux fichiers sont versés dans `static/polices/` et servis par l'application : un poste sans internet rend la même page qu'un poste connecté, et aucune requête ne part vers un tiers à chaque ouverture d'écran. C'est la même décision que les tuiles IGN et que Leaflet, prise pour la même raison. Un **seul fichier variable** par sous-ensemble couvre les quatre graisses employées (400, 500, 600, 700) : `font-weight: 100 900` dit au navigateur d'y puiser. Quatre fichiers statiques auraient pesé quatre fois plus pour le même rendu — ils étaient d'ailleurs identiques, servis par Google. Inter est sous licence SIL Open Font 1.1 ; le texte est versé à côté des fichiers, comme la licence l'exige. `font-display: swap` : le texte s'affiche immédiatement dans la police système, puis bascule. Un écran vide pendant le chargement d'une police serait le retour du flash blanc qu'on a chassé du thème. ========================================================================= */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/static/polices/inter-latin.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: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/static/polices/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { color-scheme: light dark; /* --- Identité de marque — charte plaquette, décision du 31/08 ----------- Les valeurs du logo (#16b3e8) et du site (#0F172A) en diffèrent de moins de 1.2 — indiscernable à l'œil, mais trois sources finissent par produire quatre valeurs. La plaquette fait foi ; les fichiers de marque gardent les leurs, on n'y touche pas. */ --haze-marine: #0E2841; --haze-bleu: #00B0F0; --haze-gris: #B0B0B0; /* 🟡 Créé par nécessité : le bleu HAZE donne 2.48 sur blanc. Celui-ci en donne 4.98 sur le fond de page et 5.44 sur une carte. À verser à la charte de marque — sans quoi la divergence recommence. */ --haze-bleu-clair: #00719F; /* --- Les trois niveaux de surface --------------------------------------- 🔴 **Le sombre n'est plus un aplat marine uniforme.** La refonte du 02/09 en donne trois : le fond de page, la carte qui s'en détache, et une troisième surface d'appui — en-têtes de tableau, survol, champ désactivé. Sans ce troisième niveau, un en-tête de tableau se confondait avec la carte, et une ligne survolée ne se distinguait pas. `--surface` reste le nom du fond **courant** : c'est lui que chaque bloc redéclare, et c'est ce qui fait tenir la mesure de contraste. Les deux autres sont des valeurs, pas des surfaces. */ --surface: light-dark(#F4F6F8, #0B1727); --surface-carte: light-dark(#FFFFFF, #132238); --surface-appui: light-dark(#EEF3F7, #1B2F4A); /* 🟠 **Valeurs réconciliées avec la maquette validée.** Le lien de la maquette — `#0284C7` — donne 4.10 sur blanc et 3.78 sur le fond de page : sous le seuil AA que ce projet mesure surface par surface depuis le 31/08. On garde **sa teinte** (200°, ce que l'œil reconnaît) et on descend la luminosité jusqu'à 4.7. Même méthode pour les états. */ --texte: light-dark(#16222E, #E6EEF5); --texte-discret: light-dark(#5B6B7A, #9FB2C3); --lien: light-dark(#026EA6, #38B7F8); --filet: light-dark(#DCE3EA, #264062); /* 🔴 **Le filet d'une commande n'est pas celui d'un tableau.** `--filet` sépare des lignes : il a le droit d'être discret, et personne ne clique dessus. Le contour d'un champ, lui, **est** ce qui dit où cliquer — WCAG 1.4.11 lui demande 3:1 contre ce qui l'entoure, comme à un texte on en demande 4,5. Mesuré avant : **1,71:1** pour un champ en thème sombre, **1,13:1** pour une case à cocher. On voyait un rectangle à peine plus clair que la page, et le rapport du 20/09 le dit autrement : « bordure à peine visible », « des carrés gris pleins, sans bordure nette ». */ /* Mesuré : 3,43:1 sur blanc et 3,17:1 sur le fond de page en clair, 5,07:1 sur la surface de carte en sombre. Le premier gris essayé, #8A99A8, donnait 2,92 — sous le seuil de huit centièmes, et c'est précisément le genre d'écart qu'on ne voit pas à l'œil. */ --filet-controle: light-dark(#7F8C99, #7E93AC); --barre: light-dark(#0E2841, #0E2841); /* Une ombre en clair, une bordure en sombre : une ombre sur fond sombre ne se voit pas, elle salit. */ --ombre: light-dark(rgba(14, 40, 65, .08), rgba(0, 0, 0, 0)); /* Le voile de la palette : il assombrit sans masquer la page. */ --voile: light-dark(rgba(14, 40, 65, .35), rgba(0, 0, 0, .60)); /* --- L'accent, et la règle qui l'accompagne ----------------------------- 🔴 **Le bleu HAZE ne porte jamais de texte blanc** : 2.48 de contraste. Il est un **fond de bouton à texte marine** (6.06), un élément actif, une icône. Pour du texte cliquable, c'est `--lien`. La règle est écrite ici parce que c'est ici qu'on la lit avant de s'en servir. */ --accent: var(--haze-bleu); --sur-accent: var(--haze-marine); /* Le titre d'écran. 🔴 En sombre il vaut `--texte` **à plein contraste** : un marine atténué sur fond marine est le défaut que la refonte corrige. */ --titre: light-dark(#0E2841, #E6EEF5); /* --- Formes et rythme --------------------------------------------------- Échelle 4 / 8 / 12 / 16 / 24 / 32. Trois rayons, pas quatre. 🔴 **Huit jetons d'espacement, posés le 18/09.** L'audit a compté 47 valeurs de `padding` écrites à la main, de 2 à 48 px, sans échelle : deux blocs voisins tombaient à 11 px et 12 px sans que ce soit une décision. 🟠 **Les 47 anciennes ne sont pas réécrites dans ce chantier.** Un diff de 47 paddings mêlé à un changement de charpente serait illisible, et ce qu'on ne relit pas, on ne le vérifie pas. La règle vaut pour le neuf ; l'ancien se convertit au fil des chantiers suivants. */ --e0: 2px; --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px; /* 🟠 Le voile d'un tiroir ouvert par-dessus le contenu. Écrit en dur, il échappait à la mesure — et la garde des couleurs l'a dit. */ --voile: rgba(0, 0, 0, .45); /* --- Les six statuts de vacation --------------------------------------- 🔴 **Six paires, et elles ne sont pas des `--etat-*`.** Les quatre états du projet — impossible, infraction, conforme, déduit — disent la gravité d'un constat. Ceux-ci disent où en est une vacation : ce n'est pas la même chose, et les confondre ferait lire « conforme » là où il faut lire « confirmée ». La table des quatre reste à quatre. 🔴 **Des aplats, plus de hachures.** `--hachure-pourvoir` faisait tomber trois paires sous le seuil — 3,87, 3,92 et 4,02:1 — sans qu'aucun test puisse le voir : un test lit `background-color`, pas les arrêts d'un dégradé. C'est le fond **rendu** qui compte, et un dégradé n'en a pas un. 🟠 **Le seuil est 7:1, pas 4,5.** Ces textes vivent sur des aplats colorés, là où les paires calées au ras du seuil tombent dès qu'un fond n'est pas uni. La marge est voulue. Chaque paire est mesurée dans les deux thèmes ; le tableau des valeurs est dans la spécification du chantier. */ --st-pourvoir: light-dark(#4C1D95, #D9C6FF); --fond-st-pourvoir: light-dark(#F1EAFE, #2A1F4D); --st-non-pourvue: light-dark(#8C1D11, #FFB3A8); --fond-st-non-pourvue: light-dark(#FBEAEA, #421A1A); --st-proposee: light-dark(#0C4A6E, #9BD9FB); --fond-st-proposee: light-dark(#EAF6FD, #0F2E45); --st-confirmee: light-dark(#125034, #6FE0AC); --fond-st-confirmee: light-dark(#E6F6EE, #123A2C); --st-en-cours: light-dark(#6B3F00, #FBC26A); --fond-st-en-cours: light-dark(#FDF3E1, #3D2E0E); --st-realisee: light-dark(#374956, #C2D2E0); --fond-st-realisee: light-dark(#EEF3F7, #1B2F4A); --rayon-champ: 6px; --rayon-carte: 10px; --rayon-pastille: 999px; /* 🔴 **44 px, et non 40.** WCAG 2.5.5 pose 44 × 44 pour une cible de pointage, et c'est aussi ce que demande un doigt sur tablette. Quarante tenait le seuil de 2.5.8 — 24 px — et manquait celui-ci de quatre pixels, sur **tous** les champs et tous les boutons de l'application. */ --hauteur-controle: 44px; /* 🔴 **La densité est un réglage, pas un défaut.** Une table de données ne doit pas avoir *une* hauteur de ligne : elle doit en avoir deux, au choix de celui qui regarde. Le pire choix est celui du milieu — « des lignes de 38 px, tolérables dans les deux cas, optimisées pour aucun », dit la note du 20/09, et c'est ce qu'on ressentait. **Compact pour balayer** : on cherche une anomalie parmi trente lignes, et faire défiler est le contraire d'aérer. **Confortable pour lire et décider** : le contenu respire, et c'est aussi une cible atteignable au doigt. Le choix se garde d'une session à l'autre, par cookie lu côté serveur — comme le thème, et sans saut de mise en page. */ --hauteur-ligne: 44px; --creux-de-cellule: 8px 12px; /* --- Les quatre états --------------------------------------------------- 🔴 impossible · 🟠 infraction · 🟢 contractuel · 🔵 déduit. Quatre sens déjà établis dans le vocabulaire du projet ; ils ne changent pas ici. Les deux déclinaisons partagent **exactement la même teinte** — 0, 33, 140, 199 — et ne diffèrent que par la luminosité. Un rouge qui virerait à l'orange en changeant de thème obligerait l'opérateur à réapprendre le code couleur, ce qui est le contraire du but. */ --etat-impossible: light-dark(#C0392B, #F87E71); --etat-infraction: light-dark(#965B00, #FBA524); --etat-conforme: light-dark(#17774B, #34D38A); --etat-deduit: light-dark(#0369A1, #7DCFFC); /* Les fonds teintés des bandeaux et des étiquettes d'alerte. */ --fond-impossible: light-dark(#FBEAEA, #421A1A); --fond-infraction: light-dark(#FDF3E1, #3D2E0E); --fond-conforme: light-dark(#E6F6EE, #123A2C); --fond-deduit: light-dark(#EAF6FD, #0F2E45); /* --- « À pourvoir » — un statut d'affichage, pas un cinquième état ------- 🟠 Les quatre états disent la **conformité** d'une situation : impossible, en infraction, conforme, déduit. « À pourvoir » ne dit rien de tout cela — un poste vacant n'est ni conforme ni fautif, il est **à faire**. Lui donner sa propre couleur, hors de la famille des quatre, évite qu'un dispatcheur le lise comme une alerte. Le violet est repris de la maquette validée ; les hachures redoublent la couleur, parce qu'un statut ne se porte jamais par la seule teinte. */ --texte-pourvoir: light-dark(#7C3AED, #D0B5FD); --fond-pourvoir: light-dark(#F1EAFE, #2A1F4D); /* --- La carte ----------------------------------------------------------- 🟠 Trois natures, trois couleurs. La règle « la couleur dit un état, jamais une décoration » vise les **zones de données** — un tableau où tout est coloré n'a plus de hiérarchie. Sur une carte, la nature d'un point *est* l'information : sans distinction, un site et une agence se confondent, et c'est la carte entière qui ne dit plus rien. Ces couleurs ne portent aucun texte : elles ne sont donc pas mesurées contre un fond par le test de contraste, qui n'examine que les jetons de texte. */ --carte-site: light-dark(#00719F, #00B0F0); --carte-agence: light-dark(#0E2841, #A8CCFF); --carte-vehicule: light-dark(#6B3FA0, #C9A6F0); } /* Le choix explicite de l'agent, posé par le serveur d'après son cookie. Il ne fait que fixer `color-scheme` : toutes les couleurs suivent. */ :root[data-theme="clair"] { color-scheme: light; } :root[data-theme="sombre"] { color-scheme: dark; } /* 🟠 Les deux autres crans ne se déclarent qu'ici : le compact **est** le défaut, et redire sur `:root` ce que `:root` porte déjà ferait deux sources. */ :root[data-densite="confortable"] { --hauteur-ligne: 56px; --creux-de-cellule: 12px 14px; } /* 🔴 **Le cran de balayage — 34 px.** La recherche donne 32 à 36 pour chercher une anomalie parmi trente lignes ; les deux crans du 20/09 tombaient tous deux dans la bande d'inspection. Sur un planning, celui-ci montre deux fois plus de lignes. 🟠 **Il ne s'applique qu'aux écrans de balayage.** Une fiche en 34 px de ligne serait illisible — on y lit et on y décide. La feuille le borne donc aux tableaux, et jamais aux champs. */ :root[data-densite="dense"] { --hauteur-ligne: 34px; --creux-de-cellule: 4px 12px; } /* Les commandes gardent leur cible de 44 px même en dense : un doigt ne rétrécit pas parce qu'on veut voir plus de lignes. */ :root[data-densite="dense"] .champ input, :root[data-densite="dense"] .champ select, :root[data-densite="dense"] .champ textarea { min-height: var(--hauteur-controle); } /* ========================================================================= Les surfaces ========================================================================= */ /* La carte : tableaux, blocs, panneaux, formulaires. Fond neutre — c'est la zone de travail, et la marque n'y entre pas. */ .surface-carte, table, .panneau, .compteur, .candidat, .mouvement, details, form.bloc, form.filtres { --surface: var(--surface-carte); background: var(--surface); color: var(--texte); border: 1px solid var(--filet); border-radius: var(--rayon-carte); box-shadow: var(--ombre); } /* Les surfaces de marque — marine dans les **deux** thèmes : l'en-tête, et la pastille de score du dispatch. > 🔴 C'est l'en-tête qui a piégé la passe 1. Le gris et le bleu de la charte > y sont à leurs valeurs officielles, et les quatre états y prennent leur > déclinaison **claire** : un fond marine ne porte pas un rouge sombre. > > Chaque surface déclare son jeu **complet**, dans un seul bloc. Répartir > les couleurs d'une surface sur deux règles marcherait dans le navigateur, > mais le test lit bloc par bloc : il signalerait un défaut qui n'existe > pas. On préfère cette redite-là au risque inverse. */ /* 🔴 **La barre latérale est la surface de marque** depuis le 02/09 ; c'était l'en-tête. Le raisonnement ne change pas : un fond marine ne porte pas un rouge sombre, et chaque surface déclare son jeu **complet** dans un seul bloc — le test lit bloc par bloc, et une couleur laissée dehors serait mesurée contre la mauvaise. 🟠 **Les couleurs de la barre du 29/09 sont ici, et nulle part ailleurs** (brief de la barre latérale, § 2.4) : aucun gabarit n'en écrit une. `test_barre_laterale` en recalcule les contrastes — les liens à 7,2 pour 1, l'écran courant à plus de 10. L'ancien écran courant, blanc sur `#00B0F0`, tombait à 2,5. */ .barre-laterale { --surface: var(--barre); --texte: #FFFFFF; --texte-discret: #9FB2C3; --lien: var(--haze-bleu); --etat-impossible: #F87E71; --etat-infraction: #FBA524; --etat-conforme: #34D38A; --etat-deduit: #7DCFFC; --texte-pourvoir: #D0B5FD; --barre-fond: #0E2841; --barre-lien: #C6D3DE; --barre-titre: #E6EEF5; --barre-discret: #9FB2C3; --barre-courant-fond: #1D3B5E; --barre-courant-texte: #FFFFFF; --barre-repere: #00B0F0; --barre-pastille: #F87E71; /* Le survol et le filet de la barre : un blanc très dilué sur le marine. Déclarés en jetons **de cette surface** — une couleur écrite dans une règle échapperait à la mesure. */ --survol-barre: rgba(255, 255, 255, .08); --filet-barre: rgba(255, 255, 255, .12); --volet-fond: #132C48; --volet-filet: rgba(255, 255, 255, .14); --ombre-volet: 0 12px 32px rgba(14, 40, 65, .35); /* Les deux largeurs du brief, et le retrait d'un écran sous le libellé de son groupe : 12 + 20 (l'icône) + 12. */ --largeur-barre: 264px; --largeur-barre-reduite: 72px; --retrait-de-barre: 44px; } /* 🔴 **L'écran courant est une surface** : texte blanc sur `#1D3B5E`, et un trait de 3 px à gauche. Il déclare son jeu complet, comme toute surface — le test mesure la paire rendue. */ .barre-laterale [aria-current="page"] { --surface: #1D3B5E; --texte: #FFFFFF; --texte-discret: #FFFFFF; --lien: #FFFFFF; --etat-impossible: #FFFFFF; --etat-infraction: #FFFFFF; --etat-conforme: #FFFFFF; --etat-deduit: #FFFFFF; --texte-pourvoir: #FFFFFF; background: var(--surface); color: var(--texte); } /* La pastille du compteur d'alertes : rouge clair, texte marine. */ .pastille-compteur { --surface: #F87E71; --texte: #0E2841; --texte-discret: #0E2841; --lien: #0E2841; --etat-impossible: #0E2841; --etat-infraction: #0E2841; --etat-conforme: #0E2841; --etat-deduit: #0E2841; --texte-pourvoir: #0E2841; background: var(--surface); color: var(--texte); } /* L'en-tête fin n'est plus marine : il porte la recherche et le compte sur la surface de carte, comme la maquette. Il reste déclaré comme surface — c'est sur lui que le défaut du 31/08 était passé. */ header { --surface: var(--surface-carte); background: var(--surface); color: var(--texte); } .candidat .score { --surface: var(--haze-marine); --texte: #FFFFFF; --texte-discret: var(--haze-gris); --lien: var(--haze-bleu); --etat-impossible: #F87E71; --etat-infraction: #FBA524; --etat-conforme: #34D38A; --etat-deduit: #7DCFFC; --texte-pourvoir: #D0B5FD; background: var(--surface); color: var(--texte); } /* Le troisième niveau : en-tête de tableau, survol, champ désactivé. */ th { --surface: var(--surface-appui); background: var(--surface); } /* Le bouton **secondaire** — le cas ordinaire. Le primaire est plus bas : fond accent, texte marine, et un seul par écran. */ button { --surface: var(--surface-carte); background: var(--surface); color: var(--texte); } /* 🟠 **Un survol qui ne se voit pas n'est pas un survol.** La passe 2 posait `filter: brightness(0.95)` : cela assombrit dans les deux thèmes, et sur un bouton déjà sombre l'effet n'existe pas. On **éclaircit en sombre, on assombrit en clair**, et le sens de la variation se déclare comme le reste de la palette. C'est une surface à part entière — elle porte le même texte, elle entre donc dans la mesure de contraste avec les autres. */ button:hover { --surface: var(--surface-appui); background: var(--surface); /* 🟡 Le déplacement de luminosité est **borné par le contraste** : au-delà, le texte du bouton passe sous le seuil dans un thème ou dans l'autre. La bordure prend le relais — elle rend le survol franc sans coûter un dixième de rapport de contraste. */ border-color: var(--lien); } .masque { --surface: var(--surface-appui); background: var(--surface); } /* Zébrage **léger** : il aide l'œil à suivre une ligne, il ne dessine pas un damier. Le survol, lui, prend la surface d'appui — franc, et une seule ligne à la fois. */ tbody tr:nth-child(even) { --surface: light-dark(#F7F9FB, #17293F); background: var(--surface); } tbody tr:hover { --surface: var(--surface-appui); background: var(--surface); } /* 🔴 « À pourvoir » ne se porte pas par la seule couleur : le gabarit y met le mot, en toutes lettres. La **trame a disparu le 19/09**, ici comme sur la vignette : elle échappait à la mesure de contraste — un test lit `background-color`, pas les arrêts d'un dégradé — et elle faisait tomber trois paires sous le seuil sans que rien ne le dise. L'aplat est mesurable, et il est mesuré. */ .a-pourvoir td { --surface: var(--fond-st-pourvoir); --texte: var(--st-pourvoir); background: var(--surface); color: var(--texte); } .ligne-retenue td { --surface: var(--fond-conforme); background: var(--surface); } .bandeau-ok { --surface: var(--fond-conforme); } .bandeau-avertissement { --surface: var(--fond-infraction); } .bandeau-erreur { --surface: var(--fond-impossible); } .alerte-depassee { --surface: var(--fond-impossible); } .alerte-proche { --surface: var(--fond-infraction); } /* ========================================================================= Le socle ========================================================================= */ * { box-sizing: border-box; } body { margin: 0; font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 14px; line-height: 1.5; color: var(--texte); background: var(--surface); -webkit-font-smoothing: antialiased; } /* --- L'en-tête ------------------------------------------------------------ Le logo officiel sur une pastille marine, puis « DISPATCH » en texte discret. Le logo porte déjà HAZE SECURITY ; le mot nomme l'outil. 🔴 La pastille vaut dans les **deux** thèmes : le SVG contient du blanc et disparaîtrait sur un fond clair. C'est ce qui permet d'utiliser le fichier de marque **sans le modifier**, et de se passer du PNG de 78 Ko. */ /* ========================================================================= La charpente — barre latérale, en-tête fin, colonne principale ========================================================================= > 🔴 **Vingt-cinq entrées à plat ne se lisent plus.** La liste était juste — > chaque profil ne voit que ses écrans — mais elle obligeait à parcourir > pour trouver. Sept groupes, et l'œil va droit au bon. La barre est en `position: sticky` plutôt que `fixed` : elle défile avec la page sur un écran court, et un menu qu'on ne peut pas faire défiler est un menu tronqué. */ body { display: grid; /* 🔴 **Des colonnes nommées, et un placement explicite.** Le placement automatique rangeait les enfants dans l'ordre du document : il a suffi d'un sprite et d'une case cachée en tête pour envoyer la barre à droite et le contenu dessous. Nommer les zones rend la charpente indifférente à ce qu'on ajoutera demain dans le corps. */ /* 🟠 **Deux zones depuis le 29/09** : le rail est parti avec le brief de la barre latérale. La barre donne sa largeur — 264 px, ou 72 réduite — et la colonne la suit : une seule valeur à tenir. */ grid-template-columns: [barre] max-content [contenu] minmax(0, 1fr); grid-template-rows: [charpente] 1fr; min-height: 100vh; } body.portail { display: block; } .colonne-principale { grid-column: contenu; grid-row: charpente; display: flex; flex-direction: column; min-width: 0; /* sans quoi un tableau large pousse tout */ } /* Sans navigation — l'écran de connexion, le portail — la colonne prend toute la largeur plutôt que de laisser une colonne vide à gauche. (Le rail en avait ajouté une seconde du 18 au 29/09 ; il est parti.) */ body:not(:has(.barre-laterale)) .colonne-principale { grid-column: barre / -1; } /* --- La barre latérale — brief du 29/09 ---------------------------------- 🔴 **Une seule navigation.** Le rail des groupes et le panneau listaient les mêmes sept groupes, côte à côte ; il ne reste que cette barre, de 264 px, qui se réduit à 72 px. Ses couleurs sont des jetons de sa surface, déclarés plus haut. */ .barre-laterale { grid-column: barre; grid-row: charpente; width: var(--largeur-barre); display: flex; flex-direction: column; position: sticky; top: 0; align-self: start; /* 🟠 **Les deux bornes, et non une.** Sans plancher, la colonne s'arrête à son contenu et laisse sous elle une bande claire ; le plafond garde la marque et le pied fixes pendant que la liste défile. */ min-height: 100vh; max-height: 100vh; background: var(--barre-fond); color: var(--barre-lien); } /* 🟠 Un sélecteur descendant, et non une seconde classe : une garde du 17/09 cherche `class="marque"` littéralement. Et **72 px** : c'est aussi la cible de pointage que la garde du socle de marque veut au-delà de 24. */ .barre-laterale .marque { flex: none; display: flex; align-items: center; gap: var(--e2); min-height: 72px; padding: 0 var(--e4); border-bottom: 1px solid var(--filet-barre); text-decoration: none; } .barre-laterale .outil { font-size: 13px; font-weight: 700; letter-spacing: .16em; color: var(--barre-courant-texte); } /* La liste défile **à l'intérieur** de la barre ; la marque et le pied restent en place. */ .liste-de-navigation { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; gap: var(--e0); padding: var(--e3); } .lien-de-premier-niveau, .titre-de-groupe { display: flex; align-items: center; gap: var(--e3); min-height: 40px; padding: 0 var(--e3); border-radius: var(--rayon-champ); font-size: 14px; color: var(--barre-lien); text-decoration: none; } .lien-de-premier-niveau svg, .titre-de-groupe svg { flex: none; width: 20px; height: 20px; } .libelle-de-barre { flex: 1 1 auto; min-width: 0; } /* 🔴 **Un titre de groupe dit qu'il se déplie** : casse normale, gras, et un chevron à droite. En capitales espacées et sans flèche, il se lisait comme une étiquette. */ .titre-de-groupe { font-weight: 600; color: var(--barre-titre); cursor: pointer; list-style: none; } .titre-de-groupe::-webkit-details-marker { display: none; } .chevron-de-groupe { display: inline-flex; color: var(--barre-discret); } .chevron-de-groupe svg { width: 16px; height: 16px; } .groupe-de-menu[open] > .titre-de-groupe .chevron-de-groupe svg { transform: rotate(90deg); } /* Le groupe **fermé** qui contient l'écran courant : un point bleu. */ .point-courant { display: none; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--barre-repere); } .groupe-de-menu:not([open]) .point-courant { display: inline-block; } .lien-de-premier-niveau:hover, .titre-de-groupe:hover, .entree-de-menu:hover, .bascule-de-volet:hover { background: var(--survol-barre); color: var(--barre-courant-texte); } /* 🔴 **Un groupe de menu n'est pas une carte.** En passant de `
` à `
` le 18/09, il a hérité du bloc générique `details` — fond blanc, bordure, ombre — et le libellé est tombé à 2,17:1 sur le marine. */ .groupe-de-menu { margin: 0; background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; } /* 🔴 **`display` sous `[open]`, jamais sur le sélecteur nu** : une règle d'auteur qui déclare `display` sur le contenu d'un `
` écrase le masquage du navigateur, et un groupe fermé occupait sa hauteur. */ .groupe-de-menu[open] > .volet-de-groupe { display: flex; flex-direction: column; gap: var(--e0); } .titre-du-volet { display: none; } /* Un écran dans un groupe : texte seul, aligné sur le libellé du titre. */ .entree-de-menu { display: flex; align-items: center; min-height: 36px; padding: 0 var(--e3) 0 var(--retrait-de-barre); border-radius: var(--rayon-champ); font-size: 14px; color: var(--barre-lien); text-decoration: none; } /* 🔴 **L'écran courant** : un fond, un trait de 3 px et la graisse — pas la seule teinte, qu'on ne distingue pas toujours. `aria-current` le dit aux lecteurs d'écran. */ .barre-laterale [aria-current="page"] { font-weight: 600; box-shadow: inset 3px 0 0 var(--barre-repere); } .pastille-compteur { display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 22px; height: 22px; padding: 0 var(--e2); border-radius: 999px; font-size: 12px; font-weight: 700; box-sizing: border-box; } .separateur-de-barre { flex: none; height: 1px; margin: var(--e2) var(--e1); background: var(--filet-barre); } /* --- Le pied : réduire, agrandir ------------------------------------------ 🔴 **Hors de la liste.** « Replier » avait la forme d'un écran, en tête du rail, parmi les destinations. C'est un réglage d'affichage : il vit en pied, en texte discret. */ .pied-de-barre { flex: none; padding: var(--e3); border-top: 1px solid var(--filet-barre); } .bascule-de-volet { display: flex; align-items: center; min-height: 40px; padding: 0 var(--e3); border-radius: var(--rayon-champ); font-size: 13px; color: var(--barre-discret); cursor: pointer; } .bascule-de-volet svg { width: 18px; height: 18px; } .bascule-de-volet .quand-deploye, .bascule-de-volet .quand-replie { display: inline-flex; align-items: center; gap: var(--e2); } /* Un seul des deux à la fois — les deux restent dans le document. */ .bascule-de-volet .quand-replie { display: none; } body:has(#barre-repliee:checked) .barre-laterale .bascule-de-volet .quand-deploye { display: none; } body:has(#barre-repliee:checked) .barre-laterale .bascule-de-volet .quand-replie { display: inline-flex; } /* 🔴 **Le focus se voit** — un anneau bleu, 6,6 pour 1 sur le marine. La case du repli est cachée : c'est son étiquette qui porte l'anneau. */ .barre-laterale a:focus-visible, .titre-de-groupe:focus-visible, #barre-repliee:focus-visible + .bascule-de-volet { outline: 2px solid var(--barre-repere); outline-offset: -2px; } /* --- Le mode réduit : 72 px, des icônes, un volet par groupe ------------- Le même balisage, restylé : les libellés passent **hors écran** et restent le nom accessible de chaque icône ; le groupe s'ouvre en volet collé à la barre, par-dessus la page. `app.js` n'en laisse qu'un ouvert, et le referme sur Échap ou sur un clic à l'extérieur. */ body:has(#barre-repliee:checked) .barre-laterale { width: var(--largeur-barre-reduite); } body:has(#barre-repliee:checked) .barre-laterale .marque { flex-direction: column; justify-content: center; gap: var(--e0); padding: 0; } body:has(#barre-repliee:checked) .barre-laterale .outil { /* Sans l'espacement du mode déplié : « DISPATCH » tient dans 72 px. */ font-size: 12px; letter-spacing: 0; } body:has(#barre-repliee:checked) .barre-laterale .liste-de-navigation { overflow: visible; align-items: center; padding: var(--e3) 0; } body:has(#barre-repliee:checked) .barre-laterale .libelle-de-barre { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } body:has(#barre-repliee:checked) .barre-laterale .lien-de-premier-niveau, body:has(#barre-repliee:checked) .barre-laterale .titre-de-groupe, body:has(#barre-repliee:checked) .barre-laterale .bascule-de-volet { position: relative; justify-content: center; width: 48px; min-height: 44px; padding: 0; } body:has(#barre-repliee:checked) .barre-laterale .chevron-de-groupe, body:has(#barre-repliee:checked) .barre-laterale .point-courant { display: none; } body:has(#barre-repliee:checked) .barre-laterale .pastille-compteur { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; } /* Le groupe courant : l'icône porte le fond et le trait de l'écran courant. */ body:has(#barre-repliee:checked) .barre-laterale [data-groupe-courant] { background: var(--barre-courant-fond); color: var(--barre-courant-texte); box-shadow: inset 3px 0 0 var(--barre-repere); } body:has(#barre-repliee:checked) .barre-laterale .groupe-de-menu { position: relative; width: 100%; display: flex; justify-content: center; } body:has(#barre-repliee:checked) .barre-laterale .groupe-de-menu[open] > .volet-de-groupe { position: absolute; top: 0; left: calc(100% + 4px); z-index: 40; width: 232px; padding: var(--e2); background: var(--volet-fond); border: 1px solid var(--volet-filet); border-radius: var(--rayon-carte); box-shadow: var(--ombre-volet); } body:has(#barre-repliee:checked) .barre-laterale .titre-du-volet { display: block; padding: var(--e2) var(--e3) var(--e1); font-size: 12px; font-weight: 600; color: var(--barre-discret); } body:has(#barre-repliee:checked) .barre-laterale .entree-de-menu { padding-left: var(--e3); } body:has(#barre-repliee:checked) .barre-laterale .separateur-de-barre { width: 40px; margin: var(--e2) auto; } body:has(#barre-repliee:checked) .barre-laterale .pied-de-barre { display: flex; justify-content: center; padding: var(--e3) 0; } input[type="radio"] { border-radius: 50%; } /* --- L'en-tête fin -------------------------------------------------------- 56 px, une ligne. Il portait le menu ; il ne porte plus que la recherche et le compte. */ header.entete-fin { min-height: 56px; padding: 8px 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-bottom: 1px solid var(--filet); } .recherche-globale { --surface: var(--surface-appui); background: var(--surface); color: var(--texte-discret); border: 1px solid var(--filet); justify-content: flex-start; gap: 8px; min-width: 260px; max-width: 420px; flex: 1 1 260px; font-weight: 400; } .recherche-globale kbd { margin-left: auto; font-family: inherit; font-size: 12px; border: 1px solid var(--filet); border-radius: 4px; padding: 1px 6px; } /* La navigation du portail : dans l'en-tete, faute de barre laterale. Elle deviendra la barre d'onglets basse de la maquette au lot C. */ .navigation-portail { display: flex; gap: 6px; flex-wrap: wrap; } .navigation-portail a { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 10px; border-radius: var(--rayon-champ); text-decoration: none; color: var(--lien); } .navigation-portail a.entree-active { --surface: var(--surface-appui); background: var(--surface); color: var(--texte); font-weight: 600; } /* --- Le fil d'Ariane ------------------------------------------------------ Où l'on est, et par où l'on est arrivé. Déduit du chemin, comme le menu. */ .fil-d-ariane { display: flex; align-items: center; gap: var(--e1); flex-wrap: wrap; /* Aligné sur le contenu de `main`, qui porte déjà sa marge. */ padding: 0 0 var(--e2); font-size: 13px; color: var(--texte-discret); } .fil-d-ariane a { color: var(--lien); } .fil-d-ariane strong { color: var(--texte); font-weight: 600; } /* Le séparateur est décoratif : les lecteurs d'écran ne le lisent pas. */ .separateur-de-fil { color: var(--texte-discret); } /* ========================================================================= Les trois points de rupture — déclarés ici, et nulle part ailleurs ========================================================================= 🔴 **Quatre seuils épars (700, 800, 900, 1100) devenus trois.** Ils n'étaient pas un système : ils avaient été posés un par un, chacun pour un écran, et deux d'entre eux se croisaient sans que personne l'ait voulu. | Seuil | Ce qui change | |---|---| | **1 180 px** | la colonne Bilan du planning se replie | | **760 px** | la barre passe en tête de page ; les tableaux deviennent des cartes ; la grille cède la place à la lecture par jour | 🟠 **À chaque largeur, une navigation entière.** C'est l'invariant du 27/08 : on ne retire jamais une navigation avant d'avoir posé la remplaçante. Depuis le 29/09 il n'y a plus qu'une barre : à 1 024 px elle garde ses 264 px (la recette le vérifie), et qui veut la place la réduit à 72 ; sous 760 px, elle passe au-dessus du contenu, groupes fermés. */ @media (max-width: 760px) { /* --------------------------------------------------------------------- 🔴 **La grille cède la place à une lecture en blocs.** Mesuré à 390 px : la colonne Site (220) et la colonne Bilan (132) en prennent 352 sur 362 disponibles. Il reste **dix pixels pour sept jours** — le `tbody` s'élargit à 608 px et fait défiler la page entière à l'horizontale. Aucun `overflow` de conteneur n'y peut rien : le débordement vient de la table elle-même. 🟠 **Un bloc par entité, et non par jour.** La spécification demandait « un bloc par jour, listant ses vacations avec le site » **et** « le même balisage pour les deux ». Les deux ne tiennent pas ensemble : une table range ses données par ligne — un site, ses sept jours — et transposer en colonnes n'est pas à la portée d'une feuille de style. Entre les deux exigences, celle du balisage unique l'emporte : deux gabarits qui disent la même chose divergent au premier ajout. On lit donc « Entrepôt Bravo, lundi 6 : 06 h », au lieu de « lundi 6, Entrepôt Bravo : 06 h ». Le bilan disparaît — arbitrage du directeur du 19/09 — et les colonnes collantes cessent de l'être : sur un bloc, il n'y a rien à ancrer. --------------------------------------------------------------------- */ .grille-planning { overflow: visible; max-height: none; } .grille-des-vacations, .grille-des-vacations tbody, .grille-des-vacations tr, .grille-des-vacations td, .grille-des-vacations th { display: block; width: auto; } .grille-des-vacations { table-layout: auto; } .grille-des-vacations thead, .grille-des-vacations tfoot, .grille-des-vacations .colonne-bilan { display: none; } .grille-des-vacations tr { margin-bottom: var(--e3); border: 1px solid var(--filet); border-radius: var(--rayon-carte); overflow: hidden; } .grille-des-vacations .colonne-entite { position: static; width: auto; max-width: none; font-weight: 600; background: var(--surface-appui); } /* 🟠 Une case vide ne devient pas une ligne vide : sept jours dont deux portent une vacation donneraient cinq lignes de rien, et le bloc se lirait moins bien que la grille qu'il remplace. */ .grille-des-vacations td.case:not(:has(.vignette)) { display: none; } .grille-des-vacations td.case { display: grid; grid-template-columns: 10ch minmax(0, 1fr); gap: var(--e2); align-items: start; border: 0; border-top: 1px solid var(--filet); padding: var(--e2); } /* Le jour, à gauche de ses vacations. Sélecteur long à dessein : la règle qui masque est déclarée plus bas dans la feuille, et à spécificité égale c'est la dernière lue qui l'emporte. */ .grille-des-vacations td.case .jour-de-case { display: block; color: var(--texte-discret); font-size: 12px; } /* La barre passe **au-dessus** du contenu : une colonne, même de 72 px, sur un écran de 390 ne laisse rien à lire. Ses groupes restent fermés ; le réglage de largeur n'a plus d'objet. 🔴 **Les deux bornes de hauteur tombent ici — le défaut du 21/09.** Posées pour que la colonne du bureau descende jusqu'en bas, `min-height: 100vh` faisait prendre à la navigation toute la hauteur d'un téléphone. */ body { display: block; } .barre-laterale, body:has(#barre-repliee:checked) .barre-laterale { position: static; width: auto; min-height: 0; max-height: none; } .liste-de-navigation { overflow: visible; } .pied-de-barre { display: none; } } .marque { display: inline-flex; align-items: center; gap: 10px; min-height: 32px; color: var(--texte); text-decoration: none; } .marque .pastille { display: inline-flex; align-items: center; justify-content: center; background: var(--haze-marine); border-radius: 4px; padding: 4px 6px; min-width: 32px; min-height: 32px; } .marque img { display: block; height: 24px; width: auto; } .marque .outil { font-weight: 600; letter-spacing: 1.5px; font-size: 13px; color: var(--texte-discret); } header nav { display: flex; gap: 12px; flex-wrap: wrap; } header nav a { color: var(--texte); text-decoration: none; padding: 2px 4px; } header nav a:hover { text-decoration: underline; } .compte-connecte { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .compte-connecte a { color: var(--lien); } /* La bascule de thème, à côté du compte. Un bouton, pas une case : l'état courant se lit dans son libellé. */ /* 🟠 **44 px, comme tout contrôle de la maison** — audit du 23/09, § 5 : le bouton « Thème » faisait 36 px, le seul sous la hauteur de contrôle. La densité et la déconnexion, voisines, s'alignent sur lui. */ .bascule-theme button, .compte-connecte button { min-height: var(--hauteur-controle); border-color: var(--filet); } /* Le repli des réglages sur le portail : sans cadre, il reste une ligne. */ .reglages-du-compte { border: 0; padding: 0; margin: 0; } .reglages-du-compte summary { display: inline-flex; align-items: center; gap: var(--e2); min-height: var(--hauteur-controle); font-weight: 400; } .reglages-du-compte[open] { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; } .reglages-du-compte[open] summary { margin-bottom: 0; } /* 🔴 **Pas de plafond de page.** Une largeur maximale est juste pour du texte — on ne lit pas une ligne de deux cents caractères — et fausse pour un tableau : celui-ci se serrait pendant que la moitié de l'écran restait vide. Les 1 500 px s'appliquaient aux deux. La prose est bornée là où elle est prose, à 70 `ch` (voir C.9 plus bas) ; les formulaires gardent la leur. Le reste prend ce qu'on lui donne. */ main { padding: var(--e4); /* 🟠 **Le lieu avant l'outil.** `base.html` écrit la bande de filtres avant `{% block contenu %}`, donc avant le titre de l'écran : on lisait « Filtres — Planning ». Le gabarit ne peut pas s'inverser sans que chaque écran reprenne la bande à son compte ; la feuille, elle, le fait en une ligne. `order` n'agit que sur le rendu, jamais sur l'ordre de lecture d'un lecteur d'écran — c'est sa limite, et ici c'est sans conséquence : le titre et un bouton de filtre se lisent dans les deux sens. */ display: flex; flex-direction: column; } main > * { order: 2; } main > .entete-d-ecran { order: 0; } /* 🟠 Le fil d'Ariane **au-dessus** du titre de l'écran (brief du 29/09, § 2.7) : il passe avant lui, comme le titre passe avant les filtres. */ main > .fil-d-ariane { order: -1; } main > .controle { order: 1; } /* 🟠 **Le pied de page porte des liens, donc des cibles.** Ils mesuraient 15 px de haut : la police reste petite — c'est un pied de page — mais la zone cliquable prend les 24 px du seuil, par du creux et non par des lettres plus grandes. */ footer a { display: inline-block; min-height: 24px; padding: var(--e1) 0; } footer { padding: var(--e3) var(--e4); color: var(--texte-discret); font-size: 12px; border-top: 1px solid var(--filet); } /* --- Typographie ---------------------------------------------------------- 🔴 **Plus de serif.** La passe 2 mettait les `h1` en Georgia, faute de pouvoir télécharger une police. Le rendu réel était le Times par défaut sur les postes sans Georgia — la signature exacte d'une page **non stylée**. Inter étant maintenant servie par l'application, les titres la prennent comme le reste : une seule famille, quatre graisses. L'échelle vient de la maquette validée : 24 / 18 / 15 / 14. */ h1 { font-size: 24px; font-weight: 600; line-height: 1.25; color: var(--titre); margin: 0 0 4px; } /* Le sous-titre d'écran : une phrase, sous le titre, jamais deux. */ h1 + .sous-titre { margin: 0 0 16px; color: var(--texte-discret); } h2 { font-size: 18px; font-weight: 600; margin: 24px 0 8px; border-bottom: 1px solid var(--filet); padding-bottom: 4px; } /* 🟠 **Plus d'air au-dessus qu'en dessous.** « Localisation », « Exigences » et « Consignes » se suivaient de trop près pour des groupes qui n'ont rien à voir : un titre doit appartenir visiblement à ce qui le suit, pas flotter entre deux blocs. L'écart au-dessus vaut donc six fois celui d'en dessous. */ h3 { font-size: 15px; font-weight: 600; margin: var(--e5) 0 var(--e1); } h3:first-child { margin-top: 0; } a { color: var(--lien); } /* 🔴 **Les chiffres s'alignent.** Cette application affiche des heures, des euros, des coefficients et des scores en colonnes. Sans chiffres tabulaires, les colonnes ne s'alignent pas et un écart ne se voit pas — c'est la déclaration au meilleur rapport effort/résultat de tout ce chantier, et elle ne coûte rien. */ table, .nombre, .compteur strong, .candidat .score, .jauge + span, .compte-resultats, .kpi-chiffre, input[type="number"], input[type="date"], input[type="time"], input[type="month"], time, code { font-variant-numeric: tabular-nums; } /* --- Bandeaux ------------------------------------------------------------- Quatre canaux, quatre sens, et aucun ne change ici : succès, réserve, refus, mode recette. Ils changent d'habit, pas de signification. */ /* Quatre variantes, **bord gauche de 4 px** et rien d'autre : un encadré entièrement cerné se dispute la page avec le tableau qu'il commente. */ .bandeau { padding: var(--e3) var(--e4); margin: 0 0 16px; border: 1px solid var(--filet); border-left-width: 4px; border-radius: var(--rayon-champ); background: var(--surface); color: var(--texte); display: flex; gap: 10px; align-items: flex-start; } .bandeau .icone-svg { flex: 0 0 auto; margin-top: 2px; } .bandeau-ok { border-left-color: var(--etat-conforme); } .bandeau-erreur { border-left-color: var(--etat-impossible); } /* Réussi, mais avec une réserve : ni vert ni rouge — l'ambre se distingue des deux d'un coup d'œil, ce qui est tout l'objet du troisième canal. */ .bandeau-avertissement { border-left-color: var(--etat-infraction); } .bandeau-info { --surface: var(--fond-deduit); border-left-color: var(--etat-deduit); } /* --- Tableaux ------------------------------------------------------------- 🟡 Filets allégés. Le quadrillage `1px solid #ccc` sur chaque cellule dominait la donnée : la hiérarchie vient de la typographie et de l'air, pas des boîtes. Les écrans de gestion restent denses — on allège ce qu'on voit, pas ce qu'ils montrent. */ table { border-collapse: collapse; width: 100%; margin-bottom: 16px; border: 1px solid var(--filet); border-radius: var(--rayon-carte); overflow: hidden; } /* 🟠 **Un tableau dense déborde ; il ne doit pas pousser la page.** Le conteneur défile pour lui — le corps de page, lui, ne défile jamais horizontalement. C'est le correctif acté par la maquette, et il vaut aussi pour les écrans de gestion à quinze colonnes. */ .tableau-defilant { overflow-x: auto; margin-bottom: 16px; border-radius: var(--rayon-carte); /* 🔴 **Sans lui, le défilement ne retient pas tout** — `/astreinte` débordait de 430 px sur téléphone (audit du 23/09 : + 432 px). Les libellés `visuellement-cache` des cellules sont en `position: absolute` ; un conteneur non positionné ne les rogne pas, et ils élargissaient la page entière, bien au-delà du tableau qui, lui, défilait. */ position: relative; } .tableau-defilant > table { margin-bottom: 0; } th, td { border-bottom: 1px solid var(--filet); padding: var(--creux-de-cellule); text-align: left; /* 🟢 **Centré verticalement**, et c'était déjà le cas. La note le recommande quand les hauteurs varient peu : cela répartit le blanc et facilite le balayage. Rien à faire, et il faut le dire — sans quoi quelqu'un le « corrigera » un jour en pensant bien faire. */ vertical-align: middle; } tbody td { height: var(--hauteur-ligne); } /* 🔴 **L'en-tête reste visible quand on descend.** Une colonne dont on ne lit plus le titre au bout de trente lignes n'est plus une colonne : c'est une suite de nombres qu'on interprète de mémoire. */ th { position: sticky; top: 0; z-index: 1; font-weight: 600; font-size: 13px; border-bottom: 2px solid var(--filet); color: var(--texte); } td.nombre, th.nombre { text-align: right; } .inactif td { color: var(--texte-discret); font-style: italic; } .onglet-actif { text-decoration: underline; } /* --- Formulaires ---------------------------------------------------------- La zone de saisie se distingue nettement du fond : un champ qui se confond avec sa carte ne se voit pas comme un champ. */ form.bloc, .legende-carte { border: 1px solid var(--filet); padding: var(--e3); margin-bottom: var(--e3); } /* --- Le tiroir de filtres ------------------------------------------------- 🔴 **`display` va sous `:popover-open`, jamais sur le sélecteur nu.** Une règle d'auteur qui déclare `display` sur un popover écrase le `display: none` que le navigateur applique quand il est fermé — le tiroir resterait ouvert en permanence. C'est le même piège que sur `
`, rencontré deux heures plus tôt dans le panneau de navigation : la règle `.entree-de-menu { display: flex }` y laissait sept groupes repliés occuper 889 px. 🟠 Le tiroir n'est pas centré comme un popover par défaut : il s'ancre en haut à gauche du contenu, là où était le panneau. On le rouvre au même endroit qu'on l'a fermé. */ form.filtres:popover-open { display: flex; gap: var(--e3); flex-wrap: wrap; align-items: flex-end; position: fixed; inset: auto; top: 96px; left: 50%; transform: translateX(-50%); width: min(920px, calc(100vw - var(--e6))); max-height: 70vh; overflow-y: auto; padding: var(--e4); z-index: 40; } form.filtres::backdrop { background: var(--voile); } .bouton-filtres { display: inline-flex; align-items: center; gap: var(--e2); min-height: var(--hauteur-controle); padding: 0 var(--e3); border: 1px solid var(--filet); border-radius: var(--rayon-champ); background: var(--surface-carte); color: var(--texte); font: inherit; cursor: pointer; } .bouton-filtres:hover { border-color: var(--accent); } /* 🔴 **Pas de bouton sans tiroir.** Le bouton est posé par `base.html` sur toutes les pages ; les écrans qui ne filtrent pas n'ont pas de `.filtres`, et un bouton qui n'ouvre rien est pire qu'un bouton absent — on clique, rien ne se passe, et on recommence. */ body:not(:has(form.filtres)) .bouton-filtres { display: none; } /* Et la bande avec lui, quand elle n'a plus rien à porter : une bande vide coûte sa marge sur chaque écran qui ne filtre pas. */ body:not(:has(form.filtres)) .controle:not(:has(p)) { display: none; } /* Le nombre de filtres posés. 🟠 Il ne paraît que s'il y en a : une pastille « 0 » se lit comme un filtre de plus. */ .compte-de-filtres { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 var(--e1); border-radius: var(--rayon-pastille); background: var(--accent); color: var(--sur-accent); font-size: 12px; font-weight: 700; } /* 🔴 **Quatre champs par rangée, jamais six.** « Exigences » en portait six sur une ligne, sur l'écran où l'on décide. La note du 20/09 range les écrans en deux familles : ceux où l'on balaye doivent rester denses, ceux où l'on lit doivent respirer — et la fiche de site est le plus dense du projet alors que c'est un écran de décision. 🟠 **La borne est une largeur, pas un compte.** `minmax(max(240px, …))` donne à chaque colonne au moins le quart de la rangée : il ne peut donc pas y en avoir cinq. Un compte figé aurait tenu jusqu'au premier écran étroit. */ .grille { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: start; } /* 🔴 **`grille-formulaire` n'avait aucune règle — audit du 23/09.** Les écrans du devis étaient les seuls à l'employer, et les seuls à ne pas suivre la charte : sur un écran de 2 560 px, sept champs empilés, **chacun large de 2 178 px**. Un code postal de deux mètres, et le bouton d'enregistrement à deux mille pixels de son libellé. 🟠 Le même comportement que `.grille`, dont elle n'était qu'un nom différent. Elle ne se résorbe pas en la renommant partout : deux gabarits l'emploient, et un alias coûte moins qu'un renommage. */ .grille-formulaire { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: start; } .champ { display: flex; flex-direction: column; min-width: 240px; /* 🔴 **Un quart de la rangée, donc quatre par ligne au plus.** La base de `200px` en laissait entrer six sur un écran large — et « Exigences » en portait six, sur l'écran où l'on décide. Un quart de la largeur moins l'écart : un cinquième champ ne tient plus et passe à la ligne. 🟠 C'est une largeur, pas un compte. Un compte figé aurait tenu jusqu'au premier écran étroit ; `min-width` s'en charge en descendant. */ flex: 1 1 calc(25% - var(--e3)); } .champ span { font-weight: 600; font-size: 12px; margin-bottom: var(--e0); } /* 🟠 **Les textes d'aide sont petits et serrés, et ce sont les plus utiles du projet.** On ne les retire pas — la note est formelle — on les rend lisibles : un interligne plus généreux que celui du corps. */ .champ small { line-height: 1.5; } .champ em { color: var(--etat-impossible); font-style: normal; } /* 🟠 **Deux lignes réservées à l'aide, là où il y en a une.** Les textes d'explication mesurent 18, 36 ou 54 px selon leur longueur, et la rangée prend la hauteur du plus grand : une aide d'une ligne laissait un décalage de 18 px avec sa voisine de deux. Réserver deux lignes régularise le cas courant — et ne coûte rien aux champs qui n'ont pas d'aide, puisque la règle ne s'applique qu'à un `small` qui existe. */ .champ small { display: block; min-height: 2.6em; } /* La ligne de service d'une fiche : le retour à gauche, ce qui retire la fiche de la circulation à droite, et rien entre les deux. */ .barre-de-fiche { display: flex; align-items: center; gap: var(--e2); margin: var(--e2) 0 var(--e3); } .barre-de-fiche .action-de-retrait { margin-left: auto; } .champ small { color: var(--texte-discret); font-size: 12px; margin-top: 2px; } .champ-large { flex: 1 1 100%; } /* 🟠 **Une zone de notes ne dépasse pas une ligne lisible** — audit du 23/09, § 5 : sur un écran de 2 560 px, plus de 300 caractères par ligne. Le champ garde toute la place en largeur de colonne ; c'est la zone de texte qui s'arrête à une mesure de lecture. */ .champ-large textarea { max-inline-size: 80ch; } /* 🟠 `flex: 0 0 auto` : la case et son intitulé ne se partagent pas la rangée comme un champ ordinaire — ils font un bloc, et ce bloc prend la largeur de son texte. */ .champ-case { flex-direction: row; align-items: center; gap: var(--e2); flex: 0 0 auto; } .champ-case span { margin: 0; } /* 🔴 **Sur un téléphone, ce bloc débordait de 372 px.** « Accord préalable exigé pour dépassement » et son aide sur une seule ligne mesuraient 733 px dans un écran de 388 — et ce sont ces deux cases qui décident si un dépassement est facturable. Sous 760 px, la case garde sa ligne avec l'intitulé ; l'aide passe dessous. `flex-wrap` plutôt qu'une colonne : une case à cocher séparée de son libellé cesse d'être cliquable au libellé. */ @media (max-width: 760px) { .champ-case { flex-wrap: wrap; flex: 1 1 100%; min-width: 0; } .champ-case span { flex: 1 1 auto; min-width: 0; } /* Aligné sous l'intitulé : 24 px de case plus l'écart. Par le jeton, comme tout ce qui s'ajoute depuis la garde d'échelle. */ .champ-case small { flex: 1 1 100%; margin-left: var(--e6); } } /* 🔴 Une zone de saisie est une surface : elle porte du texte sur un fond qui n'est pas celui de la carte. Elle déclare donc `--surface`, comme les autres — c'est ce qui la fait entrer dans la mesure de contraste. */ input, select, textarea { --surface: var(--surface-carte); font-family: inherit; font-size: 14px; min-height: var(--hauteur-controle); padding: 8px 10px; border: 1px solid var(--filet-controle); border-radius: var(--rayon-champ); background: var(--surface); color: var(--texte); } /* 🔴 **24 px, partout.** WCAG 2.2 pose 24 × 24 pour toute cible, sans exception pour les cases à cocher : 18 px, c'est les trois quarts. La règle vivait déjà sur le portail (plus bas) ; l'écran de gestion en avait autant besoin — c'est là qu'on coche « purger », « retenir », « clore ». `accent-color` teinte la coche ; la taille, elle, porte sur la boîte. */ input[type="checkbox"], input[type="radio"] { min-height: 0; width: 24px; height: 24px; /* 🟠 **Un contour, et non une bordure.** Ces deux-là gardent leur rendu natif — `appearance: auto` — parce qu'il porte la coche, le point, et l'état indéterminé que personne ne redessine bien. Or `border` ne s'applique pas à un contrôle natif : seul `outline` se peint. Le bouton radio reçoit le sien arrondi, sinon un cercle dans un carré. Au focus, l'anneau de focus le remplace — c'est voulu : il est plus visible, et deux anneaux concentriques ne disent rien de plus. */ outline: 1px solid var(--filet-controle); outline-offset: 1px; accent-color: var(--accent); } /* 🔴 **Le gris du navigateur ne connaît pas le thème.** Sans règle, `::placeholder` vaut `#757575` dans les deux thèmes : 3,47:1 en sombre, sous le seuil. Le rattacher au jeton le fait suivre le fond. 🟠 `opacity: 1` est nécessaire : Firefox applique une transparence par défaut au placeholder, qui rabattrait la couleur qu'on vient de poser. */ input::placeholder, textarea::placeholder { color: var(--texte-discret); opacity: 1; } /* Un champ désactivé prend la surface d'appui : il se lit encore, il ne se saisit plus. Le griser jusqu'à l'illisible cacherait ce qu'il contient. */ input:disabled, select:disabled, textarea:disabled { --surface: var(--surface-appui); color: var(--texte-discret); cursor: not-allowed; } /* Un champ en erreur porte sa bordure **et** son message : la couleur seule ne dit pas ce qui ne va pas. */ .champ-en-erreur input, .champ-en-erreur select, .champ-en-erreur textarea { border-color: var(--etat-impossible); border-width: 2px; } .champ-en-erreur .message-d-erreur { color: var(--etat-impossible); font-size: 12px; margin-top: 4px; } /* 🔴 **Le focus clavier se voit dans les deux thèmes**, et il se voit sur tout ce qui se focalise — pas seulement sur les champs. `--lien` est la couleur d'action de la surface courante : elle change avec le thème, donc le contour aussi. Le décalage l'empêche de se confondre avec la bordure du champ, qui est de la même famille de gris. */ input:focus, select:focus, textarea:focus, a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--lien); outline-offset: 2px; } /* --- Les cinq rôles de bouton --------------------------------------------- Secondaire par défaut — c'est le cas le plus fréquent : filtrer, exporter, annuler. Les quatre autres se demandent par une classe. */ button { font-family: inherit; font-size: 14px; font-weight: 500; padding: var(--e2) var(--e4); border: 1px solid var(--filet); border-radius: var(--rayon-champ); cursor: pointer; min-height: var(--hauteur-controle); display: inline-flex; align-items: center; justify-content: center; gap: 8px; } /* 🔴 **Le primaire : fond accent, texte marine.** Jamais de texte blanc sur ce bleu — 2,48 de contraste, illisible. Le marine y donne 6,06. Une seule action primaire par écran : deux boutons bleus ne hiérarchisent rien. */ button.primaire, .bouton-primaire { --surface: var(--accent); /* 🔴 **Une surface redéclare tout son texte, sans exception.** Sur ce bleu, le gris discret tombe à 2,21 et le vert « conforme » à 2,24 : rien de la palette ordinaire n'y est lisible. Un bouton primaire ne porte de toute façon qu'un libellé et parfois une icône — tout y est marine, et la mesure de contraste le vérifie au lieu de le supposer. */ --texte: var(--sur-accent); --texte-discret: var(--sur-accent); --lien: var(--sur-accent); --etat-impossible: var(--sur-accent); --etat-infraction: var(--sur-accent); --etat-conforme: var(--sur-accent); --etat-deduit: var(--sur-accent); --texte-pourvoir: var(--sur-accent); background: var(--surface); border-color: var(--accent); color: var(--texte); font-weight: 600; } button.primaire:hover, .bouton-primaire:hover { filter: brightness(1.06); border-color: var(--accent); } /* 🔴 Audit du 26/09, T14 : l'appui doit se voir. Sans état actif, rien ne bougeait sous le doigt, et l'agent appuyait une seconde fois. */ button.primaire:active, .bouton-primaire:active { filter: brightness(0.9); transform: translateY(1px); } .bouton-primaire[aria-busy="true"], button[aria-busy="true"] { cursor: progress; opacity: 0.8; } /* Tertiaire : un lien qui se comporte en bouton. Actions de ligne, « tout voir ». */ button.discret { --surface: transparent; background: none; border-color: transparent; color: var(--lien); padding: 8px 6px; } button.discret:hover { --surface: var(--surface-appui); } button.attention { border-color: var(--etat-impossible); color: var(--etat-impossible); } /* Bouton d'icône : carré, et **une info-bulle obligatoire** — une icône seule sans nom est une devinette. */ button.icone { width: 36px; min-height: 36px; padding: 0; } button:disabled { --surface: var(--surface-appui); color: var(--texte-discret); cursor: not-allowed; } .en-ligne { display: inline; } .onglets { display: flex; gap: 4px; flex-wrap: wrap; margin: 12px 0 0; border-bottom: 1px solid var(--filet); } .onglets button { border-bottom: none; } .onglets button[aria-selected="true"] { font-weight: 700; } .panneau { border: 1px solid var(--filet); border-top: none; padding: 12px; } .panneau[hidden] { display: none; } /* --- Étiquettes d'état ---------------------------------------------------- 🔴 **La couleur dit un état, jamais une décoration.** Hors des quatre sens ci-dessous, aucune couleur n'entre dans une zone de données. */ .alerte { display: inline-block; padding: 1px 6px; margin: 1px 2px 1px 0; border: 1px solid; font-size: 12px; background: var(--surface); color: var(--texte); } .alerte-depassee { border-color: var(--etat-impossible); } .alerte-proche { border-color: var(--etat-infraction); } /* --- Compteur de couverture, en tête de planning ------------------------- */ .compteur-couverture .compteurs { margin: 0 0 6px; font-size: 15px; } .compteur-couverture .compteurs a { text-decoration: none; } .compteur-couverture .compteurs a:hover { text-decoration: underline; } /* --- Classement de dispatch ---------------------------------------------- Le détail du calcul est affiché sous chaque candidat : un opérateur qui voit « 82/100 » sans savoir pourquoi finit par suivre l'ordre sans le lire. */ .candidats { padding-left: 24px; } .candidat { border: 1px solid var(--filet); padding: 8px 12px; margin-bottom: 8px; } .candidat-tete { margin: 0 0 4px; } .candidat-detail { margin: 0 0 3px; } .candidat .score { display: inline-block; font-weight: 700; font-size: 15px; padding: 1px 8px; margin-left: 6px; } /* --- Mouvements du registre ---------------------------------------------- Une ligne de correction doit se lire sans effort : c'est ce document qu'on produit à côté du registre lors d'un contrôle. */ .mouvements { list-style: none; margin: 0; padding: 0; } .mouvement { border-left: 3px solid var(--lien); padding: 8px 12px; margin-bottom: 8px; } .mouvement-tete { margin: 0 0 4px; } .mouvement-detail { margin: 0 0 2px 16px; } /* --- Panneau latéral, jamais modale -------------------------------------- Règle d'interface opposable à toute la suite du projet : le formulaire s'ouvre sur le côté, SANS voile ni blocage. Le tableau reste lisible derrière — c'est souvent la ligne qu'on est en train de modifier. Aucun `position: fixed` couvrant, aucun fond assombri, aucun empilement. */ .panneau-lateral { position: fixed; top: 0; right: 0; width: min(440px, 92vw); height: 100%; overflow-y: auto; --surface: light-dark(#FFFFFF, #16324E); background: var(--surface); color: var(--texte); border-left: 2px solid var(--lien); box-shadow: -2px 0 6px var(--ombre); padding: 16px; transform: translateX(100%); transition: transform .15s ease-out; z-index: 20; } .panneau-lateral.ouvert { transform: translateX(0); } .panneau-lateral .mention-panneau { margin-top: 0; } /* Le corps se décale au lieu d'être recouvert : rien n'est masqué. */ body.panneau-ouvert main { padding-right: min(440px, 92vw); } @media (max-width: 760px) { body.panneau-ouvert main { padding-right: 0; } } .jauge { display: inline-block; width: 90px; height: 10px; border: 1px solid var(--filet); vertical-align: middle; } .jauge span { display: block; height: 100%; background: var(--etat-conforme); } .jauge-faible span { background: var(--etat-impossible); } .jauge-moyenne span { background: var(--etat-infraction); } /* Audit du 26/09, S1 : la largeur d'une jauge et la part d'un score sont des classes (filtres Jinja largeur et part), plus un style en ligne que la politique de contenu refuse. Une règle par centième, de 0 à 100. */ .largeur-0 { width: 0%; } .largeur-1 { width: 1%; } .largeur-2 { width: 2%; } .largeur-3 { width: 3%; } .largeur-4 { width: 4%; } .largeur-5 { width: 5%; } .largeur-6 { width: 6%; } .largeur-7 { width: 7%; } .largeur-8 { width: 8%; } .largeur-9 { width: 9%; } .largeur-10 { width: 10%; } .largeur-11 { width: 11%; } .largeur-12 { width: 12%; } .largeur-13 { width: 13%; } .largeur-14 { width: 14%; } .largeur-15 { width: 15%; } .largeur-16 { width: 16%; } .largeur-17 { width: 17%; } .largeur-18 { width: 18%; } .largeur-19 { width: 19%; } .largeur-20 { width: 20%; } .largeur-21 { width: 21%; } .largeur-22 { width: 22%; } .largeur-23 { width: 23%; } .largeur-24 { width: 24%; } .largeur-25 { width: 25%; } .largeur-26 { width: 26%; } .largeur-27 { width: 27%; } .largeur-28 { width: 28%; } .largeur-29 { width: 29%; } .largeur-30 { width: 30%; } .largeur-31 { width: 31%; } .largeur-32 { width: 32%; } .largeur-33 { width: 33%; } .largeur-34 { width: 34%; } .largeur-35 { width: 35%; } .largeur-36 { width: 36%; } .largeur-37 { width: 37%; } .largeur-38 { width: 38%; } .largeur-39 { width: 39%; } .largeur-40 { width: 40%; } .largeur-41 { width: 41%; } .largeur-42 { width: 42%; } .largeur-43 { width: 43%; } .largeur-44 { width: 44%; } .largeur-45 { width: 45%; } .largeur-46 { width: 46%; } .largeur-47 { width: 47%; } .largeur-48 { width: 48%; } .largeur-49 { width: 49%; } .largeur-50 { width: 50%; } .largeur-51 { width: 51%; } .largeur-52 { width: 52%; } .largeur-53 { width: 53%; } .largeur-54 { width: 54%; } .largeur-55 { width: 55%; } .largeur-56 { width: 56%; } .largeur-57 { width: 57%; } .largeur-58 { width: 58%; } .largeur-59 { width: 59%; } .largeur-60 { width: 60%; } .largeur-61 { width: 61%; } .largeur-62 { width: 62%; } .largeur-63 { width: 63%; } .largeur-64 { width: 64%; } .largeur-65 { width: 65%; } .largeur-66 { width: 66%; } .largeur-67 { width: 67%; } .largeur-68 { width: 68%; } .largeur-69 { width: 69%; } .largeur-70 { width: 70%; } .largeur-71 { width: 71%; } .largeur-72 { width: 72%; } .largeur-73 { width: 73%; } .largeur-74 { width: 74%; } .largeur-75 { width: 75%; } .largeur-76 { width: 76%; } .largeur-77 { width: 77%; } .largeur-78 { width: 78%; } .largeur-79 { width: 79%; } .largeur-80 { width: 80%; } .largeur-81 { width: 81%; } .largeur-82 { width: 82%; } .largeur-83 { width: 83%; } .largeur-84 { width: 84%; } .largeur-85 { width: 85%; } .largeur-86 { width: 86%; } .largeur-87 { width: 87%; } .largeur-88 { width: 88%; } .largeur-89 { width: 89%; } .largeur-90 { width: 90%; } .largeur-91 { width: 91%; } .largeur-92 { width: 92%; } .largeur-93 { width: 93%; } .largeur-94 { width: 94%; } .largeur-95 { width: 95%; } .largeur-96 { width: 96%; } .largeur-97 { width: 97%; } .largeur-98 { width: 98%; } .largeur-99 { width: 99%; } .largeur-100 { width: 100%; } .part-0 { --part: 0; } .part-1 { --part: 1; } .part-2 { --part: 2; } .part-3 { --part: 3; } .part-4 { --part: 4; } .part-5 { --part: 5; } .part-6 { --part: 6; } .part-7 { --part: 7; } .part-8 { --part: 8; } .part-9 { --part: 9; } .part-10 { --part: 10; } .part-11 { --part: 11; } .part-12 { --part: 12; } .part-13 { --part: 13; } .part-14 { --part: 14; } .part-15 { --part: 15; } .part-16 { --part: 16; } .part-17 { --part: 17; } .part-18 { --part: 18; } .part-19 { --part: 19; } .part-20 { --part: 20; } .part-21 { --part: 21; } .part-22 { --part: 22; } .part-23 { --part: 23; } .part-24 { --part: 24; } .part-25 { --part: 25; } .part-26 { --part: 26; } .part-27 { --part: 27; } .part-28 { --part: 28; } .part-29 { --part: 29; } .part-30 { --part: 30; } .part-31 { --part: 31; } .part-32 { --part: 32; } .part-33 { --part: 33; } .part-34 { --part: 34; } .part-35 { --part: 35; } .part-36 { --part: 36; } .part-37 { --part: 37; } .part-38 { --part: 38; } .part-39 { --part: 39; } .part-40 { --part: 40; } .part-41 { --part: 41; } .part-42 { --part: 42; } .part-43 { --part: 43; } .part-44 { --part: 44; } .part-45 { --part: 45; } .part-46 { --part: 46; } .part-47 { --part: 47; } .part-48 { --part: 48; } .part-49 { --part: 49; } .part-50 { --part: 50; } .part-51 { --part: 51; } .part-52 { --part: 52; } .part-53 { --part: 53; } .part-54 { --part: 54; } .part-55 { --part: 55; } .part-56 { --part: 56; } .part-57 { --part: 57; } .part-58 { --part: 58; } .part-59 { --part: 59; } .part-60 { --part: 60; } .part-61 { --part: 61; } .part-62 { --part: 62; } .part-63 { --part: 63; } .part-64 { --part: 64; } .part-65 { --part: 65; } .part-66 { --part: 66; } .part-67 { --part: 67; } .part-68 { --part: 68; } .part-69 { --part: 69; } .part-70 { --part: 70; } .part-71 { --part: 71; } .part-72 { --part: 72; } .part-73 { --part: 73; } .part-74 { --part: 74; } .part-75 { --part: 75; } .part-76 { --part: 76; } .part-77 { --part: 77; } .part-78 { --part: 78; } .part-79 { --part: 79; } .part-80 { --part: 80; } .part-81 { --part: 81; } .part-82 { --part: 82; } .part-83 { --part: 83; } .part-84 { --part: 84; } .part-85 { --part: 85; } .part-86 { --part: 86; } .part-87 { --part: 87; } .part-88 { --part: 88; } .part-89 { --part: 89; } .part-90 { --part: 90; } .part-91 { --part: 91; } .part-92 { --part: 92; } .part-93 { --part: 93; } .part-94 { --part: 94; } .part-95 { --part: 95; } .part-96 { --part: 96; } .part-97 { --part: 97; } .part-98 { --part: 98; } .part-99 { --part: 99; } .part-100 { --part: 100; } .compteurs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; } .compteur { border: 1px solid var(--filet); padding: 8px 12px; min-width: 130px; } .compteur strong { display: block; font-size: 22px; } .compteur span { font-size: 12px; color: var(--texte-discret); } /* L'etape courante du pipeline de prospection. Un filet, pas un fond : changer la surface obligerait a y redeclarer le texte, et une etape en cours n'est ni une alerte ni une infraction. */ .compteur-actif { border-color: var(--lien); border-width: 2px; padding: 7px 11px; } /* --- Les puces de filtre et le compteur ----------------------------------- Elles repondent a « qu'est-ce que je regarde » sans rouvrir le panneau de filtre. Un filtre invisible piege : trois lignes sous un menu referme se lisent « il n'y a que trois vacations ». */ .puces-de-filtre { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; } .compte-resultats { font-weight: 700; color: var(--texte); } .puce { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--filet); padding: 3px 4px 3px 10px; font-size: 14px; color: var(--texte); } .puce strong { font-weight: 600; } .puce-retirer { /* 24 px de cible : la meme regle que le chantier visuel du portail. */ display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px; text-decoration: none; color: var(--lien); font-size: 16px; line-height: 1; } .puce-retirer:hover, .puce-retirer:focus-visible { background: var(--fond-deduit); } .puce-tout-effacer { font-size: 14px; } /* Les vues enregistrees : des signets personnels, en tete de l'ecran. */ .vues-enregistrees { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; } .vue { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--filet); padding: 3px 4px 3px 10px; font-size: 14px; } .vue-retirer { min-width: 24px; min-height: 24px; padding: 0; background: none; border: none; color: var(--lien); font-size: 16px; line-height: 1; cursor: pointer; } .vue-retirer:hover, .vue-retirer:focus-visible { background: var(--fond-deduit); } /* --- La palette de commandes (Ctrl+K) ------------------------------------ Une surimpression, et non une modale de formulaire : la regle du projet interdit les modales pour SAISIR, parce qu'il faut pouvoir lire la ligne qu'on modifie. Ici on ne saisit rien qu'on enregistre — on choisit une destination, et la page dessous n'a plus a etre lue. */ /* 🔴 **Hors du flux, pas seulement invisible.** Un élément de 1 px reste un enfant de grille : la case du repli occupait une cellule, et la barre latérale se retrouvait en colonne 2. Un contenu caché ne doit rien occuper. */ .visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Le sprite d'icônes : il n'affiche rien, il ne doit rien mesurer. */ .jeu-d-icones { position: absolute; width: 0; height: 0; overflow: hidden; } .palette { position: fixed; inset: 0; z-index: 60; background: var(--voile); display: flex; justify-content: center; align-items: flex-start; padding: 10vh 16px 16px; } .palette[hidden] { display: none; } .palette-boite { --surface: light-dark(#FFFFFF, #16324E); --texte: light-dark(#1A1A1A, #F2F5F7); --texte-discret: light-dark(#5A5A5A, #B0B0B0); --lien: light-dark(#00719F, #00B0F0); background: var(--surface); color: var(--texte); border: 1px solid var(--filet); box-shadow: 0 12px 40px var(--ombre); width: min(640px, 100%); max-height: 70vh; display: flex; flex-direction: column; } .palette-champ { display: block; padding: 12px; border-bottom: 1px solid var(--filet); } .palette-champ input { width: 100%; font-size: 17px; padding: 10px 12px; background: var(--surface); color: var(--texte); border: 1px solid var(--filet); } .palette-liste { list-style: none; margin: 0; padding: 0; overflow-y: auto; } .palette-liste li { padding: var(--e3) var(--e4); cursor: pointer; display: flex; gap: 10px; align-items: baseline; border-bottom: 1px solid var(--filet); } .palette-liste li:last-child { border-bottom: none; } .palette-liste li[aria-selected="true"] { background: var(--fond-deduit); } .palette-liste .palette-libelle { color: var(--texte); } .palette-liste .palette-categorie { font-size: 12px; color: var(--texte-discret); } .palette-liste .palette-vide { color: var(--texte-discret); cursor: default; } .palette-aide { padding: var(--e2) var(--e4); margin: 0; border-top: 1px solid var(--filet); font-size: 12px; } .avertissement { --surface: var(--fond-infraction); background: var(--surface); border: 1px solid var(--etat-infraction); padding: 8px 10px; margin-bottom: 12px; } .masque { border: 1px dashed var(--filet); padding: 8px 10px; } .masque code { background: var(--surface); padding: 1px 4px; } .manquants { color: var(--etat-impossible); font-size: 12px; } /* 🔴 **La valeur conservée parce qu'elle n'est plus dans la liste.** Ambre et non rouge : ce n'est pas une infraction, c'est une donnée que personne n'a décidé de perdre. L'écran la garde, la nomme, et laisse le choix. 🟠 Aucune valeur littérale ici — le creux vient de l'échelle, faute de quoi la garde du 21/09 refuserait la règle. */ /* 🔴 **Le statut déduit des contrats, posé au-dessus du volet.** Il dit un fait ; le volet, en dessous, dit une déclaration. Les deux se lisent, et c'est leur écart qui est l'information. 🟠 Les creux viennent de l'échelle : la garde du 21/09 refuse un littéral. */ .statut-deduit { display: flex; flex-direction: column; gap: var(--e0); padding: var(--e3); margin-bottom: var(--e3); border-left: 3px solid var(--etat-conforme); background: var(--surface-creux); } /* L'indéterminé est ambre et non rouge : ce n'est pas une infraction, c'est une contradiction entre deux sources — et elle se résout par une saisie. */ .statut-indetermine { border-left-color: var(--etat-infraction); } /* 🔴 **Les champs d'une société inconnue, révélés par le choix lui-même.** Correctif du 22/09 : l'écran « Ouvrir un devis » réclamait un numéro de client indevinable. Il propose désormais une liste, dont la dernière entrée ouvre trois champs. 🟠 **Sans une ligne de script.** `:has()` lit la valeur du `