/* process.css — section « Notre recette de grand-mère » (#process). Toutes les valeurs sont relevées sur la source le 2026-08-11, aux trois paliers, APRÈS parcours de la section par paliers puis retour au bord haut (règle A1#5 renforcée : `document.getAnimations()` vide ne prouve rien). `location.href` a été renvoyé dans le MÊME `browser_evaluate` que chaque mesure (règle A1#6). Rien n'est extrapolé sauf mention explicite. Contrôle arithmétique de la hauteur de section, aux trois paliers : 1440 : 60 (pad haut) + 136 (titre) + 60 (gap) + 549 (carte) + 145 = 950 1024 : 60 + 104 + 60 + 402 + 145 = 771 390 : 30 + 205,5 + 40 + 831,6 + 70 = 1177,1 Les trois totaux sont exactement les hauteurs mesurées sur la source (950 / 771 / 1177,1). La cible du brief à 1440 (950) est donc atteinte. --------------------------------------------------------------------------- CONTREDIT LE CONSTAT n° 5 DU CONTRÔLEUR (« fond uni, aucune image ni dégradé »). La source pose bien un CALQUE DE POIS sur toute la section : radial-gradient(19px 19px, C1, C1 25%, C2 25%) avec C1 = 255 191 0 (--c-orange-light) et C2 = 255 159 0 (--c-orange) — écrit ici sans la notation fonctionnelle, que tools/check.py refuse même en commentaire ; background-size 9,5px 9,5px, repeat — identique aux trois paliers, opacité 1, aucun ancêtre porteur d'opacity/filter/blend (chaîne remontée jusqu'à , règle A1#1). C'est exactement le motif déjà relevé sur #statistics (voir statistics.css) ; les deux tokens --c-orange-light / --c-orange existent déjà pour lui. --------------------------------------------------------------------------- Structure de section (flex colonne centrée, identique aux trois paliers) : [intro : titre + sticker] — gap — [carte] Carte (« Step N - Desktop » / « - Phone » sur la source) : 1440 : 1360 × 549, padding 40, ligne, gap 50, align-items center, rayon 40, fond --c-cream, overflow VISIBLE (le halo déborde de 10,3px en haut et 10,2px en bas sur l'orange — vérifié à l'écran) 1024 : 944 × 402, mêmes réglages 390 : 350 × auto (831,6 mesuré), padding 40px 20px, COLONNE, gap 75, centré, overflow HIDDEN (relevé : la source bascule bien `overflow` de `visible` à `hidden` entre les deux variantes) La hauteur 549 / 402 est FIXE sur la source (elle ne dépend d'aucun contenu : le plus haut des enfants vaut 447,9 pour 469 de boîte de contenu à 1440). Elle est donc écrite en dur ici, ce qui garantit aussi que la section garde sa hauteur quel que soit l'onglet actif. À 390 la hauteur est au contraire dictée par le contenu (40 + 326,3 + 75 + 350,3 + 40 = 831,6). Typographie relevée : titre h2 Climate Crisis 400 — 68/68 (1440) · 52/52 (1024) · 42/42 ls -1,6px (390) ; centré ; `text-wrap: balance` relevé sur la source (sans lui la coupe gloutonne change à 390) sticker Poppins 600 — 20/26 ls -0,8 · 16/20,8 ls -0,64 · 15/19,5 ls -0,6 pastilles Poppins 600 — 37/33,3 ls -1,11 (1440) · 42/37,8 ls -1,26 (1024) · 33/29,7 ls -0,99 (390). ⚠ la TABLETTE est plus grosse que le desktop : c'est bien ce que rend la source, vérifié deux fois. titre h3 Climate Crisis 400 — 37/37 · 30/30 · 26/30 (centré à 390) texte Poppins 600 — 18/25,2 ls -0,36 · 17/23,8 ls -0,34 (1024 ET 390) Manques du brief (A0), tous relevés puis reconstruits ici : — le calque de pois ci-dessus ; — QUATRE illustrations (une par étape) et non une seule ; trois d'entre elles (UPOR…, xpjlkd…, aGXEP…) n'étaient NI dans assets/img/, NI dans assets/manifest.json, NI dans assets/README.md — téléchargées et enregistrées, voir le rapport de tâche ; — le halo « explosion étoilée » derrière chaque illustration : même tracé SVG (viewBox 0 0 473 471) que celui déjà inliné en tâche 6 (.studio__icon-burst) et en tâche 9 (.benefits__card-blob--mint) — vérifié caractère par caractère, c'est le MÊME `d`. Il n'est pas ré-inliné une troisième fois dans le markup : il est posé ici en masque CSS, ce qui évite de le dupliquer quatre fois (une par panneau) et ne touche pas au code des sections 6 et 9, closes. — le sticker « Process » : tracé SVG unique (viewBox 0 0 173 89, un seul `path`, fill relevé à 192 236 191 = --c-mint). `.sticker` rendrait une ellipse : faux (règle A1#0). Inliné dans le markup, comme le sticker « Portfolio » de la tâche 10. */ .process { position: relative; display: flex; flex-direction: column; align-items: center; gap: 60px; padding: 60px 40px 145px; background: var(--c-orange); /* Bord festonné du haut : primitive `.scallop-top` (layout.css), portée par la section dans le markup. Relevé sur la source : 15 bosses de 96 × 75,6 remontées de 61 à 1440, 68,27 × 53,76 / 40 à 1024, 26 × 20,47 / 20 à 390 — exactement les tokens --scallop-* en place. La section ne doit donc PAS passer en overflow: hidden/clip. */ --scallop-color: var(--c-orange); } /* Motif de pois — voir l'en-tête. Calque dédié plutôt que fond de section, pour que `background` de .process reste une couleur simple (même choix qu'en statistics.css). Premier enfant du flux, donc peint sous les blocs positionnés qui le suivent, sans avoir besoin d'un z-index. Le motif n'occupe PAS toute la section : il apparaît en fondu depuis le haut. Masque relevé sur la source le 2026-08-13 sur le conteneur de SON calque de pois de #process (hauteur de calque 950 à 1440 et 1177 à 390 : ce sont bien les hauteurs de cette section-ci, pas celles d'une voisine) : mask-image: linear-gradient(181deg, transparent 10%, opaque 48%) Soit, au signe près, le masque déjà posé sur #statistics — la source emploie le MÊME fondu aux deux sections à pois, et aux trois largeurs. C'est lui qui raccorde le bord festonné à la section : les bosses sont peintes en --c-orange uni, et sans ce fondu les pois démarraient net juste sous elles, d'où l'arête horizontale visible au bas du feston. ⚠ Même contrainte qu'en statistics.css : la source écrit sa borne opaque en noir brut, interdit ici hors de `tokens.css` (check.py) ; seul le canal alpha d'un masque compte, `transparent` + un token rendent donc exactement pareil. */ .process__dots { position: absolute; inset: 0; background-image: radial-gradient(19px 19px, var(--c-orange-light), var(--c-orange-light) 25%, var(--c-orange) 25%); background-size: 9.5px 9.5px; background-repeat: repeat; -webkit-mask-image: linear-gradient(181deg, transparent 10%, var(--c-ink) 48%); mask-image: linear-gradient(181deg, transparent 10%, var(--c-ink) 48%); pointer-events: none; } /* ---------- Intro : titre + sticker ---------- Même largeur que le conteneur de titre de la source (800 / 600 / pleine largeur), pour que la position du sticker, exprimée en pourcentage de cette boîte, se transpose telle quelle d'un palier à l'autre. */ .process__intro { position: relative; width: 800px; } .process__heading { width: 100%; /* Le

de la source fait 750px dans une boîte de 800 à 1440, et occupe toute la boîte (600) à 1024 : un max-width reproduit les deux. / max-width: 750px; margin-inline: auto; font-family: var(--font-display); font-weight: 400; font-size: var(--fs-68); line-height: 1; color: var(--c-ink); text-align: center; / Relevé sur la source (`text-wrap: balance` calculé sur le h1). / text-wrap: balance; } / Le sticker est dimensionné par son contenu (libellé + 30px de padding sur les quatre côtés), pas par une largeur codée : c'est ce que fait la source (vérifié en dépivotant les AABB de 20° aux trois paliers — 133,53 × 86,02 à 1440, 118,87 × 80,80 à 1024, 115,19 × 79,50 à 390, soit exactement le libellé + 60 dans les deux axes) et c'est la seule façon de garantir que le libellé tient dans la forme (règle A1#3). Position : centre du sticker à -4,95% / 63% de la boîte du titre — vérifié identique aux deux paliers (1440 : -39,55/800 et 85,65/136 ; 1024 : -30,05/600 et 65,5/104). / .processsticker { position: absolute; left: -4.95%; top: 63%; display: inline-grid; place-items: center; padding: 30px; transform: translate(-50%, -50%) rotate(-20deg); } .processsticker-shape { position: absolute; left: 50%; top: 50%; width: 100%; height: auto; aspect-ratio: 173 / 89; transform: translate(-50%, -50%); fill: var(--c-mint); pointer-events: none; } .processsticker-label { position: relative; font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-20); line-height: 26px; letter-spacing: -0.8px; color: var(--c-ink); white-space: nowrap; } / ---------- Carte ---------- `.card` (layout.css) n'est PAS réutilisée (règle A1#0) : elle ne porte qu'un fond, un rayon de --r-xl (32) et `overflow: hidden`, alors que la source pose un rayon de 40 et un overflow VISIBLE à ce palier. Trois déclarations sur trois auraient dû être annulées. La carte est aussi le bloc positionné de référence de l'illustration, qui est en absolu dans la colonne de droite (voir .processvisual). / .process__card { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px; width: 100%; / Le conteneur de la source est en max-width 1440px. / max-width: 1440px; height: 549px; padding: 40px; background: var(--c-cream); border-radius: 40px; } / ---------- Sélecteur d'étapes ---------- Sur la source ce sont quatre
en cursor: pointer, SANS tabindex, sans role et sans libellé : inatteignables au clavier, muets pour un lecteur d'écran. Écart délibéré et documenté (voir le rapport de tâche) : ce sont ici de vrais