/* ===================================================================== KLIMATOVA · jetons de design Chantier palette : UNIQUEMENT les couleurs et les dégradés (préfixe --k-). Les autres chantiers (typographie, espacements, rayons) complètent ce fichier dans leur propre bloc :root, en dessous de celui-ci. Toutes les valeurs viennent du flyer (moyennes de pixels sur des zones propres, voir analyse/palette.md), puis nettoyées. ===================================================================== */ :root { /* --------------------------------------------------------------- 1. BLEUS DE MARQUE --------------------------------------------------------------- */ /* Bleu Klimatova. Couleur PRINCIPALE. Mesuré : carrés du logo #016DFE, ronds des icônes #0370FC à #016FFD. Rôle : logo, bouton principal, icônes, liens sur fond clair. Blanc dessus : 4,55 (AA). */ --k-bleu: #006DFE; /* Bleu appuyé. Survol et appui du bouton principal. 85 % bleu Klimatova + 15 % bleu nuit. Blanc dessus : 5,63 (AA). */ --k-bleu-appuye: #0060DE; /* Bleu lueur. Lueur lumineuse du haut du flyer (moyenne #0176EB). Rôle : halos et reflets du fond sombre, jamais pour du texte. */ --k-bleu-lueur: #0076EB; /* Bleu profond. Coin haut gauche du flyer (moyenne #014EB1). Rôle : étape entre la lueur et le bleu nuit dans les dégradés de fond. */ --k-bleu-profond: #014EB1; /* Bleu ciel. Le « UN PROJET ? » du bandeau (moyenne #51BCEF). Même teinte (199°) que la glace. Rôle : surtitres courts sur fond nuit. Sur bleu nuit : 8,57. Jamais sur fond clair (trop pâle). */ --k-bleu-ciel: #51BCEF; /* --------------------------------------------------------------- 2. GLACE (ACCENT) : le mot « AUJOURD'HUI » du flyer Dégradé vertical à 3 arrêts, aucun changement de gauche à droite. Mesuré dans les lettres : haut #9DDEFA, pic à 48 % #DEF3FD, bas #93DAFA. Seulement sur fond sombre (bleu nuit, photo voilée). --------------------------------------------------------------- */ --k-glace-haut: #9CDDFA; /* haut des lettres */ --k-glace-pic: #DEF3FD; /* bande claire à 48 % de la hauteur */ --k-glace-bas: #93D9FA; /* bas des lettres, un peu plus soutenu */ --k-glace: #B7E6FC; /* aplat moyen, quand un dégradé est impossible */ /* Glace profonde : la même idée pour un FOND CLAIR (blanc, blanc glacé). Bords en bleu appuyé, bande plus claire au milieu. Sur blanc : 5,63 en haut, 3,53 au pic, 6,41 en bas (gros titres : AA). */ --k-glace-profonde-haut: #0060DE; --k-glace-profonde-pic: #2A86FF; --k-glace-profonde-bas: #0057D0; /* --------------------------------------------------------------- 3. BLEUS NUIT ET ENCRES --------------------------------------------------------------- */ /* Bleu nuit. Le plus profond du fond du flyer (moyenne #00152B). Rôle : fond de la hero, voile sur la photo, base des sections sombres. Blanc dessus : 18,39. */ --k-nuit: #00152B; /* Bleu marine. Bord gauche du flyer #01254C, bandeau contact #012349. Rôle : sections sombres, cartes posées sur le bleu nuit. Blanc dessus : 15,50. */ --k-marine: #01244B; /* Encre. Bleu nuit des titres « CLIMATISATION » et « TRAVAUX INTÉRIEURS » (moyenne #0A1B64, plus violacé que le fond). Rôle : titres et texte sur fond clair. Sur blanc : 15,51. */ --k-encre: #0A1B64; /* Encre douce. 70 % encre sur blanc. Rôle : texte secondaire sur fond clair. Sur blanc : 6,12. */ --k-encre-douce: #545F92; /* --------------------------------------------------------------- 4. CLAIRS --------------------------------------------------------------- */ --k-blanc: #FFFFFF; /* texte sur fond sombre, cartes */ --k-blanc-glace: #F0F8FE; /* fonds de sections claires (fond des cartes du flyer) */ --k-brume: #D2EBFC; /* pastilles, bordures, séparateurs sur fond clair */ /* Texte secondaire sur fond sombre : blanc à 72 %. Sur bleu nuit, rendu #B8BDC4 : 9,73. */ --k-blanc-doux: rgb(255 255 255 / 0.72); /* --------------------------------------------------------------- 5. VERRE (barre de navigation façon Railroad) Couleurs seulement : le flou (backdrop-filter) est l'affaire du chantier de la barre. Texte blanc sur ce verre posé sur le bleu nuit : 14,21. Sur la photo, vérifier à l'œil. --------------------------------------------------------------- */ --k-verre-fond: rgb(255 255 255 / 0.10); --k-verre-fond-survol: rgb(255 255 255 / 0.16); --k-verre-bord: rgb(255 255 255 / 0.22); --k-verre-reflet: rgb(255 255 255 / 0.40); /* filet clair du bord haut */ /* --------------------------------------------------------------- 6. CANAUX RVB (pour composer une transparence) Usage : rgb(var(--k-nuit-rvb) / 0.6) --------------------------------------------------------------- */ --k-nuit-rvb: 0 21 43; --k-marine-rvb: 1 36 75; --k-bleu-rvb: 0 109 254; --k-lueur-rvb: 0 118 235; --k-glace-rvb: 183 230 252; /* --------------------------------------------------------------- 7. DÉGRADÉS --------------------------------------------------------------- */ /* Glace, arrêts calés sur la HAUTEUR DES LETTRES (0 % = haut des capitales, 100 % = ligne de base). Pour un SVG ou une boîte qui épouse exactement les lettres. */ --k-degrade-glace: linear-gradient(180deg, var(--k-glace-haut) 0%, var(--k-glace-pic) 48%, var(--k-glace-bas) 100%); /* Glace, prêt pour ANTON (le titre). Mêmes couleurs, arrêts recalés sur la boîte d'un texte en ligne : les capitales d'Anton occupent de 21,05 % à 78,14 % de cette boîte, quelle que soit l'interligne. Écart avec le flyer une fois rendu : delta E moyen 0,90 (invisible). MODE D'EMPLOI (sur un , PAS sur le bloc du titre) : .glace { background-image: var(--k-degrade-glace-anton); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; } Pièges : - utiliser background-image, pas le raccourci background : il remet background-clip à zéro et peint un rectangle plein ; - box-decoration-break: clone donne à CHAQUE ligne son propre dégradé quand le mot passe à la ligne ; - autre police que Anton : recalculer les arrêts avec la formule de analyse/palette.md. */ --k-degrade-glace-anton: linear-gradient(180deg, var(--k-glace-haut) 21.05%, var(--k-glace-pic) 48.45%, var(--k-glace-bas) 78.14%); /* Glace profonde (fond clair), mêmes deux versions. */ --k-degrade-glace-profonde: linear-gradient(180deg, var(--k-glace-profonde-haut) 0%, var(--k-glace-profonde-pic) 48%, var(--k-glace-profonde-bas) 100%); --k-degrade-glace-profonde-anton: linear-gradient(180deg, var(--k-glace-profonde-haut) 21.05%, var(--k-glace-profonde-pic) 48.45%, var(--k-glace-profonde-bas) 78.14%); /* Fond nuit simple : marine en haut, bleu nuit en bas. */ --k-degrade-nuit: linear-gradient(180deg, var(--k-marine) 0%, var(--k-nuit) 100%); /* Fond nuit vers bleu vif, comme le haut du flyer : une lueur bleue colle au bord haut puis tombe vite vers le bleu nuit. Mesuré du haut vers le bas (fond seul) : bord haut #0158C0 à gauche et #0077EC à droite, #014EAC à 3 %, #01244B vers 11 %, #00152B dès 19 % de la hauteur de la zone sombre. Calé pour une hero de la hauteur de l'écran. */ --k-degrade-nuit-vif: linear-gradient(180deg, var(--k-bleu-lueur) 0%, var(--k-bleu-profond) 3%, var(--k-marine) 11%, var(--k-nuit) 19%, var(--k-nuit) 100%); /* Lueur bleue du haut, à poser PAR-DESSUS un fond sombre ou une photo. */ --k-lueur-haut: radial-gradient(70% 55% at 50% 0%, rgb(var(--k-lueur-rvb) / 0.45) 0%, rgb(var(--k-lueur-rvb) / 0) 70%); /* Voile pour la photo de la hero (proposition) : bleu nuit en haut (barre de navigation) et en bas, marine plus léger au milieu. Testé sur un ciel clair : sans voile la glace tombe à 1,8 (illisible), avec ce voile 4,35 (pire 5 % des pixels : 3,97), le blanc 6,64. */ --k-voile-photo: linear-gradient(180deg, rgb(var(--k-nuit-rvb) / 0.62) 0%, rgb(var(--k-marine-rvb) / 0.45) 38%, rgb(var(--k-marine-rvb) / 0.52) 66%, rgb(var(--k-nuit-rvb) / 0.86) 100%); } /* ===================================================================== Chantier MAQUETTE : verre clair et filets pour les fonds clairs. Ajouté le 5 octobre 2026 pour maquette/index.html. Le verre du bloc 5 (blanc à 10 %) est fait pour un fond sombre ; la page est claire, il lui faut un verre plus blanc. ===================================================================== */ :root { --k-encre-rvb: 10 27 100; --k-blanc-rvb: 255 255 255; /* Verre clair : menu, barre « Votre besoin », badges, étiquettes. */ --k-verre-clair: rgb(var(--k-blanc-rvb) / 0.58); --k-verre-clair-fort: rgb(var(--k-blanc-rvb) / 0.80); --k-verre-clair-dense: rgb(var(--k-blanc-rvb) / 0.94); /* carte de contact au téléphone */ /* Verre net : étiquettes des photos et carte de contact. Assez blanc pour ne pas prendre la couleur de la photo derrière (moyenne rendue > 240). */ --k-verre-clair-net: rgb(var(--k-blanc-rvb) / 0.90); --k-verre-clair-bord: rgb(var(--k-blanc-rvb) / 0.92); /* Liseré du bas qui donne l'épaisseur du verre. */ --k-verre-clair-lisere: rgb(var(--k-encre-rvb) / 0.08); /* Filets et contours sur fond clair. */ --k-filet: rgb(var(--k-encre-rvb) / 0.10); --k-contour: rgb(var(--k-encre-rvb) / 0.16); /* La seule ombre de la page : sous le verre posé sur une photo (étiquettes, carte de contact sur ordinateur). Jamais sur du blanc. */ --k-ombre-verre: 0 24px 60px -32px rgb(var(--k-encre-rvb) / 0.30); /* Voile blanc derrière le menu ouvert du téléphone (ajouté le 5 octobre, finalisation). */ --k-voile-menu: rgb(var(--k-blanc-rvb) / 0.55); /* Formulaire (ajouté le 6 octobre) : un champ à corriger et un envoi raté. Rouge brique, 6,6:1 sur le blanc : lisible en petit, sans crier. Seulement pour ces messages. */ --k-alerte: #B42318; }