/* ============================================================================ da-taste.css — refonte de la landing erekio ---------------------------------------------------------------------------- Lecture du brief : landing SaaS B2B pour dirigeants de PME, langage épuré, en CSS natif. La pile existante est statique et le protocole de refonte impose de la respecter : pas de framework, pas de dépendance ajoutée. Mode : refonte-remaniement. Nouveau langage visuel, contenu et arborescence préservés. Les adresses, les ancres et les libellés de navigation ne bougent pas — c'est le référencement qui est en jeu, pas le goût. Cadrans : le site actuel se lit VARIANCE 4 / MOUVEMENT 5 / DENSITÉ 5. Un remaniement ajoute +2 aux deux premiers : 6 / 6 / 5. Cette feuille se charge APRÈS da-brevo.css. La retirer du HTML suffit à revenir à l'état précédent : rien n'est modifié dans les feuilles d'origine. ========================================================================== */ /* ─── 1. Contraste du titre (§4.5, §14 — contrôle obligatoire) ─────────────── L'accent vert du titre mesurait 2,60:1 sur le nouveau fond. Le seuil pour du grand texte est de 3:1 ; il n'était donc pas atteint, et de loin. C'est la seule règle de cette grille qui ne se négocie pas : un texte qu'on ne lit pas n'est pas un choix esthétique. #377B47 monte à 4,21:1. Même famille, même teinte perçue, juste assez dense pour tenir sur l'aplat clair. Le soulignement suit. */ .hero h1 span { color: #377B47 !important; } .hero h1 span:after { background: rgba(55, 123, 71, 0.34) !important; } /* ─── 2. Retenue des surtitres (§4.7) ──────────────────────────────────────── La page portait un surtitre en petites capitales au-dessus de DIX de ses quatorze sections. Pris un par un, chacun se défend ; empilés, ils donnent à toutes les sections le même rythme d'ouverture, et c'est précisément ce qui fait qu'une page « sent » le gabarit. La règle plafonne à une section sur trois. On garde les quatre qui ouvrent un vrai changement de sujet, on retire les six autres : leur titre se suffit, et l'endroit où la section se trouve dans la page la situe déjà. */ .capabilities > .eyebrow, .capabilities .eyebrow, .intelligence .eyebrow, .responsible .eyebrow, .use-cases .eyebrow, .faq .eyebrow, .final-cta .eyebrow { display: none !important; } /* Les quatre conservés gagnent en tenue : plus d'air sous eux, moins de contraste, pour annoncer sans concurrencer le titre. */ .story-features .eyebrow, .audiences .eyebrow, .integrations .eyebrow, .live-demo .eyebrow { margin-bottom: 14px !important; opacity: 0.62; letter-spacing: 0.16em !important; } /* ─── 3. Le motif des trois cartes égales : tentative ABANDONNÉE (§9.C) ────── La grille bannit les trois cartes identiques, et la page l'utilise trois fois. J'ai donc essayé : trio asymétrique 1,32fr / 1fr / 1fr sur les briques produit, composition 1 + 2 sur les cas d'usage. Mesuré sur le rendu, le résultat était PIRE que le motif qu'il corrigeait : - briques produit : les cartes 2 et 3, rétrécies, cassaient leurs titres (« Revenue Intelligence » sur deux lignes) alors que la carte 1 gardait de l'air perdu. L'asymétrie suggérait une hiérarchie qui n'existe pas : ces trois produits ont exactement le même poids dans l'offre. - cas d'usage : la carte élargie répartissait mal son contenu interne, et laissait une moitié droite vide avec une étiquette flottante. La règle est une heuristique, pas une loi. Elle vise les grilles où trois cartes identiques masquent une vraie hiérarchie. Ici les trois contenus sont réellement parallèles, et leur structure interne suppose une largeur égale. Le motif est donc justifié, et on le garde. Reste corrigé ci-dessous ce qui, dans ces sections, relève bien d'un tic. */ /* §9.F : la numérotation décorative des cartes (« 01 », « 02 », « 03 ») est bannie. Si le lecteur peut compter, l'étiquette ne lui apprend rien, et elle ajoute le rythme de gabarit que le reste du travail cherche à retirer. */ .intelligence-cards > article > .agent-number, .use-case-grid > article > span:not([class]), .capability-card > span:not([class]) { display: none !important; } /* Le `span.status` des mêmes cartes porte un état réel (« Actif », « Évolution continue ») : il reste. La règle vise la numérotation décorative, pas l'information. */ /* ─── 4. Rythme vertical : DEUX FOIS FAUX, donc ANNULÉ ─────────────────────── Premier essai : j'ajoute du padding partout, par réflexe (« une landing doit respirer »). Sans mesure. Deuxième essai : je mesure une « densité » — caractères de texte divisés par hauteur en pixels — et je conclus que responsible (0,44) et integrations (0,35) sont creuses. Je les resserre et je réduis leur ornement de moitié. La métrique était cassée. Elle comptait le TEXTE et ignorait les visuels. Or ces deux sections contiennent chacune un iframe avec une vraie animation : un anneau de logos de marque en orbite pour integrations, un schéma de canal certifié pour responsible. Elles sont pleines. Elles ressortaient vides à ma mesure, et vides sur mes captures — parce que `loading="lazy"` ne déclenche pas le chargement pour une capture qui ne défile pas. Deux leçons, gardées ici pour la prochaine fois : - une densité qui ignore l'image ne mesure pas la densité ; - une capture qui ne défile pas ne montre pas ce que voit un visiteur. Le rythme vertical d'origine était juste. On n'y touche pas. */ /* ─── 5. Typographie des titres de section (§4.1) ──────────────────────────── Même correction que sur le titre du héros, à l'échelle des sections : l'interlignage d'affiche étouffe dès qu'une ligne se casse. `balance` répartit les mots pour qu'aucun ne reste seul en dernière ligne. */ .capabilities h2, .intelligence h2, .audiences h2, .responsible h2, .use-cases h2, .integrations h2, .faq h2, .final-cta h2, .story-features h2 { font-size: clamp(40px, 4.05vw, 62px) !important; line-height: 1.09 !important; letter-spacing: -0.027em !important; text-wrap: balance; } /* Les titres mesuraient 43 à 49 px sur une page large de 1440, entourés de vastes blancs : proportionnellement, ils chuchotaient. Environ +30 % leur rend l'autorité que la quantité d'espace autour d'eux exige. C'est le levier au meilleur rapport effet visible / risque de casse, et la raison pour laquelle il vient en premier dans l'ordre de refonte. `clamp` plutôt qu'une valeur fixe : la borne basse protège les petits écrans, la borne haute empêche le titre de devenir une affiche sur 27 ". */ /* Une ligne de texte trop longue fatigue : l'œil perd le début de la suivante. 65 caractères est la mesure retenue. */ .capabilities p, .intelligence p, .audiences p, .responsible p, .use-cases p, .integrations p { max-width: 65ch; } /* ─── 6. Entrée en cascade (§5.C) ──────────────────────────────────────────── Le site dispose déjà d'un système d'apparition au défilement, bâti sur IntersectionObserver — la bonne méthode, et non un écouteur de défilement que la grille interdit. On ne le remplace pas : on lui ajoute un décalage. Ce que ce mouvement communique : l'ordre de lecture. Trois cartes qui apparaissent ensemble ne disent pas par où commencer ; décalées de 90 ms, elles se lisent de gauche à droite. C'est la seule justification admise — une animation qui n'exprime rien doit être retirée. */ .intelligence-cards > article, .use-case-grid > article, .proof-grid > article { transition-delay: 0ms; } .intelligence-cards.reveal > article:nth-child(2), .use-case-grid.reveal > article:nth-child(2), .proof-grid > article:nth-child(2) { transition-delay: 90ms; } .intelligence-cards.reveal > article:nth-child(3), .use-case-grid.reveal > article:nth-child(3), .proof-grid > article:nth-child(3) { transition-delay: 180ms; } /* Obligatoire dès que le cadran de mouvement dépasse 3 : la cascade disparaît pour qui demande moins d'animation. Le contenu, lui, reste visible. */ @media (prefers-reduced-motion: reduce) { .intelligence-cards > article, .use-case-grid > article, .proof-grid > article { transition-delay: 0ms !important; } } /* ─── Icônes Google (Material Symbols) ────────────────────────────────────── Les coches et flèches d'origine étaient des caractères de TEXTE, pas des icônes : leur dessin, leur graisse et leur hauteur changeaient d'un système à l'autre — le même symbole n'a ni la même épaisseur ni le même alignement sur Windows, macOS et Android. Un jeu d'icônes est dessiné sur une grille commune et reste identique partout. Jeu réduit aux huit icônes réellement employées : 2,2 Ko. */ .material-symbols-outlined { /* La feuille de Google impose 24 px en dur. On repasse en `em` pour que chaque icône suive la taille du texte qu'elle accompagne, du bouton du héros aux libellés du menu. */ font-size: 1.05em !important; line-height: 1 !important; font-style: normal !important; /* Le glyphe est dessiné dans une case carrée dont la ligne de base ne tombe pas où l'œil l'attend ; ce décalage le repose sur celle du texte. */ vertical-align: -0.155em; /* Sans cela, une ligature non reconnue s'affiche en toutes lettres. */ font-variant-ligatures: normal; font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; user-select: none; } /* La rangée de garanties : les coches restent vertes et légèrement plus discrètes que le libellé qu'elles annoncent. */ .trust-row .material-symbols-outlined { font-size: 1.02em !important; color: #377B47; margin-right: 1px; } /* Les flèches de bouton et de lien pointent vers l'extérieur : un peu d'air à leur gauche, sinon elles collent au dernier mot. */ .btn .material-symbols-outlined, .text-link .material-symbols-outlined { margin-left: 4px; } /* Les icônes du menu déroulant vivent dans une pastille : elles se centrent dedans plutôt que de suivre une ligne de base. */ .menu-icon.material-symbols-outlined { vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; font-size: 1.15em !important; } /* Les cartes de capacités portent une grande icône : celle-ci ne suit pas le texte, elle a sa propre échelle. */ .cap-icon.material-symbols-outlined { font-size: 26px !important; vertical-align: middle; } /* ─── Bande de preuve ─────────────────────────────────────────────────────── PREMIÈRE VERSION, MAUVAISE. Pour aligner les légendes, j'avais réservé à chaque valeur la hauteur de deux lignes (`min-height: 2.16em`). Mesuré sur le rendu : 71 px réservés pour un texte qui en occupe 37 — soit un TROU de 34 px sous « 4 M+ » et « 3 outils », avant même leur marge. La bande paraissait délavée et distendue, et c'était pire qu'avant. La bonne méthode est `subgrid` : les trois blocs partagent les mêmes lignes de grille, donc la hauteur de chaque rangée est celle de son contenu le plus haut — pas une réserve arbitraire. Les légendes s'alignent exactement, et aucun espace vide n'est fabriqué. Reste corrigé : le surtitre nu qui avait survécu, la taille fixe qui faisait déborder « Un périmètre clair », et les filets qui butaient sur les angles. */ .proof-intro > span { display: none !important; } .proof-intro h2 { margin-top: 0 !important; } /* Deux rangées pour toute la bande : les valeurs dans la première, les légendes dans la seconde. */ .proof-grid { grid-template-rows: auto auto; align-items: stretch !important; } .proof-grid article { padding-left: 18px !important; padding-right: 18px !important; display: grid !important; grid-template-rows: subgrid; grid-row: span 2; justify-items: center; align-content: center; gap: 0 !important; } .proof-grid b { /* Élastique : une phrase composée à la taille d'un nombre finit toujours par toucher le bord. `balance` évite qu'un mot tombe seul en dernière ligne. */ /* MESURE, pas estimation : la bande est plafonnee a 1180 px, donc la cellule fait 216 px utiles a TOUTE largeur d ecran. A 34 px, « Un perimetre clair » en demande 262 : il ne peut pas tenir, il passe a deux lignes, et son bloc demarre plus haut que les nombres. Aucun reglage d alignement ne repare ca — il faut que les trois valeurs tiennent chacune sur UNE ligne. A 28 px, la plus longue en demande 216. */ font-size: 28px !important; white-space: nowrap; line-height: 1.1 !important; letter-spacing: -0.03em !important; min-height: 0 !important; margin: 0 !important; /* Cale par le BAS : la derniere ligne de chaque valeur touche la meme limite, donc l ecart jusqu a la legende est identique dans les trois blocs. Centre, les valeurs d une seule ligne flottaient avec 31 px de vide sous elles contre 12 pour la phrase. */ align-self: end; text-wrap: balance; font-variant-numeric: tabular-nums; } .proof-grid p { font-size: 13px !important; line-height: 1.5 !important; max-width: 21ch !important; min-height: 0 !important; margin: 12px 0 0 !important; align-self: start; } /* Filets rentrés : un trait qui bute sur un angle arrondi se lit comme une erreur. */ .proof-grid article { border-left: 0 !important; position: relative; } .proof-grid article + article::before { content: ""; position: absolute; left: 0; top: 26px; bottom: 26px; width: 1px; background: rgba(73, 162, 94, 0.18); } .proof-intro { border-right: 0 !important; position: relative; } .proof-intro::after { content: ""; position: absolute; right: 0; top: 26px; bottom: 26px; width: 1px; background: rgba(73, 162, 94, 0.18); } /* Empilée sous 900 px : plus de filets verticaux, et la mise en page en deux colonnes de la source reprend la main. */ @media (max-width: 900px) { .proof-grid article + article::before, .proof-intro::after { display: none; } .proof-grid article { display: grid !important; grid-template-rows: none; grid-row: auto; } /* En pile, la valeur partage la ligne avec sa legende dans une colonne etroite : la contrainte d une seule ligne n a plus de sens et ferait deborder. On la leve, et on reduit la taille pour que « Un perimetre clair » tienne en deux lignes plutot qu en trois. */ .proof-grid b { white-space: normal !important; font-size: 21px !important; align-self: center; } .proof-grid p { margin-top: 0 !important; align-self: center; } } /* ─── Bande de preuve : à plat ────────────────────────────────────────────── Le dégradé vert de la première cellule et l'ombre portée sous la bande sont retirés. La bordure d'un pixel suffit à poser le bloc : elle définit son contour sans le faire flotter au-dessus de la page. Le dégradé distinguait la cellule du titre des trois cellules de chiffres, mais le filet vertical le fait déjà, et sans introduire une seconde teinte de fond dans une page qui n'en compte qu'une. */ .proof-band { box-shadow: none !important; background: #fff !important; } .proof-intro { background: transparent !important; background-image: none !important; } /* ─── Section à visuel épinglé : rééquilibrage vers le ratio Brevo ────────── Mesuré, pas estimé : les deux colonnes font déjà 570 et 578 px, soit un rapport de 0,99 — exactement celui de la référence. Le déséquilibre perçu ne vient donc pas du partage de l'espace. Il vient du TITRE : 62 px ici contre une quarantaine chez Brevo. À cette taille il écrase le schéma d'en face, quelle que soit la largeur des colonnes. On le ramène, et on rend au visuel la place ainsi libérée. */ @media (min-width: 1000px) { .story-features.sticky-features { grid-template-columns: 1.16fr 1fr !important; column-gap: 46px !important; } } .story-features h2 { font-size: clamp(27px, 2.35vw, 42px) !important; line-height: 1.12 !important; letter-spacing: -0.022em !important; } .story-feature p, .sticky-feature-copy p { font-size: 15px !important; line-height: 1.6 !important; } /* La colonne du visuel s'élargit : le schéma peut reprendre son échelle normale au lieu du plancher que je lui avais imposé pour éviter une barre de défilement dans 570 px. */ .sticky-feature-visual .ctx-schema { --ctx-umin: 0.73px; --ctx-max: 860px; }