/* ========================================================================== Duramentu, vitrine : jetons de design ========================================================================== SEUL fichier du depot ou vivent des couleurs. Aucun hexadecimal en dur dans les composants ou les pages : si une page a besoin d'une couleur qui n'est pas ici, c'est un jeton qui manque, pas une exception a ecrire sur place. BASE TYPOGRAPHIQUE : 16 px, contre 15,2 px (densite 95 %) dans l'application. Ecart assume : sur un site de presentation le confort de lecture prime sur la parite stricte avec le produit. Toutes les valeurs en rem d'ici se lisent donc a 5 % de plus que leur equivalent applicatif. TROIS AXES : mode (clair / sombre), accent (six valeurs, liste FERMEE) et etats metier (succes, alerte, danger, info). Les etats metier ne suivent JAMAIS l'accent : un statut de danger reste rouge quel que soit l'accent choisi, sinon il cesse de signaler quoi que ce soit. CONTROLE : tools/check-contrast.py valide les quatre seuils de contraste des six accents et la coherence du kit de marque. A relancer apres toute modification de ce fichier. ========================================================================== */ /* ========================================================================== 1. ACCENTS : liste fermee de six valeurs ========================================================================== En mode CLAIR, une seule valeur par accent : elle sert a la fois de fond de bouton plein (texte blanc dessus) et de couleur de lien, d'icone et de focus. En mode SOMBRE il en faut DEUX, et c'est la regle la plus facile a rater : --accent-solid fond des boutons pleins, qui portent du texte blanc. JAMAIS employe comme couleur de texte. --accent liens, icones, anneau de focus, elements accentues poses sur le fond sombre. JAMAIS de texte blanc dessus. La colonne "clair" est FIGEE. Les colonnes sombres tolerent un ajustement a la marge tant que tools/check-contrast.py reste vert. ========================================================================== */ :root { /* defaut : Bleu nuit */ --accent-light: #0b1522; --accent-dark-solid: #2b62c4; --accent-dark: #8fb3e8; } :root[data-accent="acier"] { /* Bleu acier */ --accent-light: #1d4ed8; --accent-dark-solid: #2f6ad1; --accent-dark: #7da7f5; } :root[data-accent="indigo"] { /* Indigo */ --accent-light: #4338ca; --accent-dark-solid: #5b54d6; --accent-dark: #a5b4fc; } :root[data-accent="petrole"] { /* Petrole */ --accent-light: #155e75; --accent-dark-solid: #1a7a96; --accent-dark: #67c3dd; } :root[data-accent="prune"] { /* Prune */ --accent-light: #86198f; --accent-dark-solid: #a83bb5; --accent-dark: #e18fe8; } :root[data-accent="graphite"] { /* Graphite */ --accent-light: #334155; /* Remonte de #55657d a #57677e : a la valeur d'origine le ratio sur --color-surface tombait a 2.94, sous le seuil de 3.0. Deux points de rouge et de vert suffisent a repasser a 3.02, soit exactement la marge que l'accent "defaut" porte deja. Teinte inchangee. */ --accent-dark-solid: #57677e; --accent-dark: #94a3b8; } /* ========================================================================== 2. MODE CLAIR : valeurs par defaut, sur :root nu ========================================================================== */ :root { color-scheme: light; /* --- Accent : en clair, le plein EST l'accent --------------------------- */ --accent: var(--accent-light); --accent-solid: var(--accent); --on-accent: #ffffff; /* texte pose SUR un plein d'accent */ /* --- Neutres ----------------------------------------------------------- */ --color-brand-canvas: #e9eef5; /* fond derriere le contenu */ --color-brand-cream: #f5f7fb; --color-brand-ivory: #f8fafc; --color-brand-beige: #eef2f7; /* survol de surface */ --color-brand-line: #d9e1ec; /* bordure forte */ --color-brand-line-soft: #e6ebf2;/* bordure de carte */ --color-brand-separator: #edf1f6; --color-surface: #ffffff; --color-surface-sunken: #f5f7fa; --color-line-inner: #e8edf3; /* --- Hero editorial --------------------------------------------------- */ /* --- Textes ------------------------------------------------------------ Les trois nuances basses ont ete assombries pour le RGAA 4.1.2 (AA) : mesurees au navigateur sur les fonds ou elles se posent reellement, elles tombaient sous 4.5:1. Teinte inchangee, seule la luminosite bouge. muted #647188 -> #5b667b pire ratio 3.86 -> 4.53 soft #7c879a -> #646c7c pire ratio 3.11 -> 4.53 faint #98a2b2 -> #666c77 pire ratio 2.21 -> 4.53 CONSEQUENCE A CONNAITRE : sous 4.5:1 il n'y a pas de place pour trois gris de texte distincts sur fond clair. "soft" et "faint" se rejoignent donc (5.28 sur blanc tous les deux) et ne se distinguent plus a l'oeil. Pour une nuance reellement plus discrete, il faut passer par la taille ou la graisse, pas par la couleur ; et reserver "faint" a des usages NON textuels (filets, glyphes decoratifs), ou le seuil n'est que de 3:1. */ --color-content-strong: #182235; --color-content: #48566c; --color-content-muted: #5b667b; --color-content-soft: #646c7c; --color-content-faint: #666c77; /* --- Etats metier : FIXES, ils ne suivent jamais l'accent --------------- */ --color-state-success-bg: #ecfdf3; --color-state-success-fg: #047857; --color-state-success-border: #bbf7d0; --color-state-warning-bg: #fffbeb; --color-state-warning-fg: #b45309; --color-state-warning-border: #fde68a; --color-state-danger-bg: #fef2f2; --color-state-danger-fg: #b91c1c; --color-state-danger-border: #fecaca; --color-state-info-bg: #e6ede2; --color-state-info-fg: #3d4f3d; --color-state-info-border: rgba(61, 79, 61, .14); /* --- Terre cuite ------------------------------------------------------- Couleur de communication de la marque. Dans le PRODUIT elle ne signale que le contenu genere par IA. Sur la vitrine elle sert d'accent editorial ponctuel, JAMAIS de couleur d'action : aucun bouton, aucun lien. */ --color-terracotta: #df704f; --color-terracotta-soft: #fff0ea; /* --- Drapeau francais --------------------------------------------------- Couleurs officielles, identiques dans les deux modes : ce n'est pas un element d'interface mais une citation. Elles ne suivent donc ni l'accent ni le theme. */ --flag-fr-blue: #000091; --flag-fr-white: #ffffff; --flag-fr-red: #e1000f; } /* ========================================================================== 3. MODE SOMBRE : valeurs brutes, definies UNE SEULE FOIS ========================================================================== Le sombre n'est jamais une inversion mecanique du clair : chaque valeur est choisie pour tenir son contraste sur --color-surface. Ces jetons prefixes --dm- ne sont pas destines a etre consommes par les composants. Ils existent pour que les deux blocs d'activation du sombre (l'attribut data-theme, et le filet @media sans JavaScript) partagent les memes valeurs au lieu de les maintenir en double. ========================================================================== */ :root { --dm-brand-canvas: #080d17; --dm-brand-cream: #0d1422; --dm-brand-ivory: #101827; --dm-brand-beige: #172235; --dm-brand-line: #29364a; --dm-brand-line-soft: #222f42; --dm-brand-separator: #1d293a; --dm-surface: #111a2b; --dm-surface-sunken: #0d1523; --dm-line-inner: #202d40; --dm-hero-bg-ivory: #0b101a; --dm-hero-bg-lilac: #151323; --dm-hero-bg-mint: #0d1a1d; --dm-hero-glow-peach: rgba(240, 138, 103, .1); --dm-hero-glow-lilac: rgba(168, 59, 181, .1); --dm-hero-glow-mint: rgba(103, 195, 221, .07); --dm-content-strong: #f3f6fb; --dm-content: #c3ccda; --dm-content-muted: #a8b3c5; --dm-content-soft: #8794a8; /* Eclairci pour le RGAA : #67758b tombait a 3.41:1 sur --dm-brand-beige et 3.72:1 sur --dm-surface. #7d899c tient 4.50:1 sur le pire des quatre fonds sombres. Teinte inchangee. */ --dm-content-faint: #7d899c; --dm-state-success-bg: #14271c; --dm-state-success-fg: #5cc98f; --dm-state-success-border: #1f4433; --dm-state-warning-bg: #2a2410; --dm-state-warning-fg: #e0a256; --dm-state-warning-border: #4a3d19; --dm-state-danger-bg: #2a1613; --dm-state-danger-fg: #e8735e; --dm-state-danger-border: #4a2620; --dm-state-info-bg: #1e281c; --dm-state-info-fg: #a7c187; --dm-state-info-border: rgba(200, 215, 180, .18); --dm-terracotta: #f08a67; --dm-terracotta-soft: #3a211d; /* Sur fond sombre l'ombre du visuel du bandeau reprend la valeur du handoff : noir dense, et un filet clair pour detacher le cadre. */ --dm-shadow-hero-visual: 0 50px 110px rgba(0, 0, 0, .6); } /* --- Activation par choix explicite (le bouton de bascule) ---------------- */ :root[data-theme="dark"] { color-scheme: dark; --accent: var(--accent-dark); --accent-solid: var(--accent-dark-solid); --accent-soft: color-mix(in srgb, var(--accent) 16%, var(--color-surface)); --accent-tint: color-mix(in srgb, var(--accent) 9%, var(--color-surface)); --color-brand-canvas: var(--dm-brand-canvas); --color-brand-cream: var(--dm-brand-cream); --color-brand-ivory: var(--dm-brand-ivory); --color-brand-beige: var(--dm-brand-beige); --color-brand-line: var(--dm-brand-line); --color-brand-line-soft: var(--dm-brand-line-soft); --color-brand-separator: var(--dm-brand-separator); --color-surface: var(--dm-surface); --color-surface-sunken: var(--dm-surface-sunken); --color-line-inner: var(--dm-line-inner); --hero-bg-ivory: var(--dm-hero-bg-ivory); --hero-bg-lilac: var(--dm-hero-bg-lilac); --hero-bg-mint: var(--dm-hero-bg-mint); --hero-glow-peach: var(--dm-hero-glow-peach); --hero-glow-lilac: var(--dm-hero-glow-lilac); --hero-glow-mint: var(--dm-hero-glow-mint); --hero-glow-peach-position: 82% 22%; --hero-glow-lilac-position: 12% 20%; --hero-glow-mint-position: 72% 58%; --color-content-strong: var(--dm-content-strong); --color-content: var(--dm-content); --color-content-muted: var(--dm-content-muted); --color-content-soft: var(--dm-content-soft); --color-content-faint: var(--dm-content-faint); --color-state-success-bg: var(--dm-state-success-bg); --color-state-success-fg: var(--dm-state-success-fg); --color-state-success-border: var(--dm-state-success-border); --color-state-warning-bg: var(--dm-state-warning-bg); --color-state-warning-fg: var(--dm-state-warning-fg); --color-state-warning-border: var(--dm-state-warning-border); --color-state-danger-bg: var(--dm-state-danger-bg); --color-state-danger-fg: var(--dm-state-danger-fg); --color-state-danger-border: var(--dm-state-danger-border); --color-state-info-bg: var(--dm-state-info-bg); --color-state-info-fg: var(--dm-state-info-fg); --color-state-info-border: var(--dm-state-info-border); --color-terracotta: var(--dm-terracotta); --color-terracotta-soft: var(--dm-terracotta-soft); --shadow-hero-visual: var(--dm-shadow-hero-visual); /* En sombre, une ombre claire produit un halo : elles restent noires. */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, .04), 0 1px 3px rgba(0, 0, 0, .03); --shadow-md: 0 4px 14px rgba(0, 0, 0, .045), 0 2px 6px rgba(0, 0, 0, .03); --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); } /* --- Filet de securite sans JavaScript ----------------------------------- Le script anti-scintillement stampe toujours data-theme sur . S'il ne tourne pas (JavaScript desactive), ce bloc prend le relais et suit le systeme. La garde :not([data-theme="light"]) est INDISPENSABLE : sans elle, un visiteur qui a explicitement choisi le clair verrait quand meme du sombre des que son systeme est en sombre. Elle ne peut pas etre simplifiee. Les valeurs ne sont pas recopiees : ce bloc reaffecte les memes jetons --dm-* que le bloc precedent. Une couleur sombre ne se modifie donc qu'a un seul endroit, dans la section 3. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --accent: var(--accent-dark); --accent-solid: var(--accent-dark-solid); --accent-soft: color-mix(in srgb, var(--accent) 16%, var(--color-surface)); --accent-tint: color-mix(in srgb, var(--accent) 9%, var(--color-surface)); --color-brand-canvas: var(--dm-brand-canvas); --color-brand-cream: var(--dm-brand-cream); --color-brand-ivory: var(--dm-brand-ivory); --color-brand-beige: var(--dm-brand-beige); --color-brand-line: var(--dm-brand-line); --color-brand-line-soft: var(--dm-brand-line-soft); --color-brand-separator: var(--dm-brand-separator); --color-surface: var(--dm-surface); --color-surface-sunken: var(--dm-surface-sunken); --color-line-inner: var(--dm-line-inner); --hero-bg-ivory: var(--dm-hero-bg-ivory); --hero-bg-lilac: var(--dm-hero-bg-lilac); --hero-bg-mint: var(--dm-hero-bg-mint); --hero-glow-peach: var(--dm-hero-glow-peach); --hero-glow-lilac: var(--dm-hero-glow-lilac); --hero-glow-mint: var(--dm-hero-glow-mint); --hero-glow-peach-position: 82% 22%; --hero-glow-lilac-position: 12% 20%; --hero-glow-mint-position: 72% 58%; --color-content-strong: var(--dm-content-strong); --color-content: var(--dm-content); --color-content-muted: var(--dm-content-muted); --color-content-soft: var(--dm-content-soft); --color-content-faint: var(--dm-content-faint); --color-state-success-bg: var(--dm-state-success-bg); --color-state-success-fg: var(--dm-state-success-fg); --color-state-success-border: var(--dm-state-success-border); --color-state-warning-bg: var(--dm-state-warning-bg); --color-state-warning-fg: var(--dm-state-warning-fg); --color-state-warning-border: var(--dm-state-warning-border); --color-state-danger-bg: var(--dm-state-danger-bg); --color-state-danger-fg: var(--dm-state-danger-fg); --color-state-danger-border: var(--dm-state-danger-border); --color-state-info-bg: var(--dm-state-info-bg); --color-state-info-fg: var(--dm-state-info-fg); --color-state-info-border: var(--dm-state-info-border); --color-terracotta: var(--dm-terracotta); --color-terracotta-soft: var(--dm-terracotta-soft); --shadow-hero-visual: var(--dm-shadow-hero-visual); --shadow-sm: 0 1px 2px rgba(0, 0, 0, .04), 0 1px 3px rgba(0, 0, 0, .03); --shadow-md: 0 4px 14px rgba(0, 0, 0, .045), 0 2px 6px rgba(0, 0, 0, .03); --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); } } /* ========================================================================== 4. DERIVEES : garder les formules, ne jamais recopier le resultat ========================================================================== Ces jetons sont declares APRES les blocs de mode pour que leurs formules se resolvent avec le --accent et la --color-surface du mode actif. Les valeurs de --accent-soft et --accent-tint sont surchargees plus haut en sombre (16 % et 9 % au lieu de 9 % et 5 %) : une teinte calculee pour un fond blanc disparait sur un fond sombre. ========================================================================== */ :root { --accent-action: var(--accent-solid); /* fond du bouton principal */ --accent-strong: var(--accent); /* texte et icone d'accent */ /* Le blanc de cette formule est un operande de melange, pas une couleur de theme : il eclaircit le plein au survol dans les deux modes. */ --accent-hover: color-mix(in srgb, var(--accent-solid) 84%, white); --accent-soft: color-mix(in srgb, var(--accent) 9%, var(--color-surface)); --accent-tint: color-mix(in srgb, var(--accent) 5%, var(--color-surface)); /* Anneau de focus : accent PLEIN, pas un lavis. A 34 % d'opacite l'anneau ne pesait que 1.88:1 sur fond clair et 1.99:1 sur fond sombre, tres loin des 3:1 exiges pour un element graphique porteur d'information (RGAA 3.2 / WCAG 1.4.11) : le focus etait visible pour qui le cherchait, pas pour qui en depend. En plein, il herite du controle deja assure par tools/check-contrast.py sur --accent (>= 4.5:1 sur les fonds des deux modes), et il s'aligne sur l'anneau des onglets, deja plein. L'anneau est pose a outline-offset : il contraste avec le FOND de la page, jamais avec le bouton qu'il entoure. */ --accent-focus-ring: var(--accent); /* Elevation du visuel du bandeau. Volontairement hors de l'echelle --shadow-sm / --shadow-md : c'est une ombre de mise en scene, pour un seul element incline en 3D, et elle n'a pas a etre reutilisable. Le handoff la donnait en noir a 60 %, ce qui convient au fond sombre et salit le fond clair : d'ou deux valeurs. Le filet est un box-shadow et non une bordure, un border sur une en 3D crenele les bords. */ --shadow-hero-visual: 0 40px 90px rgba(24, 34, 53, .22); /* Le filet suit l'ACCENT et non un gris neutre : c'est le meme traitement que les captures de la bande, et il rattache le visuel a la marque. Une seule definition suffit pour les deux modes, un melange d'accent avec du transparent se pose aussi bien sur clair que sur sombre : il n'y a donc pas de variante --dm- a maintenir ici. */ --hairline-hero-visual: 0 0 0 1px color-mix(in srgb, var(--accent) 34%, transparent); /* Ombres : teinte froide derivee du texte fort, jamais du noir pur. */ --shadow-sm: 0 3px 14px color-mix(in srgb, var(--color-content-strong) 6%, transparent), 0 1px 3px color-mix(in srgb, var(--color-content-strong) 5%, transparent); --shadow-md: 0 4px 14px color-mix(in srgb, var(--color-content-strong) 7%, transparent), 0 2px 6px color-mix(in srgb, var(--color-content-strong) 5%, transparent); /* Porte de 18 % a 28 %, la valeur que le mode sombre utilisait deja : le halo seul restait trop faible pour signaler le focus d'un champ. Il complete le passage de la bordure a l'accent plein, qui reste l'indice principal. */ --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); } /* ========================================================================== 5. TYPOGRAPHIE, RAYONS, MOUVEMENT ========================================================================== Polices AUTO-HEBERGEES, aucun appel a Google Fonts ni a un CDN : exigence RGPD (l'adresse IP du visiteur partirait chez un tiers sans base legale) autant que de performance. Les @font-face vivent dans fonts.css, pas ici. Une seule famille pour les titres. Fredoka est reservee aux titres chaleureux (accueil, etats vides). Aucune police a empattements nulle part. ========================================================================== */ :root { --font-sans: "Archivo Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --font-mono: "Spline Sans Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --font-display-cozy: "Fredoka Variable", "Archivo Variable", sans-serif; /* Echelle typographique fluide. Les petits paliers restent compacts pour les interfaces de demonstration ; le corps et les titres gagnent de l'ampleur avec l'ecran sans provoquer de rupture a un breakpoint. */ --text-micro: clamp(.72rem, .69rem + .1vw, .78rem); --text-caption: clamp(.78rem, .75rem + .12vw, .85rem); --text-body-sm: clamp(.91rem, .88rem + .13vw, .98rem); --text-body: clamp(1rem, .96rem + .18vw, 1.075rem); --text-title: clamp(1.15rem, 1.08rem + .28vw, 1.3rem); --text-section: clamp(1.3rem, 1.18rem + .48vw, 1.58rem); --text-page: clamp(1.72rem, 1.48rem + .85vw, 2.2rem); --text-display: clamp(2.15rem, 1.7rem + 1.65vw, 3.1rem); /* Rythme de lecture commun aux pages editoriales. */ --leading-tight: 1.14; --leading-heading: 1.22; --leading-copy: 1.68; --leading-compact: 1.52; --measure-narrow: 48ch; --measure-copy: 66ch; --measure-wide: 78ch; /* Espacements fluides : meme cadence sur mobile et grand ecran. */ --space-section: clamp(4rem, 3rem + 3.5vw, 6.75rem); --space-heading: clamp(1.75rem, 1.4rem + 1vw, 2.5rem); --space-block: clamp(1.35rem, 1.1rem + .8vw, 2rem); --space-copy: clamp(.85rem, .72rem + .3vw, 1.05rem); --space-gutter: clamp(1.1rem, .8rem + 1.2vw, 2rem); /* Geometrie des icones editoriales. */ --icon-tile-size: clamp(2.5rem, 2.35rem + .35vw, 2.75rem); --icon-glyph-size: clamp(1.125rem, 1.05rem + .2vw, 1.25rem); /* Rayons */ --radius-control: 9px; --radius-inner: 12px; --radius-card: 14px; --radius-modal: 18px; --radius-pill: 999px; /* Mouvement */ --motion-fast: .14s; --motion-base: .25s; --motion-slow: .35s; } @media (prefers-reduced-motion: reduce) { :root { --motion-fast: 0s; --motion-base: 0s; --motion-slow: 0s; } }