/* ============================================================ Smartclick — Design tokens v1 Direction : « fiche technique / as-built » (brief v3) Garde-fou : sobriété. 4 couleurs max. Aucun dégradé, aucune ombre décorative, aucune icône bleue générique. ============================================================ */ :root { /* ---------- Palette (4 familles, pas une de plus) ---------- */ --paper: #FAF9F5; /* fond papier, blanc cassé */ --paper-2: #F1F0EA; /* lignes paires de tableau (zebra) */ --ink: #1E2226; /* texte graphite foncé */ --ink-soft: #565B60; /* texte secondaire / annotations */ --accent: #2F5D82; /* bleu du hibou, désaturé (accent) */ --accent-strong:#244A6A; /* hover / états actifs */ --accent-tint: #E9EEF3; /* aplat léger d'accent (fonds) */ --hairline: #DCDAD2; /* filets fins, bordures */ --err: #8a5a2b; /* brun d'alerte — 5e et DERNIÈRE teinte */ /* ---------- États ---------------------------------------------------- Décision du 28/07/2026, RÉVISÉE LE 28/09/2026. L'état de la règle et ce qui l'a fait changer, dans cet ordre. LA RÈGLE DU 28/07 était : deux teintes suffisent à trois états, parce que ce n'est pas la couleur qui les distingue mais la FORME — pastille pleine en accent, contour brun, brun plein plus gras. Le raisonnement tenait à deux choses : rester à quatre teintes, et rester lisible sans distinguer les couleurs. CE QUI A CHANGÉ : le portail client. Le 28/09, Mathieu a tranché que les pastilles vues par un CLIENT portent des teintes reconnaissables — vert, orange, gris — et non deux nuances de la même encre. Un gérant qui ouvre son espace une fois par mois ne lit pas un contour brun contre un contour gris ; un technicien qui vit dans le centre de supervision, si. La charte passe donc à sept teintes, et la contrepartie n'est pas négociable : LE MOT RESTE. Une pastille n'apparaît JAMAIS seule, ni au portail ni à la supervision. C'est lui qui tient l'impression en noir et blanc et la lecture sans distinction des couleurs, et c'était déjà la moitié du raisonnement du 28/07 — la moitié qu'on garde. Le CENTRE DE SUPERVISION emploie les mêmes jetons, dans les mêmes formes. Deux fichiers de jetons qui divergent, c'est le défaut des composes en pire, parce qu'un client le verrait. ok · pastille PLEINE --dot-ok « en ligne », « à jour » watch · pastille PLEINE --dot-watch « à voir » idle · pastille CONTOUR --dot-idle « en attente », « pas de mesure » crit · pastille PLEINE --err + gras interne seulement — le portail n'affiche aucune alarme (D-6) --state-* restent pour l'existant (pill, colonnes kanban) : ils ne décrivent pas une pastille, et les repointer changerait des aplats de fond qui n'ont rien à voir. ------------------------------------------------------------------- */ --state-ok: var(--accent); --state-warn: var(--err); --state-crit: var(--err); /* Les trois pastilles. Sixième et septième teintes, assumées ci-dessus. Le gris est dérivé de --ink-soft éclairci : un contour à l'encre du texte secondaire se lit comme un caractère, pas comme un état. */ --dot-ok: #3E8E5A; /* vert désaturé — tout va bien, en ligne */ --dot-watch: #DD8A33; /* orange — à voir */ --dot-idle: #9AA1A6; /* gris, CONTOUR — pas de mesure, en attente */ /* Le bandeau d'un compte de TEST. Ni une erreur, ni un état de machine : un avertissement de contexte, et il doit se voir sans crier. Il ne prend donc ni --err ni --dot-watch, qui ont chacun un sens ailleurs. */ --test-bg: #6E5F34; /* ---------- Palette DIAGRAMME (scopée) ---------------------------- Validée le 28/07/2026. LA DOCTRINE, EN UNE PHRASE : la charte gouverne l'interface, la palette diagramme gouverne les schémas, et les états n'ont que deux encres (accent, brun) plus la forme. Ces teintes sont RÉSERVÉES aux représentations schématiques de contenu technique — builder de rack, plan réseau, terminal, futurs schémas d'as-built. Elles y encodent des CATÉGORIES d'équipement, ce que la forme ne peut pas faire quand vingt éléments cohabitent dans une baie. ELLES NE TOUCHENT JAMAIS L'INTERFACE : pas de pill, pas de bouton, pas de badge, pas d'état, pas de tableau. Un état reste accent + brun + forme (section « États » ci-dessus). Contrôle : hors des sélecteurs de schéma (.u.*, .port.*, .rj.*, .ap, .term, .plan), aucune de ces variables ne doit apparaître. ------------------------------------------------------------------- */ --dgm-switch: #2F5D82; /* switch — reprend l'accent */ --dgm-patch: #565B60; /* patch panel */ --dgm-server: #3E6E54; /* serveur */ --dgm-nas: #7A5C34; /* NAS */ --dgm-ups: #5B5B7A; /* onduleur */ --dgm-misc: #6E5F82; /* autre équipement rackable */ --dgm-term-bg: #101418; /* fond terminal */ --dgm-term-fg: #8FCFA8; /* texte terminal */ /* ---------- Le chassis de baie (palette DIAGRAMME, suite) ---------- Ajoutee le 02/09/2026, AVANT le builder de baie et non pendant. Une baie doit ressembler a une baie : chassis, montants, trous de fixation, faceplates sombres, ports occupes distincts des ports libres. Ce rendu demande une quinzaine de gris tres proches, et ils n'ont rien a faire dans l'interface. Les poser ici maintenant a une raison precise : sans elles, le builder les reintroduira en dur dans une vue, et le test qui interdit tout hex dans app/Views ne pourra plus etre absolu. Une regle qui souffre une exception cesse d'etre verifiable. MEME DOCTRINE QUE LES --dgm-* CI-DESSUS : reservees aux schemas. Hors des selecteurs de schema (.rack*, .eq, .pt, .pp*, .cmdblk), aucune de ces variables ne doit apparaitre. ------------------------------------------------------------------- */ --dgm-chassis: #23262a; /* corps de baie */ --dgm-chassis-2: #1a1d20; /* bandeau, fond de baie */ --dgm-rail: #31363b; /* montants */ --dgm-hole: #111416; /* trous de fixation */ --dgm-face: #3b4249; /* faceplate d'equipement */ --dgm-face-2: #2b3138; /* organes en creux : baies, cages SFP+ */ --dgm-edge: #14171a; /* filets et bords */ --dgm-port: #5a656e; /* port libre */ --dgm-port-on: #7fb4d8; /* port actif */ --dgm-ink: #eef2f5; /* texte sur faceplate */ --dgm-ink-soft: #8f9aa3; /* texte secondaire sur faceplate */ /* Sémantique dérivée (ne pas introduire de nouvelles teintes) */ --bg: var(--paper); --bg-alt: var(--paper-2); --text: var(--ink); --text-muted: var(--ink-soft); --border: var(--hairline); --link: var(--accent); --link-hover: var(--accent-strong); /* ---------- Typographie ---------- */ /* Sans-serif sobre pour tout ; monospace UNIQUEMENT pour annotations techniques, réf. produit, valeurs et prix. */ --font-sans: "Inter", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-mono: "IBM Plex Mono", "SFMono-Regular", ui-monospace, "Menlo", "Consolas", monospace; --fs-hero: clamp(2rem, 4.5vw, 3.25rem); --fs-h2: clamp(1.5rem, 3vw, 2.1rem); --fs-h3: 1.25rem; --fs-body: 1.0625rem; /* 17px */ --fs-small: 0.9375rem; --fs-mono: 0.8125rem; /* annotations / réf produit */ --lh-tight: 1.15; --lh-body: 1.6; --tracking-mono: 0.02em; /* ---------- Rythme & formes ---------- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-8: 3rem; --sp-10: 4.5rem; --radius: 4px; /* discret, une fiche pliée, pas un bouton d'app */ --radius-lg: 6px; --border-w: 1px; --maxw: 1120px; /* Aucune ombre décorative. Une seule ombre "papier" très légère, réservée aux cartes qui se détachent du fond, jamais colorée. */ /* ── LES NOMS COURTS DE LA MAQUETTE, EN ALIAS ───────────────────────── Registre A1-A3, lot M-CSS. `maquette.css` redefinissait ces noms dans son propre `:root`, charge en dernier : la charte reelle etait la-bas. Ils sont ici, et dans CE SENS -- alias vers le jeton de charte, jamais l'inverse. Une definition circulaire (--hairline: var(--line) d'un cote, --line: var(--hairline) de l'autre) rend les DEUX invalides, et la page perd ses filets sans qu'aucune erreur ne s'affiche. Les valeurs sont identiques a celles que la maquette posait : le rendu ne bouge pas d'un pixel. Deux exceptions assumees, --sans et --mono, dont la CHAINE DE REPLI differe (Segoe UI d'un cote, IBM Plex Sans de l'autre). La premiere famille est la meme ; l'ecart ne se voit que si Inter et IBM Plex Mono manquent tous les deux. ------------------------------------------------------------------- */ /* ── LE BLANC PUR N'EST PAS `--paper` ───────────────────────────────── Lot M-CSS. `#fff` apparaissait dix-huit fois dans `maquette.css` : fond des champs, des cartes, des etiquettes. Le remplacer par `--paper` (#FAF9F5) aurait ete plus simple et AURAIT CHANGE LE RENDU -- or ce lot ne doit rien deplacer d'un pixel. Le blanc est donc nomme pour ce qu'il est : l'absence de teinte, pas une sixieme teinte. ------------------------------------------------------------------- */ --blanc: #fff; --paper-3: #FDFDFB; /* le jour courant de l'agenda */ --accent-border:#C3D4E2; /* bordure claire d'accent (pill, message) */ /* ── LE DESSIN SUR FOND SOMBRE ──────────────────────────────────────── La barre de chrono et la fenetre de bureau distant DESSINENT quelque chose : une bande d'application, un ecran. Leurs teintes ne suivent pas l'encre du texte -- si `--ink-soft` change un jour, la fenetre simulee ne doit pas changer avec lui. Meme raison que le terminal, dont les deux couleurs vivent deja ici. ------------------------------------------------------------------- */ --dgm-bar-ink: #C9CDD1; /* texte sur bande sombre */ --dgm-bar-accent: #9FC2DE; /* chiffres, invite de commande */ --dgm-bar-edge: #5A6067; /* bordure de bouton sur bande sombre */ --dgm-remote-bg: #1B1F24; /* corps de la fenetre distante */ --dgm-remote-bar: #2B2F33; /* sa barre de titre */ --dgm-remote-screen: #22303C; /* le bureau distant */ --dgm-remote-win: #EDEEF0; /* une fenetre dans ce bureau */ --dgm-remote-win-bar: #D5D8DB; /* son bandeau */ --dgm-remote-win-ink: #565B60; /* son texte */ --dgm-remote-icon: #3E4A56; /* une icone de barre des taches */ --dgm-acc: #7A6B45; /* unite de baie : accessoire */ --dgm-barcode: #2B2F33; /* les barres d'un code-barres */ --line: var(--hairline); --ink2: var(--ink-soft); --muted: var(--ink-soft); --surface: var(--paper); --sans: var(--font-sans); --mono: var(--font-mono); --ok: var(--state-ok); --warn: var(--state-warn); --crit: var(--state-crit); --shadow-paper: 0 1px 0 rgba(30,34,38,0.04); } /* ---------- Base ---------- */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text); background: var(--bg); font-feature-settings: "kern" 1, "liga" 1, "tnum" 1; -webkit-font-smoothing: antialiased; } h1, h2, h3 { line-height: var(--lh-tight); font-weight: 650; letter-spacing: -0.01em; } h1 { font-size: var(--fs-hero); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); font-weight: 600; } a { color: var(--link); text-decoration: none; } a:hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: 2px; } /* ---------- Annotation technique (monospace) ---------- */ .mono, .ref, .price, .spec-val { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--tracking-mono); color: var(--text-muted); } .ref { /* ex. « FICHE PRODUIT · REF. SER-B » */ text-transform: uppercase; color: var(--accent); } .price { /* prix en mono, alignés à droite */ font-size: var(--fs-body); color: var(--ink); font-variant-numeric: tabular-nums; } /* ---------- Icônes : trait fin, monochrome, héritent la couleur ---------- */ .icon { width: 32px; height: 32px; display: inline-block; color: var(--accent); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; } .icon--sm { width: 22px; height: 22px; } .icon--ink { color: var(--ink); } /* ---------- Tableau spec-sheet ---------- */ /* Libellés à gauche, valeurs à droite en mono, filets fins, en-têtes en accent, zebra discrète. Pas de bloc de couleur pleine. */ .spec { width: 100%; border-collapse: collapse; border: var(--border-w) solid var(--border); background: var(--paper); font-size: var(--fs-small); } .spec caption { text-align: left; font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--accent); padding: var(--sp-3) var(--sp-4); border: var(--border-w) solid var(--border); border-bottom: 0; } .spec th, .spec td { padding: var(--sp-3) var(--sp-4); border-top: var(--border-w) solid var(--border); text-align: left; vertical-align: top; } .spec thead th { color: var(--accent); font-weight: 600; border-top: 0; border-bottom: 2px solid var(--accent); background: transparent; } .spec tbody tr:nth-child(even) { background: var(--paper-2); } .spec .rowhead { font-weight: 600; color: var(--ink); } /* libellé de ligne */ .spec td + td, .spec th + th { border-left: var(--border-w) solid var(--border); text-align: right; /* valeurs à droite */ } .spec .val { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); } .spec .yes { color: var(--accent); } /* ✓ en accent */ .spec .no { color: var(--text-muted); } /* — discret */ .spec .price-row td { font-weight: 600; } .spec .price-row .val { color: var(--accent); } /* ---------- Carte produit (spec-sheet) ---------- */ .card { background: var(--paper); border: var(--border-w) solid var(--border); border-radius: var(--radius); padding: var(--sp-5); box-shadow: var(--shadow-paper); } .card__ref { /* bandeau REF en haut de carte */ font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--accent); border-bottom: var(--border-w) solid var(--border); padding-bottom: var(--sp-2); margin-bottom: var(--sp-3); } /* ---------- Boutons ---------- */ .btn { display: inline-block; font-family: var(--font-sans); font-size: var(--fs-small); font-weight: 600; padding: 0.7em 1.3em; border-radius: var(--radius); border: 1px solid var(--accent); cursor: pointer; transition: background .12s ease, color .12s ease; } .btn--primary { background: var(--accent); color: var(--paper); } .btn--primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); text-decoration: none; } .btn--ghost { background: transparent; color: var(--accent); } .btn--ghost:hover { background: var(--accent-tint); text-decoration: none; } /* ---------- Formulaire ---------- */ .field { margin-bottom: var(--sp-4); } .field label { display: block; font-weight: 600; font-size: var(--fs-small); margin-bottom: var(--sp-2); } .field .req { color: var(--accent); } .field input, .field select, .field textarea { width: 100%; font-family: var(--font-sans); font-size: var(--fs-body); color: var(--ink); background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 0.65em 0.8em; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); } /* Honeypot : masqué visuellement ET pour l'accessibilité, jamais display:none supprimé — laissé dans le flux mais hors écran pour piéger les bots. */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ---------- Utilitaires ---------- */ .container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--sp-5); } .muted { color: var(--text-muted); } hr.hairline { border: 0; border-top: var(--border-w) solid var(--border); margin: var(--sp-6) 0; }