/* ========================================================================== Touch — feuille principale (portée depuis la maquette HTML). Étape 1 (tronc commun) + Hero. Les sections suivantes seront ajoutées au fur. ========================================================================== */ /* ========================================================================== Polices auto-hébergées (RGPD) — Montserrat & Poppins servies localement depuis le thème (plus aucune requête vers Google Fonts, donc plus de fuite d'IP visiteur avant consentement). Gibson reste via le kit Adobe (canada-type-gibson). Sous-ensembles latin + latin-ext (accents FR). font-display:swap. ========================================================================== */ @font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/montserrat-400-latinext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/montserrat-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/montserrat-600-latinext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/montserrat-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/montserrat-700-latinext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/montserrat-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/poppins-700-latinext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/poppins-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/poppins-800-latinext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/poppins-800-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} :root { /* ── Palette de marque : SOURCE UNIQUE ────────────────────────────────── Ces noms sont ceux du Figma, de theme.json et de CLAUDE.md. Toute nouvelle règle doit les utiliser. Historique : le CSS avait grandi avec ses propres noms (--black, --beige, --warm) pendant que theme.json déclarait ink/cream/orange — deux jeux de variables pour les mêmes couleurs, qui pouvaient diverger. Les anciens noms sont conservés juste en dessous (ils servent dans ~1 000 déclarations) mais ne sont plus que des ALIAS : une seule valeur à changer désormais. */ --ink: #141414; --night: #060202; --cream: #f4f0e4; --orange: #fd401e; --orange-bright: #f93e19; --smoke: #d9d9d9; --ash: #737575; /* ── Alias historiques (ne plus en introduire de nouveaux) ── */ --black: var(--ink); --black-2: #1a1a1a; /* nuances propres au thème, hors palette de marque */ --black-3: #1e1f1f; --beige: var(--cream); --warm: var(--orange); --white: #ffffff; --font: "canada-type-gibson", "Montserrat", system-ui, sans-serif; /* Largeur max = maquette Figma desktop. Au-delà, le site est centré (bandes de fond sur les côtés) au lieu de s'étirer. */ --site-max: 1440px; --site-pad: 80px; /* marge latérale du header, alignée sur la colonne 1440 */ /* Padding horizontal recentrant le contenu sur la colonne 1440 dans une section pleine largeur (utilise 100vw, pas 100%, car le % du padding se réfère au bloc conteneur — déjà borné à 1440). */ --bleed-pad: max(var(--site-pad), calc((100vw - var(--site-max)) / 2 + var(--site-pad))); } /* ── Lien d'évitement ────────────────────────────────────────────────────── Hors écran par défaut, il descend en place dès qu'il reçoit le focus clavier. z-index au-dessus du header (50) et du menu plein écran (55) pour rester visible en toute circonstance. */ .skip-link { position: fixed; top: -80px; left: 16px; z-index: 100; padding: 12px 20px; background: var(--cream); color: var(--ink); font: 600 14px/1 var(--font); text-decoration: none; border-radius: 3px; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28); transition: top 0.15s ease; } .skip-link:focus { top: 16px; outline: 3px solid var(--orange); outline-offset: 2px; } /* La cible du saut est focusable (tabindex="-1") : on évite le cadre disgracieux autour du contenu entier, le déplacement du focus suffit. */ #main:focus { outline: none; } /* Masqué visuellement mais lu par les lecteurs d'écran et indexé (titres hors-champ). */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ─────────────── PAGES GÉNÉRIQUES / 404 (placeholder) ─────────────── Utilisé par 404.php, page.php, single.php, index.php. Ces classes n'avaient AUCUN style : le titre s'affichait nu, collé au bord et caché derrière le header fixe. On centre le message plein écran, sous le header. Le fond du body (sombre) transparaît → pas besoin de pleine largeur. */ .placeholder { min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; /* Dégage le header fixe (98px) + de l'air : sinon le titre passe dessous. */ padding: 160px 24px 100px; } .placeholder__inner { max-width: 640px; } .placeholder__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: var(--warm); margin-bottom: 20px; } .placeholder__title { font-size: clamp(48px, 8vw, 104px); font-weight: 800; line-height: 0.95; letter-spacing: -0.02em; text-transform: uppercase; color: var(--beige); } .placeholder__title .dot { color: var(--warm); } .placeholder__note { margin-top: 32px; font-size: 16px; line-height: 1.6; color: rgba(244, 240, 228, 0.7); } .placeholder__note a { color: var(--beige); border-bottom: 1px solid var(--warm); padding-bottom: 2px; transition: color 0.25s ease; } .placeholder__note a:hover { color: var(--warm); } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { background: var(--black-3); color: var(--beige); font-family: var(--font); -webkit-font-smoothing: antialiased; } html, body { /* clip (et non hidden) : empêche le scroll horizontal SANS créer de conteneur de défilement — indispensable pour que position: sticky fonctionne (pile de fiches Offer, etc.). hidden cassait le sticky. Sur html AUSSI : sinon les sections pleine largeur (width:100vw) fuient de quelques px (barre de défilement) car le clip du body ne contient pas ce dépassement au niveau racine. */ overflow-x: clip; } /* Le contenu (hors header fixe et footer plein largeur) est borné à la largeur de la maquette et centré : sur les très grands écrans, plus d'étirement — le fond sombre du body remplit les côtés. */ .site-main { max-width: var(--site-max); margin-inline: auto; position: relative; } /* Sections à fond coloré (hors pile "offer") : le contenu reste centré (borné par .site-main) mais le fond déborde jusqu'aux bords pour éviter l'effet « cadre » au-delà de 1440px. Technique : box-shadow massif (= le fond peint AVEC l'élément, donc au-dessus du fond du body, contrairement à un ::before en z-index négatif) + clip-path pour limiter le débordement à l'horizontale (pas de fuite verticale sur les voisins). Fiable même quand la section a overflow:hidden, et sans décaler le contenu. */ .stats, .tagline { box-shadow: 0 0 0 100vmax var(--black); clip-path: inset(0 -100vmax); } .team, .works, .offer-page, .work-detail { box-shadow: 0 0 0 100vmax var(--black-2); clip-path: inset(0 -100vmax); } /* Pile "offer" de la home : effet sticky où les sections glissent les unes sur les autres (z-index déjà étagés : offer 1 < offer-details 2 < clients 3). Un ::before ne fonctionne pas ici (empilement sticky) : on met donc chaque section en pleine largeur avec son vrai fond, et on recentre le contenu sur la colonne 1440 via le padding horizontal. */ .offer, .offer-details, .clients, .work-pin { /* .work-pin en VRAI pleine largeur (et non plus fond factice via box-shadow) : la galerie horizontale peut ainsi s'étaler jusqu'aux bords de l'écran en 4K. Le DÉBUT de la piste est réaligné sur la colonne centrée via le padding gauche de .work-track (voir plus bas). */ width: 100vw; margin-left: calc(50% - 50vw); } /* Le marquee déborde entièrement (texte compris) sur toute la largeur. */ .marquee { width: 100vw; margin-left: calc(50% - 50vw); } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } /* WordPress admin bar : ne pas casser le header fixe */ body.admin-bar .header { top: 32px; } /* ─────────────── HEADER ─────────────── */ .header { position: fixed; inset: 0 0 auto 0; height: 98px; z-index: 50; display: flex; align-items: center; justify-content: flex-end; gap: 44px; /* Aligne logo + menu sur la colonne centrée de 1440px (identique ≤1440). */ padding-inline: var(--bleed-pad); pointer-events: none; /* Couleur des liens de nav, pilotée par état (variables → pas de guerre de spécificité). Défaut = blanc (haut de page sombre + hero). */ --nav-ink: var(--beige); --nav-hover: var(--beige); transition: height 0.3s ease; } /* Fond du header = un DÉGRADÉ (scrim) : plein/foncé en HAUT, qui s'estompe vers le BAS (comme la maquette — surtout pas une barre à bord net). Deux couches se croisent en fondu (opacity) selon la section : sombre par défaut, crème sur fond clair. On ne peut pas transitionner un dégradé → on crossfade deux pseudos. */ .header::before, .header::after { content: ""; position: absolute; inset: 0 0 auto 0; /* dépasse sous le header pour un dégradé long et doux (et couvrir la pointe du chevron orange de l'Offre détaillée) */ height: 160px; z-index: -1; pointer-events: none; transition: opacity 0.35s ease; } /* Couche SOMBRE : plein en haut → transparent en bas. */ .header::before { background: linear-gradient( 180deg, rgba(12, 12, 12, 0.97) 0%, rgba(12, 12, 12, 0.9) 40%, rgba(12, 12, 12, 0) 100% ); /* Haut de page : dégradé un peu plus léger (esprit « transparent » demandé). */ opacity: 0.85; } /* Couche CRÈME : masquée par défaut, révélée en fondu sur fond clair. */ .header::after { /* Le dernier palier reste en rgba() : c'est le même crème, mais transparent — var(--cream) ne permet pas d'en moduler l'alpha ici. */ background: linear-gradient( 180deg, var(--cream) 0%, var(--cream) 40%, rgba(244, 240, 228, 0) 100% ); opacity: 0; } /* Scrollé sur section sombre : dégradé sombre à fond (plus dense) + liens gris atténués (Figma). */ .header.is-scrolled { --nav-ink: rgba(244, 240, 228, 0.6); --nav-hover: var(--beige); } .header.is-scrolled::before { opacity: 1; } /* Section CLAIRE : dégradé crème, liens foncés. (Après is-scrolled → l'emporte quand les deux classes sont présentes.) */ .header.is-light { --nav-ink: var(--black); --nav-hover: var(--black); } .header.is-light::before { opacity: 0; } .header.is-light::after { opacity: 1; } /* Sections de la PILE OFFER (« OUR OFFER » et la suite : offer orange, offre détaillée, clients crème, stats) : le header reste en DÉGRADÉ NOIR jusqu'en bas. CAS PARTICULIER — dans la pile sticky, ces sections se peignent AU-DESSUS des pseudo-scrims du header (empilement) → le scrim ::before ne les couvre pas. On met donc le dégradé sur le HEADER lui-même (qui, lui, passe au-dessus) : foncé en haut, estompé vers le bas. Liens blancs, logo O-orange, bouton orange. */ .header.is-orange, .header.is-dark { --nav-ink: var(--beige); --nav-hover: var(--beige); background: linear-gradient( 180deg, rgba(8, 8, 8, 0.98) 0%, rgba(8, 8, 8, 0.94) 55%, rgba(8, 8, 8, 0) 100% ); } .header.is-orange::before, .header.is-orange::after, .header.is-dark::before, .header.is-dark::after { opacity: 0; } .header.is-scrolled::before, .header.is-light::before, .header.is-orange::before { opacity: 0; } /* Logo seul à gauche → pousse la nav + le bouton groupés à droite. */ .brand { margin-right: auto; } .header > * { pointer-events: auto; } .brand { display: flex; align-items: center; } .brand__logo { height: 28px; width: auto; display: block; transition: height 0.3s ease; } /* Logo cream/O-orange par défaut ; logo noir en mode clair ; logo tout-cream sur fond orange. */ .brand__logo--dark, .brand__logo--cream { display: none; } .header.is-light .brand__logo--light { display: none; } .header.is-light .brand__logo--dark { display: block; } /* Section Offer : la barre est désormais NOIRE (et non plus orange) → on garde le logo clair par défaut (crème + O orange, parfaitement lisible sur noir), les liens blancs (via --nav-ink) et le bouton orange. Aucune surcharge nécessaire. */ .nav { display: flex; gap: 48px; align-items: center; } .nav a { font-size: 13px; letter-spacing: 0.12em; font-weight: 600; /* Couleur pilotée par l'état du header (voir --nav-ink sur .header). */ color: var(--nav-ink); text-transform: uppercase; position: relative; padding: 6px 2px; transition: color 0.35s ease; } .nav a:hover { color: var(--nav-hover); } /* Lien actif : toujours orange (prioritaire sur la couleur d'état). */ .nav a.is-active { color: var(--warm); } .nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: currentColor; transition: right 0.25s ease; } .nav a:hover::after, .nav a.is-active::after { right: 0; } .cta { background: var(--warm); color: var(--white); padding: 10px 16px; font-size: 14px; letter-spacing: 0.1em; transition: background 0.35s ease, color 0.35s ease, transform 0.2s ease; } .cta:hover { background: #e63a1c; transform: translateY(-1px); } /* ── Sélecteur de langue (FR / NL / EN) ── Couleurs pilotées par l'état du header (--nav-ink), comme la nav. Langue active en orange ; NL/EN en « bientôt » (atténués, non cliquables) tant que le multilingue n'est pas branché. Devient cliquable dès que Polylang est actif. */ .lang { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; } .lang__item { color: var(--nav-ink); transition: color 0.35s ease, opacity 0.2s ease; } .lang__item.is-active { color: var(--warm); } a.lang__item { cursor: pointer; } a.lang__item:hover { color: var(--nav-hover); } .lang__item.is-soon { opacity: 0.38; cursor: not-allowed; } /* ── Shrink au scroll (desktop) : header + logo + bouton plus compacts ── */ .header.is-scrolled { height: 64px; } .header.is-scrolled .brand__logo { height: 17px; } .header.is-scrolled .cta { padding: 7px 14px; font-size: 13px; } /* ── Burger (mobile/tablette) ── */ .burger { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 44px; height: 44px; padding: 0; background: none; border: 0; z-index: 60; } .burger span { display: block; width: 26px; height: 2px; margin: 0 auto; background: var(--beige); transition: transform 0.3s ease, opacity 0.3s ease, background 0.2s ease; } .header.is-light .burger span { background: var(--black); } body.menu-open .burger span { background: var(--beige); } body.menu-open .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } body.menu-open .burger span:nth-child(2) { opacity: 0; } body.menu-open .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ── Menu plein écran ── */ .mobile-menu { position: fixed; inset: 0; z-index: 55; background: var(--black); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } /* Verrou de scroll robuste : sur mobile (iOS surtout) un simple overflow:hidden ne suffit pas. Le JS pose position:fixed + top:-scrollY sur à l'ouverture et restaure la position à la fermeture ; on complète ici par overflow:hidden. */ body.menu-open, html.menu-open { overflow: hidden; } body.menu-open { position: fixed; left: 0; right: 0; width: 100%; } body.menu-open .mobile-menu { opacity: 1; visibility: visible; } /* Menu ouvert : on remonte le header AU-DESSUS de l'overlay pour que la croix (burger) soit visible ET cliquable. Sinon le header, contexte d'empilement (position:fixed + z-index:50), plafonne le burger (z-index:60) SOUS le .mobile-menu (z-index:55) → la croix reste piégée derrière le panneau et le menu ne peut se fermer qu'en naviguant. On neutralise aussi le scrim du header pour ne pas voiler le haut du menu. */ body.menu-open .header { z-index: 60; background: transparent; } body.menu-open .header::before, body.menu-open .header::after { opacity: 0; } .mobile-menu__nav { display: flex; flex-direction: column; align-items: center; gap: 26px; } .mobile-menu__nav a { font-size: clamp(30px, 9vw, 44px); font-weight: 800; letter-spacing: 0.01em; text-transform: uppercase; color: var(--beige); line-height: 1; } .mobile-menu__nav a.is-active { color: var(--warm); } .mobile-menu .mobile-menu__cta { align-self: center; margin-top: 14px; } /* Sélecteur de langue dans le menu plein écran (mobile). */ .lang--mobile { align-self: center; margin-top: 28px; gap: 18px; font-size: 15px; } .lang--mobile .lang__item { color: var(--beige); } .lang--mobile .lang__item.is-active { color: var(--warm); } /* ─────────────── HERO ─────────────── */ .hero { position: relative; /* Pleine largeur (le contenu interne reste centré) : la vidéo va jusqu'aux bords de l'écran, cohérent avec les autres sections. */ width: 100vw; margin-left: calc(50% - 50vw); height: 100vh; min-height: 720px; overflow: hidden; } .hero__bg { position: absolute; inset: 0; overflow: hidden; } .hero__bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .hero__inner { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 40px; } .hero__art { width: min(70vw, 900px); height: auto; display: block; overflow: visible; /* Couche GPU STABLE : donne au SVG un « backing texture » persistant. Sans ça, le filtre animé #balloon (feDisplacementMap) peut clignoter/s'effacer par à-coups sur certains GPU quand la souris balaie le hero (Chromium desktop notamment). will-change:transform force la promotion en couche composite (translateZ seul est parfois aplati par Chrome et ne promeut pas). */ transform: translateZ(0); will-change: transform; backface-visibility: hidden; } #heroBody { will-change: filter; } /* WebKit/Safari — CORRECTIF CRITIQUE : le filtre SVG #balloon (déformation « blob ») référence une feImage dont la SOURCE n'est posée par le JS que sur desktop (le module s'arrête tôt sur « hover: none », cf. main.js). Sur tactile cette source reste vide, et Safari EFFACE alors tout le groupe filtré (#heroBody) → le lettrage « WE ARE TOUCH » devenait totalement invisible sur iPhone (Chromium, lui, le tolérait). Le blob n'existant QUE sur desktop, on retire le filtre partout où il n'est de toute façon jamais piloté. Le lettrage s'affiche alors en SVG nu. */ @media (hover: none) { #heroBody { filter: none; } } /* Mobile : le fond du hero est le POSTER (image fixe, souvent claire) et non la vidéo → le lettrage « WE ARE » en CONTOUR crème se fondait dans le fond et devenait illisible, alors que « TOUCH » (plein) restait visible. Deux réglages MOBILE UNIQUEMENT (desktop intact) pour rétablir la lisibilité comme au desktop : 1. Agrandir le lettrage (traits du contour plus épais). 2. Voile sombre ciblé derrière le lettrage (le contour crème ressort). */ @media (max-width: 900px) { .hero__inner::before { content: ""; position: absolute; left: 50%; top: 50%; width: 150%; height: 62%; transform: translate(-50%, -46%); background: radial-gradient( ellipse at center, rgba(6, 2, 2, 0.5) 0%, rgba(6, 2, 2, 0.32) 42%, rgba(6, 2, 2, 0) 72% ); pointer-events: none; z-index: 0; } .hero__art { position: relative; z-index: 1; width: min(86vw, 560px); } } /* ─────────────── CURSEUR CUSTOM ─────────────── */ /* Tout ce bloc est conditionné à .has-custom-cursor, classe posée sur par main.js UNIQUEMENT quand le curseur de remplacement démarre pour de bon (pointeur fin détecté ET élément #cursor présent). Avant, ces règles s'appliquaient inconditionnellement : si le JS échouait ou était bloqué, le pointeur système restait masqué sans rien pour le remplacer — la souris devenait invisible sur tout le site. */ html.has-custom-cursor, html.has-custom-cursor body { cursor: none; } html.has-custom-cursor a, html.has-custom-cursor button, html.has-custom-cursor .cta, html.has-custom-cursor .nav a, html.has-custom-cursor .card--project, html.has-custom-cursor .arrow { cursor: none; } /* sur desktop, on masque le vrai curseur partout (même là où il y a cursor:pointer) */ @media (hover: hover) and (pointer: fine) { html.has-custom-cursor *, html.has-custom-cursor *::before, html.has-custom-cursor *::after { cursor: none !important; } } #cursor { position: fixed; left: 0; top: 0; width: 131px; height: 73px; pointer-events: none; z-index: 9999; display: none; } #cursor img { width: 131px; height: 73px; display: block; -webkit-user-drag: none; user-select: none; } #cursor.is-on { display: block; } /* ── Écran de consentement (CookieYes) : on y rend le pointeur système ── CookieYes sert son bandeau depuis son CDN et le pose à z-index 9 999 999, contre 9 999 pour #cursor : le curseur de remplacement passe DERRIÈRE et devient invisible. Comme la règle `cursor: none` ci-dessus masque par ailleurs le pointeur système jusque sur les boutons, il ne restait plus AUCUN curseur sur l'écran de consentement — on y cliquait à l'aveugle. Surenchérir sur le z-index serait vain : cette valeur vient du CDN, pas du thème. On rétablit donc le pointeur natif sur toute l'interface CookieYes (bandeau, fenêtre de préférences, voile, pastille de réouverture — toutes ses classes commencent par « cky- »), et on efface le curseur maison tant que la souris s'y trouve, sinon les deux cohabitent sur les bords. */ html.has-custom-cursor [class*="cky-"], html.has-custom-cursor [class*="cky-"] * { cursor: auto !important; } html.has-custom-cursor [class*="cky-"] a, html.has-custom-cursor [class*="cky-"] button, html.has-custom-cursor [class*="cky-"] label, html.has-custom-cursor [class*="cky-"] select, html.has-custom-cursor [class*="cky-"] [role="button"], html.has-custom-cursor [class*="cky-"] input[type="checkbox"] { cursor: pointer !important; } html.has-custom-cursor:has([class*="cky-"]:hover) #cursor { display: none !important; } @media (hover: none) { html, body, a, button, .cta, .nav a { cursor: auto; } #cursor { display: none !important; } } /* ─────────────── MARQUEE ─────────────── */ .marquee { background: var(--warm); color: var(--white); height: 34px; display: flex; align-items: center; overflow: hidden; white-space: nowrap; position: relative; z-index: 2; } .marquee__track { display: flex; align-items: center; gap: 56px; animation: slide 38s linear infinite; padding-right: 56px; } .marquee__item { font-size: 12px; letter-spacing: 0.22em; font-weight: 500; flex: 0 0 auto; text-transform: uppercase; line-height: 1; } @keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* utilitaire : texte orange */ .txt-orange { color: var(--warm); } /* ─────────────── OUR OFFER (section orange) ─────────────── */ /* l'orange reste épinglé pendant que le beige glisse par-dessus */ .offer-stack { position: relative; } .offer { position: sticky; top: 0; z-index: 1; background: var(--warm); color: var(--black); min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 130px 80px; /* Section pleine largeur (voir bloc "Pile offer") : on recentre le contenu sur la colonne 1440 via le padding horizontal. */ padding-inline: var(--bleed-pad); } .offer__inner { display: grid; grid-template-columns: 1fr 0.8fr; gap: 40px; align-items: start; width: 100%; } .offer__title { font-size: clamp(80px, 13vw, 240px); font-weight: 800; line-height: 0.88; letter-spacing: -0.02em; text-transform: uppercase; color: var(--black); } .offer__title .line { display: block; } .offer__title .line--top { display: flex; align-items: flex-start; gap: 0.22em; } .offer__title .o { color: var(--beige); } .offer__hand { position: relative; display: inline-block; /* Figma : 186,65 px de large sur la frame 1440 → 12,96vw */ width: clamp(110px, 12.96vw, 200px); vertical-align: middle; /* on redescend la main pour aligner son sommet au haut des lettres (l'interlignage 0.88 la faisait dépasser au-dessus du texte) */ margin-top: 0.14em; } .offer__hand img { display: block; width: 100%; height: auto; } /* on garde une seule image (la pose 1) : la 2e provoquait une saccade */ .offer__hand .offer__hand-hover { display: none; } /* au survol : la main pivote vers la droite et y reste ; elle revient doucement quand la souris part */ .offer__hand { transform-origin: 32% 80%; transition: transform 0.5s ease-in-out; } .offer__hand:hover { transform: rotate(18deg); } @media (prefers-reduced-motion: reduce) { .offer__hand { transition: none; } .marquee__track { animation: none; } } .offer__text { max-width: 360px; justify-self: end; margin-top: 70px; margin-right: 40px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.35); font-size: 14px; line-height: 1.5; color: var(--beige); } .offer__text p { margin-bottom: 14px; } .offer__text strong { color: var(--black); font-weight: 700; } /* ─────────────── OFFRE DÉTAILLÉE (beige) ─────────────── */ /* glisse par-dessus l'orange épinglé derrière ; bord supérieur DROIT (l'ancienne encoche en chevron/triangle a été retirée à la demande) */ .offer-details { position: sticky; top: 0; z-index: 2; /* Le pavé de texte est retiré : la section n'a plus besoin d'un plein écran (ça laissait un grand vide beige autour des mains). On la resserre autour de son contenu (mains + CTA) tout en gardant assez de hauteur pour que la vague clients remonte encore par-dessus les mains épinglées. */ min-height: clamp(600px, 74vh, 760px); background: var(--beige); color: var(--black); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 64px; padding: 108px 80px 64px; padding-inline: var(--bleed-pad); } .hands { display: flex; justify-content: center; /* Bas des colonnes alignés → les noms sous les mains tombent sur une même ligne. */ align-items: flex-end; gap: clamp(24px, 4.5vw, 64px); margin-bottom: 0; } /* Chaque main est un LIEN vers la page OFFER (service concerné) : main + nom dessous. */ .hands .hand { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; width: clamp(80px, 10.5vw, 155px); color: var(--black); text-decoration: none; transition: transform 0.25s ease; } .hands .hand img { width: 100%; height: auto; position: relative; z-index: 1; } .hand__name { position: relative; z-index: 1; font-size: clamp(13px, 1.05vw, 16px); font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; text-transform: uppercase; text-align: center; } .hands .hand::before { content: ""; position: absolute; top: 0; left: 50%; width: clamp(120px, 13vw, 190px); height: clamp(120px, 13vw, 190px); transform: translate(-50%, -20%); border-radius: 50%; background: radial-gradient(circle, rgba(253, 64, 30, 0.35) 0%, rgba(253, 64, 30, 0) 70%); opacity: 0; transition: opacity 0.25s ease; z-index: 0; pointer-events: none; } .hands .hand:hover, .hands .hand:focus-visible { transform: translateY(-4px); } .hands .hand:hover::before, .hands .hand:focus-visible::before { opacity: 1; } .offer-details__body { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: end; } .offer-details__copy { max-width: 720px; padding-right: 60px; border-right: 1px solid var(--warm); font-size: 15px; line-height: 1.65; color: rgba(20, 20, 20, 0.78); } .offer-details__copy p { margin-bottom: 20px; } .offer-details__copy p:last-child { margin-bottom: 0; } .offer-details__label { justify-self: end; align-self: end; } .offer-details__label h3 { font-size: clamp(32px, 3.4vw, 50px); font-weight: 800; line-height: 1; letter-spacing: -0.01em; text-transform: uppercase; text-align: right; color: var(--black); } .offer-details__label .o { color: var(--warm); } .offer-details__cta { display: flex; justify-content: center; margin-top: 0; } /* ─────────────── CLIENTS (beige) ─────────────── glisse par-dessus les mains-onglets épinglées ; bord supérieur droit (net). */ .clients { position: relative; z-index: 3; background: var(--beige); /* Plus de padding horizontal : le bandeau de logos défile en pleine largeur. */ padding: 88px 0 64px; overflow: hidden; } /* Bandeau de logos : marquee (défilement auto lent + drag). Le fondu latéral fait apparaître/disparaître les logos en douceur sur les bords. */ .clients__marquee { overflow: hidden; cursor: grab; /* Le scroll vertical de la page reste possible ; on ne capte que l'horizontal. */ touch-action: pan-y; -webkit-mask: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); mask: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); } .clients__marquee.is-grabbing { cursor: grabbing; } .clients__track { display: flex; width: max-content; will-change: transform; } .clients__band { flex: 0 0 auto; display: flex; align-items: center; margin: 0; padding: 0; list-style: none; } .clients__logo { flex: 0 0 auto; display: flex; align-items: center; /* Espacement uniforme entre logos (y compris à la jointure des 2 groupes). */ padding: 0 clamp(26px, 3.2vw, 52px); } .clients__logo img { /* Logos réels (monochrome ink). On borne hauteur ET largeur → chaque logo tient dans une même boîte optique (object-fit) : les wordmarks très larges ne peuvent plus écraser les logos compacts/multi-lignes. */ height: auto; width: auto; max-height: clamp(40px, 4.4vw, 60px); max-width: clamp(118px, 11.5vw, 165px); object-fit: contain; display: block; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; pointer-events: none; /* le drag est capté par le conteneur .clients__marquee */ } /* ─────────────── STATS (noir) ─────────────── */ /* dernière couche de la feuille : passe par-dessus les logos et les mains épinglées */ .stats { position: relative; z-index: 4; background: var(--black); padding: 120px 80px; } .stats__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .stats__intro h2 { font-size: clamp(28px, 3vw, 44px); font-weight: 800; line-height: 1.05; letter-spacing: -0.01em; color: var(--beige); margin-bottom: 24px; } .stats__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 60px; } .stat__num { display: block; font-size: clamp(56px, 6vw, 92px); font-weight: 800; line-height: 1; color: var(--beige); letter-spacing: -0.02em; } .stat__label { display: block; margin-top: 8px; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(244, 240, 228, 0.45); } /* PROJECTEUR ORANGE — une tache de lumière suit la souris dans toute la section. Tout le truc tient dans le « multiply » : le résultat est fond × lumière, donc le noir du fond (#141414) reste noir alors que le crème des textes devient orange. La lumière se révèle donc TOUTE SEULE sur le blanc et le gris, sans avoir à cibler chaque élément — c'est le comportement de la maquette. Le JS ne fait que passer la position du curseur dans --gx / --gy. */ .stats__glow { position: absolute; inset: 0; z-index: 5; /* au-dessus des textes, sinon rien à multiplier */ pointer-events: none; mix-blend-mode: multiply; opacity: 0; transition: opacity 0.35s ease; /* Rayon de la tache : seul réglage à toucher pour ouvrir/resserrer la lumière. Volontairement court — il faut que la chute se fasse SUR la hauteur d'un chiffre (92px), sinon la tache avale tout le bloc d'un coup au lieu de laisser voir le dégradé orange → crème à l'intérieur du chiffre. */ --glow-r: 150px; background: radial-gradient( circle var(--glow-r) at var(--gx, -999px) var(--gy, -999px), var(--warm) 0%, rgba(253, 64, 30, 0.6) 50%, rgba(253, 64, 30, 0) 100% ); } .stats.is-lit .stats__glow { opacity: 1; } /* Le texte déjà orange doit garder sa couleur exacte : orange × orange = orange plus foncé, donc la lumière le salissait. On le fait passer AU-DESSUS du calque (z-index > celui du glow) : il n'est plus dans le backdrop du multiply, donc plus rien à mélanger. La lumière ne joue que sur le crème et le gris. */ .stats__intro .txt-orange { position: relative; z-index: 6; } /* ─────────────── FOOTER « LET'S KEEP IN TOUCH » ─────────────── */ .keep { position: relative; overflow: hidden; min-height: 100vh; display: flex; flex-direction: column; padding: 120px 80px 0; text-align: center; background: var(--night, #060202); } /* Bloc titre/email centré verticalement ; barre du bas collée en bas. */ .keep__inner { margin: auto 0; } .keep__bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.95; z-index: 0; } .keep::before { content: ""; position: absolute; inset: 0; /* Voile léger : laisse ressortir l'image dorée, garde le texte lisible. */ background: linear-gradient(rgba(6, 2, 2, 0.18), rgba(6, 2, 2, 0.48)); z-index: 1; } .keep__inner, .keep__bottom { position: relative; z-index: 2; } .keep__eyebrow { color: var(--warm); font-size: 13px; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase; margin-bottom: 16px; } .keep__title { /* Specs Figma : Gibson Bold, 100px, interligne 82 (0.82), espacement 0, contour 2px « beige touch ». Gibson (police de marque) pas encore fournie → fallback Poppins, géométrique et « propre » en contour (le K ne montre pas de couture interne, contrairement à Montserrat/Hanken). */ font-family: "canada-type-gibson", "Poppins", "Montserrat", sans-serif; font-size: clamp(48px, 8vw, 100px); font-weight: 700; line-height: 0.82; letter-spacing: 0; text-transform: uppercase; /* Lettres en contour ; le « o » reste orange plein. */ color: transparent; -webkit-text-stroke: clamp(1.5px, 0.14vw, 2px) var(--beige); } .keep__title .o { color: var(--warm); -webkit-text-stroke: 0; } .keep__sub { max-width: 460px; margin: 24px auto 0; font-size: 14px; line-height: 1.5; color: rgba(244, 240, 228, 0.7); } .keep__email { margin-top: 28px; text-transform: uppercase; } /* Bouton crème/blanc, texte orange (maquette). Sélecteur composé pour passer devant .btn-orange (défini plus bas). */ .keep .keep__email { background: var(--beige); color: var(--warm); /* Cotes Figma du texte du bouton : Gibson Medium 10px, letter-spacing 4px. (Surcharge le 700/12px du .btn-orange générique — le nôtre était trop épais.) text-indent compense l'espace ajouté après la dernière lettre → texte recentré. */ font-size: 10px; font-weight: 500; letter-spacing: 4px; text-indent: 4px; } .keep .keep__email:hover { background: #fff; } .keep__bottom { margin-top: 0; /* Barre du bas (adresse + réseaux) sur fond noir plein largeur : on casse le padding latéral de .keep (margin négatif) puis on le rétablit. */ margin-inline: -80px; /* Cotes Figma du bandeau bas : hauteur 182, marges 80 (horizontal) / 69 (vertical). min-height garantit les 182 exacts (le contenu, plus court, se centre dedans). */ min-height: 182px; padding: 69px 80px; background: var(--night, #060202); border-top: 1px solid rgba(244, 240, 228, 0.14); display: flex; justify-content: space-between; align-items: center; gap: 24px; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(244, 240, 228, 0.6); } /* Adresse du footer — cotes Figma : Gibson Light 14px, interligne 22, letter-spacing 0. (Surcharge le 11px / 0.15em hérité de .keep__bottom.) */ .keep__addr { font-size: 14px; line-height: 22px; letter-spacing: 0; font-weight: 300; /* .keep est centré (titre/sous-titre) : on recale l'adresse à gauche, sinon la 2e ligne (plus courte) se centre et paraît indentée. */ text-align: left; } /* Colonne de gauche du bandeau bas : adresse, puis liens légaux en dessous. La barre reste en deux blocs (gauche / réseaux) — on n'ajoute pas un 3e élément au space-between, qui déséquilibrerait la répartition. */ .keep__legal { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; } /* Les liens héritent du 11px / 0.15em / majuscules de .keep__bottom : discrets, au même niveau typographique que le reste de la barre. */ .keep__links { display: flex; flex-wrap: wrap; gap: 6px 20px; } .keep__links a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 2px; transition: color 0.2s ease, border-color 0.2s ease; } .keep__links a:hover, .keep__links a:focus-visible { color: var(--cream); border-bottom-color: currentColor; } .socials { display: flex; /* gap réduit : chaque lien fait déjà 44px de large (zone tactile), l'espacement visuel entre icônes vient donc surtout de cette largeur. */ gap: 4px; align-items: center; } /* Taille des icônes (surcharge le width/height=18 des SVG) — agrandies cf. maquette. */ .socials svg { width: 26px; height: 26px; } .socials a { /* Icône 26px mais zone tactile de 44px (recommandation mobile) — l'icône reste centrée, seule la surface cliquable grandit. */ display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--warm); opacity: 1; transition: color 0.2s ease, opacity 0.2s ease; } .socials a:hover { color: var(--beige); } /* ── Cibles tactiles ≥ 44px sur mobile (ergonomie) ── On agrandit la SURFACE cliquable sans changer la taille visuelle du texte/icône. NB : l'override de .btn-orange est en FIN de fichier (après sa règle de base) pour ne pas être écrasé par son padding raccourci. */ @media (max-width: 900px) { .mobile-menu__nav a { display: inline-block; padding: 6px 14px; } .work-detail__back { display: inline-flex; align-items: center; min-height: 44px; } .discuss__links a { display: inline-block; padding: 9px 0; } } /* ─────────────── TAGLINE ─────────────── */ .tagline { background: var(--black); padding: 120px 20px 54px; text-align: center; } .tagline p { max-width: 700px; margin: 0 auto; font-size: clamp(22px, 2.1vw, 30px); line-height: 1.3; font-weight: 800; color: var(--beige); letter-spacing: -0.005em; text-wrap: balance; } /* « Creativity with results. » en encadré orange plein */ .tagline .accent { display: inline-block; background: var(--warm); color: var(--beige); /* Surlignage : bande orange PLUS COURTE que les lettres → le haut des capitales dépasse au-dessus du rectangle (cf. maquette). On y arrive en réduisant la hauteur de ligne sous 1 : les glyphes débordent la bande. Padding ~nul. */ line-height: 0.72; padding: 0 12px 2px; margin-top: 10px; } /* Mobile : la phrase s'enroule sur 2 lignes → le line-height 0.72 (effet « lettres qui dépassent », pensé pour UNE ligne) ferait se chevaucher les deux lignes hors de la bande. On repasse en surlignage multi-lignes lisible (chaque ligne a sa propre bande). */ @media (max-width: 700px) { .tagline .accent { display: inline; line-height: 1.55; padding: 2px 10px; -webkit-box-decoration-break: clone; box-decoration-break: clone; } } /* Indicateur de scroll du hero : capsule (forme du « O » de la marque) avec un point orange qui descend en boucle, comme une souris de défilement. Posé en bas du hero, centré, par-dessus la vidéo (invite à défiler). */ .hero__scroll { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); z-index: 3; width: 30px; height: 48px; border: 2px solid var(--warm); border-radius: 999px; pointer-events: none; } .hero__scroll::before { content: ""; position: absolute; left: 50%; top: 8px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--warm); animation: hero-scroll 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite; } @keyframes hero-scroll { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 70% { opacity: 1; } 100% { transform: translateY(22px); opacity: 0; } } /* Réduire les animations : le point reste immobile en haut de la capsule. */ @media (prefers-reduced-motion: reduce) { .hero__scroll::before { animation: none; opacity: 1; } } /* ─────────────── OUR WORK — scroll horizontal ─────────────── */ .work-pin { position: relative; background: var(--black); } .work-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; } /* prefers-reduced-motion (classe posée par le JS) : on reproduit le repli mobile — galerie en liste verticale, sans épinglage ni scroll horizontal détourné — pour que TOUTES les cartes restent accessibles sans scroll-jacking. Miroir des règles @media (max-width: 900px) plus bas. */ .work-pin.is-reduced { height: auto !important; padding: 30px 0 10px; } .work-pin.is-reduced .work-sticky { position: static; height: auto; overflow: visible; display: block; } .work-pin.is-reduced .work-track-wrap { display: block; overflow: visible; } .work-pin.is-reduced .work-track { flex-direction: column; transform: none !important; align-items: stretch; padding: 0 24px; gap: 16px; } .work-pin.is-reduced .card, .work-pin.is-reduced .card--intro { width: 100%; height: auto; } .work-pin.is-reduced .card--project { width: 100%; aspect-ratio: 4 / 3; } .work-pin.is-reduced .scroll-hint { display: none; } .work-title { flex: 0 0 auto; text-align: center; padding: 44px 20px 24px; } .work-title h2 { font-size: clamp(80px, 12vw, 180px); font-weight: 800; letter-spacing: -0.01em; line-height: 0.95; color: var(--beige); text-transform: uppercase; } /* Écrans desktop COURTS (laptops, ~900-1080px de haut) : le titre géant (180px) + les grandes cartes remplissaient toute la hauteur, sans air au-dessus de « WORKS » (le sommet touchait la barre de nav). Ici, on le rend un peu plus compact et on le décale sous le header fixe → de l'air retrouvé. Les écrans HAUTS (QHD/4K, > 1080px) gardent le titre 180px (ils ont la place). */ @media (min-width: 901px) and (max-height: 1080px) { .work-title { padding-top: 78px; padding-bottom: 16px; } .work-title h2 { font-size: min(11vw, 148px); } } .work-track-wrap { flex: 1 1 auto; display: flex; align-items: center; padding: 0; overflow: hidden; min-height: 0; } .work-track { /* Facteur d'échelle de la galerie. Vaut 1 jusqu'à 1440px (rendu strictement inchangé) ; au-delà, le JS le monte (~largeur/1440, borné par la hauteur dispo) pour agrandir les cartes PROPORTIONNELLEMENT → même effet qu'en 1440p sur 4K. Toutes les dimensions de la galerie sont exprimées en calc(base * --wk-scale). */ --wk-scale: 1; display: flex; gap: calc(26px * var(--wk-scale)); /* La piste reste PLEINE LARGEUR (cartes qui s'étalent jusqu'aux bords en 4K), mais on aligne son DÉBUT sur la colonne centrée du site : au-delà de 1440px, le padding gauche pousse la carte d'intro sous le titre « WORKS » centré (fini le décalage à gauche). En dessous de 1440px : 53px, comportement inchangé. */ padding-left: max(53px, calc((100vw - var(--site-max)) / 2 + 53px)); padding-right: 53px; will-change: transform; align-items: center; } .card { flex: 0 0 auto; width: 403px; /* Dimensions maquette : 403 × 600. La hauteur atteint 600px dès que l'écran est assez haut (≥ ~880px) ; sur un écran plus court elle se réduit juste ce qu'il faut pour ne jamais être rognée (titre WORKS + barre Scroll ≈ 280px de réserve). La largeur des cartes projet suit le ratio 403/600 (voir .card--project). 600px * --wk-scale : la carte grandit sur grand écran, tout en restant bornée par la hauteur dispo (100vh - 300px) pour ne jamais être rognée et garder un peu de respiration sous le titre / au-dessus de la barre Scroll. */ height: min(calc(100vh - 300px), calc(600px * var(--wk-scale))); background: var(--black-2); position: relative; overflow: hidden; border-radius: 8px; color: var(--beige); } .card--intro { width: calc(480px * var(--wk-scale)); background: transparent; display: flex; flex-direction: column; justify-content: center; padding: 0 0 40px 0; color: var(--beige); overflow: visible; } .card--intro .title { font-size: calc(58px * var(--wk-scale)); font-weight: 800; line-height: 0.98; color: var(--beige); margin-bottom: calc(26px * var(--wk-scale)); white-space: nowrap; } .card--intro .desc { font-size: calc(16px * var(--wk-scale)); line-height: 1.35; color: var(--beige); font-weight: 300; max-width: calc(360px * var(--wk-scale)); margin-bottom: calc(26px * var(--wk-scale)); } .work-title h2 .o { color: var(--warm); } .card--intro__icon { width: calc(96px * var(--wk-scale)); height: auto; margin-bottom: calc(26px * var(--wk-scale)); } /* Bouton « See all works » : scalé UNIQUEMENT dans la galerie (le .btn-orange générique reste inchangé ailleurs). */ .card--intro .btn-orange { font-size: calc(12px * var(--wk-scale)); padding: calc(12px * var(--wk-scale)) calc(22px * var(--wk-scale)); letter-spacing: calc(0.12em * var(--wk-scale)); } .card--intro .title .o { color: var(--warm); } /* Bouton orange réutilisable */ .btn-orange { display: inline-block; align-self: flex-start; background: var(--warm); color: var(--beige); padding: 12px 22px; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; transition: background 0.2s ease, transform 0.2s ease; } .btn-orange:hover { background: #e63a1c; transform: translateY(-1px); } .card--project { cursor: pointer; /* Largeur dérivée de la hauteur pour conserver le ratio 403:600 quand l'écran est court. */ width: auto; aspect-ratio: 403 / 600; } .card--project .num { position: absolute; left: calc(22px * var(--wk-scale)); top: calc(20px * var(--wk-scale)); z-index: 3; font-weight: 700; font-size: calc(14px * var(--wk-scale)); letter-spacing: 0.08em; color: var(--warm); } /* Bouton flèche : carré orange TOUJOURS visible (contour + flèche orange, comme la maquette) ; au survol il se remplit d'orange. */ .card--project .arrow { position: absolute; right: calc(20px * var(--wk-scale)); top: calc(18px * var(--wk-scale)); width: calc(44px * var(--wk-scale)); height: calc(44px * var(--wk-scale)); z-index: 3; border: 1.5px solid var(--warm); border-radius: 3px; display: flex; align-items: center; justify-content: center; color: var(--warm); font-size: calc(18px * var(--wk-scale)); transition: background 0.25s ease, color 0.25s ease; } .card--project:hover .arrow { background: var(--warm); color: var(--beige); } .card--project .photo { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 0.9s ease; /* Images EN COULEUR par défaut (plus de noir & blanc au repos). */ } /* Voile noir 20% (fill maquette) — s'estompe au survol pour révéler la couleur. */ .card--project .photo::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.2); transition: opacity 0.5s ease; } /* Placeholder propre quand le projet n'a pas encore d'image. */ .card--project .photo.is-empty { background: linear-gradient(155deg, #26282a 0%, #17191a 100%); } .card--project .photo.is-empty::after { background: none; } .card--project:hover .photo { transform: scale(1.04); } .card--project:hover .photo::after { opacity: 0; } /* Vignette GIF (home) : image FIXE (--poster) par défaut, GIF animé (--gif) au survol. */ .card--project .photo.is-gif { background-image: var(--poster); } .card--project:hover .photo.is-gif, .card--project:focus-visible .photo.is-gif { background-image: var(--gif); } @media (prefers-reduced-motion: reduce) { .card--project:hover .photo.is-gif, .card--project:focus-visible .photo.is-gif { background-image: var(--poster); } } /* Tactile : pas de survol → on lève le voile noir pour ne pas assombrir les visuels. */ @media (hover: none) { .card--project .photo::after { opacity: 0; } } .card--project .photo video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: contain; object-position: center center; display: block; background: var(--ink); } .card--project .scrim { position: absolute; left: 0; right: 0; bottom: 0; height: calc(140px * var(--wk-scale)); background: linear-gradient(rgba(20, 20, 20, 0) 0%, rgba(20, 20, 20, 0.85) 60%, rgba(20, 20, 20, 0.98) 100%); z-index: 1; } .card--project .meta { position: absolute; left: calc(28px * var(--wk-scale)); right: calc(28px * var(--wk-scale)); bottom: calc(28px * var(--wk-scale)); z-index: 2; display: flex; flex-direction: column; gap: calc(8px * var(--wk-scale)); } .card--project .meta .kicker { font-size: calc(13px * var(--wk-scale)); letter-spacing: 0.14em; font-weight: 700; color: var(--warm); text-transform: uppercase; } .card--project .meta .name { font-size: calc(30px * var(--wk-scale)); font-weight: 700; line-height: 1.05; color: var(--beige); letter-spacing: -0.01em; /* Titres longs : 2 lignes max, pas de débordement hors de la carte. */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .card--project .meta .year { font-size: calc(11px * var(--wk-scale)); letter-spacing: 0.18em; color: rgba(244, 240, 228, 0.6); text-transform: uppercase; } /* progress hint */ .scroll-hint { flex: 0 0 auto; margin: 0 53px 30px; z-index: 5; display: flex; align-items: center; gap: 14px; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(244, 240, 228, 0.55); pointer-events: none; } .scroll-hint .bar { position: relative; width: 300px; height: 1px; background: rgba(244, 240, 228, 0.18); overflow: hidden; } .scroll-hint .bar i { position: absolute; left: 0; top: 0; height: 100%; width: 0%; background: var(--warm); } .work-empty { color: rgba(244, 240, 228, 0.6); font-size: 16px; font-weight: 300; max-width: 360px; } /* ─────────────── RESPONSIVE ─────────────── */ @media (max-width: 900px) { .header { padding: 0 24px; } .nav { display: none; } .header > .cta, .lang--header { display: none; } .burger { display: flex; } /* Carrousel Works → liste verticale (le scroll horizontal est neutralisé en JS) */ .work-pin { height: auto !important; padding: 30px 0 10px; } .work-sticky { position: static; height: auto; overflow: visible; display: block; } .work-title { padding: 0 24px 18px; } .work-title h2 { font-size: clamp(56px, 17vw, 96px); } .work-track-wrap { display: block; overflow: visible; } .work-track { flex-direction: column; transform: none !important; align-items: stretch; padding: 0 24px; gap: 16px; } .card, .card--intro { width: 100%; height: auto; } .card--project { width: 100%; aspect-ratio: 4 / 3; } .card--intro { padding: 6px 0 22px; } .card--intro .title { font-size: clamp(40px, 12vw, 60px); white-space: normal; } .card--intro .desc { max-width: 100%; } .scroll-hint { display: none; } .offer, .offer-details, .clients, .stats, .keep { padding-left: 24px; padding-right: 24px; } /* Mobile : on neutralise l'empilement sticky + vagues/chevron (sections en flux normal, lisibles au scroll classique). */ .offer, .offer-details, .clients { position: static; min-height: 0; clip-path: none; -webkit-mask: none; mask: none; display: block; } /* Mobile : padding vertical réduit. Les 130px (pensés desktop, pour centrer dans 100vh) laissaient d'énormes vides au-dessus/en dessous une fois l'empilement sticky neutralisé. */ .offer { padding-top: 56px; padding-bottom: 56px; } .offer-details { padding-top: 48px; padding-bottom: 40px; } /* Mobile : 6 mains + noms ne tiennent pas en ligne → grille 3 colonnes (2 rangées), noms alignés en bas de chaque cellule. */ .hands { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 12px; align-items: end; margin-bottom: 44px; } .hands .hand { width: 100%; } /* Logos clients : le bandeau défile (marquee) aussi sur mobile ; on réduit un peu la hauteur des logos et les marges verticales. */ .clients { padding-top: 36px; padding-bottom: 44px; } .clients__logo img { max-height: 42px; max-width: 118px; } .clients__logo { padding: 0 22px; } /* Header : léger verre dépoli au scroll, teinte adaptée à la section. */ .header.is-scrolled { background: rgba(20, 20, 20, 0.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background 0.25s ease; } .header.is-scrolled.is-light { background: rgba(244, 240, 228, 0.72); } /* Offer : barre noire pleine (aligné sur le desktop). */ .header.is-scrolled.is-orange { background: #0a0a0a; } .offer__inner, .offer-details__body, .stats__inner, .stats__grid { grid-template-columns: 1fr; gap: 32px; } .offer__text { justify-self: start; /* Le décalage vertical/horizontal (70px / 40px) sert au layout 2 colonnes du desktop ; en 1 colonne il ne crée que du vide. On garde juste le trait + son petit padding. */ margin-top: 0; margin-right: 0; } .offer-details__copy { border-right: 0; padding-right: 0; } .offer-details__label { justify-self: start; } .offer-details__label h3 { text-align: left; } .keep__bottom { flex-direction: column; gap: 16px; text-align: center; /* padding latéral de .keep = 24px sur mobile */ margin-inline: -24px; padding-inline: 24px; } /* La barre passe en colonne centrée : les liens légaux suivent, sinon ils restent collés à gauche sous une adresse centrée. */ .keep__legal { align-items: center; } .keep__links { justify-content: center; } } /* ─────────────── Works — archive (liste des projets) ─────────────── */ .works { padding: 150px 80px 120px; background: var(--black-2); } .works__head { text-align: center; margin-bottom: 70px; } .works__title { font-size: clamp(90px, 11.5vw, 165px); font-weight: 800; letter-spacing: -0.01em; line-height: 0.95; text-transform: uppercase; color: var(--beige); } .works__title .o { color: var(--warm); } .works__filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 38px; margin-top: 22px; } .works__filter { font-size: 13px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #8c8c8c; transition: color 0.2s ease; } .works__filter:hover { color: var(--beige); } .works__filter.is-active { color: var(--warm); } .works__grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; row-gap: 74px; max-width: 1180px; margin: 0 auto; } .work-item.is-hidden, .work-item.is-filtered-out { display: none; } .work-item__media { aspect-ratio: 16 / 10; /* Placeholder (projet sans image) : gris un peu plus clair que --black-3, moins « trou noir ». */ background-color: #34383a; background-position: center; background-size: cover; background-repeat: no-repeat; overflow: hidden; transition: transform 0.45s ease; } .work-item__link:hover .work-item__media { transform: scale(1.03); } /* Vignette GIF : image FIXE (--poster) par défaut, GIF animé (--gif) au survol. Le template ne pose la classe .is-gif + les variables que sur les vignettes GIF. */ .work-item__media.is-gif { background-image: var(--poster); } .work-item__link:hover .work-item__media.is-gif, .work-item__link:focus-visible .work-item__media.is-gif { background-image: var(--gif); } /* Accessibilité : si l'utilisateur a réduit les animations, on garde l'image fixe. */ @media (prefers-reduced-motion: reduce) { .work-item__link:hover .work-item__media.is-gif, .work-item__link:focus-visible .work-item__media.is-gif { background-image: var(--poster); } } .work-item__title { font-size: 22px; font-weight: 700; color: var(--beige); margin: 24px 0 10px; } .work-item__excerpt { font-size: 13px; line-height: 1.55; font-weight: 300; color: #b8b6ad; max-width: 92%; } .works__more-wrap { text-align: center; margin-top: 84px; } .works__more { cursor: pointer; } .works__empty { text-align: center; color: var(--beige); font-weight: 300; } @media (max-width: 760px) { .works { padding: 120px 22px 80px; } .works__grid { grid-template-columns: 1fr; row-gap: 48px; } .works__filters { gap: 22px; } } /* ─────────────── Work — détail (étude de cas) ─────────────── */ .work-detail { padding: 150px 80px 120px; background: var(--black-2); } .work-detail__head { text-align: center; max-width: 960px; margin: 0 auto; } /* Figma : kicker en Gibson Regular 24px (pas 13/600). */ .work-detail__kicker { font-size: 24px; font-weight: 400; letter-spacing: 0; text-transform: uppercase; color: var(--warm); margin-bottom: 21px; } /* Figma : titre Gibson SemiBold 60px, interligne 80 (1.33), letter-spacing 0. clamp pour l'adaptatif (60px = 4.17vw sur la maquette 1440). */ .work-detail__title { font-size: clamp(34px, 4.17vw, 60px); font-weight: 600; line-height: 1.33; letter-spacing: 0; color: var(--beige); } .work-detail__title .o { color: var(--warm); } .work-detail__back { display: inline-block; margin-top: 21px; font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--warm); transition: opacity 0.2s ease; } .work-detail__back:hover { opacity: 0.7; } .work-detail__cover { max-width: 1180px; margin: 56px auto 0; aspect-ratio: 1.85; overflow: hidden; background: var(--black-3); } .work-detail__cover img, .work-detail__cover video, .work-detail__cover iframe { /* iframe INCLUSE : la vidéo Vimeo (oEmbed) arrive en