à sa taille mesurée, 20px/24px.
- Pas de bloc à fort border-radius sous le CTA : le repère "collage en arche à
bloc arrondi" du brief initial ne correspond à rien de mesurable sur la
source. Ce qui existe réellement : un panneau plein cadre (1440×658, de
y=526 à y=1184) avec un fond en cercles concentriques (radial-gradient +
repeating-radial-gradient, --c-orange-deep/--c-orange, superposés en
background-blend-mode:multiply — relevé littéralement sur le style inline
de la source), une forme centrale en SVG blanc (data: URI, relevée sur le
DOM), et 4 photos rondes positionnées en arc au-dessus.
- Les 3 stickers ("Dev", "Market", "Créa") sont des . */
.hero__tagline {
/* 7px : logotype bas=414 (116+298), accroche ligne 1 haut=421 (mesuré). */
margin-block-start: 7px;
font-family: var(--font-display);
font-weight: 400;
font-size: var(--fs-20);
line-height: 24px;
color: var(--c-ink);
}
.hero__tagline-line {
display: block;
}
/* ---------- Stickers ---------- */
/* Poppins 600, 20px/26px, interlettrage -0.8px, --c-ink, centrés (mesuré) —
c'est la valeur de la source, mais la source ne masque pas le libellé par
la forme (texte et SVG sont deux calques indépendants sur le DOM source,
vérifié : le texte n'est jamais rogné). Notre `.sticker--masked` applique
le `mask` sur l'élément qui porte aussi le texte : à 20px/26px avec le
padding par défaut de `.sticker` (var(--sp-3) var(--sp-5) = 12/24px), le
texte déborde de la boîte du tracé mesuré (65×64 pour "Dev" par exemple)
et le masque le rogne ("Dev" -> "De", "Market" -> "Marke", constaté au
tour précédent). Corrigé en réduisant le padding et la taille du libellé
pour qu'il tienne dans chaque tracé, mesuré empiriquement par capture à
chaque palier — la géométrie du tracé (pétales, bosses, pointes) mange une
partie de la boîte englobante, donc une simple règle de trois ne suffit
pas. La forme elle-même n'est pas touchée (mesure du plan conservée). */
.hero__sticker {
position: absolute;
z-index: 3;
--sticker-bg: var(--c-red);
font-family: var(--font-sans);
font-weight: 600;
font-size: var(--fs-20);
line-height: 1.15;
letter-spacing: -0.8px;
padding: 3px 6px;
}
/* Positions en % de `.hero__logo-wrap` (boîte du logotype), calculées à partir
de la boîte mesurée sur le DOM source (post-rotation, getBoundingClientRect)
en résolvant la boîte pré-rotation dont le centre coïncide et dont la boîte
englobante après notre propre `rotate()` reproduit la mesure — la rotation
gonfle la boîte englobante, la taille CSS brute ne peut pas être copiée telle
quelle. Pour « Créa » (étoile à 32 pointes, symétrie radiale), la boîte
pré-rotation est forcée carrée. */
.hero__sticker--dev { left: -1.07%; top: 47.68%; width: 6.17%; height: 20.75%; font-size: 15px; }
.hero__sticker--market { left: 46.94%; top: 35.76%; width: 8.86%; height: 19.76%; font-size: 14px; }
.hero__sticker--crea { left: 92.69%; top: 60.21%; width: 10.6%; height: 36.29%; }
/* ---------- Flottement et apparition des trois pastilles ----------
Relevé sur la source le 2026-08-13, à défilement nul, 40 échantillons sur
10s, sur le CENTRE de la boîte englobante (invariant à la rotation ; le bord
haut ne l'est pas — piège A₁.9) :
pastille | amplitude d'angle | amplitude verticale | période
Market | 15,7° (vers -) | 9,8 px | ~3,3 s
Dev | 42,2° (vers +) | 29,4 px | ~5,0 s
Créa | 67,7° (vers +) | 78,5 px | ~6,7 s
Aucun déplacement horizontal (0,0 px relevé sur les trois). Les trois
valeurs d'angle sont des écarts À PARTIR de la rotation au repos, qui reste
celle calibrée en tâche 5 sur nos propres tracés (--sticker-rotate, posé
dans le markup) : seuls les écarts sont repris de la source, pas ses angles
absolus, dont la base de coordonnées n'est pas la nôtre.
Le flottement était jusqu'ici de 2° et 8px pour les trois, soit cinq à dix
fois trop discret, et identique d'une pastille à l'autre.
Apparition : les trois pastilles sont les seules « appear animations » de la
source (échelle 0 -> 1, ressort sans rebond `bounce: 0`, durée 1s), avec
trois délais distincts relevés dans sa déclaration — Market 1s, Créa 1,2s,
Dev 1,4s. L'échelle est animée par la propriété individuelle `scale` et non
par `transform`, que le flottement occupe déjà : CSS compose les deux.
`both` maintient l'échelle à 0 pendant le délai, sans JavaScript. */
.hero__sticker--market { --float-rotate: -15.7deg; --float-rise: 9.8px; --float-duration: 3300ms; --pop-delay: 1000ms; }
.hero__sticker--crea { --float-rotate: 67.7deg; --float-rise: 78.5px; --float-duration: 6700ms; --pop-delay: 1200ms; }
.hero__sticker--dev { --float-rotate: 42.2deg; --float-rise: 29.4px; --float-duration: 5000ms; --pop-delay: 1400ms; }
@keyframes hero-sticker-pop {
from { scale: 0; }
to { scale: 1; }
}
/* Sans JavaScript, la pastille apparaît quand même : seule la boucle de
flottement manque. */
.hero__sticker {
animation: hero-sticker-pop 1s var(--ease-expo) var(--pop-delay) both;
}
/* Une seule déclaration `animation` par élément : la seconde écraserait la
première. Le flottement et l'apparition sont donc listés ensemble ici, et
cette règle prend le pas sur `.sticker.is-floating` de layout.css (même
spécificité, feuille chargée après). `--float-delay`, posé par stickers.js,
ne décale plus que le flottement ; les périodes étant maintenant distinctes,
il ne sert plus qu'à éviter un démarrage à l'unisson. */
.hero__sticker.is-floating {
animation:
sticker-float var(--float-duration) var(--float-delay, 0ms) ease-in-out infinite,
hero-sticker-pop 1s var(--ease-expo) var(--pop-delay) both;
}
/* ---------- CTA ---------- */
.hero__cta {
/* Réduit au tour 3 (36->12px) pour rapprocher la hauteur totale de #hero de
la cible mesurée (1184px) : le segment accroche->panneau ne fait que 57px
sur la source (marge + bouton + marge), mais le seul bouton, avec la
primitive .btn (padding vertical var(--sp-4) non retouché, hors périmètre
de ce correctif), fait déjà 54px de haut. Les marges sont donc réduites
au minimum plutôt qu'annulées : 0 aurait recollé le texte au bouton. */
margin-block-start: var(--sp-3);
}
/* ---------- Collage en arc / fond à cercles concentriques ---------- */
.hero__collage {
position: relative;
width: 100%;
/* Repère fixe fait foi : le panneau commence à y=526 sur la source (hauteur
de section 1184 = 526 + 658). Marge à 0 (tour 3) : avec la hauteur du CTA
ci-dessus (54px, primitive non retouchée), il ne reste plus de budget
pour une marge supplémentaire sans dépasser franchement la cible. */
aspect-ratio: 1440 / 658;
}
/* Fond en cercles concentriques, relevé littéralement sur le style inline de
la source (pas d'approximation) : un radial-gradient plein, superposé à un
repeating-radial-gradient dont la liste de stops est celle émise par Framer
(deux stops identiques suivis d'un indice de couleur nu à 19px), combinés en
background-blend-mode:multiply.
Posé en ::before dédié plutôt que directement sur `.hero__collage` : sur la
source, le CONTENEUR PARENT du dégradé porte `opacity: 0.1` (invisible en
`getComputedStyle` sur le dégradé lui-même — il faut remonter la chaîne des
ancêtres pour le voir). Les 4 photos et la forme centrale sont des enfants
au premier plan, à pleine opacité : les dimmer avec le fond aurait aussi
estompé les photos, donc l'opacité est posée sur ce calque de fond dédié,
pas sur `.hero__collage` (qui contient aussi les photos). */
.hero__collage::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
opacity: 0.1;
background-image:
radial-gradient(circle, var(--c-orange-deep), var(--c-orange)),
repeating-radial-gradient(
circle,
var(--c-orange-deep),
var(--c-orange-deep),
19px,
transparent 38px,
transparent 19px
);
background-blend-mode: multiply;
/* Le calque n'est pas peint à pleine force de bord à bord : son CONTENEUR, sur la
source, porte un masque en dégradé qui le fait apparaître puis disparaître en
fondu (piège A1.1 — la propriété vit sur un ancêtre, invisible à toute lecture
du calque lui-même ; une nouvelle occurrence du piège A1.1 sur ce projet).
Sans lui, une arete nette apparait en haut du panneau et a la jonction avec la
section suivante. Positions d'arret relevees a la lettre sur la source, et
identiques aux trois largeurs.
Seul le canal alpha d'un masque a un effet : la couleur opaque employee n'a
aucune incidence, d'ou le token plutot qu'un noir brut — meme convention que
le masque des pois dans footer.css. */
-webkit-mask-image: linear-gradient(
181deg,
transparent 0%,
var(--c-ink) 31.8289%,
var(--c-ink) 60.9991%,
transparent 82.9374%
);
mask-image: linear-gradient(
181deg,
transparent 0%,
var(--c-ink) 31.8289%,
var(--c-ink) 60.9991%,
transparent 82.9374%
);
pointer-events: none;
}
/* Forme centrale blanche (SVG data: URI posé en style inline dans le markup,
comme les stickers) : boîte mesurée à x:534,y:645,372×359 sur un panneau
1440×658 démarrant à y=526. */
.hero__collage-shape {
position: absolute;
z-index: 1;
left: 37.08%;
top: 18.09%;
width: 25.83%;
height: 54.56%;
background-repeat: no-repeat;
background-size: 100% 100%;
pointer-events: none;
}
.hero__photos {
position: absolute;
z-index: 1;
inset: 0;
}
/* Sur la source, les 4 photos sont de simples cercles nus sur le fond orange :
pas de liseré, pas d'ombre. Un tour précédent avait ajouté un anneau
`--c-cream-light` et `--shadow-hard` par cohérence avec la DA du reste du
site (qui utilise ces ombres ailleurs) — vérifié de près sur la source,
ni l'un ni l'autre n'existe ici. Retiré. */
/* Parallax des quatre photos : la source les fait remonter lineairement au
defilement, a TROIS vitesses differentes — c'est ce qui donne la profondeur.
La loi est un TAUX, des pixels par pixel de defilement, et non une course d'un
point a un autre : la plage doit donc etre une longueur absolue et jamais une
fraction de la hauteur du hero, qui varie selon la largeur d'ecran. Une plage
en pourcentage donnerait trois vitesses differentes et serait fausse.
3000px couvre la portion defilee ou le hero reste visible a toutes les largeurs
mesurees, y compris tres larges (hauteur #hero jusqu'a ~2290px a 3840 de large) ;
au-dela l'animation reste a sa valeur finale, hors ecran. Le taux ne depend que
du facteur --parallax : allonger cette plage ne change pas la vitesse, seulement
le point de saturation (les deux emplois de la variable, ici et dans l'image cle,
doivent rester la seule source commune). */
@keyframes hero-photo-rise {
to { translate: 0 calc(var(--parallax) * var(--parallax-span) * -1); }
}
.hero__photo {
position: absolute;
aspect-ratio: 1;
border-radius: var(--r-pill);
overflow: hidden;
--parallax-span: 3000px;
}
/* Sans support des animations liees au defilement, `animation-timeline` est
ignoree et reprend sa valeur initiale (timeline de document) : la duree
`auto` y vaut 0s et `both` epinglerait aussitot les photos sur leur derniere
image cle — soit un saut permanent de 200 a 600px a defilement nul, une photo
(--desktop) hors du panneau et une autre (--laptop) par-dessus le logotype.
Mesure par la revue finale, concerne Safari < 26 et Firefox < 137. La garde
ci-dessous rend la degradation reellement neutre : sans support, aucune
propriete d'animation n'est declaree et les photos restent a leur position
d'arret (translate: none). */
@supports (animation-timeline: scroll()) {
.hero__photo {
animation: hero-photo-rise linear both;
animation-timeline: scroll(root block);
animation-range: 0 var(--parallax-span);
}
}
.hero__photo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Rotations relevees sur la source, les quatre enumerees et non echantillonnees
(A1.8) : elles different toutes. Posees avec la propriete individuelle `rotate`
et non dans un `transform`, pour que le parallax puisse animer `translate` sur
les memes elements sans les ecraser — CSS compose translate, rotate puis scale
dans un ordre fixe. Identiques aux trois largeurs.
Elles ont echappe a la tache 5 parce que le CERCLE PEINT garde son diametre
quand on le fait pivoter, mais l'ELEMENT (une boite carree a border-radius) a
sa boite englobante qui grandit : piege A1.9, mesure par la revue finale
(292 -> 330,1px sur --laptop). La geometrie n'a donc pas ete revalidee par ce
plan ; c'etait le contenu qui restait mal oriente, et seule la capture
pouvait le montrer. */
/* --parallax : les quatre facteurs sont releves sur la source, un par photo,
les quatre enumeres et non echantillonnes (meme demarche qu'A1.8 pour
`rotate`). Ils sont deliberement differents (0,10 / 0,30 / 0,20 / 0,10) pour
donner trois plans de profondeur ; que --laptop et --phone partagent 0,10
n'est PAS une redondance a « simplifier » en une valeur unique — un facteur
commun aplatirait l'effet de profondeur. */
.hero__photo--laptop { left: 6.4%; top: 12%; width: 20.3%; rotate: -8deg; --parallax: 0.10; }
.hero__photo--desktop { left: 67.8%; top: 11.4%; width: 22.5%; rotate: 12deg; --parallax: 0.30; }
.hero__photo--car { left: 17.8%; top: 62.8%; width: 21.7%; rotate: -5deg; --parallax: 0.20; }
.hero__photo--phone { left: 60.6%; top: 68.8%; width: 18.4%; rotate: 5deg; --parallax: 0.10; }
@media (max-width: 1199px) {
.hero { padding-block-start: 68px; }
.hero__inner { padding-block-start: 42px; } /* 110 (mesuré) - 68 (réserve header) */
/* Boîte du logotype mesurée à 1024px : 708×207 (le ratio image ne change
pas, l'aspect-ratio global suffit). */
.hero__logo-wrap { width: min(708px, 100%); }
/* Stickers repositionnés/redimensionnés : les paliers Framer ne sont pas de
simples mises à l'échelle du desktop, relevé séparément à 1024px (boîte
du est maintenant le logotype) : simple