Recrée exactement ce pied de page de studio créatif sur une seule page. C'est une tâche de fidélité, pas une refonte. Implémente le contenu, les ressources, le CSS et les interactions fournis à l'identique. Ne construis que cette page de pied de page. Garde tout en local ; ne publie ni ne déploie. N'ajoute pas d'en-tête, de hero, de cartes, de formulaires, de sections, de boutons, de liens, d'animations ni de texte supplémentaire. Les captures sources annexées ci-dessous sont la spécification faisant autorité. Copie-les exactement, en n'adaptant que les chemins d'import ou la plomberie du framework si nécessaire. Ne substitue pas une typographie approximative, un autre logo, une vidéo de stock ou un effet générique de suivi des yeux. 1. Aspect global : toute la page est un pied de page avec une colonne d'infos à gauche, un logo script centré, une colonne de texte de contact à droite avec trois icônes sociales et une vidéo de personnage lavande. En largeurs desktop, la vidéo remplit le viewport derrière tout le contenu. Sur mobile, le contenu s'empile et la vidéo suit dans le flux normal. Composition aérée et minimale, texte très sombre, sans teinte, scrim, dégradé, flou ni overlay sur la vidéo. Aucun lien externe ni destination de contact réelle. Les libellés de navigation, le texte de contact, les icônes et le logo sont des éléments statiques, pas des ancres cliquables. N'invente pas de destinations, e-mails, téléphones, actions WhatsApp ni comptes sociaux. N'affiche Truus nulle part. 2. Texte visible exact : conserve l'orthographe, la casse, la ponctuation, les apostrophes courbes, les astérisques et les retours à la ligne. Badge gauche : “have a fresh idea?”. Titre gauche : “imagination” / “meets craft”. Libellés : “Made”, “Story”, “In the lab”, “Say hey”. Badge droit : “say hey”. Titre droit : “let’s team up!” / “bring us your idea*”. Note : “*good things start with one spark. let’s make yours.”. Icônes sociales dans l'ordre : LinkedIn, Instagram, TikTok, avec les SVG exacts, sans libellés texte ni liens. Le logo central est le SVG script Logoipsum de BrandLogo, viewBox 169×40 ; fill en currentColor héritant #080909. Ne trace ni ne régénère le logo. 3. Typographie et couleurs exactes : titres Epilogue Black 900 ; reste DM Sans Regular 400 ; fichiers de police réels et font-synthesis: none. Télécharge DMSans-Regular.woff2 et Epilogue-Black.woff2 et sers-les localement via @font-face avec font-display: swap. Texte et logo #080909 ; fond desktop de repli #dfe4f2 ; badge #f7f8fa ; fond mobile #f0eefa. Pas d'ombres, de bordures décoratives, de cartes ni de dégradés. 4. Layout desktop exact (>700px) : box-sizing border-box global ; body sans marge, min-height 100vh. Footer position relative, min-height 100vh, padding-top 6.54vw, isolation isolate, overflow hidden. Bloc gauche : margin-left 8.65vw, width 25vw ; badge pill 100px, hauteur 1.9vw, padding .39vw .61vw, police .88vw ; titre margin-top 1.45vw, police 1.66vw poids 900 ; navigation colonne flex gap .93vw, margin-top 1.3vw, police 1.075vw. Logo absolu left 40.33vw top 7.7vw width 17vw. Bloc droit absolu left 74.3vw top 6.54vw ; note margin 1.05vw 0 0, police .733vw ; rangée sociale flex gap 1.43vw, icônes 1.71vw. Conserve ces valeurs vw et le placement exact en trois colonnes. Couche vidéo : wrapper absolu inset 0 z-index -1 pointer-events none ; vidéo object-fit cover center derrière le texte, sans canvas de pupilles. 5. Layout mobile exact (≤700px), uniquement dans @media(max-width:700px) : fond #f0eefa ; footer colonne flex gap 36px, min-height 100svh, padding 40px 24px 0 ; ordre logo, gauche, droite, vidéo ; logo static width 210px max-width 75% ; badges hauteur 30px police 14px ; titres clamp(22px,6.3vw,30px) ; navigation grille 2 colonnes column-gap 24px, police 17px, chaque libellé min-height 44px (ligne 1 Made/Story, ligne 2 In the lab/Say hey) ; note max-width 34ch police 14px retour normal ; rangée sociale gap 18px, wrappers 44×44px avec icônes 30×30px, premier wrapper margin-left -7px ; wrapper vidéo relative order 3 width calc(100%+48px) aspect-ratio 4/3 margin-top -16px, pleine largeur sous le contenu. 6. Ressource vidéo exacte : utilise l'URL CloudFront littérale complète, sans substituer de clip, omettre des segments, échapper les underscores ni altérer le nom. Source 1920×1080, 24 fps, ~7.041667s : personnage lavande duveteux tenant un cœur rose sur fond lavande très pâle, yeux en cercles. Télécharge en public/footer-background.mp4 et crée public/footer-scrub.mp4 avec : ffmpeg -hide_banner -loglevel error -i public/footer-background.mp4 -an -c:v libx264 -preset fast -crf 20 -g 1 -pix_fmt yuv420p -movflags +faststart public/footer-scrub.mp4. Conserve dimensions, fps, durée, couleurs et composition ; encodage all-intra pour un seeking aléatoire réactif. L'élément doit avoir muted, playsInline et preload="auto", sans contrôles natifs, audio, poster ni UI de chargement. 7. Interaction souris desktop exacte : scrubbing vidéo — le curseur sélectionne une image où les pupilles enregistrées pointent vers le curseur. Ne redessine pas les pupilles ni n'anime des yeux en CSS. Utilise la table gaze-frames.json. Milieu des yeux (948,418) dans une image 1920×1080 ; échelle cover max(w/1920,h/1080) ; eyeX = rect.left + rect.width/2 + (948-960)*scale ; eyeY = rect.top + rect.height/2 + (418-540)*scale ; soustrais du pointeur ; ignore dans un rayon de 8px ; atan2(dy,dx) normalisé à [0,2π) ; trouve la ligne à différence angulaire circulaire minimale ; utilise time + 1/240s ; seek seulement si différence > 1/48s, données d'image présentes et aucun seek en cours ; borne à duration - 1/24 ; regroupe via requestAnimationFrame ; n'interpole pas ; la vidéo desktop démarre en pause à 0 et reste sur l'image choisie ; recalcule au resize et au scroll ; écouteurs passifs, tout retirer au démontage. Cardinaux : droite 2.54167s, bas 0.33333s, gauche 1.0s, haut 1.70833s. 8. Lecture mobile : à ≤700px désactive le seeking par pointeur ; la vidéo sous le contenu joue normalement, muette et en boucle ; respecte prefers-reduced-motion en mettant en pause ; si l'autoplay est indisponible, laisse l'image visible, sans erreur ni contrôles. Utilise des écouteurs matchMedia pour basculer correctement au breakpoint 700px. 9. Sémantique et métadonnées : footer avec aria-label="Footer" ; wrapper vidéo aria-hidden="true" et pointer-events:none ; wrapper du logo role="img" aria-label="Studio logo" avec SVG aria-hidden ; wrappers sociaux avec libellés LinkedIn, Instagram, TikTok. Langue en. Titre : Studio — Footer. Description : Fresh ideas, imagination, and creative collaboration. Favicon : le même logo /logo.svg avec fill #080909. 10. Contraintes d'implémentation : React et TypeScript avec du CSS ordinaire ; référence en app/page.tsx, app/layout.tsx et un composant vidéo côté client. Conserve la source fournie quand l'environnement le permet. Aucune bibliothèque d'animation, framework UI ni canvas. Utilise les fichiers sources exacts ; récupère les deux polices et la vidéo ; pour public/logo.svg convertis fillRule/clipRule en fill-rule/clip-rule et fixe #080909, en conservant viewBox et path. Build réussi et vérifie le mapping du regard cardinal, l'empilement mobile, le retour à la ligne à 320px/390px et le layout desktop au-dessus de 700px. Ne change pas de contenu en validant. Garde tout en local ; ne publie ni ne déploie.