ayant un margin explicite qui l'annulait), ce qui s'ajoutait à cette marge. Le rendu était plus aéré que la maquette, en mieux, mais par un effet de bord - et le thème divergeait de sa source sans que rien ne le dise. On garde donc le rendu, et on le rend intentionnel : 48px ici, blockGap coupé sur le hero côté thème. Les deux retombent sur la même hauteur, par construction. */ margin-bottom: var(--space-12); letter-spacing: 0.03em; text-transform: uppercase; } .hero-decoration { position: absolute; top: 0; right: 0; width: 50%; height: 100%; opacity: 0.08; background: radial-gradient(circle at 70% 30%, var(--navy-light) 0%, transparent 60%), radial-gradient(circle at 30% 80%, var(--violet) 0%, transparent 50%); } .hero-stats { display: flex; gap: var(--space-12); margin-top: var(--space-14); padding-top: var(--space-10); border-top: 1px solid var(--on-navy-border); } /* --on-navy-accent plutôt que --violet-light (3.14:1 en fin de dégradé), et cohérent avec les grands chiffres de la page résultats. */ .hero-stat-number { font-family: var(--font-heading); font-size: 2.4rem; font-weight: 800; color: var(--on-navy-accent); display: block; } .hero-stat-label { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; color: var(--on-navy-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: var(--space-1); } /* Hero des pages internes */ .page-hero { background: var(--gradient-hero-page); color: var(--white); padding: 140px 0 var(--space-20); text-align: center; } /* LE HERO EN DEUX COLONNES : le discours à gauche, la marque à droite. .hero-page centre son texte, et c'est juste pour un hero pleine largeur. Dès qu'il se scinde, le centrage devient un défaut : deux colonnes centrées chacune sur elle-même ne s'alignent sur rien. La variante rétablit donc l'alignement à gauche, et annule le « margin: 0 auto » qui bornait le paragraphe au milieu. La colonne de marque EMPILE le symbole au-dessus du mot, centrés l'un sur l'autre. C'est la même disposition que le pied de page, pour la même raison : le symbole se centre sur la largeur du MOT, pas sur celle de la colonne, d'où width: fit-content. */ .page-hero--split { text-align: left; } .hero-split { display: flex; align-items: center; gap: var(--space-16); } .hero-split-texte { flex: 1; min-width: 0; } /* Sans colonne de marque, c'est l'ILLUSTRATION qui occupe la droite : le texte se borne donc à la moitié gauche, sinon il court dessous. 52 % et non 50 : le motif des illustrations laisse le tiers gauche vide, on peut donc mordre un peu. */ /* Pas « > .container » : côté WordPress, la Bannière glisse un .wp-block-cover__inner-container entre la section et le conteneur. Le sélecteur descendant couvre les deux rendus. */ .page-hero--split .container > * { max-width: 64%; } /* LE TITRE DU HERO SCINDÉ EST PLUS PETIT, ET C'EST UNE CONTRAINTE DE LARGEUR. Mesuré au rendu : à 3.4rem (54.4 px), « de vingt-cinq ans de terrain » demande 803 px. La colonne n'en a que 650 - au-delà, le texte court sous la partie pleine de l'illustration, qui commence à 724 px du bord. À 2.6rem (41.6 px) la même ligne tombe à 614 px : les trois lignes voulues tiennent, et aucune ne se recasse. Le titre reste du TEXTE LARGE au sens WCAG (seuil 3:1) : les 6.46:1 mesurés tiennent. */ .page-hero--split h1 { font-size: clamp(2rem, 4vw, 3.1rem); } .page-hero--split .hero-badge { margin-left: 0; margin-right: 0; } /* (0,2,1) et non (0,1,1) : « .hero-page p:where(…) » pèse autant et vient plus bas dans le fichier, donc gagnerait par l'ordre. On qualifie par la colonne. */ .page-hero--split .container p:where(:not(.eyebrow)) { margin-left: 0; margin-right: 0; max-width: 34rem; } .hero-split-marque { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: var(--space-6); width: fit-content; } .marque-symbole { width: 148px; height: auto; display: block; } /* LE LOGO DANS LA BANDE FINALE. C'est le seul endroit de la page où la marque SIGNE au lieu de se présenter : le lecteur y est invité à partir vers pylotik.com. Le logo seul, transparent, dans sa variante des fonds sombres (charte V3.2), plutôt que le symbole et le mot posés l'un sur l'autre (Charley, 25/10/2026). Pas le carré blanc pylotik-logo.png : il est réservé aux moteurs et aux annuaires. */ .cta-marque { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); width: fit-content; margin: 0 auto var(--space-8); } .cta-marque .marque-logo { width: 96px; height: auto; display: block; } .marque-mot { width: 232px; height: auto; display: block; } /* Variante de marque. Le dégradé finit sur --violet (8.23:1 sous du blanc) et non sur --navy-light, qui n'offrait que 2.75:1. */ .page-hero--brand { background: var(--gradient-hero-brand); } /* Le hero ILLUSTRÉ. En WordPress c'est une Bannière (core/cover) : une image, un voile coloré par-dessus, le contenu au-dessus. Ici on le rend à l'identique. Le voile est un PSEUDO-ÉLÉMENT À OPACITÉ, et non un dégradé de couleurs transparentes : c'est l'exact équivalent du dimRatio de core/cover, et cela n'oblige à inventer aucune couleur hors charte. La classe est « hero--visuel » et NON « hero-page--visuel » : l'accueil n'est pas un .hero-page, et le mécanisme doit valoir pour les deux familles de hero. ⚠ L'OPACITÉ DU VOILE EST UNE CONTRAINTE DE CONTRASTE, PAS UN RÉGLAGE D'ESTHÉTIQUE. Elle n'est donc PAS déclarée ici, mais page par page, plus bas : elle dépend des pixels de l'illustration, et une valeur commune serait soit trop faible quelque part, soit inutilement opaque partout. Sans déclaration, l'opacité vaut 1 : le voile est plein et l'on retombe sur le dégradé seul - un échec SÛR, jamais un échec de contraste. */ /* « contain » et non « cover », et à DROITE. Trois raisons, dans cet ordre : - cover RECADRE : sur resultats, la trajectoire perdait son sommet, qui est le sujet ; - cover AGRANDIT dès que le hero est plus large que l'image (au-delà de 1424px de viewport), et une illustration agrandie se dégrade ; - la composition des illustrations est faite POUR ça : le motif occupe la droite, le tiers gauche est vide. Les caler à droite les remet dans leur cadrage d'origine. ⚠ D'OÙ TROIS COUCHES, ET NON UNE. En « cover » l'image couvrait tout et se suffisait. En « contain » elle ne couvre plus que la droite, ce qui a fait apparaître DEUX défauts successifs, chacun réglé par une couche : le fond le dégradé, opaque. Sans lui, le voile se posait sur le BLANC de la page à gauche de l'image : une couture verticale franche. Avec lui, le côté gauche vaut « dégradé x opacité + dégradé x (1 - opacité) », c'est-à-dire exactement le dégradé nu. La jonction disparaît par construction. ::after l'illustration, FONDUE À GAUCHE. Les illustrations portent leur propre fond navy opaque, qui n'est pas tout à fait le nôtre : leur bord gauche dessinait une arête nette, d'autant plus visible que le voile est léger (flagrant sur hpi-en-entreprise à 0.4). Le masque l'efface sur les 22 % de gauche - une zone où les illustrations sont vides de toute façon. ::before le voile, dont l'opacité est mesurée page par page. L'ordre de peinture est tenu par z-index, et NON par l'ordre des pseudo-éléments : ::after est peint APRÈS ::before à z-index égal, ce qui mettrait l'illustration par-dessus son propre voile. */ .hero--visuel { position: relative; background: var(--hero-degrade); } /* Le dégradé de SA famille de hero, déclaré UNE fois : le fond et le voile le lisent tous deux. L'illustration ne change donc rien à la couleur du hero - elle s'y ajoute, elle ne s'y substitue pas. */ .hero-home.hero--visuel { --hero-degrade: var(--gradient-hero); } .page-hero.hero--visuel { --hero-degrade: var(--gradient-hero-page); } .page-hero--brand.hero--visuel { --hero-degrade: var(--gradient-hero-brand); } .hero--visuel::after { content: ""; position: absolute; /* L'en-tête est collant depuis le socle commun (lot 4 du chantier) : il ne recouvre plus le haut du hero, qui a perdu les 72 px qu'il lui réservait. L'image part donc du haut de la boîte et en prend toute la hauteur : c'est exactement le cadrage d'avant, où elle partait sous l'en-tête fixe, sur la partie visible du hero. */ top: 0; bottom: 0; right: 0; /* Le calage vertical est réglable PAR PAGE. Par défaut l'illustration est centrée dans la partie visible du hero ; l'accueil la veut en bas (« margin-bottom: 0 » l'y pousse, le « margin-top: auto » absorbant tout le reste). Le calage horizontal, lui, est toujours à droite : c'est la composition même des illustrations. */ margin-block: auto; /* ⚠ LA BOÎTE ÉPOUSE L'IMAGE, ET IL Y A DEUX RÉGIMES POUR Y ARRIVER. Par défaut l'illustration remplit la HAUTEUR du hero, et sa largeur suit le ratio. Mais quand on veut la borner (l'accueil, dont le hero est très haut), c'est la LARGEUR qui commande et la hauteur qui suit. Étirer la boîte tout en bornant sa largeur donnerait une boîte au mauvais ratio, dans laquelle « contain » letterboxe l'image : elle flotterait alors avec des bords francs au milieu du hero - ce qui s'est produit, et se voyait d'autant plus que le fond propre des illustrations n'est pas exactement le nôtre. Deux variables, un seul jeu de règles. */ height: 100%; width: auto; aspect-ratio: 1424 / 752; max-width: 100%; z-index: 1; /* L'illustration est déclarée par la page, sur la section : style="--illu: url(...)", comme sur pylotik. Le voile, lui, reste réglé par page ci-dessous. */ background-image: var(--illu); background-size: contain; background-position: right bottom; background-repeat: no-repeat; /* LE FONDU PORTE SUR TOUS LES BORDS, et non plus sur le seul bord gauche. Les illustrations portent un fond navy opaque proche du nôtre sans lui être égal : tout bord qui ne coïncide pas avec un bord du hero se voit. À pleine hauteur, seul le bord gauche était dans ce cas ; bornée, l'image a aussi un haut et un bas. Le bord DROIT touche toujours celui du hero : il n'a rien à fondre. */ /* LE FONDU ESTOMPE LES BORDS DE L'IMAGE. Les illustrations portent un fond navy opaque proche du nôtre sans lui être égal : tout bord qui ne coïncide pas avec un bord du hero se verrait. Le bord DROIT ne fond jamais - il touche toujours celui du hero. */ -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 22%), linear-gradient(to bottom, transparent 0%, #000 26%, #000 74%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, #000 22%), linear-gradient(to bottom, transparent 0%, #000 26%, #000 74%, transparent 100%); -webkit-mask-composite: source-in; mask-composite: intersect; } .hero--visuel::before { content: ""; position: absolute; inset: 0; z-index: 2; background: var(--hero-degrade); } /* Le contenu repasse au-dessus des deux. */ .hero--visuel > .container { position: relative; z-index: 3; } /* L'ILLUSTRATION ET SON VOILE, PAGE PAR PAGE. L'image ne peut pas vivre dans le HTML, où l'attribut style= est banni (§7). Côté WordPress elle n'est ici ni l'une ni l'autre : « url » et « dimRatio » sont des attributs du bloc - c'est tout l'intérêt de la Bannière. Les valeurs jumelles vivent dans contenu/convertir.py (HERO_VISUELS). ⚠ CES VALEURS SONT MESURÉES SUR LE RENDU, PAS CALCULÉES SUR UN MODÈLE - et la différence n'est pas académique : elle vaut un facteur deux. Le modèle prenait le pire pixel de l'image ENTIÈRE, sans savoir où le texte tombe. Depuis que les illustrations sont en « contain » calées à droite, le texte n'en recouvre plus qu'une partie, et le modèle condamnait des voiles parfaitement lisibles : approche passait de 0.85 à 0.45, resultats de 0.90 à 0.50. La sonde masque le texte, photographie le fond, relève la boîte et la couleur calculée de chaque bloc, et ne compare QUE les pixels réellement recouverts. Chaque valeur est la plus LÉGÈRE qui garde une marge de x1.12 sur le seuil AA (4.5:1, ou 3:1 pour le texte large). La marge est volontaire : un ratio au ras du seuil ne survit ni à un changement d'illustration, ni à une réécriture du texte. Baisser une valeur à la main, c'est reprendre la mesure. */ /* corps 5.38:1. */ .hero-visuel-collectif::before { opacity: 0.9; } /* badge 5.26:1. */ .hero-visuel-services::before { opacity: 0.7; } /* titre 3.70:1 (seuil 3, texte large). */ .hero-visuel-approche::before { opacity: 0.5; } /* corps 5.27:1. */ .hero-visuel-resultats::before { opacity: 0.7; } /* corps 5.43:1. */ .hero-visuel-contact-entreprise::before { opacity: 0.5; } /* corps 5.28:1. */ .hero-visuel-contact::before { opacity: 0.7; } /* corps 7.32:1 - la plus sombre. */ .hero-visuel-hpi::before { opacity: 0.4; } /* corps 5.08:1. */ .hero-visuel-nombre-hpi::before { opacity: 0.7; } /* H1 8.10:1, chapô 9.27:1, pastille 9.66:1 - mesurés sur le RENDU, texte masqué, au pixel de fond le plus clair de la BOÎTE RÉELLE de chaque bloc (et non d'une zone estimée : la première mesure débordait sous le hero et relevait le blanc de la section suivante). Le point dur reste le H1 : le faisceau lumineux de l'illustration passe derrière sa troisième ligne. Les ratios ont GAGNÉ depuis que l'illustration est bornée en largeur - elle recule, donc son faisceau aussi. À 0.60 le H1 tombait à 5.17:1 dans la disposition précédente ; 0.68 est conservé, il donne maintenant 8.10:1. */ .hero-visuel-produit::before { opacity: 0.68; } /* LE SEUL HERO DONT L'ILLUSTRATION N'A PAS LE RAPPORT DE LA SÉRIE. Les huit autres font 1424x752 ; celle-ci est RECADRÉE à partir de 34 % de sa largeur, parce que son motif d'origine est SYMÉTRIQUE - deux structures en miroir - et que le mécanisme du hero suppose un motif à droite et un tiers gauche vide. Mesuré sur l'image entière : la structure de gauche commençait à 35 % de la largeur, exactement là où le texte finit. Le recadrage rend le motif asymétrique ; la structure coupée à gauche se lit comme continuant hors cadre. Sans cette ligne, « contain » letterboxerait l'image dans une boîte au mauvais rapport et ses bords se verraient. */ .hero-visuel-produit::after { aspect-ratio: 940 / 752; /* BORNÉE EN LARGEUR, donc c'est la hauteur qui suit - le second régime décrit plus haut. Sans cela l'illustration remontait jusqu'à 555 px du bord gauche et ne laissait que 666 px au titre : à peine 2.6rem. Bornée à 46 %, elle démarre à 694 px et son fondu se termine à 824, ce qui rend 774 px au titre et permet de le remonter à 3.1rem. Le motif reste entier, il est seulement plus petit. */ width: 46%; height: auto; } /* libellés des chiffres clés 5.06:1. */ .hero-visuel-accueil::before { opacity: 0.7; } .page-hero h1 { color: var(--on-navy-title); margin-bottom: var(--space-4); } /* Même raison : le surtitre est un ici, un paragraphe dans WordPress. */ .page-hero p:where(:not(.eyebrow)) { color: var(--on-navy-body); font-size: 1.15rem; max-width: 600px; margin: 0 auto; } /* ============================================= SECTIONS ============================================= */ .band-dark { background: var(--gradient-section-dark); color: var(--on-navy-body); } .band-dark h2, .band-dark h3 { color: var(--on-navy-title); } .band-dark .eyebrow { color: var(--on-navy-overline); } /* LE SURTITRE D'UN HERO SOMBRE. Il manquait, et c'était un défaut de contraste ANCIEN, antérieur aux heros illustrés : « .band-dark .eyebrow » recevait bien une teinte lisible, mais rien n'existait pour « .hero-page .eyebrow ». Le surtitre y restait donc en --violet sur navy, soit 1.46:1 - un ratio que le projet documente lui-même plus bas. L'illustration de fond ne l'a pas causé : elle l'a rendu visible. */ .page-hero .eyebrow { color: var(--on-navy-overline); } .band-dark p { color: var(--on-navy-body); } .section-head { text-align: center; max-width: 700px; margin: 0 auto var(--space-16); } .eyebrow { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600; color: var(--violet); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--space-3); display: block; } .eyebrow--left { text-align: left; } .section-head h2 { margin-bottom: var(--space-4); } /* Le :not(.eyebrow) n'est pas une precaution oiseuse : c'est ce qui rend la regle independante de la BALISE qui porte le surtitre. Ici, l'overline est un , que « .section-head p » n'atteint pas. Mais dans WordPress, un surtitre est forcement un PARAGRAPHE - Gutenberg n'a pas de bloc - et il tombait alors sous cette regle, dont la specificite (0,1,1) bat celle de .eyebrow (0,1,0). Le surtitre y passait a 1.1rem et au gris, au lieu de 0.75rem et du violet. Le defaut est apparu au portage, la faute etait ici. Aucun changement de rendu dans la maquette : elle n'a pas de p.eyebrow. */ .section-head p:where(:not(.eyebrow)) { font-size: 1.1rem; color: var(--text-light); line-height: 1.8; } /* .section-head p et .band-dark p ont la même spécificité (0,1,1) : sans cette règle, le gris clair l'emporte par ordre de déclaration et tombe à 2.24:1 sur navy. Même :not(.eyebrow), et pour la même raison : (0,2,1) battrait « .band-dark .eyebrow » (0,2,0), et le surtitre perdrait sa teinte lisible sur fond sombre - celle qui donne 6.97:1 là où le violet n'en donne que 1.46. */ .band-dark .section-head p:where(:not(.eyebrow)) { color: var(--on-navy-body); } /* Liens sur fonds sombres. Le :not(.btn) est essentiel : sans lui, les boutons héritent de la couleur de lien et il faut des !important. */ .band-dark a:not(.btn), .cta-band a:not(.btn), .hero-home a:not(.btn), .page-hero a:not(.btn) { color: var(--on-navy-overline); } .band-dark a:not(.btn):hover, .cta-band a:not(.btn):hover, .hero-home a:not(.btn):hover, .page-hero a:not(.btn):hover { color: var(--white); } /* ============================================= GRILLES ============================================= */ .grid-2 { align-items: center; } .gap-sm { --grid-gap: var(--space-4); } .gap-md { --grid-gap: var(--space-6); } .gap-lg { --grid-gap: var(--space-8); } .gap-xl { --grid-gap: var(--space-12); } .gap-2xl { --grid-gap: var(--space-16); } .grid--top { align-items: flex-start; } /* ============================================= CARTES ============================================= */ /* Le soulèvement au survol est commun à toutes les cartes, tarifs compris. Il est déclaré ICI, et une seule fois : le -4px est une valeur, pas un token, et deux copies auraient fini par diverger. */ .card:hover, .pricing-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } /* ============================================= ICÔNES ============================================= Les icônes étaient des emoji, ce sont désormais des images. Leur taille ne se règle donc plus par `font-size` : les conteneurs continuent d'en porter un, sans effet sur elles, mais il sert encore à l'alignement du texte voisin. max-width et max-height plutôt que width et height : les 44 illustrations n'ont pas toutes le même rapport (de 96 à 250 px de large), et une boîte carrée les contient toutes sans en déformer aucune. Un seul défaut est prévu ici : la valeur par défaut vaut pour les icônes posées dans un titre (mini-cartes, panneaux), où elles suivent le texte. */ .icone { display: inline-block; vertical-align: middle; width: auto; height: auto; max-width: 1.5rem; max-height: 1.5rem; } .card-icon .icone { max-width: 34px; max-height: 34px; } .card-media .icone { max-width: 76px; max-height: 76px; } .visual-card-icon .icone { max-width: 104px; max-height: 104px; } .visual-card-icon--md .icone { max-width: 84px; max-height: 84px; } .value-tile-icon .icone { max-width: 34px; max-height: 34px; } .value-tile-icon--lg .icone { max-width: 46px; max-height: 46px; } .h-icon-glyph .icone { max-width: 32px; max-height: 32px; } .pain-icon .icone { max-width: 26px; max-height: 26px; } /* Ces deux emplacements portaient un glyphe de 12 à 14 px, illisible pour une illustration. Ils sont agrandis, ce que leur conteneur absorbe sans casse. */ .hero-badge .icone { max-width: 22px; max-height: 22px; } .footer-location .icone { max-width: 18px; max-height: 18px; } .card-icon { width: 56px; height: 56px; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; margin-bottom: var(--space-5); } .card-icon-navy { background: var(--surface-tint-navy); color: var(--navy); } .card-icon-violet { background: var(--surface-tint-violet); color: var(--violet); } .card-icon-blue { background: var(--surface-tint-blue); color: var(--navy-light); } .card h3 { margin-bottom: var(--space-3); } /* Le :not() rend la règle indépendante de la BALISE. Dans la maquette, .card-icon est un