/* =================================================================== Les couleurs d'Ascendra, et elles vivent toutes ici. ------------------------------------------------------------------- Deux modes : la nuit, qui est le site tel qu'il a toujours ete, et le jour, ajoute le 26 aout 2026 a la demande de Joris. LE MODE NUIT EST LE DEFAUT, ET C'EST UN CHOIX. Le site n'ecoute pas le reglage du systeme d'exploitation : sur un ordinateur regle en clair, il resterait sombre tant que le visiteur n'a pas touche la bascule. Sinon la moitie des visiteurs decouvrirait Ascendra dans une identite que personne n'a validee. « La version actuelle serait donc la nuit », dit le pense-bete : la nuit est la marque, le jour est un confort qu'on choisit. LA REGLE DU VERT, ET C'EST LA RAISON D'ETRE DE CE FICHIER. La charte demande environ 2 % de vert. Mesure du 26 aout 2026 : le vert pesait 36 % des couleurs declarees de la page d'accueil, en 61 nuances differentes de la meme teinte. Une couleur employee partout ne signale plus rien, et c'est pour cela qu'aucun montant du catalogue ne se reperait d'un coup d'oeil. D'ou l'echelle courte ci-dessous. Le vert n'a plus que cinq emplois, et chacun a son jeton : --accent le vert plein : un bouton, un montant, une coche --accent-ink du texte vert pose sur le fond de la page --accent-fonce une surface verte secondaire, qui ne doit pas crier --accent-line une bordure qui doit se voir sans crier --accent-wash un fond tres leger, pour poser une zone Tout le reste est neutre. AVANT D'ECRIRE UNE NOUVELLE NUANCE DE VERT, chercher laquelle de ces quatre on voulait : il y en a une. =================================================================== */ :root { color-scheme: dark; /* --- Les fonds, du plus profond au plus clair ------------------- */ --bg: #08100e; --surface: #111916; --surface-2: #151f1b; --surface-3: #1b2723; /* --- Les traits ------------------------------------------------- */ --line: rgba(190, 211, 201, .18); --line-strong: rgba(190, 211, 201, .34); /* --- Le texte, trois niveaux et pas un de plus ------------------ */ --text: #f5f7f6; /* ce qu'on lit */ --muted: #b6c1bc; /* ce qui accompagne */ --faint: #8b9793; /* ce qui date, ce qui compte a peine */ /* --- Le vert, ses quatre emplois -------------------------------- */ --accent: #55e695; --accent-ink: #6ceba3; /* Le vert sombre des surfaces secondaires. Le bouton « Nous contacter » de l'en-tete le prend : en vert plein clair il criait plus fort que le bouton principal de la page, ce qui inverse la hierarchie. Demande de Joris le 26 aout 2026, « mettre un vert plus fonce ». Il porte du texte blanc a 4,7 pour 1 et se detache du fond de l'en-tete a 4,1 : les deux tiennent. */ --accent-fonce: #1a8450; --accent-line: rgba(85, 230, 149, .38); --accent-wash: rgba(85, 230, 149, .10); /* Ce qui s'ecrit PAR-DESSUS du vert plein. Il bascule avec le mode : texte sombre sur le vert clair de la nuit, texte blanc sur le vert sombre du jour. L'oublier donne un bouton illisible dans un mode sur deux, et ca ne se voit pas tant qu'on ne bascule pas. */ --on-accent: #04160b; /* --- Les etats. Ils ne sont pas l'accent, et ne le remplacent pas. */ --danger: #ff7f8f; --danger-wash: rgba(255, 127, 143, .12); --warn: #ffa96b; --warn-wash: rgba(255, 169, 107, .12); /* --- Ombres ------------------------------------------------------ */ --shadow: 0 1px 2px rgba(0, 0, 0, .40), 0 10px 30px rgba(0, 0, 0, .30); --shadow-sm: 0 1px 2px rgba(0, 0, 0, .34); /* --- Herites, gardes pour ne rien casser ------------------------- */ /* --green et --line-strong sont appeles dans pres de 300 endroits. Les retirer aujourd'hui deshabillerait des pages entieres, en silence, comme une feuille de style supprimee. Ils pointent donc vers les nouveaux jetons : une seule verite, deux noms. */ --green: var(--accent); --green-soft: #d5f5e2; --blue-soft: #9ad7f5; /* --- Lisibilite. Le public a plus de cinquante ans, sept sur dix. - */ --fs-base: 16px; /* plancher du texte courant */ --fs-lift: 17px; /* les paragraphes qu'on lit vraiment */ --tap: 44px; /* hauteur minimale d'une zone qu'on touche */ /* --- Les couleurs de famille du catalogue ------------------------ Chaque famille d'offres a sa teinte, qui vient du catalogue et pas d'ici. Elle ne s'ecrit jamais telle quelle dans un texte : on la melange avec --text, et cette dose est ce qui la rend lisible. 78 % de nuit, ou la teinte doit ressortir du noir. 46 % de jour, ou la meme teinte, posee sur du blanc, tombe sous le seuil lisible. Une seule regle dans les feuilles, deux valeurs selon le mode. */ --dose-famille: 78%; /* --- Les trois polices, et ce que chacune a le droit de faire ----- Orbitron est dessinee pour la science fiction. Elle porte autant le cote jeu video que les couleurs, et la charte le refuse. Choix de Joris du 26 aout 2026 : elle reste sur le nom ASCENDRA de l'en-tete, ou elle fait logo et signe la marque, et elle quitte les titres des pages. Archivo prend leur place : plus ferme, plus credible, et lisible en petit, ce qu'Orbitron n'est pas. N'ECRIRE UNE POLICE NULLE PART AILLEURS. Une page qui appelle une police sans la charger retombe en silence sur une police generique, titres compris : c'est arrive a trois pages le 23 aout 2026. */ --ff-marque: Orbitron, "Segoe UI", system-ui, sans-serif; --ff-titre: Archivo, "Segoe UI", system-ui, sans-serif; --ff-texte: Inter, "Segoe UI", system-ui, sans-serif; } /* =================================================================== Le mode jour. ------------------------------------------------------------------- Ce n'est pas une inversion : un fond blanc ne se traite pas comme un fond noir retourne. Deux pieges payes d'avance ici. 1. LE VERT DE LA MARQUE EST ILLISIBLE SUR BLANC. Son contraste avec le blanc est de 1,6 pour 1, la ou il en faut 4,5. Ecrit tel quel, un montant en vert disparait de la page. Le jour a donc son vert a lui, plus sombre, qui garde la meme famille mais se lit. 2. LE TEXTE POSE SUR LE VERT S'INVERSE AUSSI. Noir sur le vert clair de la nuit, blanc sur le vert sombre du jour. C'est --on-accent, et c'est la seule facon que le meme bouton se lise des deux cotes. =================================================================== */ :root[data-theme="light"] { color-scheme: light; --bg: #f2f5f3; --surface: #ffffff; --surface-2: #eaefec; --surface-3: #dfe6e2; --line: rgba(13, 21, 18, .13); --line-strong: rgba(13, 21, 18, .26); --text: #0d1512; --muted: #4c5954; /* Assombri par rapport au gris de la nuit : sur un fond clair, le meme gris tombe a 4 pour 1 et cesse d'etre lisible. Celui-ci tient 4,6 sur le fond le plus clair du mode, donc partout. */ --faint: #5c6763; --accent: #0f7a46; --accent-ink: #0b6b3c; --accent-fonce: #0b6b3c; --accent-line: rgba(15, 122, 70, .34); --accent-wash: rgba(15, 122, 70, .09); --on-accent: #ffffff; --danger: #c0392f; --danger-wash: rgba(192, 57, 47, .10); --warn: #a2550f; --warn-wash: rgba(162, 85, 15, .10); --shadow: 0 1px 2px rgba(13, 21, 18, .07), 0 10px 30px rgba(13, 21, 18, .07); --shadow-sm: 0 1px 2px rgba(13, 21, 18, .07); --dose-famille: 46%; --green-soft: #0b6b3c; --blue-soft: #10618a; } /* Le fondu demande a l'activation de la bascule. Il porte sur les couleurs seules : une transition sur « all » ferait ramer chaque survol de la page, et la charte interdit ce qui ralentit. */ :root.theme-anime, :root.theme-anime body, :root.theme-anime .site-header, :root.theme-anime .site-footer { transition: background-color .38s ease, color .38s ease, border-color .38s ease; } @media (prefers-reduced-motion: reduce) { :root.theme-anime, :root.theme-anime body, :root.theme-anime .site-header, :root.theme-anime .site-footer { transition: none; } }