` : en flux flex sa marge par defaut ne fusionne pas, elle s'ajoute au `gap` et se pose en fin de bloc — +28 par en-tete, sur les trois sections qui en portent un. Huitieme rencontre du piege, et la cause systematique de l'ecart 34. */ .fn-section__header > * { margin: 0; } .fn-section__header .fn-badge + .fn-title { margin-top: var(--fn-space-10); } .fn-section__header + * { margin-top: var(--fn-space-30); } @media (min-width: 768px) { .fn-section__header .fn-title { font-size: var(--fn-size-32); } } .fn-section--roomy .fn-section__header + * { margin-top: var(--fn-space-50); } .fn-divider { height: 1px; background: var(--fn-border-subtle); border: 0; margin: 0; } /* ------------------------------------------------------------------ NAVBAR */ .fn-navbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: var(--fn-space-20); padding: var(--fn-space-20) var(--fn-gutter); background: var(--fn-surface-page); /* Le filet en ombre interieure, et non en `border-bottom` : le fichier donne 96 de navbar pour un contenu de 56 pose a y = 20 (216:2602 / 439:499), soit un retrait de 20 filet compris. Une bordure rendait 97. */ box-shadow: inset 0 calc(-1 * var(--fn-border-width)) 0 var(--fn-surface-muted), var(--fn-shadow-sm); } /* Le logo occupe une boite de 117 x 56 dans les maquettes (439:499), le trace faisant 83,87 x 24,63 : la boite est donc plus grande que le dessin, volontairement. Le pied de page a la **meme** boite mais un mot plus grand — voir .fn-footer__brand img. */ .fn-navbar__logo { display: flex; align-items: center; justify-content: center; width: 117px; height: 56px; } .fn-navbar__logo img { width: auto; height: 25px; } /* Desktop : les trois pilules produit. Mobile : le bouton burger. */ .fn-navbar__nav { display: none; gap: var(--fn-space-10); } .fn-navbar__burger { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 0; background: none; color: var(--fn-text); cursor: pointer; } .fn-navbar__burger svg { width: 30px; height: 30px; } @media (min-width: 1024px) { .fn-navbar { padding-inline: max(var(--fn-gutter), calc((100% - var(--fn-container)) / 2)); } .fn-navbar__nav { display: flex; } .fn-navbar__burger { display: none; } } /* Menu burger plein ecran (mobile). `display: flex` bat la regle `[hidden] { display: none }` du navigateur, qui n'a qu'une specificite d'attribut : sans la ligne ci-dessous, le panneau s'affiche par-dessus la page des le chargement. */ .fn-menu-mobile[hidden] { display: none; } .fn-menu-mobile { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: flex-end; gap: 150px; padding: 82px var(--fn-space-30) var(--fn-space-50); background: #ffffff; } .fn-menu-mobile__list { display: flex; flex-direction: column; align-items: flex-start; gap: var(--fn-space-20); width: 100%; list-style: none; margin: 0; padding: 0; } .fn-menu-mobile__list a { text-decoration: none; } .fn-menu-mobile__close { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 0; background: none; color: var(--fn-text); cursor: pointer; } .fn-menu-mobile__close svg { width: 30px; height: 30px; } @media (min-width: 1024px) { .fn-menu-mobile { display: none; } } /* ----------------------------------------------------------------- BOUTONS Deux familles distinctes dans les maquettes : .fn-btn -> action de page (CTA, navigation) .fn-choice -> option de formulaire (composant Figma « bouton ») */ .fn-btn { display: inline-flex; align-items: center; justify-content: center; /* Ecart 40. Le fichier pose un retrait de 14 autour d'une boite de texte **rognee a la hauteur de capitale** : 10 pour du Lato 14, donc 14 + 10 + 14 = 38, et non 14 + 14 + 14 = 42. Le retrait vertical est porte par une hauteur plancher, comme le font depuis le 2026-09-08 les boutons de 40 et de 44 du fichier — un bouton sur deux lignes grandit alors de lui-meme. */ min-height: 38px; padding-block: 0; padding-inline: var(--fn-space-16); border: 0; border-radius: var(--fn-radius-control); font-family: var(--fn-font-body); font-weight: var(--fn-weight-bold); font-size: var(--fn-size-14); line-height: 1; letter-spacing: var(--fn-tracking); text-decoration: none; cursor: pointer; transition: background-color var(--fn-duration) var(--fn-easing); } .fn-btn--primary { background: var(--fn-action-bg); color: var(--fn-action-fg); } .fn-btn--primary:hover { background: var(--fn-action-bg-hover); } .fn-btn--primary:active { background: var(--fn-action-bg-active); } .fn-btn--neutral { /* pilule de navigation inactive */ background: var(--fn-surface-muted); color: var(--fn-text); } .fn-btn--neutral:hover { background: var(--fn-blanc-600); } .fn-btn--outline { background: transparent; color: var(--fn-text); box-shadow: inset 0 0 0 var(--fn-border-width) var(--fn-choice-border-secondary); } /* Meme dessin, borde de **bleu nuit** et non du vert accent. Releve dans le bouton WhatsApp de l'ecran de resultat du tunnel (206:1659) : fond clair, encre courante, bordure a la couleur d'action. `--outline` ci-dessus reste le borde vert du composant « bouton » de la page DS ; les deux coexistent parce que le fichier emploie les deux. */ .fn-btn--bordered { background: transparent; color: var(--fn-text); box-shadow: inset 0 0 0 var(--fn-border-width) var(--fn-action-bg); } .fn-btn--bordered:hover { background: var(--fn-blanc-500); } /* [PROPOSE] */ .fn-btn--block { width: 100%; } .fn-btn[disabled], .fn-btn--disabled { background: var(--fn-disabled-bg); color: var(--fn-disabled-fg); cursor: not-allowed; } /* Les survols de variante sont plus specifiques que la regle ci-dessus (`.fn-btn--primary:hover` = deux classes contre une classe et un attribut) : sans ce rappel, un bouton eteint reprendrait sa couleur d'action des que la souris le frole, et se dirait cliquable. Depuis le 2026-09-21, le verrou du tunnel eteint « Avanti » tant que l'etape n'est pas renseignee — le cas n'etait pas atteignable avant. */ .fn-btn[disabled]:hover, .fn-btn[disabled]:active, .fn-btn--disabled:hover, .fn-btn--disabled:active { background: var(--fn-disabled-bg); color: var(--fn-disabled-fg); } .fn-btn:focus-visible, .fn-choice:focus-visible, .fn-input:focus-visible, .fn-checkbox:focus-visible { outline: 2px solid var(--fn-focus-ring); outline-offset: 2px; } /* Pilule de nav : 160 de large dans les maquettes desktop, en **plancher** et non en largeur fixe. « Prestito Personale » et « Cessione del Quinto » font ~125 en Lato Bold 14 pour 128 de place (160 - 2 x 16) : le texte est en rem, la boite en px, et un corps de navigateur agrandi, un zoom ou un rendu de fonte un peu plus large les faisait passer sur deux lignes. Le libelle reste sur une ligne et la pilule s'elargit d'elle-meme au besoin. */ .fn-nav-pill { flex-shrink: 0; min-width: 160px; white-space: nowrap; } /* Bouton icone (carrousel, navigation d'etapes) */ .fn-btn-icon { display: inline-flex; align-items: center; justify-content: center; width: var(--fn-icon-tile); height: var(--fn-icon-tile); padding: var(--fn-space-10); border: 0; border-radius: var(--fn-radius-control); background: var(--fn-surface-page); box-shadow: var(--fn-shadow-sm); cursor: pointer; } .fn-btn-icon--soft { /* variante sur fond clair, sans ombre */ background: var(--fn-surface-icon); box-shadow: none; } /* **Troisieme rencontre du meme piege** : `display: inline-flex` bat la regle `[hidden]` du navigateur — celle-ci vient de la feuille de l'agent, que toute declaration d'auteur prime, a specificite egale. Les deux fleches du carrousel d'articles correles sont ecrites `hidden` et revelees par le script ; sans cette ligne elles s'affichaient quand meme, en desktop ou elles n'ont rien a faire faire defiler. `.fn-menu-mobile` avait le meme defaut, et le menu plein ecran s'ouvrait au chargement. */ .fn-btn-icon[hidden] { display: none; } .fn-btn-icon svg { width: var(--fn-icon-lg); height: var(--fn-icon-lg); } /* Option de formulaire - composant Figma « bouton » (5 variantes) */ .fn-choice { display: flex; align-items: center; justify-content: center; min-height: 59px; width: 100%; padding: var(--fn-space-14) var(--fn-space-16); border: 0; border-radius: var(--fn-radius-control); background: var(--fn-choice-bg); color: var(--fn-text); font-family: var(--fn-font-body); font-weight: var(--fn-weight-bold); font-size: var(--fn-size-14); letter-spacing: var(--fn-tracking); cursor: pointer; transition: background-color var(--fn-duration) var(--fn-easing); } .fn-choice:hover { background: var(--fn-choice-bg-hover); } .fn-choice[aria-pressed="true"], .fn-choice--selected { background: var(--fn-choice-bg-selected); color: var(--fn-disabled-fg); } .fn-choice--secondary { box-shadow: inset 0 0 0 var(--fn-border-width) var(--fn-choice-border-secondary); } /* ⚠️ Ce `--invalid`-ci reste **gris**, et ce n'est pas un oubli du passage au rouge du 2026-09-15 : la variante vient du fichier, partage sa regle avec `[disabled]` et porte `cursor: not-allowed`. Sous son nom, c'est un choix **indisponible**, pas un choix mal rempli. Aucun gabarit ne l'emploie. */ .fn-choice[disabled], .fn-choice--invalid { background: var(--fn-disabled-bg); color: var(--fn-disabled-fg); cursor: not-allowed; } /* ------------------------------------------------------- PASTILLES / PUCES */ /* Pastille de section — **corrigee le 2026-09-08**, en relevant l'article et l'index du blog. Le fichier la dessine six fois, et toujours de la meme facon : 31 de haut, un retrait lateral de 20, du Lato Regular 16, **aux deux largeurs**. home desktop 216:2675 254 x 31 texte 214 x 11 a (20, 10) home mobile 216:3067 254 x 31 texte 214 x 11 a (20, 10) -> identiques article 400:1396 98 x 31 texte 58 x 11 a (20, 10) index, tete 387:1254 152 x 31 texte 112 x 11 a (20, 10) index, carte 400:2846 75 x 26 texte 51 x 10 a (12, 8) -> --sm etapes home 216:3176 78 x 30 texte 38 x 10 a (20, 10) -> --bold Deux choses qu'il a fallu comprendre pour lire ces nombres : 1. **les boites de texte du fichier sont rognees a la hauteur de capitale.** « Fase 1 » fait 10 de haut en Lato 14 (14 x 0,72 = 10,08), « Attualita » 11 parce que son accent depasse. Une boite de 10 ou 11 ne dit donc pas « texte de 10 px » : elle dit « capitale de 10 px ». D'ou le retrait reel de 10, et une pastille de 31 et non de 38. 2. **le corps est 16, pas 14.** Mesure d'encre a encre entre la capture 1:1 et un rendu Chrome des memes chaines dans les memes fontes : « Mediatore creditizio autorizzato » fait 214 dans le fichier et 215 en Lato Regular 16 (188 en 14, 221 en Bold 16) ; « Attualita » fait 58 contre 59. La methode est calibree sur deux styles connus — « Navigazione » (.fn-subhead, Lato Bold 16) et « Prestito Personale » (.fn-nav-pill, Lato Bold 14) — qu'elle retrouve tous les deux. La classe rendait donc 38 en mobile et 34 a partir de 768, pour 31 dessines, et portait une bascule de corps que le fichier n'a pas. Les deux sont corrigees ici. Cela **deplace l'accueil** — hero, produits, « Come funziona » — de 7 px en mobile et de 3 en desktop par pastille : c'est une part de l'ecart 34, mesuree au chapitre 4.10 du README. */ .fn-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 31px; padding-inline: var(--fn-space-20); border-radius: var(--fn-radius-pill); background: var(--fn-surface-badge); color: var(--fn-text); /* 12 en mobile, 16 a partir de 1024 (demande du 2026-09-15). Le relevé Figma donne 16 aux deux tailles ; a 390 la pastille du hero (« Comparatore indipendente · Servizio gratuito ») y tenait sur deux lignes et pesait autant que le sous-titre. Le desktop reste sur le relevé — l'ecart est mobile, et lui seul. La bascule est plus bas, apres les deux modificateurs, pour ne pas les emporter : `--bold` (« Fase 1 ») et `--sm` (categories des cartes) gardent leurs 14 partout. */ font-size: var(--fn-size-12); line-height: 1; letter-spacing: var(--fn-tracking); } /* « Fase 1 » du carrousel : Lato **Bold 14** dans une boite de 30. */ .fn-badge--bold { min-height: 30px; font-weight: var(--fn-weight-bold); font-size: var(--fn-size-14); } /* Pastille de categorie des cartes de l'index : 26 de haut, retrait de 12, Lato Regular 14 (« Attualita » 51 contre 51 mesures). Elle venait de la feuille transitoire, ou elle n'etait qu'un « --sm » sans relevé. */ .fn-badge--sm { min-height: 26px; padding-inline: var(--fn-space-12); font-size: var(--fn-size-14); } /* Retour aux 16 du relevé Figma en desktop. Le `:not()` vise les pastilles nues : sans lui la regle, plus tardive, ramenerait aussi `--bold` et `--sm` a 16 alors que le fichier les dessine a 14. */ @media (min-width: 1024px) { .fn-badge:not(.fn-badge--bold):not(.fn-badge--sm) { font-size: var(--fn-size-16); } } /* Les pastilles de **categorie** sont teintees, et les deux teintes du fichier sont deja dans la palette : « Attualita » sur `--fn-orange-100` (#ffe1b0) et « Guida » sur `--fn-vert-vitalite-100` (#c7e7d0), echantillonnes au pixel. Le bleu de `.fn-badge` reste la valeur par defaut — c'est celui que porte la pastille de tete de l'index, « Guida & Consigli ». `finami_badge_class()` fait tourner les trois sur les categories du site. */ /* La pastille de categorie est un lien vers l'archive : elle ne doit pas pour autant se souligner — le fichier n'en dessine aucun trait. */ .fn-badge { text-decoration: none; } .fn-badge--ambre { background: var(--fn-orange-100); } .fn-badge--vert { background: var(--fn-vert-vitalite-100); } /* Pastille « 8 min di lettura », posee en bas a droite du visuel d'une carte. ⚠️ **Elle n'est pas mesurable** : les visuels de carte sont des frames aplaties (« Slide 16:9 - 3 » et suivantes), et `get_metadata` les rend sans enfants — meme piege que le hero de l'accueil et que les deux corps du 404. Ce qui suit est donc **lu sur la capture 1:1**, pas releve : pastille de 23 de haut environ, coins pleins, noir translucide, texte blanc, a 10 des bords du visuel. Le rayon et le voile avaient tous deux leur token depuis un relevé anterieur (`--fn-radius-chip`, `--fn-scrim`), sans avoir jamais servi. */ .fn-chip { display: inline-flex; align-items: center; min-height: 23px; padding-inline: var(--fn-space-10); border-radius: var(--fn-radius-chip); background: var(--fn-scrim); backdrop-filter: blur(2px); color: var(--fn-text-inverse); font-size: var(--fn-size-12); line-height: 1; letter-spacing: var(--fn-tracking); } /* ------------------------------------------------------------------ CARTES */ .fn-card { background: var(--fn-surface-page); border: var(--fn-border-width) solid var(--fn-border-subtle); border-radius: var(--fn-radius-card); padding: var(--fn-space-20); } .fn-card__media { border-radius: var(--fn-radius-media); overflow: hidden; } .fn-card__media img { width: 100%; height: 100%; object-fit: cover; } /* Carte produit (home) : visuel + sur-titre + titre + liste + CTA */ .fn-product-card { display: flex; flex-direction: column; gap: var(--fn-space-20); background: var(--fn-surface-page); /* Le fichier donne 380 de carte pour 340 de contenu (216:2681 / 216:2682), soit un retrait de 20 **filet compris** : dans Figma un contour interieur ne change pas la boite. Une `border` le ferait — 2 de plus en hauteur comme en largeur —, d'ou le filet en ombre interieure, l'idiome que la feuille emploie deja pour `.fn-btn--outline` et `.fn-btn--bordered`. */ box-shadow: inset 0 0 0 var(--fn-border-width) var(--fn-border-card); border-radius: var(--fn-radius-card); padding: var(--fn-space-20); } /* Le visuel fait **211 de haut aux deux largeurs** : 340 x 211 en desktop (216:2682) et 310 x 211 en mobile (216:3074). Ce n'est donc pas un rapport — `aspect-ratio: 380 / 211` etait celui du fichier image (760 x 422), et il confondait la largeur de la **carte** avec celle du visuel : le visuel rendait 191,36 pour 211. */ .fn-product-card__media { height: 211px; } /* Trois niveaux d'imbrication dans les maquettes, chacun avec son ecart : corps 10, bloc interne 20, sur-titre et titre 10. Le texte est centre, sauf la liste de controles, qui est un bloc centre a lignes alignees a gauche. */ .fn-product-card__body { display: flex; flex-direction: column; gap: var(--fn-space-10); } .fn-product-card__inner { display: flex; flex-direction: column; align-items: center; gap: var(--fn-space-20); padding-block: var(--fn-space-10) var(--fn-space-20); text-align: center; } /* Meme piege que l'en-tete de section : le `
` du corps de carte gardait ses 14 en haut et en bas. +28 par carte, et les trois cartes etant cote a cote, +28 sur la section. */ .fn-product-card__inner > * { margin: 0; } .fn-product-card__head { display: flex; flex-direction: column; gap: var(--fn-space-10); width: 100%; } .fn-product-card__list { text-align: left; } .fn-product-card__list { display: flex; flex-direction: column; gap: var(--fn-space-10); list-style: none; margin: 0; padding: 0; } .fn-product-card__list li { display: flex; align-items: flex-start; gap: var(--fn-space-10); font-size: var(--fn-size-14); line-height: var(--fn-leading-body); } .fn-product-card__list svg { flex: 0 0 auto; width: var(--fn-icon-md); height: var(--fn-icon-md); } /* Tuile d'icone 40x40 + libelle (raccourcis du hero) */ .fn-tile { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: var(--fn-icon-tile); height: var(--fn-icon-tile); border-radius: var(--fn-radius-control); background: var(--fn-surface-icon); /* Le fond de la tuile reste clair meme sur une carte sombre : l'icone doit donc reposer sa couleur, sinon elle herite du blanc et disparait — c'est le cas de la derniere carte de « Perche scegliere Finami ». */ color: var(--fn-text); } .fn-tile svg { width: var(--fn-icon-md); height: var(--fn-icon-md); } /* Tuile large : cartes « avantage » de la home, 48 px avec une icone de 24. */ .fn-tile--lg { width: var(--fn-icon-tile-lg); height: var(--fn-icon-tile-lg); } .fn-tile--lg svg { width: var(--fn-icon-lg); height: var(--fn-icon-lg); } /* Carte « avantage » : tuile d'icone, titre et texte. Sert la grille « Perché scegliere Finami » (Figma 216:2919). Rayon 4 et non 10 : cette grille n'emploie pas le rayon des cartes produit. La variante --inverse (dernière carte de la grille) garde sa bordure claire dans la maquette, ce qui est volontaire : elle n'est pas neutralisee ici. */ .fn-feature-card { display: flex; flex-direction: column; gap: var(--fn-space-20); padding: var(--fn-space-20); background: var(--fn-surface-page); /* Filet en ombre interieure : 346 de carte pour 306 de contenu (216:2919 / 216:2923), soit 20 de retrait filet compris. Voir `.fn-product-card`. */ box-shadow: inset 0 0 0 var(--fn-border-width) var(--fn-border-card); border-radius: var(--fn-radius-control); } /* Titre de carte « avantage » : Barlow ExtraBold 16, seul titre de ce corps dans les maquettes. */ .fn-feature-title { font-family: var(--fn-font-heading); font-weight: var(--fn-weight-xbold); font-size: var(--fn-size-16); /* Ecart 32 : boite de 19 pour un corps de 16 (216:2924, « Completamente gratuito »), soit 1,1875 exactement. */ line-height: var(--fn-leading-barlow); letter-spacing: var(--fn-tracking); margin: 0; } .fn-feature-card__body { display: flex; flex-direction: column; gap: var(--fn-space-10); } /* Le fichier reserve **trois lignes** au texte, quelle que soit sa longueur : les six boites de « Perche scegliere » font 306 x 60 (216:2925, 216:2939, 216:2946, 216:2962…), y compris celles dont le texte tient sur deux. Le README l'annoncait — « texte a hauteur fixe de 60 » — sans que la feuille le porte : en desktop la grille egalisait ses rangees et le defaut ne se voyait pas, en mobile trois cartes sur six rendaient 177 pour 197. `min-height` plutot que `height`, pour qu'un texte plus long ne se coupe pas. */ .fn-feature-card p { margin: 0; min-height: calc(3 * var(--fn-leading-body)); } .fn-feature-card--inverse { background: var(--fn-surface-dark); color: var(--fn-text-inverse); } .fn-quick-link { display: flex; align-items: center; gap: var(--fn-space-17); width: 300px; max-width: 100%; padding: var(--fn-space-10) var(--fn-space-14); border-radius: var(--fn-radius-tile); background: var(--fn-surface-raised); /* La carte est posée sur le panneau du hero, qui passe la couleur en inverse : il faut donc rétablir la couleur de texte explicitement. */ color: var(--fn-text); text-decoration: none; } .fn-quick-link__text { display: flex; flex-direction: column; gap: var(--fn-space-6); text-align: left; } .fn-quick-link__title { font-weight: var(--fn-weight-bold); font-size: var(--fn-size-14); line-height: var(--fn-leading-tight); } .fn-quick-link__hint { font-weight: var(--fn-weight-bold); font-size: var(--fn-size-10); line-height: var(--fn-leading-tight); color: var(--fn-text-link); } /* Carte chiffre cle (bandeau de preuve) */ .fn-stat-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--fn-space-10); flex: 1 1 0; /* Retrait de 20 : le fichier donne 285 de carte pour 245 de contenu (216:2660 / 216:2662). Le filet dessine par Figma est retire depuis le 2026-09-30, a la demande — le retrait, lui, reste. Sans filet la carte ne ressortait plus : elle prend un fond sable clair [PROPOSE], meme jour. */ padding: var(--fn-space-20); background: var(--fn-surface-sand-soft); border-radius: var(--fn-radius-control); text-align: center; } .fn-stat-card__value { font-family: var(--fn-font-body); font-weight: var(--fn-weight-bold); font-style: italic; font-size: var(--fn-size-42); /* Ecart 32 : boite de 50 pour un corps de 42 (216:2661, « -60% »), soit l'interlignage « auto » de Lato. A 1,1 la valeur rendait 46,2 et la carte 118,19 pour 120. */ line-height: var(--fn-leading-lato); letter-spacing: var(--fn-tracking); color: var(--fn-border-strong); margin: 0; /* Le compteur de `home.js` y loge la valeur lue en `.fn-visually-hidden`, donc en position absolue. Sans ancetre positionne elle s'accrochait a la page : le defilement mobile de `.fn-stats` ne la rognait plus, et la derniere carte comptee elargissait le document a 1125 (2026-10-19). */ position: relative; } .fn-stat-card__label { font-size: var(--fn-size-14); line-height: var(--fn-leading-body); margin: 0; } /* Carte article — releveee le 2026-09-08. Elle sert deux endroits, et le fichier la dessine avec le **meme ecart de 10 entre tous ses elements**, quel que soit leur nombre. C'est ce qui permet de n'ecrire qu'une classe : les enfants sont a plat, le `gap` fait le reste. « Articoli correlati » 400:1738 253,33 x 270,5 visuel 142,5 · 10 · titre 38 · 10 · chapo 40 · 10 · date 20 = 270,5 grille de l'index 387:1287 253,33 x 276,5 visuel 142,5 · 10 · pastille+date 26 · 10 · titre 38 · 10 · chapo 40 = 276,5 Le titre est en **Barlow ExtraBold 16**, interligne « auto » de Barlow : la boite fait 38 pour deux lignes dans 253,33, et 16 x 1,1875 x 2 = 38 au pixel. La classe portait 700 et `--fn-leading-tight` : deux erreurs, et la premiere se voyait — le thema n'auto-heberge Barlow qu'en 800, une demande de 700 tombait sur une graisse synthetique. */ .fn-article-card { display: flex; flex-direction: column; gap: var(--fn-space-10); } /* **Cinquieme rencontre du meme piege**, et la premiere qu'un outil ait attrapee au lieu d'un oeil : la marge par defaut des deux
de la carte — le chapo et la ligne de date — s'ajoutait au `gap` au lieu de s'y fondre, en flux flex les marges ne fusionnant pas. La carte rendait 298,59 pour 270,5 dessines, soit **+28** par carte, et la bande « Articoli correlati » entiere en heritait. Les quatre precedentes : `.fn-404__inner`, `.fn-page-intro`, l'en-tete du tunnel et `.fn-footer__disclaimer`. */ .fn-article-card > * { margin: 0; } .fn-article-card__media { display: block; position: relative; aspect-ratio: 16 / 9; border-radius: var(--fn-radius-card); overflow: hidden; background: var(--fn-surface-muted); } .fn-article-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .fn-article-card__media .fn-chip { position: absolute; right: var(--fn-space-10); bottom: var(--fn-space-10); } /* Rangee pastille de categorie / date : la date est calee a droite, et la rangee fait 26 — la hauteur de la pastille, pas celle de la date. */ .fn-article-card__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--fn-space-10); min-height: 26px; } .fn-article-card__title { font-family: var(--fn-font-heading); font-weight: var(--fn-weight-xbold); font-size: var(--fn-size-16); line-height: var(--fn-leading-barlow); letter-spacing: var(--fn-tracking); margin: 0; } .fn-article-card__title a { text-decoration: none; } .fn-article-card__title a:hover { text-decoration: underline; } /* Le chapo tient sur **deux lignes** dans le fichier, et la quatrieme carte de « Articoli correlati » y est coupee par des points de suspension : c'est un ecretage, pas un extrait court. */ .fn-article-card__excerpt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; margin: 0; } .fn-article-card__footer { display: flex; justify-content: flex-end; } /* ---------------------------------------------------- GRILLES DE L'ACCUEIL Chaque section de la home a sa propre trame ; elles ne se ramenent pas a une grille commune sans deformer les maquettes. */ /* Chiffres cles : quatre colonnes egales en desktop. En mobile les maquettes figent les cartes a 285 px dans un cadre de 390 — la quatrieme deborde, et la troisieme depasse a peine du bord : c'est un defilement horizontal, pas une grille repliee. On le rend comme tel, avec accroche au defilement. */ .fn-stats { display: flex; gap: var(--fn-space-20); overflow-x: auto; scroll-snap-type: x proximity; /* Le defilement va d'un bord a l'autre de l'ecran, la gouttiere etant rendue par le padding : sans quoi la derniere carte se coupe net. */ margin-inline: calc(-1 * var(--fn-gutter)); padding-inline: var(--fn-gutter); /* Sans cette ligne la premiere carte se colle au bord de l'ecran, et elle seule : l'accroche cale le debut de la carte sur le bord du *padding-box*, donc le navigateur defile de 20 des le chargement et mange la gouttiere que le `padding-inline` venait de poser. Le retrait n'etait pas perdu — il restait a droite, hors de vue. `scroll-padding` deplace le bord auquel l'accroche se refere ; c'est le seul reglage que le padding ne suffit pas a donner. Mesure a 390 : la carte « -60% » passe de 0 a 20, comme le conteneur. */ scroll-padding-inline: var(--fn-gutter); scrollbar-width: none; } .fn-stats::-webkit-scrollbar { display: none; } .fn-stats > * { flex: 0 0 285px; scroll-snap-align: start; } /* Cartes produit : 380 de large dans les maquettes, une par ligne en mobile. */ .fn-products { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--fn-space-20); } /* Cartes « avantage » : 346 de large, trois colonnes au-dela de 1024. */ .fn-features { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--fn-space-20); } @media (min-width: 768px) { .fn-stats { overflow: visible; margin-inline: 0; padding-inline: 0; } .fn-stats > * { flex: 1 1 0; } .fn-features { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { /* Figma pose 10 de retrait autour de la rangee (216:2680, 1200 x 663) : c'est ainsi qu'il centre 3 x 380 + 2 x 20 = 1180 dans les 1200 du conteneur, et cela vaut 20 en hauteur. Le cadre mobile (216:3072) n'en a pas — d'ou le retrait ici et non dans la regle de base. */ .fn-products { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: var(--fn-space-10); } .fn-features { grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3 x 346 + 2 x 20 : la grille des avantages est plus etroite que le conteneur, elle ne remplit pas la ligne. */ max-width: 1078px; margin-inline: auto; } } /* Panneau sable (informations legales, encarts) */ .fn-panel-sand { display: flex; flex-direction: column; gap: var(--fn-space-30); padding: var(--fn-space-30) var(--fn-space-20); border-radius: var(--fn-radius-card); background: var(--fn-surface-sand); } .fn-panel-sand__body { flex: 1 1 0; } /* Un element flex ouvre un contexte de formatage : les marges de son premier et de son dernier enfant n'en sortent pas et s'ajoutent a sa hauteur. Les trois `
` gardaient donc leurs 14 par defaut en haut et en bas — +28 sur la section, tout l'ecart 34 pour « informativa » (216:2963). Septieme rencontre du meme piege. */ .fn-panel-sand__body > * { margin: 0; } .fn-panel-sand__body p + p { margin-top: var(--fn-space-20); } .fn-panel-sand .fn-title { flex: 0 0 auto; } @media (min-width: 768px) { .fn-panel-sand { flex-direction: row; align-items: center; gap: var(--fn-space-50); padding: var(--fn-space-30) var(--fn-space-50); } } /* -------------------------------------------------------------------- HERO */ .fn-hero { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--fn-space-50) var(--fn-gutter); overflow: hidden; } /* Le fond est le composite Figma deja aplati (deux photographies melangees en « hard light », plus le voile noir a 20 %) : aucun calque a superposer ici, sans quoi le voile serait applique deux fois. Voir assets/figma/flatten-hero.py. */ .fn-hero__bg { position: absolute; inset: 0; pointer-events: none; } .fn-hero__bg picture, .fn-hero__bg img { width: 100%; height: 100%; object-fit: cover; display: block; } .fn-hero__panel { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--fn-space-30); width: 100%; padding: var(--fn-space-20); border-radius: var(--fn-radius-card); background: var(--fn-surface-glass); box-shadow: var(--fn-shadow-md); text-align: center; color: var(--fn-text-inverse); } .fn-hero__panel .fn-lead { color: var(--fn-text-on-dark-soft); } .fn-hero__links { display: flex; flex-direction: column; align-items: center; gap: var(--fn-space-10); } .fn-hero__trust { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--fn-space-10) var(--fn-space-30); } .fn-hero__trust li { display: flex; align-items: center; gap: var(--fn-space-10); font-weight: var(--fn-weight-bold); font-size: var(--fn-size-12); /* La ligne vaut **l'icone**, soit 16, et non les 20 de `--fn-leading-body`. Releve sur `home_mobile-v3.png`, capture 1:1 du cadre 216:2997 : les deux lignes de reassurance y sont a 30 et a 56 du bas du bloc de raccourcis, soit 16 + 10 + 16 = 42 et non 20 + 10 + 20 = 50. Le heros etant aplati, c'est la capture qui mesure et non le releve. -4 en desktop (une ligne), -8 en mobile (deux). */ line-height: var(--fn-icon-sm); color: var(--fn-text-on-dark-soft); } .fn-hero__trust svg { width: var(--fn-icon-sm); height: var(--fn-icon-sm); } /* Les maquettes n'ordonnent pas les trois reassurances pareil selon la taille d'ecran : le mobile place le cadenas en deuxieme pour tenir sur deux lignes, le desktop garde les etincelles. Le balisage suit le mobile, le desktop remet l'ordre par `order`. */ @media (min-width: 768px) { .fn-hero__trust li:nth-child(2) { order: 3; } } .fn-hero__trust { list-style: none; margin: 0; padding: 0; } @media (min-width: 768px) { .fn-hero__links { flex-direction: row; justify-content: center; } .fn-hero__panel { width: auto; max-width: 960px; } .fn-hero__panel .fn-hero-title { max-width: 830px; } .fn-hero__panel .fn-lead { max-width: 674px; } } /* --------------------------------------------------------------- FORMULAIRE Tunnel en 7 etapes, releve le 2026-09-03 dans le composant Figma « formulaire » (196:1041, page DS) et ses **huit** variantes : les sept etapes et l'ecran de resultat. Le gabarit « Formulaire » (216:3373) ne dessine que la premiere etape — c'est la page DS qui porte les autres. Le squelette est un empilement de 550 de large, a 30 d'ecart : progression, question, corps d'etape, navigation. A l'interieur d'un bloc, l'ecart tombe a 10. Le formulaire se pose sur la section beige et **chaque surface de saisie est claire** : c'est le contraste de fond qui dessine les champs et les options. Il n'y a aucune bordure dans le fichier — echantillonnage au pixel des huit variantes : #ffffff pour les options, #fefefe pour les champs, la case et les cartes, et du transparent partout ailleurs. */ /* En-tete de gabarit : nom du produit et accroche, centres a 20 d'ecart. Releve dans « Formulaire » (216:3388 desktop, 216:3432 mobile) : 50 de respiration au-dessus et au-dessous, comme la section beige qui suit. Le meme en-tete sert aux pages editoriales, ou il prend un fil d'ariane devant le titre : « Mentions legales » (400:3373 desktop, 400:3419 mobile) pose 50 + 14 + 20 + 62 + 20 + 20 + 50 = 236, exactement la hauteur du cadre, et 50 + 14 + 20 + 43 + 20 + 40 + 50 = 237 en mobile. Trois elements a 20 d'ecart dans une section a 50 : c'est cette classe, pas une autre. */ .fn-page-intro { display: flex; flex-direction: column; align-items: center; gap: var(--fn-space-20); text-align: center; } /* Troisieme rencontre du meme piege : `.fn-body` et `.fn-lead` n'annulent pas la marge par defaut du
, qui s'ajoute au gap au lieu de s'y fondre — en flux flex les marges ne fusionnent pas. L'en-tete du tunnel rendait donc 34 d'ecart pour 20 dessines, et 14 de trop sous le bloc. Corrige ici plutot qu'au cas par cas : le 404 avait deja `.fn-404__inner > *`. */ .fn-page-intro > * { margin: 0; } /* Fil d'ariane des gabarits interieurs — instance « fil d'ariane », 400:3377 en desktop et 400:3423 en mobile, boite de 14 de haut, Lato 12 sur le gris #545f65. Le fichier ne distingue **pas** le lien de la page courante : meme corps, meme couleur, meme graisse. Il est le seul element non centre de l'en-tete, a gauche du conteneur aux deux largeurs. */ .fn-page-intro > .fn-breadcrumb { align-self: flex-start; text-align: left; } .fn-breadcrumb { font-size: var(--fn-size-12); line-height: var(--fn-leading-badge); color: var(--fn-text-secondary); } .fn-breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fn-space-6); margin: 0; padding: 0; list-style: none; } /* Le separateur mesure 4 x 6 px sur la capture. A cette taille un glyphe et un trace Lucide sont indiscernables, et aucun export « chevron » n'est en magasin : le glyphe est retenu parce qu'il suit le corps du texte et ne demande aucun asset. Si le composant se relit un jour au MCP et qu'il porte bien une icone, c'est cette declaration seule qui change. */ .fn-breadcrumb li + li::before { content: "\203A"; /* › */ margin-right: var(--fn-space-6); } .fn-breadcrumb a { text-decoration: none; } .fn-breadcrumb a:hover { text-decoration: underline; } .fn-form { display: flex; flex-direction: column; gap: var(--fn-space-30); width: 100%; max-width: 550px; margin-inline: auto; } /* Les **huit** variantes du composant Figma font 592 de haut, la plus courte comme la plus longue, et le gabarit leur reserve 692 (592 + 2 x 50 de section) : la zone du formulaire est une boite fixe, pas une boite qui suit son contenu. D'ou ce plancher, qui reproduit le blanc sous les tuiles de la variante 1 et, accessoirement, empeche le pied de page de sauter d'une etape a l'autre. Un plancher et non une hauteur : une etape qui deborde (un libelle qui s'enroule, un message d'erreur) doit pouvoir grandir. Desktop seulement — en 390, les 592 de Figma sont deja depasses par le contenu (606) et le plancher ne servirait a rien. La huitieme variante etant l'ecran de resultat, `.fn-outcome` porte le meme plancher : c'est la meme zone de page, avec un autre contenu. */ @media (min-width: 768px) { .fn-form, .fn-outcome { min-height: 592px; } } /* --- Progression ------------------------------------------------------- Piste de 10 de haut, remplissage = passo / 7. Figma pose 550/7 = 78,57 dans la variante 1 et 549,99 dans la septieme : c'est bien une fraction du total, et non un pas fixe. */ .fn-form__progress { display: flex; flex-direction: column; gap: var(--fn-space-10); } .fn-progress { height: 10px; border-radius: var(--fn-radius-full); background: var(--fn-surface-page); overflow: hidden; } .fn-progress__bar { height: 100%; border-radius: var(--fn-radius-full); background: var(--fn-action-bg); } .fn-form__count { font-size: var(--fn-size-14); line-height: var(--fn-leading-body); } /* --- Question : titre Barlow 32, sous-titre Lato 14 --- */ .fn-form__question { display: flex; flex-direction: column; gap: var(--fn-space-10); } .fn-form__sub { font-size: var(--fn-size-14); line-height: var(--fn-leading-body); margin: 0; } /* --- Corps d'etape : sous-blocs a 30 d'ecart. Porte par un