/* ============================================================================= Sur20 — jetons de design Direction : LE RENDU DE COPIE CORRIGÉE. Papier crème, marge, encre bleu-noir de l'étudiant, encre rouge du correcteur. Le système repose sur UNE idée : il y a DEUX voix dans ce produit. · l'étudiant écrit → --encre (bleu-noir, comme un stylo plume) · le correcteur écrit → --rouge (le seul accent vif de toute l'interface) Tout ce qui vient de nous parle en rouge. Tout ce qui vient de lui parle en encre. Si un élément ne sait pas de quelle voix il est, c'est qu'il ne devrait pas exister. ----------------------------------------------------------------------------- ⛔ LES 9 TELLS DE L'INTERFACE « FAITE PAR IA » — NE JAMAIS LES RÉINTRODUIRE ----------------------------------------------------------------------------- 1. Dégradé violet → bleu (ni aucun dégradé décoratif) 2. Fond sombre « parce que ça fait tech » 3. Inter / Roboto / Poppins partout, une seule graisse 4. Cartes 12px arrondies + ombre douce, identiques du haut en bas de la page 5. Une icône (Lucide & co) devant chaque titre 6. Des emojis DANS L'INTERFACE (le contenu TikTok, lui, en met : autre sujet) 7. L'espacement Tailwind par défaut, jamais retouché 8. Le squelette « hero + 3 colonnes + témoignages » 9. Tout le texte en gris moyen, aucune hiérarchie décidée Le test : remplace le logo par celui d'un autre SaaS. Si rien ne choque, l'interface n'a pas d'identité — recommence. ⚠️ Aucune valeur en dur ailleurs que dans ce fichier. Ni couleur, ni taille, ni espacement, ni rayon. S'il manque une valeur, on l'ajoute ICI. ============================================================================= */ /* ---------- Polices : AUTO-HÉBERGÉES, jamais un CDN ---------- Ce n'est pas du purisme : la promesse du produit est « tes copies ne sortent pas d'Europe ». Charger les polices chez Google enverrait l'IP de chaque étudiant aux États-Unis à chaque page. L'argument doit tenir jusqu'au bout. */ @font-face { font-family: "Newsreader"; src: url("polices/newsreader-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Newsreader"; src: url("polices/newsreader-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Newsreader"; src: url("polices/newsreader-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Newsreader"; src: url("polices/newsreader-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Atkinson Hyperlegible"; src: url("polices/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Atkinson Hyperlegible"; src: url("polices/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("polices/jetbrains-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("polices/jetbrains-mono-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } :root { /* ========================================================================= 1. TYPOGRAPHIE — trois familles, trois rôles, aucun chevauchement ========================================================================= Newsreader (serif éditoriale) : les titres ET le texte de la copie de l'étudiant. Une copie est un document, elle se lit en serif. Atkinson Hyperlegible : toute l'interface. Dessinée pour la basse vision (le l, le I et le 1 sont distincts) — sur un produit d'étudiants qui lisent des heures, c'est un choix, pas un défaut de neutralité. JetBrains Mono : les NOTES, les points, les numéros de copie, les versions de barème. C'est le registre du « tamponné », du compté, du non négociable. Un chiffre qui compte se met en mono. */ --police-titre: "Newsreader", Georgia, "Times New Roman", serif; --police-ui: "Atkinson Hyperlegible", -apple-system, "Segoe UI", sans-serif; --police-copie: "Newsreader", Georgia, serif; --police-chiffre:"JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace; /* Échelle : 5 tailles + 1 display. Ratio 1,25 (tierce majeure) sur base 16px. Rien entre les deux. Si une taille manque, c'est la mise en page qui est à revoir, pas l'échelle. */ --t-mini: 0.8125rem; /* 13px — mentions, légendes, unités */ --t-corps: 1rem; /* 16px — le texte courant. Jamais en dessous. */ --t-lead: 1.25rem; /* 20px — chapô, sous-titre, question posée */ --t-titre: 1.5625rem; /* 25px — titres de section */ --t-grand: 1.953rem; /* 31px — titre de page */ --t-note: 3.5rem; /* 56px — LA note /20, et rien d'autre */ --lh-serre: 1.25; /* titres */ --lh-normal: 1.55; /* interface */ --lh-copie: 1.75; /* le texte de la copie : on doit pouvoir annoter entre les lignes */ --graisse-normale: 400; --graisse-forte: 700; /* ========================================================================= 2. COULEUR — ratios WCAG calculés, pas estimés (script palette2.py) ========================================================================= ⭐ DÉCISION 2 (04/08/2026, après étude de marché sur 33 concurrents) : L'OR EST MORT À SON TOUR. LA MARQUE EST VERTE. L'or #C9971F mesurait **ΔE 7,6** du doré de fiches-droit.com (30 000 étudiants, couronne de lauriers) — en dessous de 15, deux couleurs sont indiscernables pour un œil non entraîné. Notre logo aurait lu comme une déclinaison du leur. Jurixio (50 000 étudiants) a aussi une balance dorée. ⛔ Ne pas revenir à l'or « parce qu'il est plus chaud ». Le vert pousse #3E7A3A est à ΔE 29 de son plus proche voisin (Grammarly #027E6F, qui est un teal, pas un vert) et ΔE 40+ de tout le reste. Vérifié à la main en Lab (scratchpad/deltae.py), pas pris sur parole. ⚠️ Le rapport d'étude affirmait « vert profond libre à ΔE 33 » — c'était FAUX : il avait omis Grammarly de son test. La vérification a rattrapé. ⭐ DÉCISION 1 (03/08/2026, après relecture de l'avatar) : LE ROUGE N'EST PLUS L'ACCENT DE LA MARQUE. Confirmé par l'étude : sur 6 outils de correction mondiaux, **zéro** ne montre un stylo rouge. Ce n'est pas un oubli — en France le rouge sur copie active un « biais de sévérité », culturellement lié à l'erreur. Le rouge est aussi la couleur la plus saturée du droit français (Dalloz #D71635, LexisNexis #E8171F, AideauxTD #B0001D, Prémisse #92002E). Les trois personas sont des gens DÉCOURAGÉS — « choquée et désespérée », « moralement épuisée », la honte comme canal par défaut, on demande de l'aide sur un forum anonyme à 23 h. Faire du rouge du correcteur l'accent dominant, c'est peindre l'application avec la couleur de la blessure. Donc : · le ROUGE est rétrogradé → il ne dit QUE « point manqué / annotation ». Il apparaît par petites touches, jamais en bouton, jamais en marque. · l'OR devient l'accent de la marque → c'est la MENTION, le sceau, le point qu'on va chercher. Chaud, valorisant, tourné vers l'avant. Aucun concurrent ne l'occupe : Pamplemousse, Dalloz, Juriv'IA, les Académies — tout le secteur est en bleu ou en rouge. · le VERT dit « acquis », et rien d'autre. ⚠️ CONTRAINTE DURE : --or (#C9971F) ne fait que 2.52:1 sur le papier. Il est INTERDIT en texte. Il n'existe qu'en APLAT, avec --encre dessus (6.65:1). Pour de l'or écrit, il y a --or-texte. Cette contrainte n'est pas une gêne : c'est elle qui pousse vers les blocs de couleur pleins, c'est-à-dire vers le registre moderne qu'on cherche. */ /* -- Surfaces ------------------------------------------------------------ */ --papier: #FCF9F3; /* le fond. Crème, JAMAIS #fff : c'est du papier */ --papier-marge: #F4EEE2; /* la bande de marge. 1.10:1 — se devine, ne se voit pas. C'est une surface, pas du texte. */ --carte: #FFFFFF; /* la copie posée SUR le papier */ /* -- La voix de l'étudiant (bleu-noir d'encre) --------------------------- */ --encre: #14172E; /* 16.77:1 sur papier ✓ AA */ --encre-doux: #4A4E68; /* 7.74:1 sur papier ✓ AA */ /* -- LE VERT POUSSE : la marque, l'action, ET ce qui est acquis ---------- Une seule couleur porte les trois. Ce n'est pas de l'économie : dire que la couleur de la marque est celle de ce que l'étudiant a DÉJÀ gagné, c'est le message du produit. (Le rouge, lui, ne dit que ce qui manque.) */ --vert: #3E7A3A; /* 4.93:1 sur papier ✓ AA */ --vert-clair: #7FBE72; /* la seule version lisible sur fond --encre */ --vert-fond: #E9F2E6; /* fond doux de bloc « acquis » */ --sur-vert: #FFFFFF; /* 5.19:1 sur --vert ✓ AA */ --action: var(--vert); /* fond des boutons */ --sur-action: var(--sur-vert); /* -- LE LAITON : le palier à moitié. Texte uniquement, jamais la marque --- ⚠️ Ne PAS le promouvoir en couleur de marque : il retomberait dans la zone de collision avec le doré de fiches-droit. */ --laiton: #8A5A12; /* 5.57:1 sur papier ✓ AA */ --laiton-fond: #FBF1DA; /* -- Alias hérités (l'identité dorée du 03/08). Conservés pour ne rien casser, mais ⛔ ne plus les employer dans du code neuf. */ --or: var(--vert); --or-texte: var(--laiton); --or-fond: var(--laiton-fond); /* -- Le ROUGE : la marque du correcteur. Par touches, jamais en aplat ---- ⚠️ #E4372E (le rouge d'origine) ne faisait que 4.05:1 : il ÉCHOUE en texte courant. Ne jamais le rétablir « parce qu'il claque plus ». */ --rouge: #A3231C; /* 7.10:1 sur papier ✓ AA */ --rouge-fond: #FBEAE8; /* (--rouge dessus : 7.16:1) ✓ AA */ --rouge-sur-fond:#96201A; /* 7.16:1 sur --rouge-fond ✓ AA */ --sur-rouge: #FFFFFF; /* 7.46:1 sur --rouge ✓ AA */ /* -- Texte secondaire SUR une surface sombre (le bloc .top3) ------------- --papier à pleine intensité dessus de --encre EST déjà correct (même ratio symétrique que --encre sur --papier, 16.77:1) mais trop appuyé pour une ligne de méthode secondaire. Couleur dédiée, pas une opacité bricolée (une opacité peut retomber sous AA sans qu'on le calcule). */ --sur-encre-doux:#9CA0BC; /* 6.85:1 sur --encre ✓ AA */ /* -- Les paliers du barème : la palette EST le barème -------------------- Ce n'est pas de la décoration : chaque couleur porte un état du barème. ⛔ Si un vert veut dire « joli » et pas « acquis », il ment. */ --palier-plein: var(--vert); /* le palier est pris */ --palier-moitie: var(--laiton); /* à moitié — 5.57:1 ✓ AA */ --palier-vide: var(--rouge); /* rien n'est pris */ /* -- Traits -------------------------------------------------------------- */ --trait: #DCD3C0; /* filets, séparateurs */ --trait-fort: #C3B9A2; /* bord d'un champ, contour d'une carte */ /* ========================================================================= 3. ESPACEMENT — notre échelle, pas celle de Tailwind ========================================================================= */ --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 20px; --e-5: 32px; --e-6: 52px; --e-7: 84px; /* ========================================================================= 4. GÉOMÉTRIE ========================================================================= Le tell n°4 n'est pas « c'est arrondi », c'est « tout est arrondi PAREIL ». Ici le rayon dit de quelle MATIÈRE est l'élément : · le papier est net → --rayon (3px) · les objets qu'on manipule → --rayon-action (9px : boutons, aplats) · les pastilles → --rayon-pastille · la marque → --rayon-marque (la squircle du logo) */ --rayon: 3px; --rayon-action: 9px; --rayon-pastille: 999px; --rayon-marque: 22%; /* LE DÉTAIL SIGNATURE, répété partout et nulle part ailleurs : le trait rouge vertical du correcteur, dans la marge. */ --marge-trait: 3px; --marge-large: 44px; /* largeur de la bande de marge à gauche */ /* Ombres : une seule, très basse. Une feuille posée sur une feuille. */ --ombre-feuille: 0 1px 0 rgba(20,23,46,.04), 0 2px 8px rgba(20,23,46,.05); /* La règle réglée : la trame horizontale d'une copie double (seyès simplifié). Sert de fond au bloc de saisie. Discrète, jamais décorative. */ --ligne-copie: 30px; /* Le focus n'est pas rouge : le rouge veut dire « point manqué » dans ce produit. Une bordure de focus rouge dirait « tu t'es trompé » à chaque tabulation. Il est donc dans le vert de la marque (4.93:1 sur papier). */ --focus: 2px solid var(--vert); --focus-decalage: 2px; } /* Respect de prefers-reduced-motion : déclaré ici, appliqué partout. Aucune animation n'est nécessaire à la compréhension de ce produit. */ @media (prefers-reduced-motion: reduce) { :root { --duree: 0ms; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } :root { --duree: 140ms; } /* Le focus se voit, et il se voit dans NOTRE rouge — jamais le halo bleu par défaut du navigateur (tell n°9 : rien n'a été décidé). */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: var(--focus); outline-offset: var(--focus-decalage); }