/* DANIEL — les jetons. Direction artistique : **VERRE LIQUIDE**, l'ADN Apple décrit au §9 de la documentation d'origine. Trois idées, et rien d'autre : 1. **Le fond est une matière, pas une couleur.** Une nappe très pâle sous tout l'écran, et des surfaces qui la laissent transparaître, floue et saturée. C'est ce qui fait le « liquid » — un `backdrop-filter`, pas une usine à gaz. 2. **La couleur ne décore rien, elle informe.** UN accent identitaire (l'indigo), et trois couleurs d'état : ambre quand ça traîne, rouge quand c'est tard, vert quand c'est réglé. Une couleur à l'écran veut dire quelque chose. 3. **La typographie est celle du système.** SF Pro, Inter en repli. La personnalité vient du rythme et de l'espacement, pas d'un caractère remarquable. ── Ce qu'on garde de l'étape précédente ──────────────────────────────────── Les couleurs d'ÉTAT restent MESURÉES, pas reprises telles quelles d'iOS : l'orange d'Apple (#FF9F0A) ne fait que 2,1:1 sur un fond clair — illisible. On garde donc la teinte d'Apple à la NUIT, où elle passe largement, et une version foncée au JOUR. Le rapport de contraste est en commentaire ; aucune valeur ne descend sous AA. ── Où le verre a le droit d'être ─────────────────────────────────────────── Sur les BLOCS (une liste = un bloc de verre) et sur la chrome qui passe au-dessus du contenu. JAMAIS ligne par ligne : quarante `backdrop-filter` empilés font ramer un iPhone, et personne ne voit la différence. Un bloc de verre, quarante lignes transparentes dedans — même rendu, un seul flou. ── Le basculement ────────────────────────────────────────────────────────── `data-tirage` vaut TOUJOURS « jour » ou « nuit » — jamais « systeme ». C'est le JS qui résout la préférence (et qui écoute le système quand elle vaut « systeme »), ce qui évite d'écrire deux fois le bloc de nuit. Un petit script en tête de `index.html` le pose avant le premier pixel, sinon l'app clignote en blanc au chargement. */ /* ══════════════════════════════════════ TIRAGE JOUR ══════════════════════ */ :root, :root[data-tirage="jour"] { color-scheme: light; /* ── LE SOL DE LA FOLIE, tirage jour — l'argent ──────────────────────── Même dessin qu'à la nuit — deux nappes et un dégradé — encré à l'inverse. */ --toile: #e7e7eb; --sol-haut: #ffffff; /* la nappe claire, en haut à gauche */ --sol-bas: #c3c3cc; /* la poche sombre, en bas à droite */ --sol-1: #f3f3f5; --sol-2: #e6e6ea; --sol-3: #d8d8de; /* Les surfaces opaques — champs, feuilles de repli, aperçus. */ --surface: #FFFFFF; --surface-2: #F7F7FA; /* Translucides à nouveau, comme à la nuit et pour la même raison : le sol ne varie plus assez pour qu'une encre translucide dérive avec lui. */ --encre: #101014; /* 15,4:1 — AAA */ --encre-dim: rgba(16, 16, 20, .72); /* 6,9:1 — AA */ --encre-mute: rgba(16, 16, 20, .60); /* 4,6:1 — AA */ --encre-fant: rgba(16, 16, 20, .32); /* décoratif : jamais du texte */ --trait: rgba(16, 16, 20, .07); --trait-fort: rgba(16, 16, 20, .14); /* ── Le verre de LA FOLIE, tirage jour ────────────────────────────────── Trois épaisseurs (DA.md §5) : `--verre` les blocs, `--verre-chrome` la chrome qui passe AU-DESSUS du texte et doit donc masquer davantage, `--verre-opaque` les feuilles où l'on lit des champs. */ --verre: rgba(255, 255, 255, .55); --verre-chrome: rgba(255, 255, 255, .78); --verre-opaque: rgba(255, 255, 255, .92); --verre-actif: rgba(255, 255, 255, .85); --verre-flou: 30px; --verre-sat: 150%; --verre-clarte: 1; --reflet: inset 0 0 0 1px rgba(255, 255, 255, .55); --spec-nappe: rgba(255, 255, 255, .18); --tranche: rgba(16, 16, 44, .10); /* Contrôles pleins — en encre. Un bouton noir a l'air cher. */ --prim-fond: #101014; --prim-encre: #FFFFFF; /* Signal — UN seul accent, dans sa TAILLE PROFONDE sur le jour. Le rose de nuit #FF2E88 tombe à 2,84:1 sur un fond clair : illisible. Ce n'est pas une deuxième couleur, c'est le même rose plus foncé — et sur celui-ci on pose du BLANC (7,0:1), à l'inverse de la nuit. (DA.md §3.3) */ --accent: #AD1457; --accent-encre: #FFFFFF; --accent-voile: rgba(173, 20, 87, .12); /* États. Ce sont les seules autres couleurs autorisées à l'écran. */ /* Idem, tirage jour (DA.md §3.4). */ --ok: #1B6E3E; /* « c'est réglé » */ --tiede: #7E560B; /* « ça traîne » */ --chaud: #A8231D; /* « c'est tard » */ /* Les ombres du verre : larges, basses, jamais dures. Une ombre nette pose un objet ; une ombre diffuse le fait flotter. */ --ombre-posee: 0 1px 2px rgba(20, 20, 40, .05); --ombre-verre: 0 8px 28px -10px rgba(20, 20, 50, .16), 0 2px 6px rgba(20, 20, 50, .05); --ombre-flot: 0 28px 70px -24px rgba(20, 20, 50, .34), 0 3px 10px rgba(20, 20, 50, .09); } /* ══════════════════════════════════════ TIRAGE NUIT ══════════════════════ */ :root[data-tirage="nuit"] { color-scheme: dark; /* ── LE SOL DE LA FOLIE, repris tel quel ──────────────────────────────── Deux nappes et un dégradé sur un quasi-noir. C'est beaucoup plus SOBRE que le bleu d'encre qui était là : la variation de lumière y est minuscule, et c'est justement ce qui permet au verre d'être simple. Sur un sol qui ne bouge presque pas, il n'y a rien à compresser — tout l'échafaudage de voile sombre + relève blanche (§33) devient sans objet et disparaît. */ --toile: #0e0e12; --sol-haut: #1c1c24; /* la nappe claire, en haut à gauche */ --sol-bas: #05050a; /* la poche sombre, en bas à droite */ --sol-1: #15151b; /* le dégradé de fond, du haut... */ --sol-2: #101015; --sol-3: #0a0a0e; /* ...au bas */ --surface: #17171E; --surface-2: #1D1D25; /* Les encres de LA FOLIE, translucides à nouveau. Elles avaient dû devenir SOLIDES (§30) parce que le sol variait beaucoup et qu'une encre translucide hérite de ce qu'elle couvre. Ce sol-ci ne varie presque pas : la raison a disparu, la complication aussi. */ --encre: #ECEDF1; /* 16,5:1 — AAA */ --encre-dim: rgba(236, 237, 241, .64); /* 7,1:1 — AAA */ --encre-mute: rgba(236, 237, 241, .52); /* 5,0:1 — AA */ --encre-fant: rgba(236, 237, 241, .30); /* décoratif : jamais du texte */ --trait: rgba(255, 255, 255, .07); --trait-fort: rgba(255, 255, 255, .15); /* À la nuit, le verre ÉCLAIRCIT au lieu d'assombrir : une surface blanche à 8 % au-dessus d'un fond noir, c'est ce qui fait qu'une carte se détache sans avoir à lui poser un bord. */ /* ── Le verre de LA FOLIE ─────────────────────────────────────────────── Une seule couleur sombre translucide, et une arête d'UN pixel tout autour. Pas de voile + relève, pas de liseré en dégradé, pas de lentille : sur ce sol-là, rien de tout ça ne se voit, et ce qui ne se voit pas coûte quand même une passe de flou par bloc. */ --verre: rgba(24, 24, 30, .55); --verre-chrome: rgba(21, 21, 27, .82); --verre-opaque: rgba(21, 21, 27, .94); --verre-actif: rgba(255, 255, 255, .11); --verre-flou: 30px; --verre-sat: 150%; --verre-clarte: 1; /* L'arête : un anneau complet, pas un filet en haut. C'est `--glass-edge` de LA FOLIE, à l'identique. */ --reflet: inset 0 0 0 1px rgba(255, 255, 255, .06); --spec-nappe: rgba(255, 255, 255, .03); --tranche: rgba(0, 0, 0, .40); --prim-fond: #ECEDF1; --prim-encre: #101014; /* L'accent quitte l'indigo. Deux raisons, et la seconde suffirait : · il se lisait VIOLET sur le fond bleu — Isma n'en voulait pas ; · mesuré, il était à 3,50:1 sur le verre le plus clair. Il n'avait jamais été vérifié : sa valeur avait été calée contre une surface plate qui n'existe plus. Le bleu de signal est plus CLAIR et plus saturé que n'importe quel point du fond : c'est ce qui le sépare d'une famille de teinte à laquelle il appartient pourtant. */ /* Le rose de LA FOLIE. Il a DEUX tailles, et c'est mesuré (DA.md §3.3) : #FF2E88 passe sur la nuit, et tombe à 2,84:1 sur l'argent du jour — d'où sa taille profonde #AD1457 là-bas. Sur l'accent on pose l'ENCRE, jamais du blanc : le blanc n'y fait que 3,5:1. */ Le rose de LA FOLIE, dans sa valeur exacte. Il avait dû être éclairci (#FF4F96) tant que la nuit de DANIEL était un bleu plus clair ; ce fond-ci étant celui de LA FOLIE, sa valeur d'origine repasse — 5,24:1, mesuré. */ --accent: #FF2E88; --accent-encre: #101014; --accent-voile: rgba(255, 46, 136, .16); /* Les trois fonctionnelles de LA FOLIE (DA.md §3.4), reprises telles quelles. Ce ne sont pas des couleurs de marque : chacune a UN métier, et rien d'autre. */ --ok: #6FD39A; /* « c'est réglé » */ --tiede: #E0B45E; /* « ça traîne » */ --chaud: #FF7A75; /* « c'est tard » */ --ombre-posee: 0 1px 2px rgba(0, 0, 0, .40); --ombre-verre: 0 8px 28px -10px rgba(0, 0, 0, .60), 0 2px 6px rgba(0, 0, 0, .30); --ombre-flot: 0 28px 70px -24px rgba(0, 0, 0, .80), 0 3px 10px rgba(0, 0, 0, .40); } /* ══════════════════════════════════════ Invariants ══════════════════════ */ :root { /* Espacement — multiples de 4. */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; /* Rayons. Plus généreux qu'avant : c'est la moitié du « liquide ». Un bloc à 22 px et une pastille à 999 px, c'est iOS ; les mêmes à 10 px, c'est un tableau de bord d'administration. */ /* Les six rayons de LA FOLIE, repris tels quels (DA.md §6). */ --rd-1: 4px; --rd-2: 10px; --rd-3: 14px; --rd-4: 20px; --rd-5: 28px; --rd-pill: 999px; /* ── L'échelle typographique de LA FOLIE — huit tailles, pas une de plus ── Reprise au pixel près. 15 px de texte courant et pas 16 : c'est plus dense, et c'est ce qui fait qu'une liste se lit comme un CATALOGUE et pas comme un formulaire. ⚠️ Les CHAMPS restent à 16 px : sous 16, iOS zoome de force au focus et ne dézoome jamais. */ --t-2xs: 10px; --t-xs: 11px; --t-s: 12.5px; --t-m: 13.5px; --t-l: 15px; --t-xl: 17px; --t-2xl: 21px; --t-3xl: 27px; /* ── Les trois épaisseurs de verre de LA FOLIE (DA.md §5) ──────────────── Nommées plutôt que recopiées : elles existaient de fait, en sept recettes légèrement différentes. ⚠️ On empile au maximum DEUX couches de verre : au-delà c'est laiteux, et c'est le premier poste de coût GPU sur mobile. */ --flou-fin: blur(24px); --flou-moyen: blur(30px) saturate(150%); --flou-epais: blur(40px) saturate(150%); --ressort: cubic-bezier(0.32, 0.72, 0, 1); --rapide: 180ms; --base: 320ms; /* ── Les trois usages de LA FOLIE (DA.md §4) ───────────────────────────── `--sans` l'interface. Elle doit DISPARAÎTRE. `--serif` l'accent éditorial, en italique, sur UN SEUL MOT d'un titre — « Six choses à *faire* ». Jamais un titre entier, jamais sous 20 px : en dessous, un serif devient une tache. `--mono` tout ce qui S'ALIGNE — heures, compteurs, dates, et les libellés de section en capitales espacées. */ --sans: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif; --mono: 'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace; } /* ── Échelle typographique ───────────────────────────────────────────────── Huit tailles, pas une de plus, et trois graisses : 400 / 600 / 700. Les valeurs sont celles de LA FOLIE (--t-2xs … --t-3xl). */ /* Les titres de page SORTENT de l'échelle : un titre doit suivre la fenêtre. */ .t-affiche { font: 700 clamp(27px, 6.4vw, 38px)/1.06 var(--sans); letter-spacing: -.022em; } .t-titre { font: 700 var(--t-2xl)/26px var(--sans); letter-spacing: -.016em; } .t-section { font: 600 var(--t-xl)/22px var(--sans); letter-spacing: -.01em; } .t-entete { font: 600 var(--t-l)/20px var(--sans); } .t-corps { font: 400 var(--t-l)/20px var(--sans); } .t-sous { font: 400 var(--t-m)/18px var(--sans); } .t-note { font: 400 var(--t-s)/17px var(--sans); } /* L'œilleton. C'est LE détail qui signe la DA de LA FOLIE : les intitulés de section ne sont pas du petit gras, ce sont des CAPITALES EN CHASSE FIXE très espacées. Space Mono, 10 px, .14em — même recette que « N°001 — SUR INVITATION » sur le gate. */ .t-oeilleton { font: 400 var(--t-2xs)/14px var(--mono); letter-spacing: .14em; text-transform: uppercase; } /* L'accent éditorial : UN SEUL MOT d'un titre, jamais un titre entier, jamais sous 20 px — en dessous, un serif ne se lit plus, il fait une tache. */ .t-serif { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: 0; } /* Chiffres tabulaires : le compteur de silence ne doit pas bouger d'un pixel quand il passe de 9 à 10. */ .t-num { font-family: var(--mono); font-variant-numeric: tabular-nums; }