/* ============================================================ POLICES — Jumper + Maison Neue (toutes les graisses) ============================================================ */ @font-face{ font-family:"Jumper"; src:url("../fonts/JumperPERSONALUSEONLY-Thin.ttf") format("truetype"); font-weight:100; font-style:normal; font-display:swap; } @font-face{ font-family:"Jumper"; src:url("../fonts/JumperPERSONALUSEONLY-ThinItalic.ttf") format("truetype"); font-weight:100; font-style:italic; font-display:swap; } @font-face{ font-family:"Jumper"; src:url("../fonts/JumperPERSONALUSEONLY-Light.ttf") format("truetype"); font-weight:300; font-style:normal; font-display:swap; } @font-face{ font-family:"Jumper"; src:url("../fonts/JumperPERSONALUSEONLY-LightItalic.ttf") format("truetype"); font-weight:300; font-style:italic; font-display:swap; } @font-face{ font-family:"Jumper"; src:url("../fonts/JumperPERSONALUSEONLY-Regular.ttf") format("truetype"); font-weight:400; font-style:normal; font-display:swap; } @font-face{ font-family:"Jumper"; src:url("../fonts/JumperPERSONALUSEONLY-RegularItalic.ttf") format("truetype"); font-weight:400; font-style:italic; font-display:swap; } @font-face{ font-family:"Jumper"; src:url("../fonts/JumperPERSONALUSEONLY-Bold.ttf") format("truetype"); font-weight:700; font-style:normal; font-display:swap; } @font-face{ font-family:"Jumper"; src:url("../fonts/JumperPERSONALUSEONLY-BoldItalic.ttf") format("truetype"); font-weight:700; font-style:italic; font-display:swap; } @font-face{ font-family:"Jumper"; src:url("../fonts/JumperPERSONALUSEONLY-Extra-Bold.ttf") format("truetype"); font-weight:800; font-style:normal; font-display:swap; } @font-face{ font-family:"Jumper"; src:url("../fonts/JumperPERSONALUSEONLY-Extra-BoldItalic.ttf") format("truetype"); font-weight:800; font-style:italic; font-display:swap; } @font-face{ font-family:"Jumper"; src:url("../fonts/JumperPERSONALUSEONLY-Black.ttf") format("truetype"); font-weight:900; font-style:normal; font-display:swap; } @font-face{ font-family:"Jumper"; src:url("../fonts/JumperPERSONALUSEONLY-BlackItalic.ttf") format("truetype"); font-weight:900; font-style:italic; font-display:swap; } @font-face{ font-family:"Maison Neue"; src:url("../fonts/MaisonNeue-ExtraLight.otf") format("opentype"); font-weight:200; font-style:normal; font-display:swap; } @font-face{ font-family:"Maison Neue"; src:url("../fonts/MaisonNeue-ExtraLightItalic.otf") format("opentype"); font-weight:200; font-style:italic; font-display:swap; } @font-face{ font-family:"Maison Neue"; src:url("../fonts/MaisonNeue-Light.otf") format("opentype"); font-weight:300; font-style:normal; font-display:swap; } @font-face{ font-family:"Maison Neue"; src:url("../fonts/MaisonNeue-LightItalic.otf") format("opentype"); font-weight:300; font-style:italic; font-display:swap; } @font-face{ font-family:"Maison Neue"; src:url("../fonts/MaisonNeue-SemiLight.otf") format("opentype"); font-weight:350; font-style:normal; font-display:swap; } @font-face{ font-family:"Maison Neue"; src:url("../fonts/MaisonNeue-SemiLightItalic.otf") format("opentype"); font-weight:350; font-style:italic; font-display:swap; } @font-face{ font-family:"Maison Neue"; src:url("../fonts/MaisonNeue-Regular.otf") format("opentype"); font-weight:400; font-style:normal; font-display:swap; } @font-face{ font-family:"Maison Neue"; src:url("../fonts/MaisonNeue-Italic.otf") format("opentype"); font-weight:400; font-style:italic; font-display:swap; } @font-face{ font-family:"Maison Neue"; src:url("../fonts/MaisonNeue-Medium.otf") format("opentype"); font-weight:500; font-style:normal; font-display:swap; } @font-face{ font-family:"Maison Neue"; src:url("../fonts/MaisonNeue-MediumItalic.otf") format("opentype"); font-weight:500; font-style:italic; font-display:swap; } @font-face{ font-family:"Maison Neue"; src:url("../fonts/MaisonNeue-SemiBold.otf") format("opentype"); font-weight:600; font-style:normal; font-display:swap; } @font-face{ font-family:"Maison Neue"; src:url("../fonts/MaisonNeue-SemiBoldItalic.otf") format("opentype"); font-weight:600; font-style:italic; font-display:swap; } @font-face{ font-family:"Maison Neue"; src:url("../fonts/MaisonNeue-Bold.otf") format("opentype"); font-weight:700; font-style:normal; font-display:swap; } @font-face{ font-family:"Maison Neue"; src:url("../fonts/MaisonNeue-BoldItalic.otf") format("opentype"); font-weight:700; font-style:italic; font-display:swap; } @font-face{ font-family:"Maison Neue"; src:url("../fonts/MaisonNeue-ExtraBold.otf") format("opentype"); font-weight:800; font-style:normal; font-display:swap; } @font-face{ font-family:"Maison Neue"; src:url("../fonts/MaisonNeue-ExtraBoldItalic.otf") format("opentype"); font-weight:800; font-style:italic; font-display:swap; } @font-face{ font-family:"Maison Neue"; src:url("../fonts/MaisonNeue-Black.otf") format("opentype"); font-weight:900; font-style:normal; font-display:swap; } @font-face{ font-family:"Maison Neue"; src:url("../fonts/MaisonNeue-BlackItalic.otf") format("opentype"); font-weight:900; font-style:italic; font-display:swap; } /* ------------------------------------------------------------ Gotham Ultra Italic — utilisée uniquement pour les CHIFFRES (droits Jumper absents sur les chiffres). ⚠️ Fichier de police à fournir : déposer par ex. "GothamUltraItalic.otf" dans assets/fonts/ puis décommenter. ------------------------------------------------------------ */ /* @font-face{ font-family:"Gotham Ultra"; src:url("../fonts/GothamUltraItalic.otf") format("opentype"); font-weight:900; font-style:italic; font-display:swap; } */ :root{ --cream:#FEFEF2; --ink:#181818; --red:#FF0000; --frame:#242424; /* cadre gris foncé */ --gap:14px; --pad:48px; /* Cadre d'épaisseur UNIQUE sur les quatre côtés. Sur la maquette il mesure 169 px sur les côtés et 159 px en haut et en bas, soit 4,40 % de la largeur et 6,13 % de la hauteur : le PSD visait bien un cadre uniforme, à 6 % près. On retient la plus petite des deux mesures pour que l'épaisseur reste identique partout sans jamais manger la hauteur sur un écran bas. */ --frame-w:clamp(18px, min(4.40vw, 6.13vh), 96px); --frame-x:var(--frame-w); --frame-t:var(--frame-w); --frame-b:var(--frame-w); /* Corps HISTORIQUE du menu des pages intérieures (relevé maquette : 0,572 vw, plancher de lisibilité à 12 px). Le menu affiché vaut désormais 1,3 fois cette valeur, mais le LOGO continue de s'y référer directement : c'est ce qui lui permet de garder sa taille pendant que le menu grandit. */ --nav-base:clamp(12px, 0.572vw, 18px); /* Écart de fin de page, employé DES DEUX CÔTÉS du séparateur : sous le contenu de la galerie, et au-dessus de la première ligne du pied de page. Une seule variable pour les deux, donc une équidistance garantie quelle que soit la fenêtre. 4,37 vw = la moitié de l'espace qui existait auparavant. */ --fin-gap:clamp(14px, 4.37vw, 100px); --panel-w:calc(100vw - (2 * var(--frame-x))); --panel-h:calc(100vh - var(--frame-t) - var(--frame-b)); } *{box-sizing:border-box;margin:0;padding:0;} html{ scroll-behavior:smooth; /* INDISPENSABLE. Safari sur iOS agrandit de lui-même le texte des blocs dont la largeur diffère de celle de l'écran — son « text autosizing ». Toutes les tailles calculées ici étaient donc gonflées sur iPhone : le paragraphe d'accueil passait de six à neuf lignes et la page débordait, alors que le calcul comme le rendu sur ordinateur étaient justes. Cette ligne rend au navigateur les tailles qu'on lui demande. */ -webkit-text-size-adjust:100%; text-size-adjust:100%; } body{ background:var(--cream); color:var(--ink); font-family:"Jumper",Arial,sans-serif; /* Jumper partout par défaut */ font-weight:400; -webkit-font-smoothing:antialiased; line-height:1.35; } a{color:inherit;text-decoration:none;} /* ---------- Menu de navigation ---------- */ .nav{ list-style:none; text-align:right; font-family:"Jumper",sans-serif; font-weight:100; /* Jumper Thin */ font-size:15px; line-height:1.2; /* interligne serré comme la maquette */ } .nav a{display:inline-block;transition:font-weight .15s ease;} .nav a:hover{font-weight:400;} /* Jumper Regular au survol (au lieu du rouge) */ .nav .plus{opacity:.9;} .nav .current > a, .nav a.current, .nav .current-menu-item > a{font-weight:700;} /* ---- Entrée « +Showreel » : retirée du BUREAU seulement ---- Deuxième passe du client : elle revient en tablette, elle ne disparaît que sur bureau. La coupure passe donc de 601 à 951 px — 951 étant la largeur à partir de laquelle la grille de l'accueil quitte la présentation tablette. Elle reste visible en tablette (nav de droite) et en téléphone (panneau « +Menu »). Sur bureau, l'accès à la page reste ouvert : bouton « Showreel » de la page About, et modale au clic sur l'accueil. */ @media(min-width:951px){ .nav .nav-showreel{ display:none; } } /* ============================================================ PAGE D'ACCUEIL (+ cadre gris foncé) ============================================================ */ body.home-page{ background:var(--frame); /* cadre gris foncé tout autour ; bande en bas sur laquelle reposent les images */ padding:var(--frame-t) var(--frame-x) var(--frame-b); min-height:100vh; } .home{ /* Largeur du RANG d'images : 93,60 % du panneau, le retrait de 3,20 % de chaque côté étant relevé sur la maquette. C'est la valeur de référence ; le JS la remplace par une valeur plus petite quand la fenêtre est trop basse. Tout le rang en découle — largeurs des cartes et écart en % de cette boîte, hauteurs des vignettes en multiples de cette longueur. */ --rang-w:calc(var(--panel-w) * .9360); position:relative; /* ancre la grille en bas */ min-height:var(--panel-h); /* hauteur du panneau crème = référence des proportions */ background:var(--cream); /* maquette : haut du texte à 5,66 % de la hauteur du panneau, retrait de la grille à 3,20 % de sa largeur */ padding:calc(var(--panel-h) * .0566) 3.20% 0; display:flex; flex-direction:column; overflow:hidden; /* Corps de « Réalisation • Montage • Motion Design » — maquette 1,809 % du panneau, à 88 % de cette valeur : réduit de 20 % puis agrandi de 10 % à la demande du client (0,80 x 1,10 = 0,88). Publié ici et non dans .hero .tags pour que .contact, qui n'en est pas un descendant, puisse s'en servir pour calculer son calage. Toute redéfinition du corps de cette ligne doit se faire SUR CETTE VARIABLE, sinon le calage décroche. */ --tags-fs:clamp(11.44px, calc(var(--panel-w) * .0159192), 38.72px); } .home-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:40px; } /* Retraits relevés un par un : l'intro est rentrée de 4,20 % du panneau, le menu de 3,77 %, la grille de 3,20 % (padding de .home). */ .intro{ margin-left:1.07%; /* 4,20 % du panneau, moins le retrait de 3,20 % */ /* Largeur exprimée en EM, pas en % : la boîte suit alors exactement le corps du texte, y compris quand le clamp() ci-dessous bute sur son plancher ou son plafond. Le paragraphe tient donc sur SES SIX LIGNES à toutes les tailles de fenêtre. Largeurs relevées dans la police Jumper, ligne par ligne : 22,58 / 24,25 / 24,47 / 17,31 / 18,89 et 27,05 em pour la dernière, « Je vous accompagne de l'idée à la post-production. » La maquette n'offrait que 26,08 em (29,81 % du panneau pour un corps à 1,223 %) : cette dernière ligne ne pouvait pas y tenir. On passe à 27,6 em, soit 31,6 % du panneau — 6 % de plus que la maquette, marge de 2 % comprise. */ max-width:27.6em; font-family:"Jumper",sans-serif; font-weight:100; /* Jumper Thin */ font-size:clamp(12px, calc(var(--panel-w) * .01223), 30px); line-height:1.25; /* interligne resserré comme la maquette */ } .home-top nav{ margin-right:0.61%; } /* menu à 3,77 % du bord du panneau */ /* Logo de l'accueil : réservé au TÉLÉPHONE. Sur bureau et tablette l'identité est portée par le bloc central « JP AYIVI / CRÉATEUR D'IMAGES », il n'y a donc pas de logo en haut — c'est la maquette. Sélecteur scopé « .home .home-brand » et non « .home-brand » seul : la règle générale « .brand{ display:inline-block } », plus bas dans le fichier et de même force, l'emportait sinon et le logo apparaissait sur grand écran. */ .home .home-brand{ display:none; } /* Relevé maquette : 1,13 % du panneau. L'agrandissement de 30 % appliqué au reste du site a été RETIRÉ ici à la demande du client — il ne vaut plus que pour les neuf pages intérieures (voir .site-header .nav). */ .home .nav{ font-size:clamp(11px, calc(var(--panel-w) * .0113), 28px); } .intro strong{font-weight:400;} /* la partie "grasse" = Jumper Regular */ /* Bloc central + coordonnées à gauche */ /* maquette : le haut de « JP AYIVI » tombe à 31,13 % de la hauteur du panneau, le bas du bloc intro/menu à 19,29 % -> 11,84 % d'écart */ .hero-wrap{ position:relative; /* Écart calculé en JS : l'espace libre est réparti 39,65 % au-dessus du bloc titre et 60,35 % en dessous, exactement comme sur la maquette. La valeur de repli couvre le cas sans JS. */ margin:var(--hero-gap, calc(var(--panel-h) * .1184)) 0 0; } .hero{ text-align:center; margin:0; } /* Bloc titre à 88 % de la maquette (demande client : − 20 % puis + 10 %). Les trois corps de texte, leurs planchers, leurs plafonds et les écarts entre les lignes sont tous multipliés par le même 0,88 : les proportions internes du bloc restent donc exactement celles de la maquette, il est simplement plus petit. Valeurs de la maquette rappelées en commentaire. */ .hero h1{ font-family:"Jumper",sans-serif; font-weight:900; font-style:normal; /* JP AYIVI en droit (non italique) */ font-size:clamp(19.36px, calc(var(--panel-w) * .0269192), 65.12px); /* maquette 3,059 % x 0,88 */ letter-spacing:.01em; line-height:1; } .hero .role{ font-family:"Jumper",sans-serif; font-weight:700; font-style:italic; font-size:clamp(12.32px, calc(var(--panel-w) * .0160336), 38.72px); /* CRÉATEUR D'IMAGES — maquette 1,822 % x 0,88 */ letter-spacing:.01em; margin-top:1.76px; } .hero .tags{ font-family:"Jumper",sans-serif; font-weight:300; font-style:italic; /* Jumper Light Italic = ligne la plus large */ /* Le corps est publié dans --tags-fs (déclaré sur .home) : le bloc contact en a besoin pour calculer son propre calage. Ne pas écrire la valeur en dur ici. */ font-size:var(--tags-fs); letter-spacing:-.005em; margin-top:-1.76px; } /* Coordonnées rouges — à gauche, centrées verticalement sur le bloc JP AYIVI */ .contact{ position:absolute; /* aligné sur le bord gauche du bloc d'intro (4,20 % du panneau) */ left:1.07%; /* CALAGE DE LA LIGNE D'ÉCRITURE — la dernière ligne du bloc, « Mail : … », doit reposer sur la même ligne que « Réalisation • Montage • Motion Design ». .contact est calé par son BAS, donc c'est bien sa dernière ligne qui sert de référence, et le bas de .hero-wrap est le bas de la ligne « Réalisation… ». Sous toute ligne de texte subsiste un blanc technique : (interligne - hauteur de fonte)/2 + descendante Métriques RÉELLES de Jumper, relevées dans la table hhea des fichiers : ascendante 0,910 em, descendante 0,290 em, soit 1,200 em de hauteur de fonte. (L'ancien calcul utilisait 0,750 + 0,290 = 1,040 em, valeurs sTypo de la table OS/2, que les navigateurs n'emploient pas pour la hauteur de ligne.) « Réalisation… », interligne 1,35 : (1,35 - 1,20)/2 + 0,29 = 0,365 em contacts, interligne 1,25 : (1,25 - 1,20)/2 + 0,29 = 0,315 em Le blanc sous « Réalisation… » étant le plus épais, à bas de boîtes confondus la ligne du mail tombe TROP BAS. Elle doit donc REMONTER de la différence, ce qui veut dire un « bottom » POSITIF. (L'ancienne valeur était négative : les contacts descendaient au lieu de monter, d'où un décalage double.) Le terme des contacts est écrit en « em » : il se règle donc tout seul sur le corps réellement appliqué, y compris quand une media query le change. */ bottom:calc(0.365 * var(--tags-fs) - 0.315em); color:var(--red); text-align:left; font-family:"Jumper",sans-serif; font-weight:400; font-style:italic; /* +15 % sur le relevé maquette (0,00851), à la demande de la cliente : le bloc paraissait trop discret. Le calage vertical suit tout seul — « bottom » est exprimé en em du bloc lui-même, la dernière ligne reste donc posée sur la même ligne d'écriture que « Réalisation • Montage • Motion Design ». */ font-size:clamp(10.4px, calc(var(--panel-w) * .00979), 25.3px); line-height:1.25; /* interligne serré comme la maquette */ } /* Chiffres uniquement : Gotham Ultra Italic (fallback lourd en attendant le fichier) */ .contact .num{ font-family:"Gotham Ultra","Maison Neue",sans-serif; font-weight:900; font-style:italic; } /* Les trois VALEURS en gras — le pseudo, le numéro, l'adresse — les libellés « iG : », « Tel : » et « Mail : » restant en graisse normale. Seul le numéro le paraissait jusqu'ici, parce qu'il est composé en Gotham Ultra ; le pseudo et l'adresse restent en Jumper, dont le Bold suffit à les mettre au même niveau sans mélanger deux polices sur une même ligne. */ .contact a{ font-weight:700; } .contact a:hover{text-decoration:underline;} /* Grille de catégories (menu bas, repose sur le cadre) */ .grid{ margin-top:auto; /* pousse la rangée tout en bas, SOUS le bloc titre (plus de chevauchement) */ display:flex; gap:1.07%; /* écart maquette, en % du rang : il suit l'homothétie */ align-items:flex-end; /* les BAS des images s'alignent sur le cadre */ justify-content:center; } /* La largeur du rang ne vaut QUE pour le grand écran. --rang-w est une notion de la mise en page bureau : 93,60 % du panneau, réduits par le JS quand la fenêtre est trop basse. Posée sans borne, elle s'appliquait aussi au téléphone et à la tablette, dont les retraits de panneau sont différents — sur téléphone la grille se retrouvait 2,23 vw trop large, elle débordait de son conteneur, la page devenait défilable, et les images les plus étroites ne couvraient plus tout à fait leur carte : l'arrondi de droite réapparaissait sous l'image sur Fashion, Food et Studio. */ @media(min-width:951px){ .grid{ width:var(--rang-w); margin-left:auto; margin-right:auto; } } .card{ position:relative; flex:0 0 auto; /* largeurs proportionnelles (maquette), pas d'égalisation */ display:flex; flex-direction:column; justify-content:flex-end; /* l'image reste calée en bas, le label au-dessus */ } /* Largeurs relevées sur la maquette (% de la largeur du panneau crème), multipliées par --card-k. Ce facteur unique s'applique AUSSI aux hauteurs et à l'écart : le rang d'images se réduit et s'agrandit donc en homothétie, il ne se déforme jamais. Voir le commentaire sous les hauteurs. */ .card--sport,.card--studio{ width:17.02%; } .card--food,.card--motion{ width:19.15%; } .card--fashion{ width:23.37%; } /* Le label fait partie du flux : il compte dans la hauteur de la rangée, il ne peut donc plus venir chevaucher le bloc titre. */ .card .label{ margin-bottom:calc(var(--panel-w) * .0094); /* 33 px sur la maquette */ white-space:nowrap; font-family:"Jumper",sans-serif; font-weight:100; /* Jumper Thin */ font-size:clamp(12px, calc(var(--panel-w) * .0151), 34px); /* relevé maquette */ transition:font-weight .15s ease; } /* Hauteurs décalées, bas alignés. La maquette est dessinée sur un format 1,477, bien plus haut qu'un écran réel : si on reprenait ses hauteurs en % du panneau, les vignettes deviendraient carrées. On verrouille donc leur FORME, relevée au pixel : Sport/Studio 558x589, Food/Motion 628x713, Fashion 766x849. */ .card--sport .thumb, .card--studio .thumb{ height:calc(var(--rang-w) * .17966); } .card--food .thumb, .card--motion .thumb{ height:calc(var(--rang-w) * .21741); } .card--fashion .thumb{ height:calc(var(--rang-w) * .25902); } /* --card-k : UN SEUL facteur, appliqué aux largeurs, aux hauteurs et à l'écart. Le rang d'images grandit et rétrécit donc en homothétie stricte — un carré reste carré, aucune image n'est recadrée, seule sa taille change. Il remplace deux mécanismes qui n'agissaient que sur la HAUTEUR, et déformaient donc les cadres : · --card-cap raccourcissait les vignettes sur une fenêtre trop basse ; · --card-scale les allongeait quand le blanc dépassait 30 % du panneau, jusqu'à 1,75 fois — de quoi transformer un carré en rectangle vertical et rogner l'image sur les côtés. C'est ce que voyait le client de la cliente en rétrécissant sa fenêtre. PLAFOND À 1 — le facteur ne fait que RÉDUIRE, jamais agrandir. Les cinq cartes et leurs quatre écarts totalisent 99,99 % de la largeur de la grille : le rang occupe déjà toute la place que la maquette lui donne. Le seul « jeu » apparent est le retrait de 3,20 % que .home laisse de chaque côté — mais c'en est pas : la maquette le mesure au pixel, 112 px sur un panneau de 3502, soit 3,198 %. L'entamer collait les images aux bords du panneau. Sur une fenêtre large et basse, le blanc excédentaire n'est donc plus comblé : c'est le prix de la fidélité au document. */ .thumb{ position:relative; width:100%; flex-shrink:0; /* garde la hauteur, pas de compression */ overflow:hidden; background:#e9e9dd; } .thumb img,.thumb video{ position:absolute;inset:0; width:100%;height:100%; object-fit:cover; display:block; } /* Fashion : la photo comme l'animation de survol sont plus hautes que le cadre. Un recadrage centré coupait le sommet du crâne (50 px sur la photo, 217 px sur la vidéo). On ancre les deux en haut du cadre : le surplus part vers le bas. */ .card--fashion .thumb img, .card--fashion .thumb video{ object-position:50% 0%; } .thumb .gif{opacity:0;transition:opacity .35s ease;} .card:hover .thumb .gif{opacity:1;} /* ---- Découverte de l'animation au doigt ---- Retour client : sur tablette et téléphone l'animation partait toute seule. On rétablit le principe du survol, transposé au tactile — le doigt remplace le curseur, et cela vaut pour les CINQ cartes, comme à la souris. TÉLÉPHONE : les cartes s'empilent et un appui en ouvre une ; le dévoilement s'accroche à cette ouverture, déjà en place (.est-ouverte). TABLETTE : elles ne s'empilent pas, il n'y a rien à quoi s'accrocher. Un premier appui pose .est-touchee, un second suit le lien — même grammaire. Les deux classes sont posées par cursor.js, uniquement sur les appareils sans survol : à la souris, c'est .card:hover qui continue de faire le travail, à toutes les largeurs. */ .card.est-ouverte .thumb .gif, .card.est-touchee .thumb .gif{ opacity:1; } /* Mouvement réduit demandé par le système : on rend la photo fixe. */ @media(prefers-reduced-motion:reduce){ .thumb .gif{ display:none; } } .card:hover .label{font-weight:400;} /* survol = Jumper Regular */ /* ============================================================ PAGES INTÉRIEURES (galerie mosaïque) ============================================================ */ /* Relevé au pixel sur site_ordi_rs_int.png (page de 5135 px), repères du client compris : retrait latéral 754 px = 14,684 % · haut du glyphe « JP AYIVI » 189 px = 3,677 % bas de « Créateur d'images » 343 px = 6,672 % · bas du menu 392 px = 7,634 % haut de la galerie 456 px = 8,880 % · largeur de galerie 3220 px = 62,7 % Tailles typo de la maquette : logo 2,175 vw · sous-titre 0,998 vw · menu 0,572 vw. Les trois sont posées en clamp() : ratios exacts sur grand écran, plancher lisible en dessous. */ .site-header{ position:fixed;top:0;left:0;right:0;z-index:50; /* barre fixe : reste en place au scroll */ display:flex;justify-content:space-between;align-items:flex-start; padding:clamp(26px, 3.6vw, 92px) 14.684% 0; background:transparent; /* transparent : le titre de section reste visible dessous */ transition:opacity .28s ease; } /* Quand une image ou une vidéo passe derrière le logo, il ne s'estompe plus : il devient simplement OPAQUE dans sa teinte grise habituelle. Les valeurs ci-dessous sont l'exact équivalent solide de rgba(24,24,24,.22) et rgba(24,24,24,.82) rendus sur le fond crème : l'aspect ne change donc pas sur fond uni, et reste identique par-dessus n'importe quelle image. Le menu, lui, continue de s'estomper. */ .site-header .brand, .site-header nav{ transition:opacity .28s ease, color .28s ease; } .site-header.brand-dim .brand { opacity:1; color:#CBCBC2; } .site-header.brand-dim .brand .sub { color:#41413F; } .site-header.nav-dim nav { opacity:.16; } .site-header nav:hover{ opacity:1; } /* on le récupère au survol */ .brand{ display:inline-block; /* le bloc prend la largeur de « JP AYIVI » */ font-family:"Jumper",sans-serif; font-weight:900;font-style:normal; /* droit comme le PSD */ line-height:1; /* JP AYIVI pâle (ghost). COULEUR OPAQUE, et non rgba : en Jumper Black sans interlettrage, le Y et le I se chevauchent, et deux glyphes translucides superposés cumulent leur alpha — 1 − (1 − 0,22)² = 0,392 au lieu de 0,22. La zone commune paraissait donc presque deux fois plus dense. Retour client. #CBCBC2 est l'exact équivalent solide de rgba(24,24,24,.22) rendu sur le crème #FEFEF2 : 0,22 x 24 + 0,78 x 254 = 203,4 et 0,22 x 24 + 0,78 x 242 = 194,0, soit rgb(203,203,194). L'aspect ne change donc pas sur fond uni, seule la surdensité disparaît. C'est déjà la couleur qu'emploie l'état estompé du logo, quelques lignes plus haut. */ color:#CBCBC2; } /* 2,175 vw = les 486 px de large de « JP AYIVI » sur la maquette (9,47 % de la page). Pas d'interlettrage : la maquette n'en a pas. */ .brand .name{ display:block;white-space:nowrap; font-size:clamp(26px, 2.175vw, 56px); letter-spacing:0; } .brand .sub{ display:block;white-space:nowrap; font-family:"Jumper",sans-serif; font-weight:100;font-style:normal; /* Thin */ /* 0,998 vw = 45,9 % du logo : « Créateur d'images » tombe alors naturellement à la largeur de « JP AYIVI », l'ajustement JS n'a presque plus rien à corriger. */ font-size:clamp(12px, 0.998vw, 26px); letter-spacing:normal; color:rgba(24,24,24,.82); /* Créateur d'images soutenu */ margin-top:0; /* maquette : les deux lignes se touchent */ } /* Menu : 0,572 vw sur la maquette (8 px à 1440 — illisible), plancher à 12 px. Interligne 1,05 comme le PSB. Agrandi de 30 % à la demande du client. Le LOGO, lui, garde sa taille : il ne suit plus le menu (voir --nav-base plus bas), donc son bas ne tombe plus sur « +Communication ». C'est un choix assumé du client. */ .site-header .nav{ font-size:calc(1.3 * var(--nav-base)); line-height:1.05; } /* Largeur de contenu — UNIFORME sur toutes les pages intérieures (choix client). Les maquettes donnaient des colonnes différentes (Studio 63,0 % · RS 62,8 % · Food 62,9 % · Sport 66,9 % · Motion 44,3 % · Événement, Fashion 44,6 %) ; le client a validé l'élargissement de Sport à 83 % et demande les mêmes marges partout. Chaque page conserve ses proportions internes : tout y est exprimé en % de cette colonne, l'agrandissement est donc homothétique. Le contenu peut passer sous le menu : celui-ci s'estompe (voir .site-header.brand-dim). */ .gallery-wrap{ width:83%; max-width:none; margin:0 auto; /* --gallery-top est calculé en JS : bas de la ligne « About » + 1,19 % (maquette). Sur les pages avec titre, la hauteur du titre est déduite pour que les images démarrent elles aussi au niveau de « About ». */ padding:var(--gallery-top, 150px) 0 0; } /* Logo et menu rentrés de 4 % du bord de fenêtre, sur toutes les pages intérieures (celles qui portent une .gallery-wrap : ni l'accueil ni About). Ils ne suivent PLUS la largeur de la galerie (choix client) : ils dépassent donc légèrement les images, de 0,5 % de chaque côté. */ body:has(.gallery-wrap) .site-header{ padding-left:4%; padding-right:4%; } /* Toutes les pages intérieures se terminent par un pied de page. Les 90 px du bas de .reel et les 80 px du bas de .gallery-wrap s'ajoutaient à son écart supérieur (237 px au-dessus contre 67 px en dessous). On neutralise les deux : l'écart n'est plus donné que par le pied de page lui-même. */ body:has(.gallery-wrap) .reel{ padding-bottom:0; } body:has(.gallery-wrap) .rs{ padding-bottom:0; } body:has(.gallery-wrap) .showreel-stage{ padding-bottom:0; } /* ---- Fin de galerie : UN séparateur, centré, sur les neuf pages ---- Le trait de clôture appartient désormais à la galerie elle-même et non plus à la dernière légende. Il est posé à égale distance de la fin du contenu et de la première ligne du pied de page — c'est --fin-gap, employé des deux côtés, ce qui garantit l'égalité à toutes les tailles de fenêtre. Valeur : la moitié de ce que valait l'ensemble avant (1,74 vw au-dessus du trait + 7 vw en dessous = 8,74 vw), donc 4,37 vw. La longueur des pages ne change pas, seul le trait descend au milieu. Largeur 5,24 % de la colonne = 4,35 % de la fenêtre, la valeur du site. */ .gallery-wrap::after{ content:""; display:block; width:5.24%; height:1.5px; background:var(--ink); margin:var(--fin-gap) auto 0; } /* La dernière légende perd son soulignement : c'est le séparateur ci-dessus qui ferme la page, et deux traits se suivraient sinon. Ne concerne que le dernier bloc en fin de galerie — sur Motion les légendes de la colonne haute gardent le leur, puisque la grille basse vient encore après. */ .reel > .reel-item:last-child .reel-caption::after{ display:none; } /* Dernier bloc des galeries légendées : plus de marge sous lui. L'écart entre le trait et le pied de page est alors donné par le seul retrait de celui-ci (7 vw) — identique sur les neuf pages. Sans cette ligne, Événement et Communication ajoutaient 2,54 vw de plus que les autres. */ .reel > .reel-item:last-child{ margin-bottom:0; } /* (le padding-bottom de .masonry n'est PAS touché : c'est le calage en hauteur de la page Studio, pas une marge.) */ /* Logo calé sur le menu — le haut de « JP AYIVI » au niveau du haut de « +Home », le bas de « Créateur d'images » (descendante du g comprise) au niveau du bas de « +Communication ». Réglage validé sur Sport, généralisé. Métriques Jumper : la hauteur visée vaut 4,914 corps de menu, le bloc logo 1,429 corps de nom -> corps du nom = 3.4383 x corps du menu. On le calcule à partir du corps RÉEL du menu (plancher de 12 px compris), pour que le calage tienne à toutes les tailles d'écran. ATTENTION : le calcul part de --nav-base, c'est-à-dire du corps du menu AVANT son agrandissement de 30 %. Le logo garde donc exactement la taille validée auparavant. Conséquence acceptée par le client : le menu étant plus haut de 30 %, le bas de « Créateur d'images » ne tombe plus sur « +Communication ». */ body:has(.gallery-wrap) .brand .name{ font-size:calc(3.4383 * var(--nav-base)); } body:has(.gallery-wrap) .brand .sub{ font-size:calc(1.5771 * var(--nav-base)); } /* Titre de page, CENTRÉ sur les trois formats (choix client). Le centrage n'a qu'une seule lecture possible ici, vérification faite : à 1440 px la galerie va de 122 à 1318, axe à 720 ; les médias vont de 122 à 1318 sur Sport, Studio et Réseaux, et de 299 à 1141 sur Fashion, Événement, Communication, Motion et Showreel — colonne plus étroite, mais centrée, donc axe à 720 elle aussi. Galerie, médias et fenêtre partagent le même axe : le text-align suffit, aucun calcul n'est nécessaire. La hauteur du titre reste mesurée par cursor.js et retranchée de --gallery-top, pour que la galerie démarre toujours au même pixel. */ /* ---- ÉTAT ACTUEL : titre MASQUÉ À L'ŒIL, mais toujours lu ---- Choix client, provisoire. Le

reste dans le code de chaque page : Google, les assistants et les lecteurs d'écran le lisent, le bénéfice de référencement est intégralement conservé. Seul l'affichage disparaît. La technique est celle de l'accessibilité, PAS display:none ni visibility:hidden — ces deux-là retireraient aussi le titre aux lecteurs d'écran, et Google traite différemment un texte qu'il sait caché. Ici le texte est bien rendu, simplement réduit à un pixel hors du flux et découpé. Conséquence voulue : le titre ne prend plus aucune place, la galerie retrouve donc exactement la position qu'elle avait avant qu'on pose les titres. cursor.js le détecte par sa position (voir la note là-bas) et n'applique alors ni soustraction de hauteur ni plancher sous le menu. POUR LES REMETTRE VISIBLES : commenter le bloc .page-title ci-dessous et décommenter celui qui suit. Rien d'autre à toucher, ni dans les onze pages ni dans le JS. */ .page-title{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; } /* ---- Titre VISIBLE — à réactiver en commentant le bloc ci-dessus ---- .page-title{ font-family:"Jumper",sans-serif; font-weight:900; font-style:italic; font-size:clamp(22px,2.4vw,38px); margin:0 0 20px; text-align:center; } ---- */ /* Relevé au pixel sur site_ordi_studio_int.png (page 2258 px, contenu 1422 px) : colonne gauche 771 px = 54,22 % · colonne droite 642 px = 45,15 % trait vertical 10 px = 0,70 % · écart horizontal 40 px = 2,81 % */ /* La mosaïque de la maquette n'est pas une grille régulière : la largeur de chaque image varie (le trait de séparation se décale d'environ 32 px à mi-page). Chaque image porte donc sa position et sa largeur exactes, relevées au pixel sur le PSD (attributs style dans studio.html). Le conteneur est positionné et sa hauteur vient du padding-bas : 13 864 / 1 422 = 974,96 % de sa propre largeur. Tout reste proportionnel. */ .masonry{ position:relative; width:100%; padding-bottom:955.49%; } .masonry .col{ display:contents; } .masonry .item{ position:absolute; background:#e9e9dd; overflow:hidden; } .masonry .item img, .masonry .item video{ width:100%;display:block; } /* ============================================================ PAGE MOTION DESIGN — reel : vidéos en colonne + légende ============================================================ */ .reel{ max-width:none; margin:0; padding:0 0 90px; } /* Rythme des légendes — valeurs prises sur la page Sport (validées par le client) et converties en pourcentage de la fenêtre pour que l'espacement soit VISUELLEMENT identique sur toutes les pages, quelle que soit la largeur de leur colonne. Sport : 2,4 % / 2,6 % / 3,8 % d'une colonne à 66,9 %. */ .reel-item{ margin-bottom:clamp(16px, 2.54vw, 56px); } .reel-media{ background:#e9e9dd; overflow:hidden; } .reel-media video,.reel-media img{ width:100%; display:block; } /* ---- ASMR sur la page FOOD : bloc rendu à la largeur commune ---- Une marge négative l'avait élargi aux 335 px de la galerie Réseaux Sociaux. C'était une erreur de ma part : le bandeau signalé par le client est celui de la page RÉSEAUX SOCIAUX (.rs-band), pas celui-ci. Ce bloc reprend donc la largeur de tous ses voisins sur Food. */ .reel-caption{ text-align:center; margin-top:clamp(10px, 1.61vw, 36px); font-family:"Jumper",sans-serif; line-height:1.3; } .reel-caption .client{ display:block; font-weight:700; font-style:italic; font-size:13px; letter-spacing:.02em; } .reel-caption .desc{ display:block; font-weight:100; font-size:12.5px; } /* Petit trait noir centré sous la légende (présent sur toutes les maquettes). Largeur relevée sur chaque maquette, épaisseur volontairement fine. */ .reel-caption::after{ content:""; display:block; width:var(--rule-w, 8%); height:1.5px; background:var(--ink); margin:clamp(11px, 1.74vw, 38px) auto 0; } /* Le trait fait 4,35 % de la fenêtre sur TOUTES les pages : c'est la valeur de la maquette Sport, validée par le client. Exprimé en % d'une colonne pleine (83 %), cela donne 5,24 %. Dans une colonne réduite à 70,41 % de la galerie — Motion en haut, et désormais Fashion, Événement et Communication — il faut 4,35 / (83 x 0,7041) = 7,44 % pour obtenir la même longueur à l'écran. */ .reel{ --rule-w:5.24%; } /* valeur de base, colonne pleine */ .reel--large{ --rule-w:5.24%; } /* Food */ .reel--xl{ --rule-w:5.24%; } /* Sport */ /* Fashion · Événement · Communication — mêmes proportions que la colonne à légendes de Motion (choix client) : 70,41 % de la galerie, soit 58,44 % de la fenêtre. Ces trois pages ont la même structure qu'elle, une vidéo et sa légende dessous ; elles étaient jusqu'ici à la largeur de la GRILLE BASSE de Motion, qui, elle, ne porte pas de légende. Le sélecteur vise les .reel sans variante : Food, Sport et Motion gardent la largeur pleine de la galerie. */ .reel:not(.reel--large):not(.reel--xl):not(.reel--motion){ width:70.41%; margin-left:auto; margin-right:auto; --rule-w:7.44%; } /* ------------------------------------------------------------------ PAGE FASHION — relevé au pixel sur site_ordi_fashion_int.png (page 7300 px, colonne de contenu 3248 px = 44,49 %). ------------------------------------------------------------------ */ /* Bloc AFFLELOU — UNE SEULE VIDÉO. Il était auparavant composé de deux éléments côte à côte : un panneau rose statique portant un portrait, et une vidéo carrée. Le panneau restait donc à l'écran pendant la lecture, ce que le client a signalé comme un bug. Le diptyque rose + portrait + balcon est en réalité UNE IMAGE DU FILM, à 13,96 s — retrouvée par comparaison avec la vignette fournie (correspondance 0,991). Elle sert désormais de vignette au film entier, qui prend toute la largeur du bloc : au clic, la lecture remplace bien tout le visuel. Format 4096 x 2160 = 1,8963, celui du film : aucun recadrage. */ .reel-media--afflelou{ position:relative; aspect-ratio:4096 / 2160; overflow:hidden; } .reel-media--afflelou > video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; } /* Rythme vertical de la maquette Fashion (13,9 % de la colonne entre deux blocs) */ .reel--fashion .reel-item:last-child{ margin-bottom:0; } /* Sport — grilles triptyque / duo (carrés) */ .reel-tri{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; } .reel-duo{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } .reel-tri .reel-media,.reel-duo .reel-media{ aspect-ratio:1 / 1; } .reel-tri .reel-media video,.reel-tri .reel-media img, .reel-duo .reel-media video,.reel-duo .reel-media img{ width:100%; height:100%; object-fit:cover; } @media(max-width:600px){ .reel-tri,.reel-duo{ grid-template-columns:1fr; } } /* ------------------------------------------------------------------ PAGE MOTION DESIGN — relevé au pixel sur site_ordi_motion_int.png (page 2538 px). La maquette est en DEUX parties : · haut : colonne étroite de 1128 px = 44,44 % de la fenêtre, blocs légendés ; · bas : colonne large de 1602 px = 63,12 %, 4 rangées appariées sans légende. Le conteneur prend la largeur large ; la colonne du haut vaut 1128 / 1602 = 70,41 % de ce conteneur. ------------------------------------------------------------------ */ .reel--motion{ --rule-w:7.44%; } /* Colonne étroite (11 blocs) */ .md-col{ width:70.41%; margin:0 auto; } /* Bloc 7 — Processus créatif : 77,28 % de la colonne, centré */ .md-col .reel-item--narrow .reel-media{ width:77.28%; margin:0 auto; } /* Bloc 11 — Website : la maquette le recadre en 1,535 (la vidéo est en 16:9) */ .reel-item--crop154 .reel-media{ aspect-ratio:1535 / 1000; position:relative; overflow:hidden; } .reel-item--crop154 .reel-media > video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; } /* Grille large du bas — pourcentages relevés sur la maquette */ .md-pairs{ margin-top:9.2%; } .md-row{ display:flex; gap:0; margin-bottom:9.5%; } .md-row:last-child{ margin-bottom:0; } .md-row .reel-media{ position:relative; overflow:hidden; } .md-row .reel-media > video, .md-row .reel-media > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; } .md-row--a{ justify-content:space-between; align-items:flex-start; } .md-row--a > *:first-child{ width:40.51%; aspect-ratio:649 / 886; } .md-row--a > *:last-child { width:55.56%; aspect-ratio:890 / 886; } .md-row--b{ justify-content:space-between; align-items:center; } .md-row--b > *:first-child{ width:54.12%; aspect-ratio:16 / 9; } .md-row--b > *:last-child { width:41.64%; aspect-ratio:2 / 1; } /* 2000 x 640 = le format exact de l'animation fournie : aucun recadrage. (La maquette donnait 1602 x 514, soit 3,117 contre 3,125 — écart invisible.) */ .md-row--c > *{ width:100%; aspect-ratio:2000 / 640; } .md-row--d{ justify-content:space-between; align-items:flex-start; } .md-row--d > *:first-child{ width:38.39%; aspect-ratio:1 / 1; } /* 3/2 = le format exact de l'animation fournie (1620 x 1080), aucun recadrage. La maquette donnait 919 x 614, soit 1,4967 contre 1,5 — 0,2 % d'écart. */ .md-row--d > *:last-child { width:57.37%; aspect-ratio:3 / 2; } @media(max-width:950px){ /* .md-col garde ses 70,41 % en tablette : c'est la largeur commune du site, prolongée depuis le bureau (choix client). Seul l'écart avant la grille basse est resserré. */ .md-pairs{ margin-top:9%; } } @media(max-width:600px){ .md-col{ width:100%; } .md-col .reel-item--narrow .reel-media{ width:100%; } .md-pairs{ margin-top:34px; } .md-row{ flex-direction:column; gap:14px; margin-bottom:34px; } .md-row > *{ width:100% !important; } } /* Food — variantes portrait (cocktails 4:5, triptyque 2:3) */ .reel-duo--portrait .reel-media{ aspect-ratio:4/5; } .reel-tri--portrait .reel-media{ aspect-ratio:2/3; } /* ------------------------------------------------------------------ PAGE FOOD — proportions relevées au pixel sur site_ordi_food_int.png (page 5247 px de large, colonne de contenu 3301 px = 62,91 %). Tous les pourcentages ci-dessous sont exprimés par rapport à cette colonne, donc la page tient ses proportions à n'importe quelle taille. ------------------------------------------------------------------ */ .reel--large{ padding:0 0 9%; } /* Rythme vertical : blocs à légende 2,97 % après le trait ; les blocs sans légende suivent l'écart exact de la maquette. */ .reel--large .reel-item{ margin-bottom:clamp(16px, 2.54vw, 56px); } .reel--large .reel-item:last-child{ margin-bottom:0; } .reel--large .reel-item--banner{ margin-bottom:3.45%; } /* bandeau -> PIZZE : 114 px */ .reel--large .reel-item--flush{ margin-bottom:0.55%; } /* PIZZE/PIQUANTE/ASMR : 18 px */ /* Légende : le trait est défini plus haut, seul l'écart change ici */ /* B1 — duo cocktails GEORGIA : ensemble 71,1 %, centré */ .reel--large .reel-duo--portrait{ display:flex; justify-content:center; gap:6.09%; } .reel--large .reel-duo--portrait > .reel-media{ flex:0 0 auto; width:32.51%; aspect-ratio:1073 / 1384; } /* B2 — bandeau GEORGIA : 50,59 %, centré, image entière (choix client) */ .reel--large .reel-item--banner .reel-media{ width:50.59%; margin:0 auto; } /* B6 — triptyque : 3 x 32,96 %, écarts de 0,45 % */ .reel--large .reel-tri--portrait{ display:flex; justify-content:center; gap:0.45%; } /* POURQUOI width ET NON flex-basis, sur toutes les boîtes à aspect-ratio. Ces cadres tirent leur HAUTEUR d'un aspect-ratio, et leur LARGEUR était donnée par un flex-basis en pourcentage. WebKit ne réinvalide pas la hauteur de ces boîtes quand on redimensionne la fenêtre : la largeur suivait, la hauteur restait celle de la mise en page précédente, et les carrés devenaient des rectangles verticaux. Un rechargement à la même largeur rendait le bon rendu — c'est exactement ce qu'a observé la cliente. Les dix autres boîtes à aspect-ratio du site tiraient déjà leur largeur d'un width en pourcentage, et ne présentaient pas le défaut. On aligne donc les six restantes sur elles : flex:0 0 auto, puis width. Le résultat calculé est identique, mais la hauteur est correctement recalculée à chaque redimensionnement, sur Safari comme ailleurs. */ .reel--large .reel-tri--portrait > .reel-media{ flex:0 0 auto; width:32.96%; aspect-ratio:2/3; } /* B7 — MIZNON : 70,86 %, centré */ .reel--large .reel-item--miznon .reel-media{ width:70.86%; margin:0 auto; aspect-ratio:16 / 9; } /* B8 — TOMATOO : ensemble 58,16 %, les deux photos à leur cadrage d'origine */ .reel--large .reel-duo--tomatoo{ display:flex; justify-content:center; align-items:flex-start; gap:0.42%; } /* ratios repris tels quels sur la maquette : les deux photos ont exactement la même hauteur */ .reel--large .reel-duo--tomatoo > .reel-media:first-child{ flex:0 0 auto; width:31.35%; aspect-ratio:1035 / 1083; } .reel--large .reel-duo--tomatoo > .reel-media:last-child { flex:0 0 auto; width:26.38%; aspect-ratio:871 / 1083; } /* Recadrage propre dans tous les cadres à ratio imposé */ .reel--large .reel-media{ position:relative; overflow:hidden; } .reel--large .reel-duo--portrait .reel-media > *, .reel--large .reel-tri--portrait .reel-media > *, .reel--large .reel-duo--tomatoo .reel-media > *, .reel--large .reel-item--miznon .reel-media > *{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; } @media(max-width:950px){ .reel--large .reel-item--banner .reel-media, .reel--large .reel-item--miznon .reel-media{ width:100%; } .reel--large .reel-duo--portrait{ gap:3%; } .reel--large .reel-duo--portrait > .reel-media{ flex:0 0 auto; width:45%; } .reel--large .reel-duo--tomatoo > .reel-media:first-child{ flex:0 0 auto; width:46%; } .reel--large .reel-duo--tomatoo > .reel-media:last-child { flex:0 0 auto; width:39%; } } @media(max-width:600px){ .reel--large .reel-item{ margin-bottom:26px; } .reel--large .reel-item--banner{ margin-bottom:14px; } .reel--large .reel-item--flush{ margin-bottom:4px; } .reel--large .reel-duo--portrait, .reel--large .reel-tri--portrait, .reel--large .reel-duo--tomatoo{ flex-direction:column; align-items:center; gap:12px; } .reel--large .reel-duo--portrait > .reel-media, .reel--large .reel-tri--portrait > .reel-media, .reel--large .reel-duo--tomatoo > .reel-media{ flex:0 0 auto; width:100%; aspect-ratio:auto; } /* Les deux photos TOMATOO portent chacune leur largeur propre, via :first-child et :last-child. Ce sélecteur est PLUS FORT que la règle ci-dessus, qui les met pourtant à 100 % : elle était donc ignorée, et les tomates restaient à 46 et 39 % — plus étroites que la vidéo Miznon au-dessus, et calées à gauche, l'alignement de base étant flex-start. On répète donc la mise à pleine largeur avec la même spécificité, et on centre le groupe. Les deux photos prennent alors la largeur des contenus qui les précèdent. */ .reel--large .reel-duo--tomatoo > .reel-media:first-child, .reel--large .reel-duo--tomatoo > .reel-media:last-child{ flex:0 0 auto; width:100%; aspect-ratio:auto; } .reel--large .reel-duo--tomatoo > .reel-media > *, .reel--large .reel-duo--portrait .reel-media > *, .reel--large .reel-tri--portrait .reel-media > *{ position:static; height:auto; } } /* ------------------------------------------------------------------ PAGE SPORT — proportions relevées au pixel sur site_ordi_sport_int.png (en % de la largeur de contenu : blocs simples 52,4 %, duo 65,4 %, triptyque pleine largeur ; écarts 5,75 % et 6,6 %). ------------------------------------------------------------------ */ .reel--xl .reel-item:last-child{ margin-bottom:0; } /* blocs simples : 52,4 % de la largeur, centrés */ .reel--xl .reel-item--solo .reel-media{ width:52.4%; margin:0 auto; aspect-ratio:16 / 9; } .reel--xl .reel-item--32 .reel-media{ aspect-ratio:3 / 2; } /* Bleu & Ocre */ /* triptyque : 3 carrés sur toute la largeur */ .reel--xl .reel-tri{ display:flex; gap:5.75%; justify-content:center; } .reel--xl .reel-tri .reel-media{ flex:0 0 auto; width:29.5%; aspect-ratio:1 / 1; } /* duo : 2 carrés, ensemble centré (65,4 %) */ .reel--xl .reel-duo{ display:flex; gap:6.6%; justify-content:center; } .reel--xl .reel-duo .reel-media{ flex:0 0 auto; width:29.4%; aspect-ratio:1 / 1; } /* recadrage propre dans les cadres à ratio imposé */ .reel--xl .reel-media{ position:relative; overflow:hidden; } .reel--xl .reel-media > video, .reel--xl .reel-media > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; } @media(max-width:950px){ .reel--xl .reel-item--solo .reel-media{ width:72%; } .reel--xl .reel-duo .reel-media{ flex:0 0 auto; width:38%; } } /* ------------------------------------------------------------------ SPORT EN TABLETTE (601 → 950 px) — une seule colonne ------------------------------------------------------------------ Les groupes se dépilent : le triptyque TENNIS et le duo BASKET, qui posaient trois et deux carrés côte à côte, se suivent désormais verticalement. Les vidéos solos, elles, ne bougent pas. LARGEUR — les vidéos dépilées reprennent les 72 % des solos. À pleine largeur de galerie un carré mesurerait 788 px de haut sur une tablette de 950, soit plus que la hauteur utile de l'écran : il écraserait tout le reste. À 72 % il fait 567 px, et surtout la colonne devient homogène — une seule largeur du haut en bas de la page. ÉCART — proportionnel comme partout ailleurs sur le site. 1,90 vw entre les vidéos d'un même groupe (14,6 px à 768, 18 px à 950) : c'est trois fois moins que l'écart entre deux blocs, réglé lui par .reel-item à 2,54 vw, de sorte que les vidéos d'un groupe restent lisibles comme un ensemble et ne se confondent pas avec les blocs voisins. La légende reste unique et ferme le groupe : aucune modification du HTML, donc rien à maintenir en double quand on étendra ce principe aux huit autres pages intérieures. Attention au piège : la règle générique .reel-tri / .reel-duo les déclare en GRILLE, mais Sport les repasse en FLEX quelques lignes plus haut. C'est donc flex-direction et align-items qu'il faut employer ici, pas grid-template-columns — qui serait purement ignoré. */ @media(max-width:950px) and (min-width:601px){ .reel--xl .reel-tri, .reel--xl .reel-duo{ flex-direction:column; align-items:center; gap:clamp(11px, 1.90vw, 18px); } .reel--xl .reel-tri .reel-media, .reel--xl .reel-duo .reel-media{ flex:0 0 auto; width:72%; } /* ================================================================ LE MÊME PRINCIPE, ÉTENDU AUX AUTRES PAGES INTÉRIEURES ================================================================ Validé d'abord sur Sport, puis généralisé. Cinq pages ne sont pas concernées : Fashion, Événement, Communication, Showreel et About n'ont déjà qu'un média par rangée. Une seule largeur, 72 % de la galerie, sur toutes les pages et tous les formats — 16:9, carrés, portraits 2:3 et 4:5, 9:16. La colonne reste donc homogène du haut en bas d'une page, et d'une page à l'autre. FOOD — six groupes : un triptyque, deux duos, un duo et un triptyque de portraits, et le duo Tomatoo dont les deux photos ont des rapports différents mais la même hauteur sur la maquette. Une fois dépilés, cette égalité de hauteur n'a plus d'objet : on leur rend leur rapport propre en neutralisant l'aspect-ratio imposé. MOTION — seules les quatre rangées appariées du bas sont dépilées. La colonne haute, à blocs légendés, n'a déjà qu'un média par rangée et garde ses 70,41 %. RÉSEAUX SOCIAUX — les six rangées de la grille. Les formats y sont verticaux (9:16 pour la plupart), donc la page s'allonge beaucoup : c'est le choix assumé de la cohérence sur la composition d'origine. STUDIO — la mosaïque est posée en absolu, chaque photo à ses coordonnées. On repasse le conteneur en flux, comme le fait déjà le bloc téléphone, et les deux colonnes se suivent alors dans l'ordre du document : toute la colonne de gauche, puis toute celle de droite. */ /* ---- Food ---- */ .reel--large .reel-tri, .reel--large .reel-duo, .reel--large .reel-duo--portrait, .reel--large .reel-tri--portrait, .reel--large .reel-duo--tomatoo{ display:flex; flex-direction:column; align-items:center; gap:clamp(11px, 1.90vw, 18px); } .reel--large .reel-tri > .reel-media, .reel--large .reel-duo > .reel-media, .reel--large .reel-duo--portrait > .reel-media, .reel--large .reel-tri--portrait > .reel-media, .reel--large .reel-duo--tomatoo > .reel-media{ flex:0 0 auto; width:72%; } /* ---- Motion design : les quatre rangées appariées du bas ---- */ .md-row{ flex-direction:column; align-items:center; gap:clamp(11px, 1.90vw, 18px); } .md-row > *{ width:72% !important; } /* ---- Studio ---- */ .masonry{ position:static; padding-bottom:0; display:flex; flex-direction:column; align-items:center; } .masonry .col{ display:contents; } .masonry .item{ position:static !important; left:auto !important; top:auto !important; width:72% !important; height:auto !important; margin-bottom:clamp(11px, 1.90vw, 18px); } } @media(max-width:600px){ .reel--xl .reel-item--solo .reel-media{ width:100%; } .reel--xl .reel-tri, .reel--xl .reel-duo{ flex-direction:column; gap:14px; } .reel--xl .reel-tri .reel-media, .reel--xl .reel-duo .reel-media{ flex:0 0 auto; width:100%; } } @media(max-width:600px){ /* TÉLÉPHONE seulement. La colonne réduite de Fashion, Événement et Communication est conservée en tablette (voir le bloc 950 px) : la distinction entre pages à légendes et galeries pleines vaut donc de 601 px jusqu'aux grands écrans. Sous 600 px, tout reprend la largeur disponible. (Ce bloc était auparavant à 820 px — seuil supprimé, il coupait la plage tablette en deux et créait des comportements hybrides autour de 768 px.) */ .reel, .reel:not(.reel--large):not(.reel--xl):not(.reel--motion){ width:auto; max-width:none; padding:0 var(--pad) 60px; } } /* ============================================================ PAGE SHOWREEL — grande vidéo centrée ============================================================ */ .showreel-stage{ max-width:none; margin:0 auto; padding:0 0 70px; /* Largeur : 70,41 % de la colonne (elle-même à 83 % de la fenêtre), soit 58,44 % de la fenêtre — exactement les vidéos de Motion et de toutes les autres pages. 1122 px sur un écran de 1920. Deuxième terme : la vidéo fait 16/9, cette page n'a qu'elle, et il serait absurde d'avoir à faire défiler pour en voir le bas. On plafonne donc la largeur à ce que la hauteur restante peut contenir — hauteur de fenêtre, moins le départ de la galerie calculé en JS, moins 4 % de garde en bas. Sur un écran normal c'est le premier terme qui gagne et la largeur vaut bien 1122 px ; sur une fenêtre basse, le second reprend la main et la vidéo rétrécit juste assez pour rester entière. */ width:min(70.41%, calc((100vh - var(--gallery-top, 200px) - 4vh) * 16 / 9)); } .showreel-stage video{ width:100%; height:auto; display:block; background:#000; } .showreel-cap{ text-align:center; margin-top:16px; font-family:"Jumper",sans-serif; font-weight:700; font-style:italic; font-size:15px; } .showreel-cap .num{ font-family:"Gotham Ultra","Maison Neue",sans-serif; font-weight:900; font-style:italic; } /* Téléphone : la vidéo reprend toute la largeur, la bride en hauteur n'a plus de sens (on fait défiler de toute façon). En tablette elle reste bridée, comme sur bureau. Seuil 820 px supprimé, ramené à 600. */ @media(max-width:600px){ .showreel-stage{ width:auto; max-width:none; padding:0 var(--pad) 50px; } } /* ============================================================ CURSEUR PASTILLE "SHOW REEEL" (desktop uniquement) ============================================================ */ .pastille-cursor{ position:fixed;top:0;left:0; width:60px;height:60px; border-radius:50%; background:var(--frame); display:flex;align-items:center;justify-content:center;text-align:center; pointer-events:none; z-index:9999; opacity:0; transition:opacity .3s ease, width .18s ease, height .18s ease; will-change:transform; } .pastille-cursor span{ font-family:"Jumper",sans-serif; font-style:italic; /* texte en italique (retour client) */ font-weight:400; text-transform:uppercase; color:var(--cream); font-size:12px;line-height:1.02;letter-spacing:.03em; } .pastille-cursor.is-link{width:74px;height:74px;} .pastille-cursor.is-link span{font-size:14px;} .pastille-cursor.over-menu{opacity:0 !important;} /* curseur normal sur les menus */ @media (hover:hover) and (pointer:fine){ html.has-pastille, html.has-pastille *{cursor:none !important;} /* Curseur normal sur : menus, images+catégories, contacts. .menu-toggle (le bouton « +Menu », qui devient « +Fermer ») et .site-nav (le panneau déroulé) doivent figurer ici : le JS les avait bien exclus de la pastille, mais cette règle-ci continuait de masquer le curseur système. On se retrouvait alors sans rien du tout — ni pastille, ni flèche. */ html.has-pastille .nav, html.has-pastille .nav *, html.has-pastille .site-nav, html.has-pastille .site-nav *, html.has-pastille .menu-toggle, html.has-pastille .intro, html.has-pastille .intro *, html.has-pastille .grid, html.has-pastille .grid *, html.has-pastille .contact, html.has-pastille .contact *{cursor:auto !important;} /* Les éléments cliquables de ces zones -> main */ html.has-pastille .nav a, html.has-pastille .nav a *, html.has-pastille .site-nav a, html.has-pastille .site-nav a *, html.has-pastille .menu-toggle, html.has-pastille .grid a, html.has-pastille .grid a *, html.has-pastille .contact a{cursor:pointer !important;} /* Sur le cadre gris autour, curseur normal (évite la pastille coupée au bord) */ html.has-pastille body.home-page{cursor:auto !important;} } @media (hover:none),(pointer:coarse){ .pastille-cursor{display:none !important;} } /* ---------- Sport et Studio : cadrage du haut (bureau) ---------- Les deux vignettes ont été refabriquées depuis les originaux de 1_home, ceux-là mêmes qu'emploient les trois maquettes : 558 x 686 px. La maquette bureau les pose à leur taille native et coupe par le BAS — corrélation 0,999 pour Sport, 1,000 pour Studio. D'où ce calage en haut, qui remplace le centrage par défaut. */ .card--sport .thumb img,.card--sport .thumb video, .card--studio .thumb img,.card--studio .thumb video{ object-position:50% 0%; } /* SPORT — l'animation porte 9,080 % de gris VRAI en haut de son fichier, pris dans le GIF du client, là où la photo n'en avait pas et où le CSS en posait d'inventé. Sur bureau la photo se cale en haut du cadre ; pour que le survol ne la décale pas, il faut masquer ce gris. La boîte fait 17,02 % de large pour 17,966 % de haut, soit un rapport de 0,9473 ; le fichier, lui, vaut 0,80404. La source est donc plus haute que la boîte : « cover » la cale en largeur et laisse déborder 0,03202 R en hauteur. Le gris cuit occupe 0,01922 R de ce débordement : il faut en masquer 0,01922 / 0,03202 = 60,03 % par le haut. */ .card--sport .thumb video{ object-position:50% 60.03%; } /* ---------- Éléments responsive (base) ---------- */ .c-item{ display:block; } /* contacts empilés (bureau) */ .menu-toggle{ display:none; background:none; border:0; font-family:"Jumper",sans-serif; font-weight:400; font-size:15px; color:var(--ink); cursor:pointer; padding:0; } /* ---------- TABLETTE (≤1200px) : accueil en 3 colonnes (Food+Sport | Fashion | Motion+Studio) ---------- */ /* Fenêtre desktop courte : l'intro et les contacts suivent aussi l'échelle du panneau */ @media (min-width:951px) and (max-height:820px){ .intro{ font-size:clamp(11px, calc(var(--panel-h) * .019), 15px); } .contact{ font-size:clamp(11px, calc(var(--panel-h) * .019), 15px); } /* Règle de repli pour les fenêtres basses. Revenue à sa valeur d'origine en même temps que l'accueil et About : sur les pages intérieures c'est de toute façon .site-header .nav, plus spécifique, qui l'emporte et garde le + 30 %. */ .nav{ font-size:clamp(11px, calc(var(--panel-h) * .019), 16px); } } @media(max-width:950px) and (min-width:601px){ :root{--pad:30px;} /* ============================================================ ACCUEIL EN TABLETTE — relevé au pixel sur la maquette « site_tablette_1.png ». Panneau crème mesuré : 2003 x 2281 px. Toutes les valeurs ci-dessous sont des POURCENTAGES de ce panneau, donc transposables sur n'importe quelle tablette. La maquette est dessinée sur un format 0,879 (largeur / hauteur) ; une tablette réelle en portrait vaut 0,75. Impossible de respecter à la fois les pourcentages verticaux ET la forme des vignettes. Choix retenu (client) : on VERROUILLE LA FORME des vignettes, relevée au pixel, et le surplus de hauteur va dans les blancs, qui conservent leur partage 40 / 60. ============================================================ */ /* Retrait latéral : la grille d'images part à 1,80 % du panneau et s'arrête à 98,30 %. Le texte, lui, est rentré plus loin — voir les marges de .intro et .contact ci-dessous. Le retrait haut (5,66 %) est celui du bureau, identique sur la maquette tablette. */ .home{ padding:calc(var(--panel-h) * .0566) 1.75% 0; /* Corps de « Réalisation • Montage • Motion Design » : 2,051 % de la largeur du panneau. Publié dans la variable et non dans .hero .tags, parce que le calage des contacts en dépend. */ --tags-fs:clamp(12px, calc(var(--panel-w) * .02051), 39px); } /* ---- Échelle typographique de la maquette ---- Chaque corps est la largeur mesurée dans la maquette divisée par la largeur de la chaîne en « em » dans Jumper (relevée dans les fichiers de police), rapportée à la largeur du panneau : JP AYIVI ............ 303 px / 4,35 em -> 3,478 % CRÉATEUR D'IMAGES ... 429 px / 10,34 em -> 2,071 % Réalisation… ........ 839 px / 20,42 em -> 2,051 % paragraphe .......... 1008 px / 26,39 em-> 1,907 % menu ................ 372 px / 9,80 em -> 1,895 % contacts ............ 363 px / 11,36 em -> 1,595 % étiquettes .......... 334 px / 7,62 em -> 2,188 % Planchers de lisibilité en tête de chaque clamp(). */ .intro{ margin-left:2.79%; /* 4,45 % du panneau − 1,75 % de retrait */ font-size:clamp(12px, calc(var(--panel-w) * .01907), 30px); } .home .nav{ font-size:clamp(12px, calc(var(--panel-w) * .01895), 28px); line-height:1.25; } .home-top nav{ margin-right:3.15%; } /* menu calé à 95,2 % du panneau */ .hero h1{ font-size:clamp(20px, calc(var(--panel-w) * .03478), 65px); } .hero .role{ font-size:clamp(12px, calc(var(--panel-w) * .02071), 39px); } /* Contacts : même retrait que le paragraphe, et corps proportionnel. Le calage sur la ligne « Réalisation… » est écrit en « em » dans la règle de base : il suit tout seul ce nouveau corps. Garde-fou : le bloc titre est CENTRÉ et les contacts sont posés à gauche ; en rétrécissant, les deux se rapprochent. Au plus étroit de cette plage (panneau 548 px) la ligne « Mail : … » mesure 9 x 11,36 = 102 px et il reste 120 px avant « Réalisation… ». Aucune collision possible dans la plage 601-950 px. */ .contact{ left:2.79%; font-size:clamp(9px, calc(var(--panel-w) * .01595), 22px); } /* ---- Grille : Food+Sport | Fashion | Motion+Studio ---- Colonnes relevées : 27,71 % / 37,39 % / 27,91 % du panneau, gouttières 1,89 % et 1,74 %. Ramené à la boîte de contenu (96,5 % du panneau) : 28,70 % / 38,72 % / 28,83 %, gouttière unique de 1,875 %. Les RANGÉES sont explicites, ce n'est pas un détail : Fashion enjambe toute la colonne et dépasse la somme des deux vignettes latérales. Avec des rangées « auto », le navigateur redistribue cet excédent dans les deux rangées et décolle Food de Sport. Les trois hauteurs écrites ici valent exactement la hauteur de Fashion. */ .grid{ display:grid; --tab-u:calc(var(--panel-w) * var(--tab-k, 1)); grid-template-columns:28.70% 38.72% 28.83%; column-gap:1.875%; row-gap:0; grid-template-rows:calc(var(--tab-u) * .0793) calc(var(--tab-u) * .0779) calc(var(--tab-u) * .2941); grid-template-areas: ". fashion . " "food fashion motion" "sport fashion studio"; align-items:end; justify-content:center; margin-top:var(--tab-bas, auto); } /* Sans JS, --tab-haut et --tab-bas valent « auto » : le blanc se partage alors en deux parts égales. Avec JS, c'est le 40 / 60 de la maquette. */ .hero-wrap{ margin:var(--tab-haut, auto) 0 0; } .card{ flex:none; max-width:none; margin:0; width:auto; } /* annule les largeurs du bureau */ /* Forme exacte des vignettes de la maquette, en % de la largeur du panneau : bandeau 156/2003 = 7,79 %, vignette 589/2003 = 29,41 %, Fashion 904/2003 = 45,13 %. --tab-k est le facteur de compression calculé en JS ; il vaut 1 tant que tout tient dans la hauteur. */ .card--food { grid-area:food; height:calc(var(--tab-u) * .0779); } .card--motion{ grid-area:motion; height:calc(var(--tab-u) * .0779); } .card--sport { grid-area:sport; height:calc(var(--tab-u) * .2941); } .card--studio{ grid-area:studio; height:calc(var(--tab-u) * .2941); } .card--fashion{ grid-area:fashion; height:calc(var(--tab-u) * .4513); } .card .thumb{ height:100% !important; } /* ---- Étiquettes : TOUTES écrites sur l'image, Fashion comprise ---- Sur la maquette « Fashion » est posée dans la photo, en haut à gauche, dans le gris d'encre (#242) — et non au-dessus, sur le crème, comme c'était le cas ici. Retraits relevés : environ 40 px sur un panneau de 2003, soit 1,9 % de sa largeur en haut et 2,0 % à gauche, identiques pour les cinq cartes. */ .card .label{ position:absolute; top:calc(var(--panel-w) * .019); left:calc(var(--panel-w) * .020); bottom:auto; margin:0; z-index:3; /* Graisse THIN, comme partout ailleurs sur le site — c'était l'erreur : la règle héritée de l'ancienne tablette imposait Regular. Corps : « Motion design » mesure 334 px sur un panneau de 2003 ; la chaîne vaut 7,20 em en Jumper Thin (7,62 en Regular) — d'où 2,318 % de la largeur du panneau. La hauteur de glyphes relevée (48 px) confirme ce corps. */ font-weight:100; font-size:clamp(12px, calc(var(--panel-w) * .02318), 36px); } .card--food .label,.card--motion .label{ color:#fff; } .card--sport .label,.card--studio .label,.card--fashion .label{ color:var(--ink); } /* ---- Cadrage des vignettes, retrouvé image par image ---- Chaque vignette de la maquette a été recherchée dans son fichier source, à toutes les échelles et dans les deux sens, jusqu'à retrouver la fenêtre exacte. Corrélations obtenues : Fashion 0,989 · Studio 0,980 · Food 0,952 · Sport 0,90 · Motion vérifiée sur la position du triangle turquoise, au pixel. DEUX ENSEIGNEMENTS. 1. La maquette RETOURNE horizontalement la photo Food. C'est ce retournement, et rien d'autre, qui amène le fond noir à gauche sous l'étiquette blanche. Corrélation avec l'image retournée : 0,952 ; sans retournement, 0,08 — autrement dit aucun rapport. 2. Les images sont posées à leur TAILLE NATIVE dans la maquette, et non redimensionnées pour remplir la carte. Le navigateur, lui, applique « cover », qui réduit un peu plus. D'où les scale() ci-dessous : ils rendent aux vignettes l'échelle du fichier d'origine. Les valeurs de transform-origin sont calculées pour que la fenêtre visible tombe exactement sur celle de la maquette. Sport ne demande aucune transformation : le fichier du site est déjà un recadrage carré de l'original, « cover » centré retrouve la maquette à 7 % près — l'écart tient au haut et au bas perdus lors de ce recadrage. Bloc écrit APRÈS celui du téléphone : à spécificité égale il l'emporte. */ .card--fashion .thumb img,.card--fashion .thumb video{ object-position:50% 63.1%; transform:scale(1.023); transform-origin:47.1% 50%; } /* Sport et Studio ont été refabriquées depuis les originaux de 1_home, ceux de la maquette : leur cadrage se retrouve désormais sans forcer. Sport ne demande plus rien — « cover » calé en haut suffit. */ /* SPORT — même correction qu'en téléphone. Sur la maquette tablette le gris uni descend jusqu'à la ligne 104 d'une carte de 589, ce qui laisse 20 px sous le « p » de Sport. Le fichier n'a que 42 lignes de gris sur 631 ; une fois posé à la largeur de la carte elles n'en couvrent que 41,8, et l'étiquette — dont l'encre va de 47 à 90 px — tombait donc entièrement sur les lettres au trait. C'est exactement ce que signale la cliente. Il n'y a pas de matière à découvrir au-dessus : l'original fourni n'a pas plus de gris que le fichier du site. On descend donc la photo de 62,2 px, soit 10,56 % de la hauteur de la carte, et on donne au cadre la couleur exacte de ce gris, 224-224-224, relevée identique dans les deux. La jonction est invisible et le total des gris fait bien 104 px. Le fond a été retiré un temps, l'animation couvrant alors toute la vignette en permanence. Elle est repassée au doigt (retour client) : la PHOTO est de nouveau ce qu'on voit par défaut, et le fond redevient indispensable. */ .card--sport .thumb{ background:#e0e0e0; } .card--sport .thumb img,.card--sport .thumb video{ object-position:50% 0%; transform:none; top:10.56%; } /* L'animation, elle, part du haut du cadre : son gris cuit tombe pile sur les 10,56 %. Mesure : vignette de 194 x 206 px à 768 px de fenêtre, échelle 194/796 = 0,24372 ; les 89,9 px de gris du fichier s'affichent donc sur 21,91 px, contre 21,75 attendus — 0,16 px d'écart. */ .card--sport .thumb video{ top:0; } .card--food .thumb img,.card--food .thumb video{ object-position:50% 0%; transform:scale(-1.12, 1.12); transform-origin:50% 0%; } .card--motion .thumb img,.card--motion .thumb video{ object-position:50% 0%; transform:scale(1.1235); transform-origin:0% 0%; } .card--studio .thumb img,.card--studio .thumb video{ object-position:50% 0%; transform:scale(1.10); transform-origin:44.4% 20.7%; } /* ---- Pages intérieures en tablette ---- La construction du bureau est PROLONGÉE ici (choix client) : galerie à 83 % de la fenêtre, colonne à 70,41 % pour les pages à légendes. Plus aucun plafond ni retrait supplémentaire, sinon la largeur commune qu'on a construite disparaîtrait entre 601 et 950 px. L'en-tête n'est plus redéfini non plus : les formules du bureau s'appliquent dès 601 px, ce qui supprime le saut de 25 à 38 % qu'on observait au passage de 950 à 951 px. Vérifié : à 601 px il reste 220 px de dégagement entre le logo et le menu, aucune collision possible. */ .gallery-wrap{ max-width:none; padding:var(--gallery-top, 130px) 0 0; } } /* ---------- MOBILE : menu +, titre centré, cartes en éventail, contacts en bas (sans scroll) ---------- */ @media(max-width:600px){ :root{--pad:20px;} /* ===== ACCUEIL ===== */ /* Cadre sombre relevé au pixel sur la maquette : 76 / 78 / 79 px sur une image de 1080 — il est bien UNIFORME sur les trois côtés, soit 7,13 % de la largeur, ce qui fait 27,8 px sur un iPhone. Le bas, lui, mesure 160 px, soit 14,81 % : c'est le double, parce qu'il porte le bandeau de contacts. */ body.home-page{ padding:7.13vw 7.13vw 14.81vw; overflow-x:hidden; } /* ---- Page figée : plus aucun défilement ---- Les cartes mesurent trois fois ce qu'on en voit et descendent donc bien plus bas que la grille. clip-path les empêche d'être PEINTES hors du cadre, mais pas de compter dans la hauteur défilable : la spécification distingue les deux, et c'est ce débordement invisible qu'on faisait défiler. La classe n'est posée QUE par le JS, et seulement après avoir vérifié que tout tient réellement. Sans JavaScript, ou sur un écran trop court malgré la compression, elle reste absente et la page redevient défilable : on préfère un défilement inattendu à un contenu inatteignable. overscroll-behavior supprime en plus le rebond élastique d'iOS, qui laisse entrevoir le fond de la page même quand il n'y a rien à faire défiler. */ /* FIGER LA PAGE — overflow:hidden ne suffit pas sur iOS. Mesure faite sur l'accueil : la hauteur du document vaut bien celle de l'écran, mais le CORPS mesure 874 px pour 812 d'écran, la dernière carte descendant de 62 px sous le bord. C'est voulu — chaque carte cache sous la suivante ce qu'elle doit dévoiler au doigt — et clip-path le masque à l'œil, mais ce dépassement reste défilable : clip-path coupe la peinture, pas la zone de défilement. Sur les moteurs de bureau, overflow:hidden sur html et body suffit à le neutraliser. Safari sur iPhone, lui, continue d'autoriser le geste. Le seul réglage qui l'en empêche vraiment est de sortir le corps du flux : position:fixed avec les quatre bords collés à l'écran. Le corps fait alors exactement la fenêtre, et il n'y a plus rien à faire défiler. La barre de contacts n'en souffre pas : elle est elle-même en position fixe, et un élément fixe se cale sur la fenêtre, pas sur son parent. */ html.page-figee, html.page-figee body.home-page{ overflow:hidden; height:100%; overscroll-behavior:none; } html.page-figee body.home-page{ position:fixed; top:0; right:0; bottom:0; left:0; } /* min-height et non height : sur un écran court la page défile au lieu de rogner le bas. overflow:visible pour la même raison — c'était « hidden », et le contenu excédentaire disparaissait sans le moindre signe. */ /* ---- La hauteur d'écran d'iOS ne vaut pas ce qu'elle dit ---- Safari calcule « vh » BARRES MASQUÉES. Sur un iPhone 13 Pro, 100vh vaut 844 px alors que la zone réellement visible, barre d'URL et barre d'outils affichées, n'en fait que 618 : il manque 226 px, soit 27 % de la hauteur. La page était donc construite sur une place qui n'existe pas — d'où le défilement et la dernière carte hors champ. « svh » est la plus petite des hauteurs possibles, celle où les deux barres sont visibles : la page tient alors toujours, quel que soit l'état de Safari. La ligne en « vh » reste au-dessus pour les navigateurs qui ne connaissent pas encore l'unité — elle est simplement écrasée par la suivante partout où svh existe. */ .home{ position:relative; min-height:calc(100vh - 21.94vw); min-height:calc(100svh - 21.94vw); overflow:visible; padding:2.27% 4.5% 0; display:flex; flex-direction:column; } /* En-tête identique à celui d'About (demande client) : logo à gauche, « +Menu » à droite sur la même ligne, puis le paragraphe pleine largeur en dessous. Obtenu par un simple retour à la ligne du flex : le paragraphe occupe 100 % et bascule donc seul sur la seconde rangée. */ /* --ecart : la valeur unique des TROIS espaces de la page — logo/paragraphe, paragraphe/ligne des métiers, ligne des métiers/cartes. Elle est calculée en JS, qui partage en trois ce qui reste de hauteur une fois les blocs posés. La valeur ci-dessous ne sert qu'au premier affichage, avant le calcul. */ .home{ --ecart:22px; } /* MAQUETTE : pas de logo en haut, le paragraphe et « +Menu » sur la même ligne, le paragraphe à gauche et le bouton collé à droite. Le logo ajouté précédemment est retiré — la maquette porte l'identité au centre de la page, pas en en-tête. */ .home-top{ flex-direction:row; flex-wrap:nowrap; align-items:flex-start; gap:14px; } .home .home-brand{ display:none; } /* Taille du bouton : la maquette téléphone donne un rapport de 1,533 entre le corps du « +Menu » et celui du paragraphe (mesuré sur les six lignes) ; le site était déjà à 1,600, donc DÉJÀ 4 % au-dessus de la maquette. Le grossissement demandé est donc un écart assumé au document de référence, pas un retour à celui-ci : +15 %, soit un rapport de 1,84. */ .menu-toggle{ display:inline-block; font-size:16.5px; margin-left:auto; flex:0 0 auto; } .intro{ flex:1 1 auto; min-width:0; } /* Le paragraphe reprend TOUTE la colonne. Bridé à 66 %, chacune de ses six lignes se cassait en deux : 11 lignes à l'écran et 179 px de haut. Le corps est calculé pour que la ligne la plus longue — « Je vous accompagne de l'idée à la post-production. », 27,05 em — tienne toujours d'un seul tenant, quelle que soit la largeur du téléphone. Plafond à 12 px, plancher à 10,5 px en dessous duquel on renonce plutôt que de devenir illisible. */ .intro{ max-width:none; margin-left:0; /* Largeur réellement disponible = (100vw − 50 px de cadre) × 0,91, le retrait de .home valant 4,5 % de chaque côté. La formule précédente tablait encore sur un cadre de 12 px : la ligne la plus longue dépassait de 14 px et le paragraphe se cassait en neuf lignes au lieu de six. */ /* Réduit de 20 % (décision client) : la maquette demanderait 2,275 % de la largeur du panneau, soit 7,7 px sur un iPhone — elle est dessinée sur une toile de 1080 px alors qu'un téléphone en fait 390, tout y est donc 2,8 fois plus grand. On fait 20 % du chemin : 9 px au lieu de 11,2. Effet recherché : la ligne la plus longue ne touche plus « +Menu ». */ font-size:clamp(8.3px, 2.308vw, 9.6px); line-height:1.35; } /* Dernière ligne du paragraphe : retirée sur TÉLÉPHONE uniquement. La maquette téléphone la contient — six lignes mesurées une à une, corps 18,3 à 21,5 px pour une image de 1080 — mais sur un appareil réel elle coûte une ligne de trop : le panneau dépassait la hauteur d'écran, la page redevenait défilable, et sur iOS chaque défilement fait apparaître ou disparaître les barres de Safari. La hauteur de fenêtre change alors, la mise en page est recalculée, et l'on voit la page « descendre » toute seule — c'est le bug filmé par la cliente. Le saut de ligne qui précède la phrase est DANS le span : sans cela il resterait une ligne vide sous le paragraphe. Tablette et bureau la conservent : ils ont la place. */ .intro-fin{ display:none; } .site-nav{ display:none; } .site-nav.open{ display:flex; position:fixed; inset:0; z-index:300; background:var(--cream); flex-direction:column; justify-content:center; padding:40px 30px; } /* Menu en Jumper Thin, avant comme après ouverture (retour cliente). Le bouton et le panneau repassaient en Regular ; seule la page en cours garde son gras, pour qu'on sache où l'on se trouve. */ .site-nav.open .nav{ text-align:left; font-size:30px; line-height:1.75; font-weight:100; } .site-nav.open .nav a{ font-weight:100; } .site-nav.open .nav .current > a{ font-weight:700; } .menu-toggle{ font-weight:100; } body.nav-open .menu-toggle{ position:fixed; top:22px; right:24px; z-index:301; } /* L'espace libéré par le paragraphe — une cinquantaine de pixels — est rendu au bloc titre sous forme de blancs, répartis au-dessus et en dessous. Deux marges « auto » dans une colonne flex se partagent le vide à parts égales : le titre flotte au milieu, comme sur la maquette téléphone. Les marges « auto » ont été remplacées par --ecart : le client demande trois espaces ÉGAUX et non un titre flottant au milieu du vide. Les marges d'un élément flex ne fusionnent pas avec celles de ses voisins, chacune vaut donc exactement --ecart. */ /* MAQUETTE : le vide ne se partage PAS à parts égales. Elle laisse 8,97 % de la hauteur du panneau au-dessus du bloc titre et 13,96 % en dessous, soit 39,1 % / 60,9 % — le même parti pris que la maquette bureau, où j'avais relevé 39,65 %. Le titre est posé un peu haut, avec plus d'air sous lui. Les deux valeurs sont calculées en JS sur la hauteur réellement libre. */ .hero-wrap{ margin:var(--ecart-haut, 24px) 0 var(--ecart-bas, 38px); padding:0; } .hero{ text-align:center; } /* MAQUETTE : les trois lignes sont bien présentes au centre. Elles avaient été masquées quand un logo coiffait la page ; ce logo étant retiré, elles reprennent leur place. Corps relevés sur la maquette, rapportés à la largeur du panneau : 6,05 %, 3,13 % et 3,03 % de sa largeur. */ /* Les trois corps sont réduits de 20 %, comme le paragraphe et pour la même raison. La maquette donnerait 16,5 / 9,8 / 9,7 px sur un iPhone ; on s'arrête à 19,2 / 10,4 / 11,8. Le rapport entre les trois lignes, lui, est conservé au centième. */ .hero h1 { display:block; font-size:clamp(19.2px, 4.84vw, 36.8px); } .hero .role{ display:block; font-size:clamp(10.4px, 2.504vw, 19.2px); } /* « Réalisation • Montage • Motion Design » doit tenir sur UNE ligne (demande client). Elle mesure 20,42 em : à 4,4 vw elle débordait sur tous les téléphones, du SE au Pro Max. Le corps est donc calculé à partir de la largeur réellement disponible, avec 0,5 em de garde. */ .hero .tags{ /* même correction : la ligne débordait du panneau depuis le passage du cadre à 25 px, et venait toucher les deux bords. */ font-size:clamp(9.6px, 3.036vw, 17.6px); white-space:nowrap; } /* cartes empilées en éventail, en bas */ /* Plus de marge « auto » ici : c'est elle qui absorbait tout le vide et collait le titre sous le paragraphe. Le vide appartient désormais au bloc titre. Les 62 px du bas dégagent la barre de contacts fixe. */ /* MAQUETTE : les cartes ne font PAS toute la largeur. Elles occupent 78,62 % du panneau, centrées, avec 10,7 % de marge de chaque côté — c'est ce retrait qui donne l'effet de pile posée sur la page. La dernière carte affleure le bas du panneau ; les 62 px dégagent la barre de contacts, qui est fixée par-dessus. */ /* Plus de réserve pour la barre de contacts : le retrait bas du cadre (14,81 vw) vaut désormais exactement la hauteur du bandeau, qui se pose par-dessus. La dernière carte affleure donc le bas du panneau crème, comme sur la maquette. */ /* ---- La grille est une FENÊTRE, pas un conteneur ---- Les cartes mesurent désormais trois fois ce qu'on en voit : mises bout à bout avec leur recouvrement, elles descendent bien plus bas que la pile. Sans limite, la dernière ne recouvrait pas les précédentes et l'avant- dernière débordait de 93 px sous le panneau crème — on voyait son image réapparaître sous la mise en page. On fixe donc la hauteur de la grille à l'empreinte de la maquette, quatre bandes plus la dernière carte, et on coupe ce qui dépasse. La coupe se fait par le BAS seulement, pour laisser toute liberté à la carte qui remonte à l'ouverture — un overflow:hidden l'aurait tronquée. Elle est écrite en polygon() et non en inset() : inset() REFUSE les valeurs négatives, la déclaration entière était donc jetée et plus rien n'était coupé. Un polygone, lui, accepte des sommets hors du cadre : les trois premiers points sont largement au-dessus et sur les côtés, seul le quatrième côté — la ligne du bas, à 100 % — coupe réellement. flex-start et non flex-end : quand le contenu dépasse la hauteur fixée, flex-end le ferait déborder par le HAUT et toute la pile remonterait. z-index 2 : filet de sécurité. La pile s'arrête dix pixels sous le bloc titre et ne devrait jamais l'atteindre, mais si un arrondi la faisait dépasser, elle passerait devant plutôt que derrière — un chevauchement franc se voit et se corrige, une carte à moitié avalée par le titre est beaucoup plus difficile à diagnostiquer. On ne donne AUCUN z-index au bloc titre en retour : il en créerait un contexte d'empilement, et la barre de contacts — qui est son enfant et monte à 150 — s'y trouverait enfermée, donc recouverte par la grille. */ .grid{ position:relative; z-index:2; margin:0; display:flex; flex-direction:column; gap:0; align-items:center; justify-content:flex-start; height:var(--grille-h, 90.65vw); clip-path:polygon(-200% -400%, 300% -400%, 300% 100%, -200% 100%); } /* Bande visible par carte : 10,8 % de la hauteur du panneau sur la maquette. Exprimée en vh, avec un plancher pour les très petits écrans. */ /* Hauteurs calées sur la maquette : le bloc des cinq cartes y occupe 60,2 % du panneau et chaque bande visible 10,8 %. En hauteur de fenêtre cela donne 16,9 vh par carte, dont 9,8 vh visibles — soit 56,1 vh au total, ce qui retombe sur 59 à 61 % du panneau selon l'appareil. */ /* Les deux hauteurs passent par des variables : le JS les réduit juste ce qu'il faut pour que la page tienne d'un seul écran, sans défilement. Les valeurs par défaut sont celles de la maquette (16,9 vh par carte, 9,8 vh visibles), utilisées telles quelles dès qu'il y a la place. */ /* 78,62 % est la largeur de la carte rapportée au PANNEAU, relevée sur la maquette. Or .grid est à l'intérieur de .home, qui a 4,5 % de retrait de chaque côté : appliquer 78,62 % ici donnait 71,5 % du panneau, soit des cartes visiblement trop étroites. On divise donc par 0,91. */ /* ---- LA CORRECTION DE FOND ---- Les hauteurs étaient exprimées en « vh ». Or la maquette fixe un RAPPORT : bande visible 728 x 191 px, carte entière 728 x 215. En vh, ce rapport dépendait de la forme de l'écran et retombait à 3,23 au lieu de 3,81 sur un iPhone — 18 % de hauteur en trop dans chaque bande. Tout le contenu des vignettes descendait d'autant : « Sport » venait sur le F, Studio paraissait déformée. Les deux hauteurs sont donc désormais des pourcentages de la LARGEUR de la carte : 29,533 % pour la carte, 26,236 % pour la bande. La carte valant 67,41 vw, cela donne 19,908 vw et 17,685 vw. Conséquence directe : le rapport des vignettes est celui de la maquette sur tous les téléphones, et les cinq cadrages ci-dessous tombent juste. */ /* Les cartes sont HAUTES et fortement superposées : au repos on n'en voit qu'une bande de 17,685 vw — celle de la maquette — le reste est caché sous la carte suivante et se dévoile à l'ouverture. La hauteur est calculée en JS pour que ce dévoilement tienne exactement dans le blanc disponible au-dessus de la pile, sans jamais toucher le bloc titre. Arrondi : 62 px sur une carte de 728 dans la maquette, soit 8,5 % de sa largeur — 5,73 vw ici, contre 20 px auparavant. */ /* Aucune ombre portée : la maquette téléphone n'en a pas. Les cartes se distinguent par leur seul décalage et par l'arrondi de leur bord haut. */ /* flex-shrink:0 — LA correction du bug de pile signalé par la cliente. La grille a une hauteur DÉFINIE, --grille-h : c'est la fenêtre de la maquette, quatre bandes plus la dernière carte, soit 90,65 vw. La pile réelle, elle, est bien plus haute — chaque carte cache sous la suivante tout ce qu'elle doit dévoiler au doigt : de 94 vw quand le dévoilement est nul jusqu'à 139 vw quand il est maximal. Ce dépassement est VOULU, c'est clip-path qui le coupe. Mais des éléments flexibles sont rétractables par défaut. Le navigateur voyait donc un contenu débordant d'un conteneur à hauteur définie, et comprimait les cartes pour résorber l'écart — jusqu'à 48 vw à reprendre sur cinq cartes. Leur hauteur ne valait plus --carte-h, la bande visible ne valait plus 17,685 vw, les écarts devenaient irréguliers et la page débordait vers le bas. La marge est en outre calculée à partir de la BANDE, et non plus posée indépendamment : la bande visible vaut donc --bande par construction, quoi qu'il arrive à --carte-h. Les deux valeurs ne peuvent plus diverger. */ .card{ position:relative; width:86.40%; max-width:none; flex:0 0 auto; height:var(--carte-h, 61.4vw); min-height:52px; margin-top:calc(var(--bande, 17.685vw) - var(--carte-h, 61.4vw)); border-radius:5.73vw 5.73vw 0 0; overflow:hidden; box-shadow:none; } .card--fashion{ order:1; z-index:1; margin-top:0; } .card--motion{ order:2; z-index:2; } .card--sport{ order:3; z-index:3; } .card--food{ order:4; z-index:4; } .card--studio{ order:5; z-index:5; } /* ---- Ouverture d'une carte au doigt ---- Au premier appui, la carte touchée sort de sa pile : elle remonte exactement de la part qu'on ne voyait pas d'elle. Les cartes situées AU-DESSUS remontent du même nombre de pixels — elles se contentent de translater, leur taille et leur bande visible ne changent pas. Les cartes du dessous ne bougent pas : c'est ce qui fait grandir la bande de la carte touchée, et elle seule. La remontée vaut --carte-sortie, qui est VOLONTAIREMENT plus petite que le recouvrement, c'est-à-dire que --carte-h moins --bande. La différence — cinq et demi pour cent de la largeur d'écran — est ce qui reste engagé sous la carte suivante une fois la carte ouverte. Sans cette réserve, le bas de la carte arrivait exactement au ras de sa voisine : les deux bords devenaient jointifs et l'œil lisait une image coupée net plutôt qu'une carte qui sort de la pile. */ .card{ transition:transform .32s cubic-bezier(.22,.61,.36,1); } .card.remonte{ transform:translateY(var(--carte-sortie, -39.7vw)); } .card .thumb{ height:100% !important; } /* ---- Étiquettes : relevées une par une sur la maquette téléphone ---- Graisse THIN, comme partout ailleurs. Corps : « Motion design » mesure 339 px sur une carte de 728, soit 6,47 % de sa largeur ; la carte valant 78,62 % du panneau, cela fait 5,087 % de (100vw − 50px), le panneau réel. Sur un iPhone 13 Pro : 17,3 px. Plancher de lisibilité à 13 px, jamais atteint au-dessus de 306 px de large. RETRAIT VERTICAL — corrigé. Il était exprimé en pourcentage de la HAUTEUR DE CARTE, laquelle est calculée en JS et vaut deux à trois fois la bande visible : 9,8 % donnaient 4,08 à 4,33 vw selon l'écran, contre 2,007 vw mesurés sur la maquette. L'étiquette descendait donc du double, et venait mordre sur le motif — « Sport » sur les lettres au trait, « Motion design » sur l'étoile. C'est la cause des deux remarques de la cliente. Mesure : le sommet de l'encre est à 29 px du haut de la bande sur la maquette ; Jumper Thin monte à 0,755 em et son ascendante hhea vaut 0,910 em, l'écart boîte-encre est donc de 0,155 em, soit 7,32 px pour un corps de 47,25 px. Haut de boîte = 29 − 7,32 = 21,68 px sur 1080, soit 2,007 vw. Le retrait est désormais en vw : il ne dépend plus d'une hauteur que le JS fait varier. Contrôle du corps : 49 px d'encre pour « Motion design » (1,037 em en Thin) donnent 47,25 px, soit 4,375 vw — le site était déjà à 4,362 vw, à 0,3 %. Retrait horizontal : 7,13 vw sur Sport et 7,407 sur Motion, les deux seules étiquettes isolables proprement ; on retient 7,27 vw. Aucune ombre portée : la maquette n'en a pas, et les cadrages ci-dessous posent chaque étiquette sur une zone contrastée — c'est précisément le rôle du retournement de la photo Food. */ .card .label{ position:absolute; top:2.007vw; left:7.27vw; bottom:auto; margin:0; z-index:2; font-weight:100; font-size:clamp(13px, 4.362vw, 26px); text-shadow:none; } /* Couleurs de la maquette : blanc sur les trois fonds sombres, encre sur les deux fonds clairs. La règle précédente forçait le blanc sur les cinq, d'où un « Sport » et un « Studio » illisibles sur gris clair et sur ocre. */ .card--fashion .label,.card--motion .label,.card--food .label{ color:#fff; } .card--sport .label,.card--studio .label{ color:var(--ink); } /* ---- Cadrage des vignettes, retrouvé sur la maquette téléphone ---- Même méthode qu'en tablette : recherche de la fenêtre exacte dans chaque fichier source, à toutes les échelles et dans les deux sens. Corrélations : Fashion 0,940 · Food 0,929 · Studio 0,919 · Motion 0,778. Food est RETOURNÉE ici aussi. Le graphiste ne l'a fait que sur les petits formats — la maquette bureau, elle, est à l'endroit (corrélation 0,993 contre 0,046 retournée). En bande large et basse, c'est le seul moyen d'amener le fond noir sous l'étiquette blanche. Aucune carte ne déborde horizontalement (la source est toujours plus étroite que la carte une fois « cover » appliqué) : le cadrage latéral passe donc entièrement par transform-origin, jamais par object-position. Sport est le moins sûr des cinq : l'image est un aplat de gris clair avec des lettres au trait, sur lequel aucune méthode de corrélation ne se cale franchement. La valeur retenue est le sommet du calcul sur les contours, confirmé à l'œil. */ /* ---- Les vignettes ne sont plus ajustées à la carte, elles sont POSÉES ---- Tant que l'image était étirée sur toute la carte (object-fit:cover), sa taille dépendait de la hauteur de celle-ci : en rendant les cartes plus hautes, la bande visible au repos aurait montré autre chose. On donne donc à chaque vignette une taille et une position ABSOLUES, exprimées en vw, c'est-à-dire calées sur la seule largeur de la carte. La bande du haut montre alors exactement le cadrage de la maquette, quelle que soit la hauteur de la carte — et la partie basse, découverte à l'ouverture, est la suite naturelle de la même image. Les quatre nombres de chaque ligne sont la traduction directe de la fenêtre retrouvée dans la maquette : largeur et hauteur de l'image rendue, puis son décalage. Tout est rapporté à la carte, qui vaut 67,41 vw. Le rapport hauteur/largeur donné à la boîte est celui de la photo : l'image n'est donc pas recadrée. La vidéo de survol, elle, n'a pas le même rapport et reste en « cover » dans cette même boîte. Food est retournée : la recherche a été faite sur l'image miroir, le décalage horizontal vaut donc pour elle. */ .card .thumb img,.card .thumb video{ inset:auto; object-fit:cover; object-position:50% 50%; transform:none; } /* Fashion sert ici fashion_tel.jpg (668 x 1396) : même cadrage que la photo d'origine, mais prolongé vers le bas. La largeur et le décalage ne changent donc pas — seule la hauteur passe de 86,67 à 147,47 vw, ce qui donne à la carte de quoi se déployer sans finir sur une coupure. */ .card--fashion .thumb img,.card--fashion .thumb video{ left:-1.667vw; top:-40.560vw; width:70.56vw; height:147.47vw; } /* ---- Animations de survol : cadrage propre ---- Les deux vidéos héritaient des hauteurs calculées pour les PHOTOS, dont le format diffère : fashion_hover mesure 900 x 1432 (rapport 0,629) et motion_hover 900 x 900 (1,000), tandis que les valeurs héritées donnaient 0,814 et 0,815. Les deux étaient donc déformées. On leur rend leur format et on choisit leur point focal. FASHION — les lunettes noires occupent la bande 20,60 % à 30,03 % de la hauteur de la vidéo (mesure : ligne sombre couvrant plus de 30 % de la largeur). À 70,56 vw de large, la vidéo fait 112,18 vw de haut et les lunettes tombent entre 23,11 et 33,69 vw. On les amène à 8 vw du haut de la carte : sous l'étiquette, qui s'arrête vers 6,5 vw, et bien dans la bande visible de 17,685 vw. D'où top = 8 − 23,11 = −15,11 vw. MOTION — « le point focal le plus élevé » : la vidéo est carrée, on l'ancre simplement en haut de la carte. La bande découvre alors ses 24,5 % supérieurs. Sur bureau et tablette rien à changer, vérification faite : la boîte Fashion ne montre que les 69,6 % supérieurs de la vidéo et l'ancrage est déjà en haut — les lunettes ne peuvent pas être remontées davantage. Pour Motion, la vidéo carrée dans une boîte plus étroite est recadrée sur les CÔTÉS, jamais en hauteur : elle est déjà montrée en entier. */ .card--motion .thumb img,.card--motion .thumb video{ left:-2.500vw; top:-20.280vw; width:72.23vw; height:88.61vw; } .card--sport .thumb img,.card--sport .thumb video{ left:-2.529vw; top:0; width:72.47vw; height:81.95vw; } .card--food .thumb img,.card--food .thumb video{ left:-2.500vw; top:-9.166vw; width:72.23vw; height:88.61vw; transform:scaleX(-1); } .card--studio .thumb img,.card--studio .thumb video{ left:-2.778vw; top:-11.945vw; width:72.23vw; height:88.89vw; } /* Les PHOTOS Sport et Studio ont été raccourcies : elles traînaient une bande unie de la couleur du cadre, cuite dans le fichier par un découpage de maquette pris pour un original. Sport passe de 686 à 631 lignes, Studio de 686 à 613. Les hauteurs ci-dessus visaient l'ancien format ; on les corrige du même rapport pour que l'ÉCHELLE et le cadrage restent au pixel ce qu'ils étaient — seul le vide sous la photo disparaît. Les vidéos de survol, elles, n'ont pas changé de format et gardent donc les valeurs d'origine. */ /* SPORT — l'étiquette doit reposer sur le gris uni, pas sur les lettres au trait. Sur la maquette le gris descend jusqu'à 8,61 vw sous le haut de la carte ; au cadrage actuel il s'arrête à 6,44 vw, et le « p » de Sport, qui descend à 6,67 vw, mordait sur le motif. Le fichier ne permet pas de rattraper ces 2,17 vw : il ne contient que 42 lignes de gris uni sur 631, et l'ORIGINAL fourni n'en a que 79 sur 1080 — soit exactement les mêmes 41 lignes une fois ramené à cette largeur. Il n'y a donc pas de matière à découvrir au-dessus, et agrandir la photo pour y arriver la ferait passer à 2,2 fois son échelle : les lettres deviennent bien plus grosses que sur la maquette. On descend donc la photo de 2,17 vw et on donne au cadre la COULEUR EXACTE du gris de la photo — 224,224,224, relevé aussi bien dans le fichier que dans la maquette. La jonction est invisible, l'échelle et le cadrage latéral ne bougent pas, et l'étiquette retrouve la marge de la maquette. */ /* SPORT — cadrage relevé au trait sur la maquette téléphone. Le F et le K ne doivent pas toucher les bords de la carte : la maquette laisse 33 px à gauche et 39 à droite sur une carte de 728. Dans le fichier, le trait gauche du F est à x=43 et le bord droit du K à x=510. L'échelle est donc (688 − 33) / (510 − 43) = 1,4026, d'où une largeur affichée de 558 × 1,4026 = 782,6 px, soit 72,47 vw — contre 85,84 auparavant, ce qui rognait les deux lettres. Le bord gauche se déduit : 33 − 43 × 1,4026 = −27,3 px, soit −2,529 vw. Contrôle sur le K : −27,3 + 510 × 1,4026 = 688,0, la valeur de la maquette. Calage vertical : les 42 lignes de gris uni du fichier occupent 58,9 px à cette échelle ; pour que le motif commence à la ligne 91 comme sur la maquette, le haut de l'image se pose à +32,1 px, soit 2,972 vw. Le cadre porte la couleur exacte de ce gris, la jonction est invisible. */ /* Fond rétabli, même raison qu'en tablette : l'animation ne se découvre plus qu'au doigt, la photo est donc de nouveau ce qu'on voit par défaut. */ .card--sport .thumb{ background:#e0e0e0; } .card--sport .thumb img{ top:2.972vw; } .card--studio .thumb img{ height:79.43vw; } /* 88,89 x 613/686 */ /* Les deux vidéos de survol viennent EN DERNIER : les règles ci-dessus les visent aussi, à spécificité égale, et c'est l'ordre du fichier qui tranche. */ .card--fashion .thumb video{ top:-15.11vw; height:112.18vw; } .card--motion .thumb video{ top:0; height:72.23vw; } /* Sport : l'animation vient du GIF du client (1080 x 1500). Sa fenêtre est celle de sport.jpg — retrouvée par corrélation croisée normalisée, 0,979 — PROLONGÉE VERS LE HAUT de 106,8 px pour y prendre du gris réel : x=68 y=320, 946 x 1176, encodée en 796 x 990. Le gris cuit vaut 9,080 % de la hauteur du fichier, et il remplace celui que le CSS inventait. Le fichier ne fait donc plus 0,884 mais 0,80404 : il lui faut sa propre hauteur, 72,47 / 0,80404 = 90,132 vw, où le gris occupe 8,184 vw. Pour que la photo tombe toujours à 2,972 vw, l'animation démarre 8,184 vw plus haut : 2,972 − 8,184 = −5,212 vw. Contrôle sur le bas : −5,212 + 90,132 = 84,920 vw, contre 2,972 + 81,95 = 84,922 pour la photo — deux millièmes de vw. Le F et le K ne bougent pas d'un pixel. */ .card--sport .thumb video{ top:-5.212vw; height:90.132vw; } /* ---- Bandeau de contacts ---- Relevé sur la maquette : bandeau de 160 px sur une image de 1080, soit 14,81 % de la largeur ; texte BLANC (mesuré 247,247,235, c'est-à-dire le crème), sur UNE seule ligne, centré dans les deux sens. Le fond reprend la couleur du cadre (#242424) et non l'encre : c'est le même gris anthracite que le pourtour, le bandeau en fait partie. Le corps est calculé pour que la ligne tienne toujours d'un seul tenant : « iG : @ocrefilms Tel : … Mail : … » mesure 45,48 em, et on lui laisse la largeur de l'écran moins 32 px. Sur un iPhone cela fait 7,9 px — petit, mais c'est le prix d'une seule ligne avec une adresse plus longue que celle de la maquette. flex-wrap:nowrap interdit tout retour à la ligne. */ .contact{ position:fixed; left:0; right:0; bottom:0; top:auto; transform:none; background:var(--frame); z-index:150; height:14.81vw; min-height:34px; display:flex; flex-wrap:nowrap; justify-content:center; align-items:center; gap:0 1.6em; padding:0 12px; /* 46,5 em = la ligne complète, séparateurs compris, avec 2 % de garde. Vérifié de l'iPhone SE (6,4 px) au Pro Max (8,7 px) : elle ne se casse jamais. */ font-size:clamp(6px, calc((100vw - 24px) * 0.021505), 13px); line-height:1.2; } .contact .c-item{ display:inline-block; white-space:nowrap; } .contact, .contact a, .contact .num{ color:var(--cream); } /* ===== PAGES INTÉRIEURES ===== */ /* En-tête FIXE et TOUJOURS VISIBLE (demande client). Il s'escamotait au défilement vers le bas et revenait en remontant ; ce comportement est supprimé, le logo et le menu accompagnent désormais toute la lecture. Fond #FEFEF2 opaque et pleine largeur : sans lui le menu deviendrait illisible dès qu'une photo claire passerait derrière. La position fixe est aussi ce qui permet de calculer le départ de la galerie ; en position absolue, la barre défilait et la galerie remontait sous « +About ». */ .site-header{ position:fixed; left:0; right:0; top:0; background:#FEFEF2; padding-bottom:12px; z-index:200; } .site-header::before{ display:none; } .site-header, body:has(.gallery-wrap) .site-header{ padding:22px var(--pad) 12px; } /* Le départ de la galerie est calculé en direct (bas réel du menu + 5 % de la hauteur d'écran), comme sur bureau. La valeur de repli couvre le cas sans JS. */ .gallery-wrap, .gallery-wrap:has(.reel){ width:auto; max-width:none; padding:var(--gallery-top, 116px) var(--pad) 0; } .gallery-wrap:has(.rs){ width:auto; } /* mobile : une seule colonne, on abandonne le positionnement de la maquette */ .masonry{ position:static; padding-bottom:0; } .masonry .col{ display:block; } .masonry .item{ position:static !important; width:100% !important; left:auto !important; top:auto !important; margin-bottom:10px; } .rs-band{ flex-wrap:wrap; } .rs-band .rs-post--sm,.rs-band .rs-post--lg{ width:100%; } .rs-row{ flex-wrap:wrap; } .rs-row > *{ width:100% !important; } .brand .name, body:has(.gallery-wrap) .brand .name{ font-size:26px; } .brand .sub, body:has(.gallery-wrap) .brand .sub{ font-size:12px; } .site-header .nav{ font-size:12px; line-height:1.2; } } /* ============================================================ PAGE RÉSEAUX SOCIAUX — grille façon Instagram ============================================================ */ /* Largeurs, écarts et ratios relevés au pixel sur site_ordi_rs_int.png. Les habillages Instagram (barres d'actions, carte L'OBS) sont INCRUSTÉS dans les vidéos : aucun élément décoratif n'est ajouté en CSS. */ .rs{ padding:4px 0 9%; /* Écarts verticaux relevés un par un sur la maquette, en % de la largeur de la galerie (3222 px). Ils sont quasi constants : le PSD ne prévoit AUCUN espace élargi autour des cartes L'OBS — c'est le fond blanc de la carte, incrusté dans la vidéo, qui donne l'impression de respiration. */ --v1:8.10%; /* bandeau -> ASMR 261 px */ --v2:8.10%; /* ASMR -> Miko 261 px */ --v3:7.98%; /* Miko -> L'OBS 257 px */ --v4:7.42%; /* L'OBS -> Bonotte 239 px */ --v5:8.26%; /* Bonotte -> Magic 266 px */ --v6:8.75%; /* Magic -> photographe 282 px */ } .rs-post{ margin:0; } .rs-media{ position:relative; background:#e9e9dd; overflow:hidden; } .rs-media > video,.rs-media > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; } /* Ratios natifs des médias (hauteur / largeur) */ .rs-row--duoA .rs-media{ aspect-ratio:1080 / 1518; } /* 1.406 */ .rs-row--duoB .rs-media, .rs-row--solo .rs-media, .rs-row--trio .rs-media{ aspect-ratio:1080 / 1920; } /* 9:16 */ .rs-row--obs .rs-media{ aspect-ratio:680 / 998; } /* carte L'OBS incluse */ .rs-row--wide .rs-media{ aspect-ratio:16 / 9; } /* R1 — bandeau « Les Recettes ASMR » : le visuel Behance d'origine, tel quel */ .rs-band{ margin:0 0 var(--v1); background:#000; line-height:0; } .rs-band img{ width:100%; height:auto; display:block; } /* Rangées : largeurs et écarts de la maquette */ .rs-row{ display:flex; justify-content:center; align-items:flex-start; } .rs-row--duoA{ gap:17%; margin:0 0 var(--v2); } .rs-row--duoA > *{ width:38.2%; } .rs-row--duoB{ gap:17%; margin:0 0 var(--v3); } .rs-row--duoB > *{ width:32.4%; } .rs-row--obs { gap:4.15%; margin:0 0 var(--v4); } .rs-row--obs > *{ width:30.6%; } .rs-row--solo{ margin:0 0 var(--v5); } .rs-row--solo > *{ width:33.4%; } .rs-row--trio{ gap:4.6%; margin:0 0 var(--v6); } .rs-row--trio > *{ width:30.3%; } .rs-row--wide{ margin:0; } .rs-row--wide > *{ width:71%; } /* Trois rangées ramenées à la largeur des vidéos de Motion (retour client) : « Les Recettes ASMR », « Miko + masterclass » et le trio « L'OBS × Toyota ». 70,41 % de la colonne des Réseaux Sociaux (elle-même à 83 % de la fenêtre) = 58,44 % de la fenêtre, soit exactement la colonne à légendes de Motion. La réduction est homothétique : largeurs de posts et écarts horizontaux sont exprimés en % de la RANGÉE, ils se réduisent donc tous dans la même proportion. Les écarts VERTICAUX, eux, se calculent sur la colonne et ne bougent pas — le rythme vertical de la page reste régulier — les écarts se calculent sur la colonne, pas sur les rangées. Seul le bandeau du haut garde sa pleine largeur (choix client) : c'est une image fixe dont le texte incrusté doit rester lisible. À placer APRÈS les règles ci-dessus, dont le raccourci « margin » remet les marges latérales à zéro. */ .rs-row--duoA, .rs-row--duoB, .rs-row--obs, .rs-row--trio, /* Alain Afflelou « Magic Clip » */ .rs-row--solo, /* Bonotte */ .rs-row--wide{ /* Jimmy & Dyclo */ width:70.41%; margin-left:auto; margin-right:auto; } /* Jimmy occupe toute sa rangée : il faisait 71 % de la colonne, soit 1131 px à 1920 — 9 px de plus que la largeur de Motion. En le passant à 100 % de la rangée réduite, il tombe au pixel près sur les 1122 px des autres. */ .rs-row--wide > *{ width:100%; } /* ---- Tablette : on garde la structure, écarts resserrés ---- */ @media(max-width:950px){ /* Les largeurs de rangées et les écarts verticaux du bureau sont conservés en tablette : tout y est exprimé en pourcentage de la colonne, la réduction est donc homothétique et la page garde exactement ses proportions. Seul l'habillage du bandeau est resserré. */ /* Le bandeau n'a plus rien à resserrer : une seule image, pas de conteneur flex, et les ::before / ::after sont sans content. Lignes retirées. */ } /* ---- Réseaux Sociaux en tablette : la grille se dépile ---- CE BLOC DOIT RESTER ICI, APRÈS .rs-row. La règle de base pose align-items:flex-start ; à spécificité égale, c'est l'ordre du fichier qui tranche. Placées plus haut avec les autres pages, ces lignes voyaient leur align-items:center écrasé : la direction en colonne s'appliquait bien, mais tous les médias restaient collés à gauche. Le bandeau du haut, lui, n'est pas une .rs-row et n'était donc pas concerné — ce que la cliente a vu exactement. Les largeurs, elles, portaient un !important et passaient déjà. */ @media(max-width:950px) and (min-width:601px){ .rs-row{ flex-direction:column; align-items:center; justify-content:flex-start; gap:clamp(11px, 1.90vw, 18px) !important; width:auto !important; } .rs-row > *{ width:72% !important; margin-left:auto; margin-right:auto; } } /* ---- Mobile : une colonne, le bandeau devient une pile ---- */ @media(max-width:600px){ .rs{ --v1:26px; --v2:26px; --v3:26px; --v4:24px; --v5:26px; --v6:28px; padding-bottom:60px; } /* ---- Bandeau ASMR : retrait supprimé ---- Il portait padding:26px 16% sur fond noir. À l'époque, .rs-band était un conteneur flex qui empilait plusieurs vignettes (.rs-post--bandsm, .rs-post--bandcard) et ce retrait leur servait d'habillage. Le bandeau n'est plus qu'une IMAGE unique : le retrait ne fait qu'ajouter un cadre noir autour d'elle, et lui coûte 32 % de sa largeur. Mesure sur le site en ligne, fenêtre de 375 px : bandeau 335 px, image 228 px seulement — 53,6 px de noir de chaque côté et 26 px en haut comme en bas. Retour client, à juste titre. Les trois autres déclarations partaient avec : .rs-band n'a pas de display:flex, donc flex-direction et gap n'avaient aucun effet, et aspect-ratio:auto est déjà la valeur par défaut. Les ::before et ::after n'ont jamais eu de content — vérifié dans le navigateur, ils rendent « none ». Ils décoraient l'ancienne construction. .rs-post--bandsm et .rs-post--bandcard n'existent dans aucune page. */ /* Téléphone : les rangées reprennent toute la largeur — le rétrécissement à 70,41 %, qui vaut du bureau à la tablette, n'a plus de sens sur une colonne unique. */ .rs-row{ width:auto !important; flex-direction:column; align-items:center; gap:18px !important; } .rs-row > *{ width:100% !important; } } /* ============================================================ PAGE ABOUT — cadre gris foncé + bio centrée ============================================================ */ body.about-page{ background:var(--frame); padding:var(--frame-w); min-height:100vh; } /* ------------------------------------------------------------------ PAGE ABOUT — relevé au pixel sur about.png (page 3840x2600, panneau 3502x2281, même cadre que l'accueil). Cette page a un en-tête à elle : le logo y est presque deux fois plus grand que sur les pages intérieures (16,33 % du panneau contre 9,5 %) et posé beaucoup plus à gauche (5,11 % contre 14,68 %). ------------------------------------------------------------------ */ .about-inner{ position:relative; background:var(--cream); width:100%; height:var(--panel-h); overflow:hidden; } body.about-page .site-header{ position:absolute; top:calc(var(--panel-h) * .0574); /* 290 px sur 2281 */ left:5.11%; /* 348 px sur 3502 */ right:3.77%; /* menu à 132 px du bord */ padding:0; background:transparent; } body.about-page .brand .name{ font-size:clamp(30px, calc(var(--panel-w) * .03755), 150px); } body.about-page .brand .sub { font-size:clamp(14px, calc(var(--panel-w) * .01723), 70px); } /* Relevé maquette : 1,130 % du panneau. Comme sur l'accueil, l'agrandissement de 30 % a été retiré à la demande du client : About et l'accueil partagent la même taille de menu depuis l'origine, ils devaient rester ensemble. */ body.about-page .nav{ font-size:clamp(11px, calc(var(--panel-w) * .01130), 45px); line-height:1.2; } .about{ position:static; } /* Texte : les retours à la ligne sont ceux du PSD (4 lignes puis 2). */ .about-text{ position:absolute; top:calc(var(--panel-h) * .3354 - var(--panel-w) * .0016); left:0; right:0; text-align:center; font-family:"Jumper",sans-serif; font-weight:100; font-size:clamp(11px, calc(var(--panel-w) * .01145), 46px); line-height:1.2; color:var(--ink); } .about-text p{ margin:0; } .about-text p + p{ margin-top:1.2em; } /* une ligne blanche, comme la maquette */ .about-text b,.about-text strong{ font-weight:700; } /* Bouton Showreel : 548 x 105 px = 15,65 % x 4,60 % du panneau */ .about-reel{ position:absolute; top:calc(var(--panel-h) * .5467); left:50%; transform:translateX(-50%); display:inline-block; background:var(--ink); color:var(--cream); font-family:"Jumper",sans-serif; font-weight:700; font-style:normal; font-size:clamp(22px, calc(var(--panel-w) * .02897), 116px); line-height:.8; padding:.118em .049em; white-space:nowrap; } .about-reel:hover{ opacity:.9; } /* Contacts : une seule ligne, écarts de 6,11 % du panneau */ .about-contact{ position:absolute; top:calc(var(--panel-h) * .6585); left:0; right:0; display:flex; justify-content:center; align-items:baseline; gap:6.11%; color:var(--red); font-family:"Jumper",sans-serif; font-weight:700; font-style:italic; font-size:clamp(10px, calc(var(--panel-w) * .01090), 44px); white-space:nowrap; } .about-contact .num{ font-family:"Gotham Ultra","Maison Neue",sans-serif; font-weight:900; font-style:italic; } .about-contact a:hover{ text-decoration:underline; } /* ---- Tablette et mobile : on abandonne le calage au pixel ---- */ @media(max-width:950px){ /* Le calage au pixel de la maquette est abandonné : tout revient dans le flux normal et s'empile. overflow:visible est indispensable — le panneau a une hauteur automatique ici, et un débordement serait tronqué au lieu de pousser la page. */ .about-inner{ height:auto; min-height:var(--panel-h); overflow:visible; padding:26px 6% 44px; } body.about-page .site-header{ position:static; padding:0; margin-bottom:9vh; } body.about-page .brand .name{ font-size:34px; } body.about-page .brand .sub { font-size:15px; } body.about-page .nav{ font-size:13px; } .about-text,.about-reel,.about-contact{ position:static; transform:none; } .about-text{ font-size:15px; line-height:1.5; } .about-text br{ display:none; } .about-reel{ display:block; width:max-content; margin:7vh auto 0; font-size:30px; line-height:1; padding:.14em .42em; } /* Contacts empilés et non plus repliés au fil de la ligne : trois blocs de longueurs très différentes se répartissaient mal, et des liens en colonne offrent des zones de touche bien plus confortables au doigt. */ .about-contact{ display:flex; flex-direction:column; align-items:center; gap:14px; margin-top:6vh; font-size:15px; white-space:normal; } .about-contact a{ padding:2px 0; } } /* ============================================================ MODALE SHOWREEL — clic n'importe où sur l'accueil (hors liens/menus/images) ============================================================ */ .reel-modal{ position:fixed; inset:0; z-index:9998; background:rgba(20,20,20,.94); display:none; align-items:center; justify-content:center; padding:clamp(16px,4vw,60px); } .reel-modal.open{ display:flex; } .reel-modal-inner{ width:min(1200px,94vw); } .reel-modal video{ width:100%; display:block; background:#000; } .reel-close{ position:absolute; top:16px; right:22px; width:46px; height:46px; border:0; background:none; color:var(--cream); font-family:"Jumper",sans-serif; font-weight:400; font-size:34px; line-height:1; cursor:pointer; } .reel-close:hover{ opacity:.7; } /* ============================================================ CORRECTIFS LOT 2 (retours client) ============================================================ */ /* Masque dégradé crème en HAUT (derrière logo/menu) : les vidéos s'effacent en montant, mais le titre de section (plus bas) reste visible. */ /* Dégradé de scroll retiré (retour client) : le header reste transparent. */ .site-header::before{ display:none; } /* About : le header reste DANS le cadre (pas fixe) -> plus de bug de cadre. RESTREINT AU BUREAU. Sans cette limite, cette règle — placée après le bloc responsive et de même spécificité que lui — écrasait la mise en page mobile : l'en-tête y repassait en position absolue, sortait du flux, et tout le contenu d'About remontait se superposer à lui. C'était la cause du chevauchement. */ @media(min-width:951px){ body.about-page .site-header{ position:absolute; background:transparent; } } body.about-page .site-header{ background:transparent; } body.about-page .site-header::before{ display:none; } /* Modale Showreel : croix fine + curseur rétabli dans la fenêtre */ .reel-close{ padding:0; display:flex; align-items:center; justify-content:center; } .reel-close svg{ width:32px; height:32px; stroke:var(--cream); stroke-width:1; fill:none; } body.reel-open .pastille-cursor{ opacity:0 !important; } html.has-pastille body.reel-open, html.has-pastille body.reel-open *{ cursor:auto !important; } html.has-pastille body.reel-open .reel-close, html.has-pastille body.reel-open .reel-close *{ cursor:pointer !important; } /* ============================================================ Bouton PLAY personnalisé (pastille) sur les vidéos cliquables ============================================================ */ .reel-media{ position:relative; } .reel-media.has-play, .rs-media.has-play{ cursor:pointer; } /* Le bouton était une image, play.png. Ses pixels transparents étaient stockés en BLANC pur : au redimensionnement — 333 px ramenés à 72 — le navigateur mélange les couleurs voisines sans tenir compte de la transparence et fait remonter ce blanc sur les bords. D'où le liseré clair, rectangulaire comme le fichier, que la cliente voyait autour de la pastille. Le dessin est donc refait en vectoriel, directement dans la feuille de style. Il n'y a plus ni fichier, ni redimensionnement, ni pixel blanc : le liseré ne peut plus apparaître, et le tracé reste net à toutes les tailles. Géométrie relevée au pixel sur l'ancien fichier : ellipse de 320 x 283 dans une boîte de 333 x 304, gris #171717 à 84 % d'opacité ; triangle crème aux sommets (122,96) (236,110) (149,223). */ .reel-media.has-play::after, .rs-media.has-play::after{ content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:72px; height:66px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 333 304'%3E%3Cellipse cx='165.5' cy='151' rx='160' ry='141.5' fill='%23171717' fill-opacity='.84'/%3E%3Cpath d='M122 96 236 110 149 223Z' fill='%23E9E9E0'/%3E%3C/svg%3E") center/contain no-repeat; pointer-events:none; z-index:3; transition:opacity .18s ease, transform .18s ease; filter:drop-shadow(0 3px 10px rgba(0,0,0,.35)); } .reel-media.has-play:hover::after, .rs-media.has-play:hover::after{ transform:translate(-50%,-50%) scale(1.06); } .reel-media.is-playing::after, .rs-media.is-playing::after{ opacity:0; } /* Recadrage plein (supprime l'espace vide) — photos studio signalées */ /* Le ratio est imposé image par image (voir studio.html) : le média remplit exactement le cadre de la maquette, recadré au centre. */ .masonry .item img, .masonry .item video{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; } .masonry .item--crop-bottom img{ object-position:center bottom; } /* ------------------------------------------------------------------ PIED DE PAGE — relevé sur site_ordi_sport_int.png (page 7878 px, colonne de contenu 5271 px). Les tailles sont exprimées en % de la FENÊTRE pour qu'elles ne suivent pas l'élargissement de la galerie. ------------------------------------------------------------------ */ .site-footer{ text-align:center; font-family:"Jumper",sans-serif; color:var(--ink); /* En bas : 7 vw, l'espace validé par le client sous le pied de page. En haut : --fin-gap, la même valeur que celle placée au-dessus du séparateur de fin de galerie — c'est ce qui met ce dernier pile au milieu. Conséquence assumée : l'espace avant le pied de page (4,37 vw) n'est plus égal à celui qui le suit (7 vw), le séparateur occupant désormais le premier. */ padding:var(--fin-gap) 0 7.00vw; } /* Ligne de contact — Gotham Medium demandée. Le fichier Gotham n'est pas encore fourni : Maison Neue Medium, déjà installée, prend le relais. Le jour où le fichier arrive, il suffit d'activer le @font-face en haut de cette feuille et de remplacer "Maison Neue" par "Gotham" ci-dessous. */ .foot-contact{ display:flex; justify-content:center; align-items:baseline; gap:clamp(15px, 2.80vw, 64px); /* écarts relevés : 4,02 % et 3,51 %, + 4 % */ font-family:"Gotham","Maison Neue",sans-serif; font-weight:500; /* Medium */ font-size:15.6px; /* 15 px + 4 % (demande client) */ white-space:nowrap; } .foot-contact .sep, .foot-nav .sep{ opacity:.55; } .foot-social{ /* Centrage strict : les trois pictos partagent le même axe horizontal, calculé sur leur forme complète (le point du « i » de LinkedIn compris). */ display:flex; justify-content:center; align-items:center; gap:clamp(23px, 4.44vw, 100px); /* 6,39 % de la colonne d'origine, + 4 % */ margin-top:clamp(10px, 1.96vw, 46px); /* Pictos fournis par le client (SVG vectorisés depuis ses PNG). Ils n'ont pas tous le même format : « in » 101 x 101, « Bē » 110 x 68, Instagram 103 x 103. On applique donc UNE SEULE échelle à leurs dimensions d'origine : les hauteurs de lettres et le carré Instagram se retrouvent alors optiquement au même niveau (corps de lettre 69 px pour « in », 68 px pour « Bē »). 0,2120 px par pixel d'origine => Instagram 21,84 px = 21 px + 4 %. */ --ic-u:0.2120px; } .foot-social a{ display:inline-flex; } .foot-social .ic{ height:auto; display:block; transition:opacity .18s ease; } .foot-social .ic--linkedin { width:calc(101 * var(--ic-u)); } .foot-social .ic--behance { width:calc(110 * var(--ic-u)); } .foot-social .ic--instagram{ width:calc(103 * var(--ic-u)); } .foot-social a:hover .ic{ opacity:.6; } /* Ligne de catégories — Jumper Regular */ .foot-nav{ display:flex; justify-content:center; align-items:baseline; flex-wrap:wrap; gap:clamp(12px, 2.75vw, 62px); /* 3,95 % de la colonne d'origine, + 4 % */ margin-top:clamp(10px, 1.48vw, 35px); font-family:"Jumper",sans-serif; font-weight:400; /* Regular */ font-size:15.6px; /* même corps que la ligne de contact */ } .foot-nav a{ transition:opacity .18s ease; } .foot-nav a:hover, .foot-contact a:hover{ opacity:.6; } /* Page en cours : elle reste lisible mais s'efface, pour qu'on voie d'un coup d'œil où l'on se trouve. Le survol la ramène à pleine opacité comme les autres, sinon elle paraîtrait désactivée. */ .foot-nav a.is-current{ opacity:.38; } .foot-nav a.is-current:hover{ opacity:.6; } @media(max-width:600px){ /* Le retrait HAUT reste --fin-gap, comme sur les autres tailles d'écran : c'est lui qui met le séparateur de fin pile au milieu. L'ancienne valeur de 88 px l'écrasait et ramenait le déséquilibre qu'on avait corrigé sur bureau (17 px au-dessus du trait contre 88 en dessous). Le retrait BAS conserve une respiration confortable. */ .site-footer{ padding:var(--fin-gap) var(--pad) 56px; } .foot-contact{ flex-wrap:wrap; gap:10px; } .foot-contact .sep{ display:none; } .foot-social{ gap:26px; margin-top:20px; --ic-u:0.2120px; } .foot-nav{ gap:10px 18px; margin-top:20px; } }