/* ============================================================================ darkblack.fr — design system ---------------------------------------------------------------------------- SOURCE DE VÉRITÉ UNIQUE des valeurs visuelles du site. Règle : une page ne doit contenir AUCUNE valeur brute (hex, px de spacing, rem de police, durée de transition). Uniquement des var(--db-*) ou les classes primitives définies plus bas. Le script assets/check-design.sh vérifie cette règle. Les valeurs ci-dessous ont été relevées sur les pages existantes du site (échelle de gris neutre + or/bleu/vert) et non inventées. ============================================================================ */ /* ============================================================================ POLICE — Satoshi (Indian Type Foundry, licence ITF Free Font : usage personnel et commercial autorisé). Auto-hébergée dans assets/fonts/ plutôt que servie par le CDN Fontshare : aucune requête tierce sur un site privé, et la typographie ne dépend pas de la disponibilité d'un service externe. Trois graisses seulement, en woff2, ~25 ko chacune. ============================================================================ */ @font-face { font-family: 'Satoshi'; src: url('/assets/fonts/satoshi-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Satoshi'; src: url('/assets/fonts/satoshi-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Satoshi'; src: url('/assets/fonts/satoshi-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } /* Azeret Mono — utilisée par les maquettes /preparation pour les libellés de mode (CRITIQUE / ENVOI). Fichier variable : une seule ressource pour 400-700. Licence SIL Open Font. */ @font-face { font-family: 'Azeret Mono'; src: url('/assets/fonts/azeret-mono.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } :root { /* Thème : suit le réglage du système par défaut. Le sélecteur de thème (assets/darkblack.js) pose data-theme sur pour forcer l'un ou l'autre — voir le bas de ce fichier. */ color-scheme: light dark; /* ---------------------------------------------------------------- couleur Échelle neutre en 18 marches. Convention : **0 = extrémité fond, 17 = extrémité texte**. En thème sombre elle va du noir au blanc, en thème clair du blanc au noir — d'où light-dark(clair, sombre) sur chaque marche. Toute la suite du fichier en découle sans autre changement. Ne PAS utiliser directement dans les pages : passer par les alias sémantiques juste après (--db-bg, --db-text, --db-border…). */ --db-n-0: light-dark(#ffffff, #0a0a0a); --db-n-1: light-dark(#fbfbfa, #0f0f0f); --db-n-2: light-dark(#f7f7f6, #111111); --db-n-3: light-dark(#f2f2f1, #141414); --db-n-4: light-dark(#ebebea, #1a1a1a); --db-n-5: light-dark(#e4e4e2, #1e1e1e); --db-n-6: light-dark(#dcdcda, #222222); --db-n-7: light-dark(#d0d0ce, #2a2a2a); --db-n-8: light-dark(#bebebb, #333333); --db-n-9: light-dark(#ababa7, #3a3a3a); --db-n-10: light-dark(#979793, #444444); --db-n-11: light-dark(#7d7d79, #555555); --db-n-12: light-dark(#6b6b67, #666666); --db-n-13: light-dark(#585855, #888888); --db-n-14: light-dark(#414140, #aaaaaa); --db-n-15: light-dark(#2e2e2d, #cccccc); --db-n-16: light-dark(#1e1e1d, #e8e8e8); --db-n-17: light-dark(#000000, #ffffff); /* Alias sémantiques — C'EST CE QU'UNE PAGE DOIT UTILISER. */ --db-bg: var(--db-n-0); /* fond de page */ --db-bg-raised: var(--db-n-2); /* carte, panneau */ --db-bg-input: var(--db-n-3); /* champ, puce inactive */ --db-bg-hover: var(--db-n-4); /* survol d'une surface */ --db-border: var(--db-n-5); /* trait par défaut */ --db-border-strong: var(--db-n-7); /* trait accentué / survol */ --db-text: var(--db-n-16); /* texte principal */ --db-text-hi: var(--db-n-17); /* titres, emphase */ --db-text-muted: var(--db-n-14); /* texte secondaire */ --db-text-dim: var(--db-n-13); /* métadonnées */ --db-text-faint: var(--db-n-11); /* labels, placeholders */ --db-text-ghost: var(--db-n-10); /* désactivé */ /* Accents — teinte + fond + bordure, pour les états colorés. Chaque accent est un triplet cohérent : on ne mélange jamais le fond d'un accent avec le texte d'un autre. En thème clair la teinte est assombrie (lisible sur du blanc) et le fond éclairci — une simple inversion ne suffirait pas. */ --db-gold: light-dark(#8a6a28, #c8a96e); /* marque / « important » */ --db-gold-bg: light-dark(#fdf6e8, #2a2115); --db-gold-border: light-dark(#e5d3aa, #4a3a20); --db-blue: light-dark(#2b6b7d, #7eb8c8); /* information / « digest » */ --db-blue-bg: light-dark(#eaf4f7, #15222a); --db-blue-border: light-dark(#b5d7e0, #25404a); --db-green: light-dark(#1f7a3d, #4ade80); /* succès / validé */ --db-green-bg: light-dark(#eaf7ee, #1a3a1a); --db-green-border: light-dark(#b0dcc0, #2a5a2a); --db-violet: light-dark(#5b3fa8, #a78bfa); /* en attente / « à revoir » */ --db-violet-bg: light-dark(#f1edfb, #1e1a2e); --db-violet-border: light-dark(#cbbeed, #352a55); --db-red: light-dark(#b02b2b, #e07070); /* alerte / destructif */ --db-red-bg: light-dark(#fdeded, #2a1212); --db-red-border: light-dark(#f0c2c2, #4a2020); /* Couleurs des domaines d Entreprendre (Gazette, ses filtres, page des bases) : une couleur DISTINCTE par domaine, 14 teintes espacées (règle 12 du skill page-darkblack, Nils 15/10/2026). La table des libellés est celle de Heko (memo_api.py, LABELS) ; une page pose la couleur par style="--c: var(--db-dom-)" sur .db-pastille. */ --db-dom-vente: light-dark(#952323, #ea8686); --db-dom-societe: light-dark(#955223, #eaaf86); --db-dom-mindset: light-dark(#957823, #ead186); --db-dom-sciences: light-dark(#8b9523, #e1ea86); --db-dom-sante: light-dark(#529523, #afea86); --db-dom-finance: light-dark(#239549, #86eaa7); --db-dom-ia_tech: light-dark(#239582, #86ead9); --db-dom-communication: light-dark(#238295, #86d9ea); --db-dom-philosophie: light-dark(#235c95, #86b8ea); --db-dom-entrepreneuriat: light-dark(#233695, #8696ea); --db-dom-management: light-dark(#492395, #a786ea); --db-dom-psychologie: light-dark(#782395, #d186ea); --db-dom-recits: light-dark(#952382, #ea86d9); --db-dom-marketing: light-dark(#952352, #ea86af); /* Fenêtre d assistant (Heko, Osar…) — d après le Figma « Menu Sera » du Lab (Aventure 1388:5434, ~/Projets/lab/docs/v2/figma/SERA.md). En clair : les valeurs du Figma ; en sombre : adaptées. */ --db-assistant: #0051ff; /* bouton de l assistant, envoi */ --db-assistant-halo: rgb(0 81 255 / 0.3); /* ombre bleue du bouton */ --db-bulle-moi: #2fa1ff; /* mes messages */ --db-bulle-moi-texte: #ffffff; --db-bulle-assistant: light-dark(#ededed, #2a2a2c); /* messages de l assistant */ --db-fenetre: light-dark(#ffffff, #161618); /* fond de la fenêtre et de la barre */ --db-fenetre-entete: light-dark(rgb(0 0 0 / 0.05), rgb(255 255 255 / 0.05)); --db-fenetre-trait: light-dark(rgb(0 0 0 / 0.3), rgb(255 255 255 / 0.15)); --db-fenetre-puce: light-dark(#ffffff, #2a2a2c); /* onglets, choix */ --db-fenetre-fermer: #ff6565; --db-fenetre-nouvelle: #6cbe43; /* ------------------------------------------------------------- typographie Satoshi (auto-hébergée) avec repli sur la police système, pour que le texte reste lisible pendant le chargement et si les woff2 manquent. */ --db-font: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --db-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace; /* Échelle typographique (ratio ~1.2, base 15px) */ --db-text-xs: 0.68rem; --db-text-sm: 0.75rem; --db-text-base: 0.85rem; --db-text-md: 0.95rem; --db-text-lg: 1.1rem; --db-text-xl: 1.35rem; --db-text-2xl: 1.7rem; --db-weight-normal: 400; --db-weight-medium: 500; --db-weight-bold: 600; --db-leading-tight: 1.3; --db-leading-base: 1.6; --db-leading-loose: 1.8; /* ---------------------------------------------------------------- espacement Échelle 4px. Utiliser var(--db-space-N), jamais un px arbitraire. */ --db-space-1: 0.25rem; --db-space-2: 0.5rem; --db-space-3: 0.75rem; --db-space-4: 1rem; --db-space-5: 1.25rem; --db-space-6: 1.5rem; --db-space-8: 2rem; --db-space-10: 2.5rem; --db-space-12: 3rem; --db-space-16: 4rem; /* ------------------------------------------------------------------- rayons */ --db-radius-sm: 6px; --db-radius: 10px; --db-radius-lg: 14px; --db-radius-full: 999px; /* ------------------------------------------------------------------ ombres La couleur est isolée dans son propre token : light-dark() ne s'applique qu'à une couleur, pas à une valeur d'ombre entière. En thème clair l'ombre doit être nettement plus discrète, sinon elle paraît sale. */ --db-shadow-color: light-dark(rgba(0, 0, 0, 0.13), rgba(0, 0, 0, 0.45)); --db-shadow-sm: 0 1px 2px var(--db-shadow-color); --db-shadow: 0 4px 16px var(--db-shadow-color); --db-shadow-lg: 0 12px 40px var(--db-shadow-color); /* ------------------------------------------------------------- mouvement */ --db-duration-fast: 0.15s; --db-duration-appui: 80ms; /* l'enfoncement d'un bouton pressé au doigt (04/10/2026) */ --db-duration: 0.2s; --db-duration-slow: 0.35s; --db-ease: cubic-bezier(0.4, 0, 0.2, 1); --db-ease-out: cubic-bezier(0, 0, 0.2, 1); /* -------------------------------------------------------------- élévation */ --db-z-base: 1; --db-z-sticky: 10; --db-z-overlay: 100; --db-z-modal: 200; --db-z-toast: 300; /* ------------------------------------------------- atelier de préparation Palette propre à /preparation, relevée au pixel sur les maquettes Figma (nœuds 768-13518 et 777-15509). Elle est CHAUDE là où le reste du site est neutre : c'est voulu, la page montre du chocolat et le crème sert de plan de pose — c'est d'ailleurs le SCENE_BG de scene-choc.js. Les deux accents ne sont pas décoratifs : ils disent dans quel mode on est. Rouge = on critique (interne). Vert = on prépare un envoi (client). Se tromper de mode enverrait un brouillon à un palace, d'où le liseré. */ --db-prep-fond: #eee5c9; /* plan de pose / fond de scène */ --db-prep-panneau: #fbfaf4; /* barre latérale */ --db-prep-carte: #f3ecd9; /* cartes et pilules posées sur le crème */ --db-prep-trait: #e5dcc0; /* séparateurs sur fond crème */ --db-critique: #eb2f2f; /* mode critique */ --db-critique-pale: #f7c9c9; --db-envoi: #17d14f; /* mode envoi */ --db-envoi-pale: #87d9a0; /* ------------------------------------------------------- surfaces de verre Les maquettes /preparation ne posent pas des aplats mais des surfaces TRANSLUCIDES floutées, posées sur le crème : c'est ce qui donne la profondeur. Une pilule opaque à la même couleur paraît plate et morte — c'est l'erreur que j'avais faite au premier essai. Valeurs relevées dans les composants Figma, pas devinées. */ --db-verre: rgba(255, 255, 255, 0.3); --db-verre-fort: rgba(255, 255, 255, 0.8); --db-verre-leger: rgba(255, 255, 255, 0.1); --db-verre-bord: rgba(255, 255, 255, 1); --db-verre-bord-mi: rgba(255, 255, 255, 0.5); --db-flou: blur(25px); --db-flou-doux: blur(10px); --db-ombre-verre: 0 8px 50px rgba(0, 0, 0, 0.1); --db-ombre-verre-f: 0 8px 50px rgba(0, 0, 0, 0.2); --db-ombre-panneau: 0 10px 30px rgba(0, 0, 0, 0.1); --db-relief-blanc: inset 0 1px 5px rgba(255,255,255,1), inset 0 1px 20px rgba(255,255,255,1); /* Encre du design /preparation : un noir légèrement chaud, jamais pur. */ /* Blanc et noir ABSOLUS, indépendants du thème. L'échelle --db-n-* est relative (0 = côté fond, 17 = côté texte) : en thème clair --db-n-17 vaut NOIR. Le verre des maquettes veut du blanc réel quoi qu'il arrive — d'où ces deux tokens, qui évitent une inversion silencieuse. */ --db-blanc: #ffffff; --db-noir: #000000; --db-encre: #10100e; --db-encre-70: rgba(16, 16, 14, 0.7); --db-encre-60: rgba(16, 16, 14, 0.6); --db-encre-30: rgba(16, 16, 14, 0.3); --db-encre-10: rgba(16, 16, 14, 0.1); /* Le mode ne se signale pas par une bordure mais par une LUEUR INTERNE. */ --db-critique-vif: #ff0000; --db-critique-bande: rgba(255, 0, 0, 0.8); --db-critique-bord: rgba(255, 149, 149, 0.72); --db-critique-lueur: inset 0 0 30px rgba(255, 0, 0, 0.3); --db-critique-halo: inset 0 0 10px rgba(255, 0, 0, 0.2); --db-critique-champ: #ffb2b2; --db-epingle: #d3c9c3; /* pastille des points posés sur la pièce */ --db-envoi-vif: #17d14f; --db-envoi-bande: rgba(23, 209, 79, 0.8); --db-envoi-bord: rgba(149, 255, 180, 0.72); --db-envoi-lueur: inset 0 0 30px rgba(23, 209, 79, 0.3); --db-envoi-halo: inset 0 0 10px rgba(23, 209, 79, 0.2); --db-envoi-champ: #eafbef; /* bordure de la coquille en mode envoi */ /* Rayons propres aux maquettes (différents de l'échelle générale). */ --db-r-pilule: 13px; --db-r-champ: 20px; --db-r-panneau: 14px; --db-r-fiche: 12px; --db-r-item: 8px; /* --------------------------------------------------------------- gabarits */ --db-width-content: 800px; /* colonne de lecture */ --db-width-wide: 1200px; /* tableaux de bord */ } /* Points de rupture (à recopier tels quels dans les media queries) : mobile : max-width 600px tablette : max-width 900px large : min-width 1200px */ /* ============================================================================ THÈME JOUR / NUIT ---------------------------------------------------------------------------- Sans attribut, le site suit le réglage du système (color-scheme: light dark). Le sélecteur de thème pose data-theme sur pour forcer un mode ; c'est `color-scheme` qui bascule toutes les valeurs light-dark() d'un coup — il n'y a donc AUCUN bloc de couleurs dupliqué à maintenir. Une page inclut simplement dans le , SANS defer : le script pose le thème mémorisé avant le rendu et fournit le bouton. ============================================================================ */ :root[data-theme="light"] { color-scheme: only light; } :root[data-theme="dark"] { color-scheme: only dark; } /* ============================================================================ RÉINITIALISATION ============================================================================ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } body { font-family: var(--db-font); font-size: var(--db-text-base); line-height: var(--db-leading-base); background: var(--db-bg); color: var(--db-text); min-height: 100vh; -webkit-font-smoothing: antialiased; } a { color: var(--db-blue); text-decoration: none; } @media (hover: hover) and (pointer: fine) { a:hover { text-decoration: underline; } } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--db-n-7); border-radius: var(--db-radius-full); } ::-webkit-scrollbar-thumb:hover { background: var(--db-n-9); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ============================================================================ PRIMITIVES — les briques réutilisables de toutes les pages du site. Préférer TOUJOURS une primitive à du CSS ad hoc. ============================================================================ */ /* -------------------------------------------------------------- en-tête */ .db-header { display: flex; align-items: center; gap: var(--db-space-4); padding: var(--db-space-5) var(--db-space-6); border-bottom: 1px solid var(--db-border); background: var(--db-bg); position: sticky; top: 0; z-index: var(--db-z-sticky); } .db-header h1 { font-size: var(--db-text-lg); font-weight: var(--db-weight-bold); color: var(--db-text-hi); flex: 1; } .db-header .db-back { color: var(--db-text-ghost); font-size: var(--db-text-sm); } @media (hover: hover) and (pointer: fine) { .db-header .db-back:hover { color: var(--db-text-dim); text-decoration: none; } } /* Sélecteur de thème — injecté par assets/darkblack.js dans .db-header. */ .db-theme-toggle { background: var(--db-bg-input); border: 1px solid var(--db-border-strong); border-radius: var(--db-radius-full); color: var(--db-text-faint); cursor: pointer; font-family: inherit; font-size: var(--db-text-base); line-height: 1; padding: var(--db-space-2); width: 32px; height: 32px; display: inline-grid; place-items: center; transition: all var(--db-duration-fast) var(--db-ease); } @media (hover: hover) and (pointer: fine) { .db-theme-toggle:hover { color: var(--db-text); border-color: var(--db-n-9); } } /* --------------------------------------------------------------- surfaces */ .db-card { background: var(--db-bg-raised); border: 1px solid var(--db-border); border-radius: var(--db-radius-lg); padding: var(--db-space-5) var(--db-space-6); } .db-card-hover { transition: border-color var(--db-duration-fast) var(--db-ease); cursor: pointer; } @media (hover: hover) and (pointer: fine) { .db-card-hover:hover { border-color: var(--db-border-strong); } } /* ---------------------------------------------------------------- boutons */ .db-btn { display: inline-flex; align-items: center; gap: var(--db-space-2); background: var(--db-bg-input); border: 1px solid var(--db-border-strong); border-radius: var(--db-radius-sm); color: var(--db-text-muted); font-family: inherit; font-size: var(--db-text-sm); font-weight: var(--db-weight-medium); padding: var(--db-space-2) var(--db-space-4); cursor: pointer; transition: all var(--db-duration-fast) var(--db-ease); } @media (hover: hover) and (pointer: fine) { .db-btn:hover { border-color: var(--db-n-9); color: var(--db-text); background: var(--db-bg-hover); } } .db-btn:disabled { opacity: 0.45; cursor: not-allowed; } .db-btn-primary { background: var(--db-text); border-color: var(--db-text); color: var(--db-bg); } @media (hover: hover) and (pointer: fine) { .db-btn-primary:hover { background: var(--db-text-hi); border-color: var(--db-text-hi); color: var(--db-bg); } } @media (hover: hover) and (pointer: fine) { .db-btn-danger:hover { border-color: var(--db-red-border); color: var(--db-red); background: var(--db-red-bg); } } /* ------------------------------------------------------------------ puces */ .db-chip { display: inline-flex; align-items: center; gap: var(--db-space-1); background: var(--db-bg-input); border: 1px solid var(--db-border-strong); border-radius: var(--db-radius-full); color: var(--db-text-faint); font-family: inherit; font-size: var(--db-text-sm); padding: var(--db-space-1) var(--db-space-3); cursor: pointer; user-select: none; white-space: nowrap; transition: all var(--db-duration-fast) var(--db-ease); } @media (hover: hover) and (pointer: fine) { .db-chip:hover { border-color: var(--db-n-8); color: var(--db-text-muted); } } .db-chip.on { background: var(--db-n-4); border-color: var(--db-n-9); color: var(--db-text); } /* ---------------------------------------------------------------- badges Pastille non cliquable. Se combine avec un accent : .db-badge.db-red */ .db-badge { display: inline-block; font-size: var(--db-text-xs); font-weight: var(--db-weight-bold); padding: 2px var(--db-space-2); border-radius: var(--db-radius-full); border: 1px solid var(--db-border-strong); background: var(--db-bg-input); color: var(--db-text-dim); white-space: nowrap; letter-spacing: 0.02em; } /* Pastille d une catégorie : sa couleur vient de la table unique de la page (--c), jamais choisie à la main. */ .db-pastille { display: inline-block; font-size: var(--db-text-xs); font-weight: var(--db-weight-bold); white-space: nowrap; padding: 2px var(--db-space-2); border-radius: var(--db-radius-full); color: var(--c, var(--db-text-dim)); background: color-mix(in srgb, var(--c, var(--db-text-dim)) 12%, transparent); border: 1px solid color-mix(in srgb, var(--c, var(--db-text-dim)) 35%, transparent); letter-spacing: 0.02em; } .db-red { background: var(--db-red-bg); border-color: var(--db-red-border); color: var(--db-red); } .db-gold { background: var(--db-gold-bg); border-color: var(--db-gold-border); color: var(--db-gold); } .db-blue { background: var(--db-blue-bg); border-color: var(--db-blue-border); color: var(--db-blue); } .db-green { background: var(--db-green-bg); border-color: var(--db-green-border); color: var(--db-green); } .db-violet { background: var(--db-violet-bg); border-color: var(--db-violet-border); color: var(--db-violet); } /* ----------------------------------------------------------------- champs */ .db-input, .db-select, .db-textarea { width: 100%; background: var(--db-bg-input); border: 1px solid var(--db-border-strong); border-radius: var(--db-radius-sm); color: var(--db-text); font-family: inherit; font-size: var(--db-text-base); padding: var(--db-space-2) var(--db-space-3); outline: none; transition: border-color var(--db-duration) var(--db-ease); } .db-input:focus, .db-select:focus, .db-textarea:focus { border-color: var(--db-n-9); } .db-input::placeholder, .db-textarea::placeholder { color: var(--db-text-ghost); } /* 08/10/2026 (point 10, anti AI slop) : casse normale, taille et couleur du texte secondaire. Avant : petites capitales espacées grises (--db-text-xs, uppercase, letter-spacing) ; Nils, 03/10 : « Ne met pas "Dernières notes" en majuscules lettres espacés (ca fait AI slop) » ; DESIGN.md, sobriété : rien sous --db-text-base, pas de sur-titre en capitales. */ .db-label { display: block; font-size: var(--db-text-base); color: var(--db-text-dim); margin-bottom: var(--db-space-1); } /* ------------------------------------------------------------------ stats */ .db-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--db-space-3); } .db-stat { background: var(--db-bg-raised); border: 1px solid var(--db-border); border-radius: var(--db-radius); padding: var(--db-space-4); } .db-stat-value { font-size: var(--db-text-xl); font-weight: var(--db-weight-bold); color: var(--db-text-hi); line-height: var(--db-leading-tight); } .db-stat-label { font-size: var(--db-text-xs); color: var(--db-text-faint); margin-top: var(--db-space-1); } /* ------------------------------------------------------------------ états */ .db-empty { text-align: center; padding: var(--db-space-16) var(--db-space-4); } .db-empty .db-empty-icon { font-size: var(--db-text-2xl); margin-bottom: var(--db-space-3); } .db-empty p { font-size: var(--db-text-base); color: var(--db-text-ghost); } .db-spinner { display: inline-block; width: 16px; height: 16px; vertical-align: middle; border: 2px solid var(--db-n-6); border-top-color: var(--db-n-11); border-radius: 50%; animation: db-spin 0.7s linear infinite; margin-right: var(--db-space-2); } @keyframes db-spin { to { transform: rotate(360deg); } } .db-loading { text-align: center; padding: var(--db-space-12) 0; color: var(--db-text-ghost); } .db-error { background: var(--db-red-bg); border: 1px solid var(--db-red-border); border-radius: var(--db-radius); color: var(--db-red); font-size: var(--db-text-base); padding: var(--db-space-4) var(--db-space-5); } /* --------------------------------------------------------------- gabarits */ .db-container { max-width: var(--db-width-content); margin: 0 auto; padding: var(--db-space-5) var(--db-space-6); } .db-container-wide { max-width: var(--db-width-wide); margin: 0 auto; padding: var(--db-space-5) var(--db-space-6); } .db-row { display: flex; align-items: center; gap: var(--db-space-3); } .db-row-wrap { display: flex; align-items: center; gap: var(--db-space-3); flex-wrap: wrap; } .db-spacer { flex: 1; } @media (max-width: 600px) { .db-header, .db-container, .db-container-wide { padding-left: var(--db-space-4); padding-right: var(--db-space-4); } } /* ============================================================================ BANDEAU, LARGEUR ET FONDU — communs à TOUTES les pages (02/10/2026, Nils). Le bandeau est construit par assets/barre.js ; ici, son dessin. Une seule largeur de page pour tout le site, bandeau compris : --db-width-page. Exceptions voulues : atelier, lab, drive, mes-fichiers. ============================================================================ */ :root { --db-width-page: 800px; /* LA largeur des pages ET du bandeau */ --db-barre-h: 60px; /* hauteur du bandeau, hors encoche */ --db-barre-haut: env(safe-area-inset-top, 0px); --db-fondu-h: 112px; /* hauteur du fondu du bas */ --db-barre-plus: 0px; /* 01/11 : la rangée d'une page sous le titre du bandeau (#db-barre-rangee), 44 px */ } body.db-avec-barre { padding-top: calc(var(--db-barre-h) + var(--db-barre-haut)); } html:has(body.db-avec-barre) { scroll-padding-top: calc(var(--db-barre-h) + var(--db-barre-haut) + var(--db-barre-plus) + var(--db-space-4)); } /* 01/11/2026 (Nils, 22:00, sur /modeles/schema/ : la légende et les filtres « dans la barre de navigation ») : la rangée d'une page, #db-barre-rangee, rangée par barre.js sous la ligne du titre ; le bandeau grandit de 44 px tant qu'elle se voit. Elle défile de côté, fondue en flou au bord (.db-rangee). */ body.db-avec-barre-rangee { --db-barre-plus: 44px; padding-top: calc(var(--db-barre-h) + var(--db-barre-haut) + var(--db-barre-plus)); } html:has(body.db-avec-barre-rangee) { scroll-padding-top: calc(var(--db-barre-h) + var(--db-barre-haut) + var(--db-barre-plus) + var(--db-space-4)); } .db-barre > .db-barre-rangee { box-sizing: border-box; max-width: var(--db-width-page); height: var(--db-barre-plus); margin: 0 auto; padding: 0 var(--db-space-4); display: flex; align-items: center; gap: 6px; pointer-events: auto; } .db-barre > .db-barre-rangee[hidden] { display: none; } .db-barre { position: fixed; top: 0; left: 0; right: 0; z-index: calc(var(--db-z-overlay) - 1); display: block; margin: 0; padding: var(--db-barre-haut) 0 0; max-width: none; width: auto; height: auto; background: none; border: 0; box-shadow: none; text-align: initial; /* blindage : les anciennes règles header{…} des pages */ pointer-events: none; /* seuls ses boutons captent le clic : on lit ce qui passe dessous */ } /* le fond : opaque en haut, il se dissout vers le bas (flou progressif) */ .db-barre > .db-flou { inset: 0 0 calc(-1 * var(--db-space-4)) 0; } /* jusqu'au haut de .db-page */ .db-barre-in { max-width: var(--db-width-page); margin: 0 auto; height: var(--db-barre-h); padding: 0 var(--db-space-4); display: grid; grid-template-columns: 1fr minmax(0, auto) 1fr; /* les côtés gardent leurs boutons, le titre se tronque */ align-items: center; gap: var(--db-space-3); } /* le titre au milieu de l'écran (01/11, barre.js, suivreLeMilieu) : les deux côtés à la largeur du plus large, quand le titre y tient ; sinon la grille du dessus */ .db-barre-in[style*="--db-barre-cote"] { grid-template-columns: minmax(var(--db-barre-cote), 1fr) minmax(0, auto) minmax(var(--db-barre-cote), 1fr); } .db-barre-in > .db-barre-g { justify-self: start; } .db-barre-in > .db-barre-d { justify-self: end; } .db-barre-g, .db-barre-d { display: flex; align-items: center; gap: var(--db-space-2); pointer-events: auto; } .db-barre-d { justify-content: flex-end; } .db-barre .db-barre-titre { margin: 0; padding: 0; border: 0; background: none; flex: none; text-transform: none; min-width: 0; text-align: center; font-family: var(--db-font); font-size: var(--db-text-md); font-weight: var(--db-weight-bold); color: var(--db-text-hi); letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Les boutons du bandeau AU STYLE DE NILS (01/11/2026, vocal du matin à 46:45 : « le bouton en haut nils et le bouton en haut à gauche retour déjà eux ils sont avec un ancien design sur la page pointage up c'est moche ») : la pastille de ses maquettes (.db-pilule : grise, noir à 5 %, sans trait, Bold 14 à 80 %), ronde pour une icône (la flèche, le thème). 36 de haut comme avant (le bandeau et ses essais n'ont pas bougé). Avant : trait de 1 px, fond relevé, Medium 13,6 en gris (copie d'avant au motif barre-20261101, serveur _/copies-avant/). Vaut pour tout .db-barre-bt : la flèche, le prénom, le thème, les actions d'une page (Ajouter, Vérifier), la pastille des projets de l'accueil. */ .db-barre-bt { flex: none; height: 36px; min-width: 36px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: var(--db-radius-full); background: var(--db-pilule-gris); color: var(--db-text-80); font: var(--db-weight-fort) var(--db-fs-texte) / 1 var(--db-font); text-decoration: none; cursor: pointer; -webkit-user-select: none; user-select: none; transition: color var(--db-duration-fast) var(--db-ease), background-color var(--db-duration-fast) var(--db-ease); } @media (hover: hover) and (pointer: fine) { .db-barre-bt:hover { color: var(--db-text-hi); background-color: color-mix(in srgb, var(--db-pilule-gris), var(--db-text-hi) 4%); text-decoration: none; } } .db-barre-bt svg { width: 18px; height: 18px; flex: none; } .db-barre .db-retour, .db-barre .db-aide, .db-barre .db-theme-toggle { width: 36px; padding: 0; color: var(--db-text-hi); } .db-barre .db-retour { -webkit-touch-callout: none; touch-action: manipulation; } /* l'appui long ouvre le menu, pas l'aperçu du lien */ .db-barre .db-theme-toggle svg { width: 16px; height: 16px; } .db-barre .db-profil.connecte { color: var(--db-text-80); } /* LE MENU DE LA FLÈCHE RETOUR (Nils, 01/11/2026, vocal du matin à 43:05 : « on remet comme avant on met juste le titre en haut au milieu mais que si je laisse appuyer sur le bouton retour eh bien ça me propose le fil d'ariane ») : le fil d'Ariane n'est plus dans le bandeau (30/10, 21 h 46 ; copie d'avant au motif barre-20261101, serveur _/copies-avant/). L'appui long, ou le clic droit, sur la flèche ouvre ce menu (barre.js, menuRetour) : en haut le fil d'Ariane, Accueil puis chaque niveau un peu plus à droite, son petit chevron devant ; un séparateur ; les trois pages ouvertes juste avant. */ .db-menu.db-menu-retour { min-width: calc(252 * var(--db-f)); max-width: min(320px, calc(100vw - 16px)); } .db-menu.db-menu-retour a { padding-left: calc((16 + 18 * (var(--db-niveau, 1) - 1)) * var(--db-f)); } .db-menu.db-menu-retour .db-menu-retour-sous { width: calc(18 * var(--db-f)); height: calc(18 * var(--db-f)); color: var(--db-menu-sous); } /* MENU — le standard des menus du site (Nils, 03/10/2026 : le ⋯ des cartes « au standard du menu, comme ce qu'on a avec un clic droit sur l'orbe en bas »). Une ligne = un bouton ou un lien, une icône .ic à gauche si besoin. Redessiné le 23/10/2026 (Nils, vers 10 h 05 : « le nouveau style pour les menus sur darkblack […] mettre a jour le style des menu par defaut ») d'après le Figma Aventure « Nouveau style menu » (1969:5635) : le menu 1969:5634, le film 1969:5433. La maquette est une capture d'iPhone (402 points de large) posée à 603 dans Figma : 1 px CSS = 1,5 unité Figma. D'où --db-f, « une unité de la maquette » : chaque valeur s'écrit telle que Figma la donne, calc(20 * var(--db-f)) = 13,33 px. Ombre et flou suivent la même échelle (Figma : flou 30, soit blur(15px) à son échelle). Les traits de 1 unité (0,67 px) sont des ombres intérieures : Chrome arrondit une bordure plus fine qu'un pixel. Le thème sombre n'est pas dans la maquette : ses valeurs sont déduites (verre gris foncé, trait et cases en blanc léger). Ce que porte un menu : ou
Titre …
. */ .db-pli, .db-pli-bloc > summary { display: inline-flex; align-items: center; gap: var(--db-space-1); padding: var(--db-space-2) 0; border: 0; background: none; cursor: pointer; list-style: none; text-align: left; color: var(--db-text-hi); font: var(--db-weight-bold) var(--db-text-md) var(--db-font); } .db-pli-bloc > summary::-webkit-details-marker { display: none; } @media (hover: hover) and (pointer: fine) { .db-pli:hover, .db-pli-bloc > summary:hover { color: var(--db-text-dim); } } .db-pli svg, .db-pli-bloc > summary svg { width: 16px; height: 16px; flex: none; color: var(--db-text-dim); transition: transform var(--db-duration) var(--db-ease); } .db-pli[aria-expanded="false"] svg, .db-pli-bloc:not([open]) > summary svg { transform: rotate(-90deg); } /* Au doigt, un champ sous 16 px fait zoomer Safari sur iPhone dès qu'on le touche (Nils, 03/10). */ @media (pointer: coarse) { .db-input, .db-select, .db-textarea, input[type="text"], input[type="search"], input:not([type]), textarea, select { font-size: max(16px, var(--db-text-base)); } } /* l'attribut hidden l'emporte toujours (sinon .db-btn, en inline-flex, reste visible) */ [hidden] { display: none !important; } /* l'ancien en-tête de page fait doublon avec le bandeau */ body.db-avec-barre > .db-header { display: none; } /* bulles : aide contextuelle et menu du profil */ .db-bulle { position: fixed; z-index: var(--db-z-modal); width: min(320px, calc(100vw - 16px)); padding: var(--db-space-3); border-radius: var(--db-radius-lg); background: var(--db-bg-raised); color: var(--db-text); border: 1px solid var(--db-border-strong); box-shadow: var(--db-shadow-lg); font: var(--db-text-base)/1.5 var(--db-font); } .db-bulle p { margin: 0 0 var(--db-space-2); } .db-bulle p:last-child { margin-bottom: 0; } .db-bulle-tete { color: var(--db-text-hi); font-weight: 600; padding: var(--db-space-1) var(--db-space-1) var(--db-space-3); } .db-bulle-etiq { color: var(--db-text-faint); font-size: var(--db-text-sm); padding: 0 var(--db-space-1) var(--db-space-1); } .db-segments { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 2px; border-radius: var(--db-radius-full); background: var(--db-bg-input); border: 1px solid var(--db-border); } .db-segments button { border: 0; border-radius: var(--db-radius-full); padding: 6px 0; background: none; cursor: pointer; color: var(--db-text-dim); font: 500 var(--db-text-sm) var(--db-font); } .db-segments button[aria-checked="true"] { background: var(--db-text-hi); color: var(--db-bg); } .db-bulle-ligne { display: block; width: 100%; margin-top: var(--db-space-3); padding: var(--db-space-2) var(--db-space-1); border: 0; border-top: 1px solid var(--db-border); background: none; text-align: left; cursor: pointer; color: var(--db-text-dim); font: var(--db-text-base) var(--db-font); } @media (hover: hover) and (pointer: fine) { .db-bulle-ligne:hover { color: var(--db-text-hi); } } /* Porte root v4 dans le menu du prénom (15/10/2026, barre.js, profil) : un petit point rouge sur la pastille quand une demande attend Nils ; dans la bulle, « À valider » puis « Appareils », une ligne par élément (titre, puis le détail). */ .db-barre .db-profil { position: relative; } .db-barre .db-profil.db-profil-attente::after { content: ""; position: absolute; top: -1px; right: -1px; width: 9px; height: 9px; border-radius: var(--db-radius-full); background: var(--db-red); box-shadow: 0 0 0 2px var(--db-bg); pointer-events: none; } /* menu ouvert (23/10/2026) : il recouvre la pastille et porte lui-même le point sur « À valider » ; celui de la pastille dépassait dans le coin arrondi du menu */ .db-barre .db-profil.db-profil-attente[aria-expanded="true"]::after { display: none; } /* et pendant qu'il se replie dans la pastille (23/10/2026, l'animation des menus) : le point revient quand il y est rentré */ :root:has(.db-menu-profil.db-menu-fantome) .db-barre .db-profil.db-profil-attente::after { display: none; } /* 24/10/2026 : un rapport non lu : le même point sur la pastille, bleu ; une demande de la porte (rouge) passe devant */ .db-barre .db-profil.db-profil-a-lire:not(.db-profil-attente)::after { content: ""; position: absolute; top: -1px; right: -1px; width: 9px; height: 9px; border-radius: var(--db-radius-full); background: var(--db-menu-point-bleu); box-shadow: 0 0 0 2px var(--db-bg); pointer-events: none; } .db-barre .db-profil.db-profil-a-lire[aria-expanded="true"]::after { display: none; } :root:has(.db-menu-profil.db-menu-fantome) .db-barre .db-profil.db-profil-a-lire::after { display: none; } .db-bulle-zone-porte { padding-bottom: var(--db-space-3); } .db-bulle-zone-porte .db-bulle-etiq ~ .db-bulle-etiq { margin-top: var(--db-space-4); } .db-bulle-porte { display: flex; flex-direction: column; gap: 2px; margin-top: 0; text-decoration: none; } .db-bulle-etiq + .db-bulle-porte { border-top: 0; padding-top: var(--db-space-1); } /* comme « Thème » : pas de trait sous l'étiquette */ a.db-bulle-porte { cursor: pointer; } div.db-bulle-porte { cursor: default; } @media (hover: hover) and (pointer: fine) { a.db-bulle-porte:hover { text-decoration: none; } a.db-bulle-porte:hover .db-bulle-porte-titre { color: var(--db-text-hi); } } .db-bulle-porte-titre { color: var(--db-text); overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .db-bulle-porte-meta { color: var(--db-text-dim); } .db-porte-score.faible { color: var(--db-green); } .db-porte-score.moyen { color: var(--db-gold); } .db-porte-score.eleve { color: var(--db-red); } /* Le menu du prénom, redessiné le 23/10/2026 au standard .db-menu (Figma 1969:5634 ; barre.js, profil) : 252 de large, posé SUR la pastille (son haut 6 au-dessus, son bord droit 2 plus loin), la pastille se devine sous le verre. Le 17/10 (« À valider » toujours là, le thème en icônes, un vrai bouton pour se déconnecter, rien d'autre) : la rangée de tuiles porte la déconnexion et le thème, les lignes « À valider » (le point rouge sur l'icône) et « Inscrire cet appareil ». Les règles .db-bulle-profil, .db-bulle-valider, .db-bulle-point, .db-segments-icones et .db-bulle-sortir (menu du 17/10) sont retirées : copie d'avant darkblack.css.avant-menus-figma-20261023. */ /* 23/10/2026 vers 15 h 40, Nils : « le menu en haut a droite tu peux le mettre un peu plus large de sorte à ce que "clavier" soit affiché en entier » : 300 au lieu de 252 (mesuré en Satoshi : « Inscrire cet appareil », la plus longue ligne, demande 282). Copie d'avant darkblack.css.avant-menu-large-20261023. */ .db-menu.db-menu-profil { width: calc(300 * var(--db-f)); max-height: calc(100dvh - var(--db-barre-haut) - var(--db-space-6)); overflow-y: auto; overscroll-behavior: contain; } /* le contenu d'une page : même largeur que le bandeau, et de la place sous le fondu du bas */ .db-page { max-width: var(--db-width-page); margin: 0 auto; padding: var(--db-space-4) var(--db-space-4) calc(var(--db-fondu-h) + env(safe-area-inset-bottom, 0px)); } /* le fondu du bas : ce qui descend se dissout, et l'orbe d'Osar ou de Heko se détache du reste */ .db-fondu-bas { position: fixed; left: 0; right: 0; bottom: 0; z-index: calc(var(--db-z-overlay) - 2); pointer-events: none; height: calc(var(--db-fondu-h) + env(safe-area-inset-bottom, 0px)); } /* FLOU PROGRESSIF (03/10/2026, Nils : « un faux blur qui rend les textes baveux »). Une seule couche floutée dont l'opacité varie montre le texte net ET flou à la fois, d'où l'effet baveux. Ici, cinq couches de flou croissant (1, 2, 4, 8, 16 px), chacune pleinement opaque sur sa propre bande : en tout point, une couche couvre entièrement, rien de net ne transparaît sous le flou. Par-dessus, un simple dégradé vers le fond (sans flou) fond le reste. barre.js pose
×5
. */ .db-flou { position: absolute; inset: 0; z-index: -1; pointer-events: none; } .db-flou > i { position: absolute; inset: 0; } .db-flou > i:nth-child(1) { -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px); } .db-flou > i:nth-child(2) { -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .db-flou > i:nth-child(3) { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .db-flou > i:nth-child(4) { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .db-flou > i:nth-child(5) { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } /* bas : net en haut du fondu, de plus en plus flou vers le bas de l'écran */ .db-flou-bas > i:nth-child(1) { -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 40%, transparent 60%); mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 40%, transparent 60%); } .db-flou-bas > i:nth-child(2) { -webkit-mask-image: linear-gradient(to bottom, transparent 20%, #000 40%, #000 60%, transparent 80%); mask-image: linear-gradient(to bottom, transparent 20%, #000 40%, #000 60%, transparent 80%); } .db-flou-bas > i:nth-child(3) { -webkit-mask-image: linear-gradient(to bottom, transparent 40%, #000 60%, #000 80%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 40%, #000 60%, #000 80%, transparent 100%); } .db-flou-bas > i:nth-child(4) { -webkit-mask-image: linear-gradient(to bottom, transparent 60%, #000 80%); mask-image: linear-gradient(to bottom, transparent 60%, #000 80%); } .db-flou-bas > i:nth-child(5) { -webkit-mask-image: linear-gradient(to bottom, transparent 80%, #000 100%); mask-image: linear-gradient(to bottom, transparent 80%, #000 100%); } .db-flou-bas::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 0%, color-mix(in srgb, var(--db-bg) 55%, transparent) 50%, var(--db-bg) 100%); } /* haut : l'inverse, et le fond plein derrière les boutons */ .db-flou-haut > i:nth-child(1) { -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 20%, #000 40%, transparent 60%); mask-image: linear-gradient(to top, transparent 0%, #000 20%, #000 40%, transparent 60%); } .db-flou-haut > i:nth-child(2) { -webkit-mask-image: linear-gradient(to top, transparent 20%, #000 40%, #000 60%, transparent 80%); mask-image: linear-gradient(to top, transparent 20%, #000 40%, #000 60%, transparent 80%); } .db-flou-haut > i:nth-child(3) { -webkit-mask-image: linear-gradient(to top, transparent 40%, #000 60%, #000 80%, transparent 100%); mask-image: linear-gradient(to top, transparent 40%, #000 60%, #000 80%, transparent 100%); } .db-flou-haut > i:nth-child(4) { -webkit-mask-image: linear-gradient(to top, transparent 60%, #000 80%); mask-image: linear-gradient(to top, transparent 60%, #000 80%); } .db-flou-haut > i:nth-child(5) { -webkit-mask-image: linear-gradient(to top, transparent 80%, #000 100%); mask-image: linear-gradient(to top, transparent 80%, #000 100%); } /* 01/11/2026 (Nils, vocal du matin à 34:50 : « parfois et là c'est le cas tout en haut de la page il y a du flou au dessus de la navbar tu vois là le haut de la navbar est flouté et c'est pas normal ») : la cause, mesurée sur un iPhone simulé (zone sûre du haut de 59 px, Chrome du serveur) : le fond plein ne couvrait que le quart haut du bandeau (75 % à 100 % de sa hauteur) ; avec la barre d'état, ce quart (34 px) est plus court qu'elle (59 px), et le texte qui défile passait, flouté, sous l'heure et au-dessus des boutons. Sur un écran sans zone sûre, le même dégradé laissait voir le texte flouté au-dessus des boutons, à mi-hauteur. Maintenant le fond est plein de tout en haut jusqu'au milieu de la rangée des boutons (la zone sûre + 30 px), puis s'efface comme avant jusqu'à 16 px sous le bandeau ; et au-dessus du bandeau (le haut de l'écran quand Safari tire la page vers le bas), le même fond plein (::before). Avant : linear-gradient(to top, transparent 0%, 70 % 40%, plein 75%) ; copie d'avant au motif barre-20261101, serveur _/copies-avant/. */ .db-flou-haut::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, var(--db-bg) 0, var(--db-bg) calc(var(--db-barre-haut) + var(--db-barre-plus) + 30px), color-mix(in srgb, var(--db-bg) 70%, transparent) calc(var(--db-barre-haut) + var(--db-barre-plus) + 48px), transparent 100%); } .db-barre > .db-flou-haut::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 200px; background: var(--db-bg); } /* 01/11/2026 (Nils, 15 h 13, capture de l'accueil sur iPhone : « en haut c'est flou », sans défilement) : Safari d'iOS 26 (et l'app de l'écran d'accueil) floute lui-même le haut de la page sous la barre d'état, sauf s'il trouve à moins de 4 px du haut un élément fixe, pleine largeur, de plus de 10 px, à fond opaque ; il prend alors sa couleur. Le bandeau (fond transparent, fond plein dessiné dans .db-flou-haut sans toucher) ne comptait pas. Cette bande de la hauteur de la zone sûre (0 sur un écran sans encoche : rien ne change) le lui donne ; elle prend le toucher pour être trouvée, mais ne couvre que la barre d'état, où il n'y a aucun bouton. Le flou du bandeau sert toujours au défilement. Copie d'avant : _/copies-avant/darkblack.css.avant-flou-accueil-20261101. */ .db-barre-etat { position: fixed; top: 0; left: 0; right: 0; height: var(--db-barre-haut); z-index: calc(var(--db-z-overlay) - 1); background-color: var(--db-bg); pointer-events: auto; } @media print { .db-barre, .db-barre-etat, .db-fondu-bas { display: none; } body.db-avec-barre { padding-top: 0; } } /* Orbes des agents (Osar, Heko, Qube : Figma 1651:409, 03/10/2026). Le bouton rond de /assets/assistant.css prend --db-n-17, qui devient BLANC en thème sombre : sous une orbe noire, il restait un liseré blanc d'un demi-pixel sur le contour (Nils, 03/10 : « quand le fond est noir, les orbes ont un demi-pixel de large sur le contour »). Sous une orbe, le bouton est donc noir dans les deux thèmes, comme le disque de l'orbe. */ .as-btn:has(> svg.osar-ic, > svg.orbe, > img.orbe) { background: #000; } /* db-couleurs-libres : fond du disque de l'orbe (Figma 1651:409) */ /* l'orbe de Heko ou de Qube, en image ou EN LIGNE (darkblack.js, « orbes nettes », 04/10) : 44 px, ronde ; plus fort que « .as-btn svg { 18px } » d'assistant.css */ .as-btn > svg.orbe, .as-btn > img.orbe { width: 44px; height: 44px; display: block; border-radius: 50%; } /* Un fin contour blanc autour de toute orbe, pour la détacher du fond (Nils, 03/10 21:25 : « un contour blanc fin autour pour que ça soit visible ») : le trait du Figma 1651:409 (blanc à 30 %), un peu plus marqué à 44 px. Le contour que le dessin d'Osar ne montrait qu'en activité est remplacé par celui-ci, permanent et commun aux trois orbes. */ /* 03/10 21:35, Nils : « retire le contour blanc de l'orbe en mode clair, augmente un peu l'ombre de l'orbe, un contour blanc un peu plus fin ». Contour : thème sombre seulement, un demi-pixel (un pixel physique sur iPhone). Ombre : un peu plus marquée que l'ombre commune des boutons, dans les deux thèmes. */ .as-btn:has(> svg.osar-ic, > svg.orbe, > img.orbe) { box-shadow: 0 14px 44px light-dark(rgb(0 0 0 / .22), rgb(0 0 0 / .6)), 0 3px 10px light-dark(rgb(0 0 0 / .14), rgb(0 0 0 / .4)); /* db-couleurs-libres : ombre de l'orbe */ } /* 04/10, Nils : « le trait de contour de l'orbe, j'aimerais qu'il fasse tout le tour, là tu l'as mis qu'en haut à gauche ». Le trait était peint SOUS le dessin (outline puis ombre intérieure du bouton) : le disque noir de l'orbe, posé par-dessus au demi-pixel près, le recouvrait sauf là où l'arrondi tombait entre deux pixels. Le trait est maintenant un anneau posé AU-DESSUS du dessin (::after), de même épaisseur sur tout le tour ; thème sombre seulement, un demi-pixel (un pixel physique sur écran Retina), comme demandé le 03/10 21:35. Mesuré au pixel en 1x, 2x et 3x. */ .as-btn:has(> svg.osar-ic, > svg.orbe, > img.orbe)::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 50%; pointer-events: none; box-shadow: inset 0 0 0 .5px light-dark(transparent, rgb(255 255 255 / .5)); /* db-couleurs-libres : trait du Figma 1651:409 */ } /* TACTILE (Nils, 04/10/2026 : « il y a des effets quand on survole quelque chose, ça l'assombrit un peu, mais sur téléphone ça rend mal car ça reste assombri tant qu'on ne clique pas sur un autre bouton. Désactive ça sur téléphone. Et ajoute un peu d'effets de boutons qui se pressent pour le tactile »). 1. Tout :hover de cette feuille vit sous @media (hover: hover) and (pointer: fine) : au doigt, rien ne reste assombri. Une page qui écrit ses propres :hover fait de même (voir DESIGN.md). 2. L'APPUI : pendant qu'on presse, l'élément se tasse un peu (scale .96, .985 pour une carte) et son fond se marque ; il s'enfonce en 80 ms (--db-duration-appui) et revient à la durée courante. Sous prefers-reduced-motion : le fond seul, sans mouvement. Les pages réutilisent la classe .db-appui sur leurs propres boutons. */ .db-btn, .db-chip, .db-barre-bt, .db-theme-toggle, .db-segments button, .db-card-hover, .db-appui, .db-pli, .db-pli-bloc > summary, .db-menu button, .db-menu a, .db-bulle-ligne { -webkit-tap-highlight-color: transparent; transition-property: color, background-color, border-color, opacity, transform; transition-duration: var(--db-duration-fast); transition-timing-function: var(--db-ease); } .db-btn:active, .db-chip:active, .db-barre-bt:active, .db-theme-toggle:active, .db-segments button:active, .db-appui:active { transform: scale(.96); background-color: var(--db-bg-hover); transition-duration: var(--db-duration-appui); } .db-btn-primary:active, .db-segments button[aria-checked="true"]:active { background-color: var(--db-text-hi); } .db-barre-bt:active { background-color: color-mix(in srgb, var(--db-pilule-gris), var(--db-text-hi) 8%); } /* 01/11 : le style de Nils */ .db-card-hover:active { transform: scale(.985); border-color: var(--db-border-strong); transition-duration: var(--db-duration-appui); } .db-bulle-ligne:active { background-color: var(--db-bg-hover); transition-duration: var(--db-duration-appui); } .db-menu button:active, .db-menu a:active { background-color: var(--db-menu-case); box-shadow: inset 0 0 0 var(--db-f) var(--db-menu-case-bord); transition-duration: var(--db-duration-appui); } .db-menu .db-menu-tuile:active { transform: scale(.96); } .db-pli:active, .db-pli-bloc > summary:active { opacity: .55; transition-duration: var(--db-duration-appui); } @media (prefers-reduced-motion: reduce) { .db-btn:active, .db-chip:active, .db-barre-bt:active, .db-theme-toggle:active, .db-segments button:active, .db-appui:active, .db-card-hover:active, .db-menu .db-menu-tuile:active { transform: none; } } /* Au doigt, tout autre bouton des pages se presse aussi, sans rien écraser : :where() ne pèse rien, toute règle propre à une page (un transform de placement, une transition) garde la main. */ @media (hover: none) { :where(button, [role="button"], summary, a.db-appui) { -webkit-tap-highlight-color: transparent; } } @media (hover: none) and (prefers-reduced-motion: no-preference) { :where(button:not(:disabled), [role="button"]) { transition: transform var(--db-duration-fast) var(--db-ease); } :where(button:not(:disabled), [role="button"]):active { transform: scale(.96); transition-duration: var(--db-duration-appui); } } /* ============================================================================ LE STYLE DE NILS (31/10/2026). Relevé sur ses quatre maquettes Figma (fichier Aventure) : l'Ordre du jour 2211:17532, la liste des rapports 1994:5476, la porte root 1988:5464, le menu du prénom 1969:5634. Nils, 31/10 vers 22 h 45 : « Tu devrais commencer à comprendre le design system que je veux pour darkblack maintenant que tu as cette page, la porte, les rapports, et le menu en haut à droite de la page d'accueil ». Le détail, mesuré, et ce qui change par rapport aux règles d'avant : DESIGN.md, « Le style de Nils ». En une phrase : des cartes blanches qui flottent sur un fond presque blanc (grand rayon, ombre large et très douce, trait presque invisible), du noir à trois forces (100, 40, 20 %) au lieu des gris, des pastilles rondes (noire pour la réponse proposée, grises pour les autres), Satoshi Medium pour le texte, Bold pour les titres et les boutons. Les maquettes de l'Ordre du jour et des rapports sont des captures de Mac posées à 1 unité Figma = 1 px CSS : chaque valeur s'écrit telle quelle. Le sombre n'est dessiné nulle part : les mêmes formes, le blanc à la place du noir. ============================================================================ */ @font-face { font-family: 'Satoshi'; src: url('/assets/fonts/satoshi-900.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Satoshi'; src: url('/assets/fonts/satoshi-500-italic.woff2') format('woff2'); font-weight: 500; font-style: italic; font-display: swap; } :root { /* l'échelle de texte de ses maquettes : cinq tailles, chacune son rôle (jamais une sixième) */ --db-fs-une: 32px; /* la date d'une page du jour, une fois par page (Black) */ --db-fs-section: 20px; /* le titre d'une section repliable (Bold) */ --db-fs-titre: 16px; /* le titre d'une carte (Bold), ou la ligne qu'on lit en premier dans une carte (Medium) */ --db-fs-texte: 14px; /* le texte, les pastilles, les boutons, la ligne de faits */ --db-fs-detail: 12px; /* le détail d'une sous-carte et « Voir plus » : jamais un paragraphe */ --db-weight-texte: 500; /* Satoshi Medium : le texte (ses maquettes n'ont pas de Regular) */ --db-weight-fort: 700; /* Satoshi Bold : titres, pastilles, boutons */ --db-weight-une: 900; /* Satoshi Black : la date de la page, seule */ /* l'encre : le noir (le blanc en sombre) à trois forces, jamais un gris inventé ; 100 % = --db-text-hi */ --db-text-40: light-dark(rgb(0 0 0 / .4), rgb(255 255 255 / .4)); /* le secondaire : faits, durées, légendes */ --db-text-20: light-dark(rgb(0 0 0 / .2), rgb(255 255 255 / .22)); /* l'éteint : texte d'attente d'un champ */ --db-text-80: light-dark(rgb(0 0 0 / .8), rgb(255 255 255 / .8)); /* le texte d'une pastille grise */ /* les surfaces */ --db-fond-page: var(--db-n-1); /* le fond sous les cartes, presque blanc */ --db-carte: light-dark(var(--db-n-0), var(--db-n-4)); /* la carte, blanche */ --db-carte-rayon: 24px; --db-carte-ombres: inset 0 0 0 .5px light-dark(rgb(0 0 0 / .06), rgb(255 255 255 / .08)), 0 30px 100px light-dark(rgb(0 0 0 / .05), rgb(0 0 0 / .35)); /* Figma : trait 0,1 noir à 30 % (Chrome l'arrondirait à 1 px plein : le même encrage en anneau d'un demi-pixel à 6 %), ombre 0 30 100 noir à 5 % */ --db-carte-marge: 22px; /* du bord de la carte au texte */ --db-colonne: 681px; /* la colonne des cartes (rapports, Ordre du jour) */ /* les pastilles (boutons) */ --db-pilule-h: 34px; /* Bold 14, 12 / 16 de marge, texte rogné aux capitales */ --db-pilule-gris: light-dark(rgb(0 0 0 / .05), rgb(255 255 255 / .09)); /* #f2f2f2 sur blanc (la porte : noir à 5 %) */ --db-verre-pilule: light-dark(rgb(255 255 255 / .5), rgb(40 40 40 / .5)); --db-verre-pilule-trait: light-dark(#ffffff, rgb(255 255 255 / .1)); --db-verre-pilule-ombre: 0 4px 30px rgb(0 0 0 / .05); --db-pointille: light-dark(rgb(0 0 0 / .1), rgb(255 255 255 / .16)); /* le trait d'une étiquette (1 px, tirets) */ } /* le fond doux : la page sous ses cartes (le bandeau et le fondu du bas prennent la même couleur) */ body.db-fond-doux { --db-bg: var(--db-fond-page); background: var(--db-fond-page); } /* la colonne des cartes, centrée dans la largeur de page */ .db-colonne { max-width: var(--db-colonne); margin-inline: auto; } /* la date d'une page du jour : « Sam 31 oct », Black 32, centrée */ .db-une { margin: 0; text-align: center; color: var(--db-text-hi); font: var(--db-weight-une) var(--db-fs-une) / normal var(--db-font); } /* une section repliable : le titre Bold 20, le chevron (trait 2, bouts ronds) à 10 de lui, tourné vers la droite replié. Nils, 01/11/2026 (vocal du matin à 44:00) : « les chevrons des titres appel à ranger à trancher aujourd'hui lecture sont trop loin du texte faudrait les rapprocher un petit peu » : 10 au lieu des 21 de sa maquette. */ .db-section + .db-section { margin-top: 42px; } .db-section-titre { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 17px; padding: 0 0 0 10px; border: 0; background: none; cursor: pointer; color: var(--db-text-hi); font: var(--db-weight-fort) var(--db-fs-section) / 1 var(--db-font); text-align: left; -webkit-tap-highlight-color: transparent; } .db-section-titre svg { width: 12px; height: 7px; flex: none; overflow: visible; position: relative; top: 2px; transition: transform var(--db-duration) var(--db-ease); } .db-section-titre[aria-expanded="false"] svg { transform: rotate(-90deg); } .db-section-titre[aria-expanded="false"] { margin-bottom: 0; } /* la carte : blanche, rayon 24, l'ombre large et douce, 22 de marge */ .db-carte { background: var(--db-carte); border-radius: var(--db-carte-rayon); box-shadow: var(--db-carte-ombres); padding: var(--db-carte-marge); color: var(--db-text-hi); font: var(--db-weight-texte) var(--db-fs-texte) / 1.35 var(--db-font); } /* Nils, 01/11/2026 (vocal du matin à 35:45, sur le titre des cartes) : « je veux un interline de 100% par défaut sur les polices […] c'est adapté à des livres moi là c'est du web c'est censé être plus compacté » : le titre d'une carte, celui d'une section et la ligne de faits à 1 (la Gazette l'avait posé chez elle, 01/11 ; ici pour tout le site). Le texte courant d'une carte garde 1,35. */ .db-carte-titre { margin: 0; color: var(--db-text-hi); font: var(--db-weight-fort) var(--db-fs-titre) / 1 var(--db-font); } /* Toute la carte est cliquable quand son titre est un lien (Nils, 01/11/2026 vers 22 h, sur /site-dev/ : « comme sur les autres pages, quand on a des cards comme ça je veux que l'action du clic ait lieu quand on clique sur la carte et non pas quand on clique seulement sur le texte ») : le lien du titre s'étend sur la carte ; les autres boutons et liens de la carte restent au-dessus et gardent leur action. */ .db-carte:has(> a.db-carte-titre, > :not(.db-carte) a.db-carte-titre) { position: relative; cursor: pointer; } .db-carte a.db-carte-titre::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } .db-carte:has(a.db-carte-titre) :is(button, a:not(.db-carte-titre), input, select, textarea, summary, label) { position: relative; z-index: 1; } /* une carte dans une carte (les trois idées d'une Gazette) : même dessin, 14 de marge */ .db-sous-carte { background: var(--db-carte); border-radius: var(--db-carte-rayon); box-shadow: var(--db-carte-ombres); padding: 14px; } /* la ligne de faits : Medium 14 à 40 %, les morceaux séparés par un point de 2 px */ .db-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 7px; color: var(--db-text-40); font: var(--db-weight-texte) var(--db-fs-texte) / 1 var(--db-font); } /* le type d'une idée, ou toute catégorie, dans sa couleur (01/11/2026, demandé par l'agent Gazette : .gz-type de /journal/ et .odj-type de journal/bloc.js écrivaient la même chose) : pastille de 20, Bold 12 (exception « detail »), fond de sa couleur à 12 %, le texte dans sa couleur ; la couleur vient de la table de la page : style="--c: var(--db-dom-…)" */ .db-type { display: inline-flex; align-items: center; max-width: 100%; height: 20px; padding: 0 8px; border-radius: var(--db-radius-full); background: color-mix(in srgb, var(--c, var(--db-text-hi)) 12%, transparent); color: var(--c, var(--db-text-80)); font: var(--db-weight-fort) var(--db-fs-detail) / 1 var(--db-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .db-point { width: 2px; height: 2px; flex: none; border-radius: 50%; background: currentColor; } /* l'étiquette pointillée : ce qu'on a entendu, cité tel quel (Medium Italique 14 à 40 %, trait de tirets à 10 %) */ .db-etiquette { display: inline-flex; align-items: center; min-width: 0; height: 20px; padding: 0 6px; border: 1px dashed var(--db-pointille); border-radius: 4px; color: var(--db-text-40); font: italic var(--db-weight-texte) var(--db-fs-texte) / 1 var(--db-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* les pastilles : 34 de haut, rondes, Bold 14. Noire : la réponse proposée ; grise : les autres ; verre : « Voir plus (4) » */ .db-pilule { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none; height: var(--db-pilule-h); padding: 0 16px; border: 0; border-radius: var(--db-radius-full); background: var(--db-pilule-gris); color: var(--db-text-80); font: var(--db-weight-fort) var(--db-fs-texte) / 1 var(--db-font); white-space: nowrap; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; } .db-pilule > * { text-box: trim-both cap alphabetic; } .db-pilule-noire { background: var(--db-text-hi); color: var(--db-n-0); } .db-pilule-noire .db-faible { opacity: .8; } .db-pilule-noire .db-point { background: currentColor; opacity: .8; } .db-pilule-ronde { width: var(--db-pilule-h); padding: 0; color: var(--db-text-hi); } .db-pilule-verre { height: 36px; gap: 10px; background: var(--db-verre-pilule); box-shadow: inset 0 0 0 1px var(--db-verre-pilule-trait), var(--db-verre-pilule-ombre); color: var(--db-text-40); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .db-pilule-verre svg { width: 5px; height: 9px; flex: none; opacity: .5; } .db-pilule:disabled { opacity: .45; cursor: default; } /* un champ en forme de pastille (« Chercher affaire », « Parler à Osar ») : le texte d'attente à 20 % */ .db-pilule-champ { width: 152px; padding: 0 16px; border: 0; outline: none; border-radius: var(--db-radius-full); background: var(--db-pilule-gris); color: var(--db-text-hi); height: var(--db-pilule-h); flex: none; font: var(--db-weight-fort) var(--db-fs-texte) / 1 var(--db-font); transition: width var(--db-duration) var(--db-ease); } .db-pilule-champ::placeholder { color: var(--db-text-20); opacity: 1; } .db-pilule-champ::-webkit-calendar-picker-indicator { display: none !important; } /* la flèche d'une liste (datalist) mangeait la fin du texte */ .db-pilule-champ:focus { width: 220px; box-shadow: inset 0 0 0 1px var(--db-text-20); } @media (pointer: coarse) { .db-pilule-champ { font-size: 16px; } } /* une rangée de pastilles : une ligne qui défile sous le doigt, coupée net au bord de la carte */ .db-pilules { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .db-pilules::-webkit-scrollbar { display: none; } /* « Voir plus › » : Bold 12, le petit chevron à 6 */ .db-plus { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 20px; padding: 0 6px; border: 0; background: none; color: var(--db-text-hi); font: var(--db-weight-fort) var(--db-fs-detail) / 1 var(--db-font); white-space: nowrap; cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent; } .db-plus svg { width: 5px; height: 9px; flex: none; transition: transform var(--db-duration) var(--db-ease); } .db-plus[aria-expanded="true"] svg { transform: rotate(90deg); } .db-pilule:active, .db-plus:active, .db-section-titre:active { transform: scale(.96); transition: transform var(--db-duration-appui) var(--db-ease); } @media (hover: hover) and (pointer: fine) { .db-pilule:not(.db-pilule-noire):not(:disabled):hover { background: color-mix(in srgb, var(--db-pilule-gris), var(--db-text-hi) 4%); } .db-plus:hover, .db-section-titre:hover { opacity: .7; } } @media (prefers-reduced-motion: reduce) { .db-pilule:active, .db-plus:active, .db-section-titre:active { transform: none; } } /* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════ L'INTERRUPTEUR (.db-bascule), un seul pour tout le site (Nils, 01/11/2026 vers 0 h 30 : « pour tous les toggles de Dark Black […] quand on glisse ça le déplace et ça le mette là où on lâche […] entre A et B, quand on déplace, ça prend petit à petit la taille »). darkblack.js (dbBascule) pose le curseur et le fait glisser ; la page coche (aria-checked). - À étiquettes :
+