/* ================================================================== style-commun.css — la teinte d'accent et le fond illustre, pour TOUTES les pages du site. POURQUOI UN FICHIER, ET PAS UNE RETOUCHE PAR PAGE. Le site compte huit pages, chacune avec sa propre feuille de style et sa propre declaration de « --signal ». Changer la teinte revenait a passer huit fois, et a oublier la neuvieme page le jour ou elle existera. Ici, une ligne dans l'en-tete de chaque page suffit : Elle se pose APRES la feuille de la page, pour que ses variables l'emportent. ================================================================== */ :root { /* LA TEINTE D'ACCENT. Le vert sourd d'avant - #2f6f5e - passe au jaune vif de la variante 4. Toutes les pages le lisent par « --signal » : les titres, les liens, les boutons et les traits suivent sans qu'aucune autre regle ne bouge. */ --signal: #d8ff3e; /* SUR FOND CLAIR, LE VIF EST ILLISIBLE - un jaune a 85 % de clarte sur un papier a 92 % ne se distingue pas. Dans les boites blanches le texte d'accent passe donc au NOIR d'encre, pas a un vert assourdi : c'est net, et cela ne cree pas une troisieme couleur a tenir. */ --signal-sombre: var(--ink, #16191d); /* LE FOND DES GRANDES SURFACES : l'ardoise bleutee de la visionneuse 3D, celle qu'on voit derriere chaque maquette dans les outils - la scene y est peinte en [0.13, 0.15, 0.17], soit #22262b. Des bleus marine plus vifs ont ete essayes ; ils criaient a cote des pages d'outil. Celui-ci est le leur, et le site parle d'une seule voix. Une seule declaration : changer cette ligne change tout le site. */ --void: #22262b; } /* SUR FOND CLAIR, LE VIF EST ILLISIBLE. Un jaune a 85 % de clarte sur un papier a 92 % ne se distingue pas : le texte d'accent prend donc sa version sombre partout, sauf la ou le fond est noir. */ body { --accent-lisible: var(--signal-sombre); } .fond-illustre, .fond-illustre *, .sombre, .sombre * { --accent-lisible: var(--signal); } /* LE FOND ILLUSTRE : le bureau de robots, en gris, pose tres en retrait sous un voile sombre. L'opacite et le degrade radial sont ceux de la variante 4 - c'est leur combinaison qui donne la profondeur, pas l'image seule. */ .fond-illustre { position: relative; background: var(--void); overflow: hidden; isolation: isolate; } /* L'IMAGE EN RETRAIT, COMME DANS LA VARIANTE 4 : posee a 16 %, en gris et legerement contrastee. A pleine opacite elle disputait la lecture au titre ; en retrait, elle donne de la matiere sans jamais passer devant. */ .fond-illustre::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url("/media/bureau-robots-900.webp") center / cover no-repeat; opacity: .22; filter: grayscale(1) contrast(1.1); } @media (min-width: 901px) { .fond-illustre::before { background-image: url("/media/bureau-robots.webp"); } } /* Le degrade qui efface l'image sur les bords et la laisse respirer au centre : sans lui, le motif tire l'oeil loin du texte. */ .fond-illustre::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(62% 62% at 50% 44%, transparent, var(--void) 100%); } /* Sur telephone l'image n'apporte rien et coute un telechargement. */ @media (max-width: 620px) { .fond-illustre::before { display: none; } } /* Qui demande moins d'effets recoit le fond uni. */ @media (prefers-contrast: more) { .fond-illustre::before { display: none; } .fond-illustre::after { background: var(--void); } } /* LE VERT DANS LES BOITES BLANCHES. Les pages ont des cartes, des encadres et des panneaux sur fond clair ou le texte d'accent ne se lisait plus. Il y passe au noir d'encre. */ .carte, .boite, .panneau, .outil, .barre, .bloc, article, .module, section[style*="background:#fff"], section[style*="background: #fff"] { --signal: var(--signal-sombre); } /* ================================================================== LA MARQUE EN HAUT A GAUCHE, STRICTEMENT LA MEME SUR TOUTES LES PAGES (Jeremy, 18 octobre 2026). Une seule definition, ici. Chaque page porte le meme balisage, celui de l'accueil : TheNewEngineerHVAC - MEP Les pages gardaient chacune leurs regles « .marque » et « #titre » : 16 px ici, 38 px la, le nom en deux mots ailleurs, une ombre portee sur les pages 3D. Les selecteurs ci-dessous sont plus precis que les leurs (« header a.marque », « #titre a.marque ») et cette feuille se lit apres la leur : c'est elle qui l'emporte, partout. ================================================================== */ a.marque, header a.marque, #titre a.marque { display: inline-flex; align-items: center; gap: .22em; font-family: ui-sans-serif, "Segoe UI", Roboto, sans-serif; font-size: 48px; font-weight: 600; font-style: normal; letter-spacing: -.022em; line-height: 1; white-space: nowrap; color: #fff; text-decoration: none; text-shadow: none; opacity: 1; } a.marque:hover, header a.marque:hover, #titre a.marque:hover { opacity: 1; color: #fff; } a.marque .robot-marque { height: 1em; width: auto; display: block; flex: none; } a.marque .marque-metier { white-space: nowrap; font-size: .5em; } /* SUR LES PAGES 3D, la marque est posee sur la scene, a la place exacte qu'elle occupe dans la barre de l'accueil : a 28 px du bord gauche, centree dans 84 px de haut - donc 18 px sous le bord. */ #titre.porte-marque { top: 18px; left: 28px; display: flex; line-height: 1; } /* Les memes paliers que l'accueil, sur telephone, ou la marque passe en haut et au centre (14 px sous le bord). */ @media (max-width: 620px) { a.marque, header a.marque, #titre a.marque { font-size: 32px; } #titre.porte-marque { top: 14px; left: 0; right: 0; justify-content: center; } } @media (max-width: 400px) { a.marque, header a.marque, #titre a.marque { font-size: 19px; } } /* SUR LES PAGES D'OUTILS ET DE VISUALISATION, LA MARQUE DEUX FOIS PLUS PETITE (Jeremy, 18 octobre 2026) : la scene 3D est le sujet, la marque s'efface. Meme dessin, meme place a gauche, moitie de taille. */ #titre.porte-marque a.marque { font-size: 24px; } @media (max-width: 620px) { #titre.porte-marque a.marque { font-size: 16px; } } @media (max-width: 400px) { #titre.porte-marque a.marque { font-size: 12px; } } /* ================================================================== LE PANNEAU DE CONNEXION, PAREIL SUR TOUTES LES PAGES (Jeremy, 31 octobre 2026 : « le bouton est illisible, vert clair et inscription en blanc »). Chaque page a sa copie du panneau et ses regles ; celles-ci passent apres et les remplacent. Le panneau est toujours clair (blanc ou papier) : le bouton prend l'ardoise du site avec un texte blanc, et les liens l'encre - jamais le jaune vif, illisible sur fond clair. ================================================================== */ #panneauCompte h2 { color: var(--ink, #16191d); } #panneauCompte .action { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; padding: 9px 12px; background: var(--void); color: #fff; border: 1px solid var(--void); border-radius: 4px; font: inherit; font-size: 13px; font-weight: 600; letter-spacing: .01em; cursor: pointer; } #panneauCompte .action:hover:not([disabled]) { background: #343a42; border-color: #343a42; } #panneauCompte .action:focus-visible { outline: 2px solid var(--void); outline-offset: 2px; } #panneauCompte .action[disabled] { opacity: .5; cursor: default; } /* « Créer un compte » / « J'ai deja un compte » : un lien sobre, a l'encre, souligne seulement au survol. */ #panneauCompte .bascule { display: block; width: 100%; margin: 2px 0 0; padding: 6px 0 0; background: none; border: 0; border-top: 1px solid var(--rule, #c9c5bc); color: var(--ink, #16191d); font: inherit; font-size: 12.5px; font-weight: 500; text-align: center; text-decoration: none; cursor: pointer; } #panneauCompte .bascule:hover { text-decoration: underline; text-underline-offset: 3px; } /* « Mot de passe oublie ? » : petit, discret, cale a droite sous le champ du mot de passe (mot-de-passe.js le pose la). */ #panneauCompte .oubli { display: block; width: fit-content; align-self: flex-end; margin: -4px 0 6px auto; padding: 0; background: none; border: 0; color: #5c5f63; font: inherit; font-size: 12px; text-decoration: none; cursor: pointer; } #panneauCompte .oubli:hover { color: var(--ink, #16191d); text-decoration: underline; text-underline-offset: 3px; } #panneauCompte .oubli[hidden], #panneauCompte .bascule[hidden], #panneauCompte .action[hidden] { display: none; } /* Les messages : le vert « envoye » doit se lire sur fond clair. */ #panneauCompte p.ok { color: #2f6f5e; } #panneauCompte p.err { color: #a23b2c; }