/* ========================================================================= SITERO — LA PALETTE DE MARQUE ------------------------------------------------------------------------- Cette feuille ne contient QUE des couleurs. Elle remplace l'ancien turquoise par la palette du nouveau logo, partout, sans toucher aux autres fichiers. À CHARGER EN DERNIER, après style.css ET après premium.css : posé juste sous la ligne de premium.css. Si elle est chargée avant, les anciennes couleurs reprennent le dessus et rien ne change. LA PALETTE #1166F9 bleu franc le seul assez foncé pour porter du texte blanc #2297FD bleu clair dégradés, survols, accents sur fond noir #2FC1FF bleu ciel dégradés, liserés, surfaces claires #31EEF5 turquoise clair fins de dégradé, accents sur fond noir #FCFCFC blanc cassé fond très clair UNIQUEMENT. Jamais dans un logo, jamais dans un aplat coloré : c'est la consigne de Thibault. LA RÈGLE QUI COMMANDE TOUT LE RESTE Cette palette est CLAIRE. Du texte blanc posé dessus se mesure : blanc sur #1166F9 ....... 4,89:1 passe (minimum exigé : 4,5:1) blanc sur #2297FD ....... 3,04:1 ne passe pas blanc sur #2FC1FF ....... 2,06:1 illisible blanc sur #31EEF5 ....... 1,43:1 invisible Donc : dès qu'il y a du texte blanc, le fond est le bleu franc ou plus foncé. Les trois autres couleurs servent aux dégradés, aux liserés, aux icônes et aux fonds très pâles — jamais sous du texte blanc. DEUX TONS EN DEHORS DE LA PALETTE, ET POURQUOI #0F5CE8 bleu franc descendu d'un cran, réservé au TEXTE sur fond clair. Le bleu franc lui-même mesure 4,49:1 sur le gris papier du site : il rate le seuil de 4,5:1 d'un cheveu. Celui-ci donne 5,19:1 sur papier et 5,65:1 sur blanc. #0A3FA8 bleu profond, pour les bas de dégradé et les fonds foncés. La palette ne descend pas plus bas que #1166F9 ; il fallait un point d'appui sombre, obtenu en assombrissant le bleu franc sans changer sa teinte (219° contre 218°). ========================================================================= */ :root{ /* les quatre couleurs de la marque, telles que Thibault les a données */ --pal-franc:#1166F9; --pal-clair:#2297FD; --pal-ciel:#2FC1FF; --pal-turquoise:#31EEF5; /* les deux tons de service décrits plus haut */ --pal-profond:#0A3FA8; --pal-texte:#0F5CE8; } /* ========================================================================= 1. LES VARIABLES HISTORIQUES DU SITE Les noms ne changent pas — tout le site les utilise déjà. Seules les valeurs changent. ========================================================================= */ :root{ /* --blue est l'ancien nom, --tint le nom moderne : même couleur. */ --blue:var(--pal-franc); --blue-h:var(--pal-clair); --blue-d:var(--pal-profond); --tint:var(--pal-franc); --tint-h:var(--pal-clair); --tint-l:var(--pal-ciel); --tint-d:var(--pal-profond); /* Le dégradé des boutons principaux. Il garde le geste d'origine (clair en haut à gauche, profond en bas à droite), mais chaque arrêt porte du texte blanc : 4,89 / 6,01 / 9,17. Le bleu ciel n'y entre pas — il ferait retomber le premier arrêt à 2,06:1. */ --tint-grad:linear-gradient(135deg,#1166F9 0%,#0F58E0 46%,#0A3FA8 100%); /* LE SECOND ACCENT, ANCIENNEMENT DORÉ. Le doré existait parce qu'un seul turquoise ne suffisait pas à animer la page. La nouvelle palette a quatre tons : le second accent vient maintenant de la palette elle-même. Sur fond clair c'est le bleu profond, sur fond foncé le turquoise clair — celui qui termine le dégradé du logo. Le nom « gold » est conservé pour ne rien casser. Voir le rapport : c'est une PROPOSITION, pas une suppression. */ --gold:var(--pal-profond); --gold-l:var(--pal-turquoise); /* --mint (#0f8a52) n'est utilisé nulle part dans le site. On le laisse tel quel : le retirer est le travail de quelqu'un qui touche à style.css, pas de cette feuille. */ } /* ========================================================================= 2. LES COULEURS DE TEXTE ACCENTUÉ (elles viennent de premium.css) premium.css avait déjà compris le problème : la couleur d'une marque claire ne peut pas servir de couleur de texte telle quelle. On garde exactement sa mécanique, avec les valeurs bleues. --tint-txt : 5,65:1 sur blanc, 5,19:1 sur le gris papier --gold-txt : 9,17:1 sur blanc, 8,42:1 sur le gris papier ========================================================================= */ :root{ --tint-txt:var(--pal-texte); --gold-txt:var(--pal-profond); } /* La sélection de texte reprend la couleur de la marque. */ ::selection{background:rgba(17,102,249,.15);color:var(--ink)} /* L'onglet courant du menu : il était écrit en --tint, qui mesure 4,49:1 sur une capsule posée au-dessus du gris papier. En --tint-txt : 5,42:1. */ .nav a[aria-current="page"]{color:var(--tint-txt);background:rgba(17,102,249,.09)} /* Sur fond foncé, l'onglet courant était écrit dans la couleur claire de la marque. Au-dessus du panneau d'accueil, ce bleu ciel sur la capsule ne mesure que 2,60:1 : c'est la PASTILLE qui prend la couleur, et le libellé reste blanc (5,35:1). */ .hdr.on-dark .nav a[aria-current="page"]{color:#fff;background:rgba(47,193,255,.16)} .mnav a[aria-current="page"]{color:var(--tint-txt)} /* ========================================================================= 3. LES COULEURS ÉCRITES EN DUR Ces valeurs-là n'étaient dans aucune variable : il faut les reprendre une par une. Le fichier et la ligne d'origine sont indiqués pour qu'on puisse retrouver ce qu'on remplace. ========================================================================= */ /* --- boutons principaux --------------------------------------------------- style.css 119-121 et premium.css 498-508 : ombres et dégradés turquoise. Le survol s'ENFONCE d'un ton, comme le voulait premium.css : éclaircir ferait repasser le texte blanc sous le seuil. */ .btn--blue{box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 6px 14px -8px rgba(10,63,168,.7)} .btn--blue:hover{ box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 10px 20px -8px rgba(10,63,168,.8); filter:none; background-image:linear-gradient(135deg,#0F58E0 0%,#0C4AC0 46%,#093794 100%); } .btn--blue:active{background-image:linear-gradient(135deg,#0C4AC0 0%,#0A3FA8 46%,#082F82 100%)} /* --- appel à l'action de l'en-tête ---------------------------------------- style.css 959 : le dégradé finissait sur #12b5e5, soit 2,40:1 sous le texte blanc. C'était le pire endroit du site : le bouton le plus cliqué. Il reprend le dégradé commun, dont le point le plus clair passe. */ .hdr__cta .btn--dark{ background-image:var(--tint-grad); box-shadow:0 1px 0 rgba(255,255,255,.28) inset,0 10px 24px -12px rgba(10,63,168,.85); } .hdr__cta .btn--dark:hover{ filter:none; background-image:linear-gradient(135deg,#0F58E0 0%,#0C4AC0 46%,#093794 100%); box-shadow:0 1px 0 rgba(255,255,255,.34) inset,0 16px 34px -12px rgba(10,63,168,.95); } /* le même bouton sur fond foncé : blanc, avec le texte en bleu profond (style.css 771 et 965 le mettaient en turquoise sombre) — 9,17:1 */ .hdr.on-dark .hdr__cta .btn--dark{--fg:var(--pal-profond)} /* --- cartes de formule ---------------------------------------------------- style.css 300-301 et 1003-1008, premium.css 574-578 : liseré et halo. */ .op--star{box-shadow:0 0 0 1px rgba(17,102,249,.2),var(--ombre-2)} .op:hover,.op:focus-within{ border-color:rgba(17,102,249,.5); box-shadow:0 0 0 1px rgba(17,102,249,.18),var(--ombre-3); } /* style.css 1026-1027 : le petit encadré qui se déplie au survol */ .op__plus-t{ background:linear-gradient(180deg,rgba(47,193,255,.12),rgba(17,102,249,.05)); border-color:rgba(17,102,249,.18); } /* --- formulaire ----------------------------------------------------------- style.css 459 et premium.css 648 */ .fld input:focus,.fld select:focus,.fld textarea:focus{box-shadow:0 0 0 4px rgba(17,102,249,.13)} .rad:has(input:checked){background:rgba(17,102,249,.07)} .opt:hover{border-color:rgba(15,92,232,.4);background:#fbfcff} .frm__rgpd a{border-bottom-color:rgba(15,92,232,.35)} main.lgl a{border-bottom-color:rgba(15,92,232,.3)} /* --- voile de couleur derrière l'aperçu des formules ---------------------- style.css 627 : le voile mêlait le turquoise et le doré. */ .ap::before{ background:radial-gradient(70% 100% at 50% 0%,rgba(17,102,249,.08),rgba(47,193,255,.07) 55%,transparent 78%); } /* --- la grille de construction de la maquette ---------------------------- style.css 978-979 : un bleu qui n'était pas celui de la marque. */ .mock__grid-bg{ background-image: linear-gradient(to right,rgba(17,102,249,.11) 1px,transparent 1px), linear-gradient(to bottom,rgba(17,102,249,.11) 1px,transparent 1px); } /* --- la galerie (galerie.css 27 et 103) ----------------------------------- */ .gal__sep{background:linear-gradient(90deg,var(--tint) 0%,rgba(17,102,249,.18) 24%,rgba(0,0,0,0) 62%)} .gal__cadre::after{ background:linear-gradient(168deg,rgba(17,102,249,.11) 0%,rgba(17,102,249,.03) 46%,rgba(10,20,26,.10) 100%); } /* --- le panneau « l'offre en chiffres » ----------------------------------- premium.css 434-438. C'est le panneau qui avait déjà été corrigé une fois (les unités étaient à 1,94:1). Il reste un panneau plein, il devient bleu : blanc plein 9,56:1, blanc à 86 % 7,48:1, blanc à 92 % 8,35:1. Le voile clair du coin passe du cyan au bleu ciel. */ .ab-nums .ab-nums__panel{ background: radial-gradient(120% 130% at 8% 0%,rgba(47,193,255,.14),transparent 58%), linear-gradient(145deg,#0A2E7A 0%,#0B3E9E 56%,#0C4AC0 100%); box-shadow:0 24px 54px -34px rgba(10,46,122,.7); } .ab-nums .ab-nums__tag .ic{color:#C6EEFF} /* icône, 6,7:1 sur ce panneau */ /* ========================================================================= 4. LES DÉGRADÉS DU NOM Le logo (assets/img/logo-sitero.svg) et les deux SVG posés dans index.html utilisent déjà la palette exacte : #1166F9 → #2297FD (.35) → #2FC1FF (.7) → #31EEF5 Le CSS, lui, gardait deux dégradés approchants écrits à la main. On les aligne sur le logo, au ton près : c'est la même marque, ce doit être le même dégradé. ========================================================================= */ /* style.css 875 : le nom géant tel qu'il s'affiche SANS JavaScript. On ne touche qu'à l'image de fond : le découpage en texte reste celui de style.css. */ .wm__t{ background-image:linear-gradient(100deg,#1166F9 0%,#2297FD 35%,#2FC1FF 70%,#31EEF5 100%); } /* style.css 614 et 695 : le remplissage du nom au défilement et le voile de la traversée. Mêmes arrêts, même sens de lecture. */ .wm__fill,.wm__fond{ background-image:linear-gradient(100deg,#1166F9 0%,#2297FD 35%,#2FC1FF 70%,#31EEF5 100%); } /* style.css 780 : le fil de progression en haut de page. Il suit le même dégradé, de gauche à droite. */ .fx-jauge{background:linear-gradient(90deg,#1166F9 0%,#2FC1FF 62%,#31EEF5 100%)} /* style.css 662 : le filet qui se tire en travers des cartes « où aller ». */ .goc::after{background:linear-gradient(90deg,var(--pal-franc),var(--pal-turquoise))} /* ========================================================================= 5. LE MENU POSÉ SUR UNE SURFACE COLORÉE La capsule du menu s'assombrit quand elle passe devant une section foncée (classe « on-dark », posée par main.js). Elle était réglée pour du noir : au-dessus du bleu ciel du panneau d'accueil, elle laissait le texte blanc à 2,56:1. En descendant l'opacité du verre de 34 % à 58 %, le même texte mesure 5,04:1 au pire endroit du site, et la capsule reste un verre teinté, pas un bandeau opaque. Les liens passent de 66 % à 82 % de blanc pour la même raison ; les deux lignes qui suivent leur rendent leur pleine opacité au survol et sur l'onglet courant, sinon la règle du dessus les écraserait. ========================================================================= */ .hdr.on-dark .hdr__in,.hdr.on-dark.is-stuck .hdr__in{ background:rgba(8,32,48,.58); border-color:rgba(255,255,255,.24); } .hdr.on-dark .nav a{opacity:.82} .hdr.on-dark .nav a:hover,.hdr.on-dark .nav a[aria-current="page"]{opacity:1} /* ========================================================================= 6. LE PANNEAU D'ARRIVÉE, JUSTE APRÈS L'INTRODUCTION ------------------------------------------------------------------------- À LIRE AVANT DE GARDER OU DE JETER CE BLOC. Il est le seul de la feuille à faire autre chose que remplacer une couleur, et il concerne la partie du site que tu es en train de retravailler. Il se supprime d'un bloc sans rien casser ailleurs. CE QUI SE PASSE. logo.js calcule la couleur exacte du logo à l'endroit où la caméra entre dans le « e », et la pose dans --wm-sortie. Avec la nouvelle palette, ce point tombe à 69 % du dégradé, donc en plein bleu ciel : rgb(47,192,255). Le voile de fin d'introduction ET le fond de ce panneau prennent cette couleur — c'est ce qui rend le raccord invisible. Le problème : le panneau porte le titre du site en blanc, et du blanc sur ce bleu ciel mesure 2,08:1. C'est le texte le moins lisible du site et c'est le premier qu'on lit. CE QU'ON FAIT. On ne touche pas à --wm-sortie : le HAUT de l'écran garde très exactement sa couleur, donc le raccord reste parfait. Le fond descend ensuite vers le bleu profond, et tout le texte se pose sur cette partie-là : blanc plein ................ 7,62:1 blanc à 88 % (le sous-titre) 6,25:1 blanc à 72 % (le surtitre) . 4,71:1 Aucune de ces trois valeurs n'est écrite ici : elles étaient déjà dans style.css et elles passent maintenant, c'est le fond qui a changé. POURQUOI LE MÊME DÉGRADÉ EST POSÉ DEUX FOIS. Le voile de l'introduction (.wm__bleu) est plein écran, le panneau (.wmx) fait un écran de haut : ils se superposent exactement. S'ils n'avaient pas le même fond, on verrait la couleur sauter à l'instant où l'introduction disparaît — c'est très précisément la couture que tout ce mécanisme cherche à éviter. Les deux dégradés doivent donc rester identiques : si tu touches à l'un, touche à l'autre. L'AUTRE SOLUTION, si tu préfères garder un aplat de bleu ciel : écrire le texte du panneau en encre foncée (8,10:1 sur ce bleu) au lieu de blanc. Elle est plus jolie sur le papier, mais elle demande de repasser la section de data-nav="dark" à "light" dans index.html, et de refaire les deux boutons : un bouton blanc sur du bleu ciel ne se détache plus (2,06:1). C'est un travail d'intégration, pas un travail de palette. ========================================================================= */ .wm__bleu,.wmx{ background-color:var(--wm-sortie,#2FC0FF); background-image:linear-gradient(180deg, var(--wm-sortie,#2FC0FF) 0%, #1E86FC 5%, #1166F9 10%, #0C4AC0 16%, #0A3FA8 100%); } /* les deux boutons du panneau : le plein est blanc, son texte passe du turquoise sombre au bleu profond (9,17:1 sur blanc) */ .btn--clair{--fg:var(--pal-profond)} /* style.css 721 : les petites icônes de la liste, en cyan pâle */ .wmx__pts .ic{color:#C6EEFF}