/* ------------------------------------------------------------------
Orange de marque, uniformise.
Webflow definit --orange a #ff5200 et s'en sert un peu partout : menus,
survols, accents. C'est l'ancienne teinte, qui reapparaissait par
endroits - notamment en cours de survol dans le menu du hero, ou deux
regles se disputaient la couleur.
On redefinit la variable a la source plutot que de corriger chaque
usage : #fe4828, l'orange du splash et de la page /key. Tout ce qui
s'appuie sur --orange suit desormais, y compris les regles Webflow. */
:root {
--orange: #fe4828;
/* Webflow declare deux oranges : --orange (#ff5200) et --tomato
(#ff6640). Seul le premier avait ete repris, d'ou l'ancienne teinte
encore perceptible par endroits. --burntsienna (#dc7141) n'est pas
touche : c'est un brun, pas un orange de marque. */
--tomato: #fe4828;
}
/* Correctifs du miroir local. Chargé après la feuille Webflow.
Ne pas fusionner dans le CSS Webflow : garder les patchs isolés et relisibles. */
/* Bug d'origine du CSS Webflow : entre 1440px et 1919px de large, les libellés
de langue tombent à 1vh (soit ~9px sur un écran de 900px de haut) parce qu'ils
sont groupés avec .little-content. Le reste du site utilise 2vh, et le palier
>=1920px repasse à 14px. On borne pour ne plus jamais descendre sous 13px. */
@media screen and (min-width: 1440px) {
.wg-selector3-text-lang1,
.wg-selector3-text-lang2 {
font-size: clamp(13px, 2vh, 16px);
}
}
/* Le sélecteur de langue affiche 日本人 / 한국어, que Montserrat ne couvre pas.
Sans repli CJK explicite le rendu part en tofu ou en fonte système incohérente. */
.wg-selector3-text-lang1,
.wg-selector3-text-lang2,
.wg-element-wrapper [lang="ja"],
.wg-element-wrapper [lang="ko"] {
font-family: Montserrat, "Hiragino Sans", "Hiragino Kaku Gothic ProN",
"Apple SD Gothic Neo", "Noto Sans JP", "Noto Sans KR",
"Yu Gothic", "Malgun Gothic", sans-serif;
font-synthesis: none;
}
/* Badge "Made in Webflow" injecté à l'exécution par webflow.js, pas présent dans
le HTML : il ne peut donc pas être supprimé du markup, on le masque. */
.w-webflow-badge {
display: none !important;
}
/* 4e pastille du hero (.container-r-seaux), après TikTok, vers /key.
Les trois PNG existants embarquent leur propre disque ; keynote.png est un
logo à fond transparent, la pastille blanche est donc dessinée en CSS.
Deux insets successifs, d'où la bordure transparente :
1. la boîte reste identique à celle des trois autres (100 / 110 / 60 / 50)
pour ne rien changer au flux, aux marges ni à l'alignement flex-end ;
2. `border` transparente = le padding de 4px des trois autres, si bien que
le disque blanc peint fait 92px comme le leur (et non 100px) ;
3. `padding` cale la taille de la pomme, à 78% du disque (Pinterest est à
73%, TikTok à 68%). key.png ne contient que la pomme sur transparence :
le disque blanc du fichier source a été retiré, sinon son bord antialiasé
se voyait comme un anneau gris au premier rendu, avant que Chrome ne
refiltre l'image. Le fichier est aussi livré en 275x320 et non 770x770,
pour ne plus imposer un sous-échantillonnage de 10x.
object-fit: contain garde le logo centré et à ses proportions.
Ordre des blocs calqué sur la feuille Webflow (base, min, puis max). */
.social-image-burger.slide-one.key-image {
width: 100px;
height: 100px;
max-width: none;
border: 4px solid transparent;
padding: 10px;
background-color: #fff;
background-clip: padding-box;
border-radius: 50%;
object-fit: contain;
/* Deplacement par translate et non par top/left : la feuille Webflow
impose position:static a ces images dans plusieurs paliers, et top
n'a aucun effet sur un element statique - c'est ce qui faisait que le
decalage tenait en 1512px et pas en 1920px. translate agit quel que
soit le position, et se compose avec le transform que IX2 pose en
ligne au lieu d'entrer en conflit avec lui. */
}
@media screen and (min-width: 1920px) {
.social-image-burger.slide-one.key-image {
width: 110px;
height: 110px;
min-width: 110px;
min-height: 110px;
border-width: 4px;
padding: 11px;
}
}
@media screen and (max-width: 991px) {
.social-image-burger.slide-one.key-image {
width: 60px;
height: 60px;
border-width: 4px;
padding: 6px;
}
}
@media screen and (max-width: 479px) {
.social-image-burger.slide-one.key-image {
width: 50px;
height: 50px;
border-width: 2px;
padding: 5px;
}
}
/* La file des quatre pastilles descend de la hauteur d'une pastille.
On reprend le margin-top d'origine de .container-r-seaux palier par palier
(112 / 180 a >=1440 / 275 a >=1920) et on y ajoute le diametre du palier
(100 / 110 / 60 / 50). Meme ordre de blocs que la feuille Webflow. */
.container-r-seaux {
margin-top: 212px;
}
@media screen and (min-width: 1440px) {
.container-r-seaux {
margin-top: 280px;
}
}
@media screen and (min-width: 1920px) {
.container-r-seaux {
margin-top: 385px;
}
}
@media screen and (max-width: 991px) {
.container-r-seaux {
margin-top: 172px;
}
}
@media screen and (max-width: 479px) {
.container-r-seaux {
margin-top: 162px;
}
}
/* ------------------------------------------------------------------
Bloc "How to get in touch" : le carré CALL, les quatre numéros et le
carré @ / INQUIRIES sont remplacés par un formulaire de contact.
Deux instances dans le markup, celle de .invisible-content (>=992px)
et celle de .content-skate.mobile (<=991px).
Alignements repris sur la mise en page existante, en pourcentages
pour qu'ils tiennent à toutes les largeurs :
- à gauche, le formulaire se cale sur le titre "How to get in touch".
Ce titre est à 15% (.about-title) + 2% de sa propre largeur, elle
même à 65% : 15 + 0,02 x 65 = 16,3% du conteneur.
- à droite, le bloc copyright est ramené pour que le © arrive sur le
bord droit du menu. Sa marge droite d'origine est de -2,965%.
Les deux conteneurs portaient opacity: .6, acceptable pour des
pictogrammes mais pas pour des champs de saisie : on remet 1 et on
rend le .6 au seul bloc copyright, qui garde son rendu d'avant.
------------------------------------------------------------------ */
.content-skate.invisible-content,
.content-skate.mobile {
opacity: 1;
}
/* Le titre n'est pas cale au meme endroit selon le palier : .about-title
porte margin-left 3% / 15% / 8% et .paragraph-3 2% ou 15% de la largeur du
titre. On recompose l'offset resultant palier par palier pour que le bord
gauche du formulaire tombe exactement sur le H de "How to get in touch".
992-1279 : 0
>=1280 : 3 + 15 x 0,65 = 12,75%
>=1440 : 15 + 2 x 0,65 = 16,3%
>=1920 : 8 + 2 x 0,86 = 9,72% */
.content-skate.invisible-content {
padding-left: 0;
padding-right: 0;
}
@media screen and (min-width: 1280px) {
.content-skate.invisible-content {
padding-left: 12.75%;
}
.content-skate.invisible-content .copyright.last-slide {
margin-right: -3.8%;
}
}
@media screen and (min-width: 1440px) {
.content-skate.invisible-content {
padding-left: 16.3%;
}
.content-skate.invisible-content .copyright.last-slide {
margin-right: -5.3%;
}
}
.content-skate.invisible-content .copyright.last-slide {
opacity: .6;
/* Ramene le logo (c) sur le bord droit du menu. La valeur depend du palier
parce que le conteneur change de padding et de justify-content ; elle est
relevee au pixel a 1280, 1440 et 1920. */
margin-right: -3.8%;
}
.sa-form {
box-sizing: border-box;
/* taille figee : sinon le formulaire absorbe le jeu du space-between et la
marge du bloc copyright ne se traduit plus en deplacement reel */
flex: 0 0 auto;
width: 100%;
max-width: 900px;
opacity: .9;
background-color: #000;
color: #efe2c0;
padding: 16px 20px 12px;
font-family: "Helvetica Neue", Montserrat, Arial, sans-serif;
text-align: left;
}
.sa-form-title {
margin-bottom: 10px;
font-size: 14px;
font-weight: 500;
letter-spacing: .18em;
line-height: 1.2;
text-transform: uppercase;
}
.sa-form-row {
display: flex;
align-items: flex-end;
gap: 14px;
}
.sa-field {
flex: 1 1 0;
min-width: 0;
}
.sa-field-message {
flex: 1 1 auto;
}
/* Deuxieme rangee : le message prend toute la largeur restante et le bouton
se pose a sa droite, ce qui redonne au bloc la hauteur qu'il avait avant
d'etre comprime sur une seule ligne. */
.sa-form-row-last {
margin-top: 12px;
}
.sa-label {
display: block;
margin-bottom: 3px;
font-size: 10px;
letter-spacing: .16em;
line-height: 1.2;
text-transform: uppercase;
opacity: .65;
}
.sa-input {
box-sizing: border-box;
width: 100%;
color: #efe2c0;
background-color: transparent;
border: 0;
border-bottom: 1px solid rgba(239, 226, 192, .4);
border-radius: 0;
padding: 5px 0;
font-family: inherit;
font-size: 14px;
line-height: 1.3;
-webkit-appearance: none;
appearance: none;
}
.sa-input:hover {
border-bottom-color: rgba(239, 226, 192, .7);
}
.sa-input:focus-visible {
border-bottom-color: #efe2c0;
outline: 2px solid #efe2c0;
outline-offset: 3px;
}
.sa-form-send {
flex: 0 0 auto;
min-width: 104px;
min-height: 44px;
color: #000;
background-color: #efe2c0;
border: 0;
padding: 12px 22px;
font-family: inherit;
font-size: 12px;
font-weight: 600;
letter-spacing: .16em;
line-height: 1;
text-transform: uppercase;
cursor: pointer;
}
.sa-form-send:hover {
background-color: #fff;
}
.sa-form-send:focus-visible {
outline: 2px solid #efe2c0;
outline-offset: 3px;
}
.sa-form-status {
min-height: 14px;
margin: 6px 0 0;
font-size: 11px;
line-height: 1.3;
}
@media screen and (max-width: 991px) {
.sa-form {
max-width: none;
padding: 12px 14px 8px;
}
.sa-form-row {
flex-wrap: wrap;
gap: 10px;
}
.sa-field,
.sa-field-message {
flex: 1 1 45%;
}
.sa-form-send {
flex: 1 1 100%;
}
}
/* Le PNG Instagram embarque une marge transparente : son disque ne fait que
91,7% du fichier, la ou Pinterest et TikTok remplissent tout le leur. Avec
le padding de 4px commun il rendait donc un disque de 84px contre 92px aux
autres. On lui retire le padding pour rendre les quatre disques egaux. */
.social-image-burger.slide-one.top-image {
padding: 0;
}
/* A partir de 1920px le conteneur passe en justify-content: center, ce qui
decrochait le formulaire du titre. On revient a space-between comme au
palier 1440 pour que le formulaire reste cale a gauche et le copyright a
droite. */
@media screen and (min-width: 1920px) {
.content-skate.invisible-content {
justify-content: space-between;
padding-left: 9.72%;
}
.content-skate.invisible-content .copyright.last-slide {
margin-right: -5.1%;
}
}
/* Bandeau social de la section About : 4e pastille Apple, vers /key.
Le survol n'a besoin d'aucune animation nouvelle : les evenements IX2
ajoutes pointent sur les memes listes a-72 / a-73 que les trois autres,
qui ciblent l'enfant .bg-insta.slide-2 via useEventTarget CHILDREN. Le
disque blanc de fond porte donc la meme classe, et le fondu est identique.
Les regles ci-dessous ne font que recopier le dimensionnement de
.tik-tok-logo.landscape.slide-two, palier par palier. */
.apple-logo.landscape.slide-two {
max-width: 30%;
perspective: 1px;
justify-content: center;
align-items: center;
display: flex;
}
@media screen and (min-width: 1280px) {
.apple-logo.landscape.slide-two {
max-width: 30%;
}
}
@media screen and (min-width: 1440px) {
.apple-logo.landscape.slide-two {
max-width: 25%;
}
}
@media screen and (min-width: 1920px) {
.apple-logo.landscape.slide-two {
width: 30%;
max-width: 25%;
}
}
@media screen and (max-width: 991px) {
.apple-logo.landscape.slide-two {
height: auto;
max-width: 33%;
align-self: flex-start;
margin-bottom: 0;
}
}
@media screen and (max-width: 767px) {
.apple-logo.landscape.slide-two {
max-height: 33%;
align-self: auto;
}
}
@media (prefers-reduced-motion: reduce) {
}
/* Rangee d'icones de la section Ddddd : pastille Apple en tete, vers /key.
Meme construction que celle du hero : disque blanc en CSS, key.png par
dessus. La taille suit celle des voisines au lieu d'etre figee en pixels,
sinon la pomme reste petite quand la fenetre s'elargit : leur lien est en
max-width pourcentage, on reprend les memes valeurs palier par palier.
Le disque peint des voisines vaut la largeur du lien moins leur padding
horizontal, qui change de palier : 4+4 en base, 4+8 a partir de 1440,
4+4 de nouveau a partir de 1920. La bordure transparente reprend ces
valeurs, sinon le disque decroche (37,8 au lieu de 41,8 a 1920).
Le padding de 8% cale la pomme a ~80% du disque, comme dans le hero. */
.apple-logo.landscape.slide-five {
max-width: 10%;
justify-content: center;
align-items: center;
display: flex;
}
.insta-image.image-mobile.slide-4.apple-dddd {
width: 100%;
height: auto;
max-width: none;
aspect-ratio: 1 / 1;
padding: 8%;
background-color: #fff;
background-clip: padding-box;
border-radius: 50%;
object-fit: contain;
}
@media screen and (min-width: 1440px) {
.insta-image.image-mobile.slide-4.apple-dddd {
border-width: 6px;
}
}
@media screen and (min-width: 1920px) {
.insta-image.image-mobile.slide-4.apple-dddd {
border-width: 4px;
}
}
@media screen and (max-width: 991px) {
.apple-logo.landscape.slide-five {
max-width: 8%;
}
}
@media screen and (max-width: 767px) {
.apple-logo.landscape.slide-five {
max-width: 12%;
}
}
@media screen and (max-width: 479px) {
.apple-logo.landscape.slide-five {
max-width: 17%;
}
}
/* Copyright vertical (« Legal - Copyright 2026 »).
Historique : le texte etait resserre a -0.2px parce que sur certaines
slides la derniere lettre (le « 6 » de 2026, en haut de la bande
pivotee) se faisait rogner par le bord du conteneur en overflow:hidden.
Ce resserrement nuisait a la lecture, deja difficile sur un texte
pivote a 90 degres. On reprend donc le reglage a l'endroit : un corps
d'un point de plus, une graisse allegee et surtout un interlettrage
positif, l'ecartement etant ce qui aide le plus a lire une ligne
verticale. Le gain de longueur est absorbe par la marge disponible
dans la bande, verifiee apres coup. */
.legal-copyright .text-block-8 {
font-size: 14px;
font-weight: 300;
letter-spacing: .9px;
/* La boite fait 151px de long ; des que le texte la depasse, "2026"
bascule sur une deuxieme ligne, ce qui sur une bande pivotee se lit
comme un "6" rogne - le defaut que le resserrement d'origine
cherchait a masquer. On interdit le retour a la ligne : le texte
tient sur une seule ligne quelle que soit sa longueur, et rien ne le
rogne, le premier conteneur en overflow:hidden etant a 805px. */
white-space: nowrap;
}
/* Rangee d'icones de Ddddd : le bord gauche du disque Apple doit tomber sur
le M de "Maintenance", c'est a dire sur le bord gauche de la 4e colonne.
La rangee contenait aussi "Legal - Copyright 2026", invisible au repos et
revele au survol du (c). Il occupait 143px a droite des disques : en le
sortant du flux (position absolue, juste a gauche de la rangee) la rangee
ne contient plus que les disques et peut etre calee librement.
L'offset est un pourcentage de .div-block-12, qui partage sa largeur avec
la grille des colonnes. Il est constant a l'interieur de chaque palier
Webflow mais change d'un palier a l'autre, d'ou les trois valeurs :
32,86% de 1280 a 1439, 41,25% de 1440 a 1919, 21,66% au-dela.
En dessous de 1280 la mise en page de la section change, on n'y touche pas. */
@media screen and (min-width: 1280px) {
#Ddddd .div-block-12 {
justify-content: flex-start;
}
#Ddddd .link-footer-skate.slide-five {
position: relative;
max-width: none;
justify-content: flex-start;
margin-left: 32.86%;
margin-right: 0;
padding-left: 0;
}
#Ddddd .link-footer-skate.slide-five .message-c-footer {
position: absolute;
top: 0;
right: 100%;
white-space: nowrap;
}
}
/* A partir de 1440 le conteneur prend 32px de padding gauche : le
pourcentage se calcule alors sur la boite de contenu et laisse un ecart
constant, mesure a 19px puis 25px selon le palier. On le retranche. */
@media screen and (min-width: 1440px) {
#Ddddd .link-footer-skate.slide-five {
margin-left: calc(41.25% - 19px);
}
}
@media screen and (min-width: 1920px) {
#Ddddd .link-footer-skate.slide-five {
margin-left: calc(21.66% - 25px);
}
}
/* Disques de Ddddd agrandis. Leur taille venait d'un max-width de 10% de la
rangee ; comme la rangee est desormais dimensionnee par son contenu, ce
pourcentage n'avait plus de reference stable. On fixe donc la largeur du
lien, et l'image la remplit. La bordure transparente de la pastille Apple
reste calee sur le padding des voisines, le rapport disque/lien est donc
conserve. Largeurs bornees pour que les cinq disques tiennent entre le M
de "Maintenance" et le bord de la fenetre. */
@media screen and (min-width: 1280px) {
#Ddddd .link-footer-skate.slide-five > a,
#Ddddd .link-footer-skate.slide-five > .insta-logo {
width: 62px;
max-width: none;
}
#Ddddd .link-footer-skate.slide-five > a > img,
#Ddddd .link-footer-skate.slide-five > .insta-logo > img {
width: 100%;
height: auto;
max-width: none;
}
/* Les fichiers n'ont pas tous le meme rapport (TikTok 118x122, Pinterest
1033x1032, la pomme est carree) : a largeur egale leurs hauteurs vont de
60 a 72px. Cales en haut, les disques ne tombaient pas sur la meme ligne.
On centre chaque image dans son lien pour aligner les centres. */
#Ddddd .link-footer-skate.slide-five {
align-items: center;
}
#Ddddd .link-footer-skate.slide-five > a,
#Ddddd .link-footer-skate.slide-five > .insta-logo {
justify-content: center;
align-items: center;
display: flex;
}
}
@media screen and (min-width: 1440px) {
#Ddddd .link-footer-skate.slide-five > a,
#Ddddd .link-footer-skate.slide-five > .insta-logo {
width: 72px;
}
}
/* Espaces egaux entre les cinq disques.
Les liens sont contigus et de meme largeur, mais le disque peint ne
remplit pas ses bords de la meme facon : les quatre PNG laissent un
padding de 4px a gauche et de 8px a droite, la pomme est un fond CSS
arrondi qui occupe tout son lien. L'espace visible entre deux PNG
voisins vaut donc padding droit + padding gauche = 12px, alors qu'apres
la pomme il ne reste que le padding gauche du voisin, soit 4px.
Mesure a 1512px : 4 / 12 / 12 / 12.
On rattrape l'ecart sur TikTok, ce qui repousse d'autant les trois
disques suivants. La pomme ne bouge pas, son bord gauche reste sur le
M de "Maintenance". Le rattrapage vaut le padding droit des PNG, qui
change de palier : 4 en base, 8 a partir de 1440, 4 de nouveau a
partir de 1920. */
@media screen and (min-width: 1280px) {
#Ddddd .link-footer-skate.slide-five > .tik-tok-logo {
margin-left: 4px;
}
}
@media screen and (min-width: 1440px) {
#Ddddd .link-footer-skate.slide-five > .tik-tok-logo {
margin-left: 8px;
}
}
@media screen and (min-width: 1920px) {
#Ddddd .link-footer-skate.slide-five > .tik-tok-logo {
margin-left: 4px;
}
}
/* Copyright du bas de la section Contact : on reprend telle quelle la
structure de la page d'accueil (.copyright.slide-one > .legal-copyright
.slide-one > .text-block-8, puis .c-footer-skate.slide-1), pose comme
la-bas en enfant direct de .space-photo. Meme rendu, meme (c), et le meme
effet au survol : le data-w-id de Contact pointait deja sur les memes
listes d'animation que celui de la HP (a-19 / a-15 / a-63 / a-64).
Plus aucune regle specifique n'est necessaire ici. */
/* ===================================================================
Filigrane "A BRAND NEW DAY" (.image-28) : meme taille sur Safari
et sur Chrome.
Webflow pose, sous 991px :
.div-block-22 { max-height: 100%; display: flex; align-items: flex-end }
.image-28 { max-height: 60%; max-width: 60% }
Le max-height en pourcentage se resout contre la hauteur de
.div-block-22, qui est elle-meme en max-height:100% d'un parent sans
hauteur definie. Sur une hauteur de reference indefinie, les deux
moteurs ne tranchent pas pareil : Chrome laisse tomber la contrainte
et l'image occupe ses 60% de large, Safari la fait mordre et rabote
l'image d'environ 20%. D'ou un filigrane plus petit sur Safari.
On supprime donc la contrainte verticale ambigue et on pilote la
taille uniquement par la largeur.
Correctif volontairement minimal : on ne touche NI a width NI a
max-width, qui restent ceux de Webflow tranche par tranche. Chrome
ignorait deja le max-height, donc son rendu ne bouge pas d'un pixel ;
seul Safari cesse de raboter l'image et rejoint Chrome.
Hors media query, car Webflow redefinit .image-28 dans trois tranches
(base, min-width:1440px, max-width:991px) et la contrainte doit
sauter dans toutes. local-fixes.css etant charge apres la feuille
Webflow, la declaration l'emporte a specificite egale. */
.div-block-22 {
max-height: none;
}
.image-28 {
max-height: none;
height: auto;
}
/* Le bloc gauche du hero suit la largeur de la fenetre.
Webflow fige .div-block-22 a width:1000px des 1440px, alors que son
parent .text-slide-one est proportionnel (75%). Ces 1000px valent 66%
de la fenetre a 1512, mais seulement 43% a 2300 : le filigrane et le
kicker se tassent d'autant que l'ecran est large, ce qui rendait la
partie gauche nettement plus petite sur une fenetre large.
On ne peut pas passer par un pourcentage : .couche1 n'est pas etiree
(.text-slide-one est en align-items:flex-start), sa largeur depend
donc de son contenu et un % y serait circulaire. On exprime la meme
valeur en vw : 1000px a 1512 font 66.14vw, le rendu suit desormais la
fenetre au lieu de se tasser.
Une fois Chrome et Safari raccordes, l'ensemble ressortait trop gros :
on retire 20%, soit 66.14 x 0,8 = 52.91vw. */
@media screen and (min-width: 1440px) {
.div-block-22 {
width: 52.91vw;
}
}
/* ===================================================================
Menu de navigation : couleur au survol, propre a chaque section.
Les cinq boutons (.button-about, .button-agency, .button-plein-de-d,
.button-brands, .button-contacts) sont dupliques a l'identique dans
chaque section, sous .content-menu. On differencie donc par l'id de
la section porteuse, ce qui evite de toucher au markup.
Les teintes sont reprises de la charte, chacune sur l'element cite
comme reference :
Home orange #fe4828 le (c) du bas de page (--orange)
About vert #18e7cf les traits du burger (--turquoise)
Agency bleu #00a2ff le selecteur de langue (--dodger-blue)
Ddddd jaune #f8ba00 les traits du burger (--goldenrod)
Brands rouge #ff2600 le titre "We did it" (--red)
Contact orange #fe4828 comme le hero (--orange)
Aucun :hover n'existait sur ces boutons. Un id + deux classes passent
devant les regles Webflow (.button-about.text-white et consorts) sans
avoir besoin de !important. */
.content-menu .w-button {
transition: color .18s ease;
}
/* Contact : survol en blanc et non en orange. Sur le ciel orange de
cette photo, l'orange se noyait ; le blanc est la seule teinte qui
s'y detache franchement, au repos comme au survol. */
#Contact .content-menu .w-button:hover {
color: #fff;
}
#About .content-menu .w-button:hover {
color: var(--turquoise);
}
#Agency .content-menu .w-button:hover {
color: var(--dodger-blue);
}
#Ddddd .content-menu .w-button:hover {
color: var(--goldenrod);
}
#Brands .content-menu .w-button:hover {
color: var(--red);
}
/* Section courante : dans chaque section, l'entree du menu qui pointe
vers elle reste allumee a sa couleur. On arrive sur Brands, "Brands"
est rouge et le reste.
On s'appuie sur le href plutot que sur la classe w--current de
Webflow : avec fullpage.js celle-ci ne suit pas la section affichee
(elle reste posee sur "About" y compris dans le hero). Le lien vers
la section qui le contient est, lui, toujours juste.
Le hero n'apparait pas ici : son menu ne contient aucun lien vers
lui-meme, donc aucune entree n'a a s'allumer.
Specificite (1,2,1), sous celle du survol (1,3,0) : survoler une
autre entree la colore normalement, sans que l'entree active ne
prenne le dessus. */
#About .content-menu a[href="#About"] {
color: var(--turquoise);
}
#Agency .content-menu a[href="#Agency"] {
color: var(--dodger-blue);
}
#Ddddd .content-menu a[href="#Ddddd"] {
color: var(--goldenrod);
}
#Brands .content-menu a[href="#Brands"] {
color: var(--red);
}
/* Contact : l'entree active reste BLANCHE au repos. L'orange de la
pomme (#f58502) s'y noyait dans le ciel orange de la photo et donnait
l'impression d'un texte transparent. Elle passe a l'orange au survol
seulement, ou le changement se lit alors franchement. */
#Contact .content-menu a[href="#Contact"] {
color: #fff;
}
/* ===================================================================
Arrivee sur la home : le menu se deroule sous le burger.
Les cinq entrees descendent l'une apres l'autre depuis le bas du
burger (qui s'arrete a 182px, le menu commence a 169px) en montant
de 18px, avec 45ms d'ecart entre chacune : l'oeil lit un deroule,
pas cinq apparitions simultanees.
Webflow pose un style inline opacity:1 sur chaque bouton via IX2.
Une animation CSS passe devant une declaration inline normale (seul
un !important lui resisterait), donc on peut animer l'opacite sans
toucher au script ni au markup.
backwards applique l'etat de depart des le rendu, sinon les entrees
clignotent a leur place avant de partir. L'animation ne joue qu'au
chargement : revenir sur la section depuis une autre ne la rejoue
pas, ce qui est le comportement voulu. */
/* Le trait est present des la premiere image, colle sous la derniere
barre du burger, et c'est lui qui part le premier : le menu ne se
decouvre qu'ensuite, dans son sillage.
Reperes mesures : la troisieme barre du burger s'arrete a 164px, le
menu occupe 169 -> 278, le trait se pose a 297. Le trait part donc de
164 (colle au burger) et descend de 133px, le devoilement part de 169
et court sur 109px.
Le trait est lance 100ms avant le menu et les deux s'achevent
ensemble (200+950 = 300+850 = 1150ms). Comme il part plus haut, va
plus vite et demarre plus tot, il mene la descente d'un bout a
l'autre : quelques pixels au-dessus du bord au tout debut, puis une
vingtaine en dessous, sans jamais se faire depasser.
Le devoilement passe par clip-path plutot que par l'opacite : le bord
reste net, comme une toile qu'on deroule, la ou un fondu ferait
apparaitre les entrees en avance sur le trait. */
/* Course exprimee en vh, pas en px : le burger et le menu sont eux-memes
dimensionnes en vh, donc leurs positions suivent la hauteur de la
fenetre. Une valeur figee ne vaut que pour la hauteur ou elle a ete
relevee : 133px mesures sur 805px de haut laissaient le trait 31px
trop court a 992, et 59px trop court a 1164.
Course ramenee de 133px a 128px (16.52vh -> 15.90vh) : le trait part
du haut du menu (169) et non de 5px plus haut. Avec un depart commun
au devoilement, il reste colle au texte qui se decouvre au lieu de
flotter 30px devant, ce qui laissait une bande de fond vide entre le
dernier mot revele et le trait. L'ecart passe de 0 a 19px au fil de
la descente, 19px etant la place definitive du trait sous le menu. */
#Home {
--sa-course-trait: 15.90vh; /* 128px a 805 de haut : du haut du menu a la place du trait */
--sa-reste-trait: 2.36vh; /* 19px : ce qui separe la derniere entree du trait */
}
@media (prefers-reduced-motion: reduce) {
#Home .content-menu,
#Home .all-trait > .sa-menu-trait.idk {
animation: none;
}
}
/* Separateur des qualifiers de la liste Services : la barre oblique de
"print/digital" et "object/packaging" collait aux deux mots. Un cheveu
d'air de chaque cote, sans toucher a la taille ni a la casse. */
.sep {
padding: 0 .12em;
}
/* Pastille "Full Prod." accolee a l'entree "Film . ad", sur la meme
ligne, comme le badge de /key l'est a NGOs.
Deux ecarts assumes avec ce badge d'origine :
- le fond n'est pas l'orange mais le bleu du trait qui suit le titre
"Services" (.text-span-28, var(--dodger-blue)), couleur qui signe
deja la section Agency ;
- pas de text-transform : la casse saisie est conservee telle quelle,
"Full Prod." et non "FULL PROD.".
.services est un conteneur flex en align-items: flex-start ; la
pastille en est donc le troisieme element et reste sur la ligne. On
la recentre verticalement sur le libelle, sinon elle se calerait en
haut comme le qualifier. */
.sa-pastille {
display: inline-block;
align-self: center;
font-size: .5em;
font-weight: 700;
letter-spacing: .06em;
color: #fff;
background: var(--dodger-blue);
padding: .35em .6em;
margin-left: .5em;
border-radius: 5px;
line-height: 1;
white-space: nowrap;
}
/* Contact : le (c) se cale sur le disque du milieu et sur le bouton SEND.
Le bloc .copyright.slide-one est deja en position absolue dans la
section, et il centre son contenu : positionner le bloc revient donc
a positionner le logo.
On l'ancre en bas a droite plutot qu'en haut a gauche, parce que ses
deux reperes le sont aussi : les trois disques sont alignes sur le
bord droit, le formulaire sur le bas. Un ancrage top/left aurait
derive des que la section change de taille.
Releve a 1512x805 :
centre du disque du milieu ...... 141,7px du bord droit
milieu du bouton SEND ........... 130,3px du bas
bloc du (c) ..................... 151,2 x 62
d'ou right = 141,7 - 151,2/2 = 66,1 et bottom = 130,3 - 62/2 = 99,3. */
#Contact .copyright.slide-one {
top: auto;
left: auto;
/* Recale du 18 aout 2026 : le groupe des trois disques est centre sur
l'axe du trait du burger (8px a gauche de l'ancienne ancre 28,27px)
et remonte pour que son milieu tombe sur celui du bouton Send
(32,1 + 43px). Une regle jumelle plus bas dans le fichier ecrasait
ces valeurs pour Agency ET Contact ; Contact en a ete retire. */
position: absolute;
right: 36.27px;
bottom: 75.1px;
}
/* Home : supprime le sursaut du texte au survol du (c).
Le bloc copyright et tous ses enfants heritent d'un `transition: all`.
Au survol, Webflow ne fait que reveler .legal-copyright en passant son
opacite de 0 a 1 ; mais `all` embarque aussi les proprietes de mise en
page qui bougent a ce moment-la (la largeur du bloc passe de 0 a sa
valeur des que le texte s'affiche). Le texte se pose donc d'abord au
bon endroit, puis se decale une fois la transition de largeur achevee.
On restreint la transition a la seule opacite : le fondu est conserve,
plus rien d'autre n'est anime, donc plus de second deplacement. */
#Home .copyright.slide-one,
#Home .copyright.slide-one .legal-copyright,
#Home .copyright.slide-one .text-block-8,
#Home .copyright.slide-one .c-footer-skate,
#Home .copyright.slide-one .image-6 {
transition-property: opacity;
}
/* Menu : taille indexee sur la largeur, plus sur la hauteur.
Webflow dimensionne les entrees en 2.5vh, donc indexees sur la hauteur
utile de la fenetre. Celle-ci varie avec les bandeaux du navigateur,
ce qui fait bouger la taille du menu sans que rien dans la page ne
change : la fenetre Chrome pilotee en debug perd 54px de haut (936 au
lieu de 990) et le menu y tombe a 23,40px contre 24,75px ailleurs.
Etalon retenu : la hauteur reelle des deux navigateurs hors debug,
1920x990, ou 2.5vh valent 24,75px. En largeur : 24,75/1920 = 1.289vw.
Le rendu ne bouge donc pas par rapport a l'origine, et il ne depend
plus d'un bandeau de navigateur.
Le selecteur porte deux classes (.w-button) pour passer devant les
regles Webflow du type .button-about.invisible, qui en portent deux
aussi. Les paliers sous 1280px sont laisses tels quels : ils relevent
de la passe responsive. */
@media screen and (min-width: 1280px) {
/* Grossi de 8% par rapport a l'etalon d'origine (1.289 -> 1.4vw), et
interligne porte a 1.12 fois le corps au lieu de 1.0 : les entrees
respirent d'environ 3px de plus sans que la colonne s'allonge
notablement. */
.content-menu > a.w-button {
font-size: 1.4vw;
line-height: 1.568vw;
}
}
/* Agency : le (c) se centre sur le disque Pinterest, celui du milieu.
Le bloc y est en flux normal (.copyright.slide-video, position
static), contrairement a celui de Contact qui est absolu. On le
decale donc en relatif : le rendu bouge, le flux et les voisins ne
bougent pas.
Releve a 1512 : centre du bloc a 1344,9, centre du disque Pinterest a
1370,3, soit 25,4px a rattraper vers la droite. Les disques comme le
bloc sont ancres sur le bord droit avec des marges en pixels, cet
ecart ne depend donc pas de la largeur de la fenetre. */
/* Contact ne partage plus cette ancre : son bloc est cale sur le trait
du burger et le bouton Send, dans sa regle dediee plus haut. */
#Agency .copyright.slide-video {
/* Ancre sur le bord droit, comme les disques eux-memes, et non par un
decalage relatif : un `left` en pixels ne vaut que pour la largeur ou
il a ete releve, et se decalait des que la fenetre changeait.
Le centre du disque Pinterest tombe a 141,7px du bord droit de la
section, quelle que soit la largeur ; le bloc du (c) fait 156,3px de
large, d'ou right = 141,7 - 156,3/2 = 63,57px. Le `bottom` reprend
la position verticale d'origine (32,1px du bas), pour ne rien
deplacer d'autre. */
position: absolute;
right: 28.27px;
bottom: 32.1px;
left: auto;
top: auto;
}
/* Selecteur de langue : la langue active prend la couleur de la section,
comme les entrees du menu. EN est le 4e selecteur (.s2) ; les trois
autres langues restent dans leur teinte d'origine, plus discrete, ce
qui signale d'un coup d'oeil laquelle est active.
Memes couleurs que le menu, reprises de la charte :
Home orange le (c) du bas de page
About vert les traits du burger
Agency bleu le trait qui suit "Services"
Ddddd jaune les traits du burger
Brands rouge le titre "We did it"
Contact orange comme le hero
Le selecteur porte trois classes pour passer devant les regles
Webflow du type .wg-selector-3.s2.turquoise, qui en portent trois. */
#Home .wg-element-wrapper .wg-selector-3.s2 {
/* #fe4828, l'orange du splash et de la page /key, et non la variable
--orange de Webflow qui portait une autre teinte. */
color: #fe4828 !important;
}
/* Contact : le fond y est clair, le EN se lit mieux en noir. */
#Contact .wg-element-wrapper .wg-selector-3.s2 {
color: #000 !important;
}
#About .wg-element-wrapper .wg-selector-3.s2 {
color: var(--turquoise) !important;
}
#Agency .wg-element-wrapper .wg-selector-3.s2 {
color: var(--dodger-blue) !important;
}
#Ddddd .wg-element-wrapper .wg-selector-3.s2 {
color: var(--goldenrod) !important;
}
#Brands .wg-element-wrapper .wg-selector-3.s2 {
color: var(--red) !important;
}
/* Agency : le (c) au meme diametre que les disques sociaux (52px).
Le pourcentage de Webflow se resout sur un conteneur different de
celui des disques : le relever donnait 39px au lieu des 52 attendus.
On fixe donc la taille, et on retire le plafond qui la bridait. */
#Agency .c-footer-skate .image-6 {
width: 52px;
height: 52px;
max-width: none;
max-height: none;
}
/* Agency : le bloc "Services" respire en bas.
Il s'arretait a 20px du bord de la section ; on porte cet espace a
3,6cm (136px a 96dpi) en reservant la difference sous la liste. */
#Agency .text-slide-one.slide-3 {
/* 116px remontaient le bloc a 3,6cm du bas ; on le redescend d'1cm
(38px a 96dpi), soit 78px de reserve et 98px sous la liste. */
padding-bottom: 78px;
box-sizing: border-box;
}
/* ===================================================================
Section Brands : mur de logos.
Remplace le bandeau bitmap unique (Bandeau.png, 1920x400) par une
grille de logos individuels. Chaque logo est un fichier blanc sur
transparence dans assets/logos/ : plus de retouche d'image pour en
ajouter, retirer, deplacer ou redimensionner un seul.
Trois rangees de sept. Les logos ne sont pas cales sur une hauteur
commune - ce serait ecraser les larges et gonfler les compacts - mais
sur une SURFACE optique commune : hauteur = racine(surface / ratio),
calculee par logo et posee en --h. Un logo tres allonge (Broward,
ratio 16,5) est donc plus bas qu'un logo carre (Weizmann, ratio 1),
et les deux pesent pareil a l'oeil.
La hauteur est en vw : le mur suit la largeur de la fenetre, comme le
reste de la page depuis qu'on a quitte les unites figees. */
.sa-logos {
display: grid;
/* 14 demi-colonnes : chaque logo en occupe deux. Cela permet de decaler
la rangee du milieu d'une seule demi-colonne, donc de la poser en
quinconce entre les deux autres. 7 / 6 / 7 logos. */
grid-template-columns: repeat(14, 1fr);
gap: 2vw 1.6vw;
align-items: center;
/* stretch et non center : sinon chaque case se retracte a la largeur de
son logo, et max-width:100% se met a comprimer les plus larges - c'est
ce qui ecrasait Neuroya de 43% et Maison Bourgeat de 55%. */
justify-items: stretch;
width: 100%;
margin: 0;
/* Le bas est nettement plus large que le haut : le ticker qui suit a
besoin d air au-dessus de lui, la grille venait le toucher. */
padding: 2vw 4vw 6.4vw;
list-style: none;
box-sizing: border-box;
}
.sa-logo {
display: flex;
align-items: center;
justify-content: center;
/* auto / span 2 et non "span 2" seul : ce dernier definit le DEBUT de
la case comme un span, ce qui laissait chaque logo sur une seule
demi-colonne (77px) et le faisait comprimer. */
grid-column: auto / span 2;
}
/* Rangee du milieu (logos 8 a 13) : demarree en 2e demi-colonne, elle
tombe entre les logos des rangees 1 et 3.
La 3e rangee doit etre replacee explicitement en 1re colonne : sans
cela, le 14e logo profitait des deux demi-colonnes restees libres au
bout de la rangee decalee et remontait avec elle. */
.sa-logo:nth-child(8 of .sa-logo) {
grid-column: 2 / span 2;
}
.sa-logo:nth-child(14 of .sa-logo) {
grid-column: 1 / span 2;
}
/* Lorimer (12e) sur trois demi-colonnes au lieu de deux : son rapport
de 6,4 le rendait plus large que sa case des 178px, il etait donc
bride et n'obeissait plus aux agrandissements. BS le suit et reste
dans la grille, la rangee tenant sur 14 demi-colonnes. */
.sa-logo:nth-child(12 of .sa-logo) {
grid-column: auto / span 3;
}
/* Fin de la rangee du milieu : Broward, Lorimer et BS a intervalles
egaux.
Releve : Sigma s'arrete a 744, la grille a 1452, et les trois logos
totalisent 458px de large. Restent 708 - 458 = 250px a repartir en
trois intervalles, soit 83px chacun.
Les 109px actuels entre Lorimer et BS ne pouvaient pas etre reportes
entre Broward et Lorimer : il aurait fallu pousser BS de 121px alors
qu'il n'a que 69px avant le bord. Broward, lui, ne bouge pratiquement
pas de la place que tu avais validee (827 au lieu de 829). */
.sa-logo:nth-child(11 of .sa-logo) {
position: relative;
left: 55px;
}
.sa-logo:nth-child(12 of .sa-logo) {
position: relative;
left: 93px;
/* remonte de 4px : son pictogramme evide allege le haut du logo */
top: -4px;
}
.sa-logo:nth-child(13 of .sa-logo) {
position: relative;
left: 67px;
/* descendu de 13px : son "BSAVE.IO" en tout petit sous le monogramme
tire le centre optique vers le haut, le monogramme doit donc etre
pose plus bas pour tomber sur la ligne des autres. */
top: 13px;
}
.sa-logo img {
height: var(--h);
width: auto;
max-width: 100%;
/* contain plutot que le fill par defaut : si un logo depasse encore sa
case, il se contient au lieu de se deformer. */
object-fit: contain;
/* 0.86 plutot que 1 : le blanc pur vibre sur une photo, un rien de
retrait le pose sans l'affadir. Passe a 1 au survol. */
opacity: .86;
transition: opacity 250ms ease;
}
.sa-logo img:hover {
opacity: 1;
}
/* Fondu sombre du bas de la photo : degrade vertical, sans bord franc,
qui assoit les logos blancs sans masquer la scene. Pose en couche
propre plutot qu'en filtre sur l'image, pour ne pas toucher au reste
de la section. */
/* Fondu sombre du bas de la photo.
Pose en couche de background par-dessus l'image, et non en
pseudo-element : le ::before etait bien calcule mais jamais peint,
un enfant du conteneur le recouvrant systematiquement.
Un background-image accepte plusieurs couches, la premiere etant la
plus haute : le degrade se superpose donc a la photo sans qu'aucun
enfant ne puisse passer devant, et sans toucher au reste. */
#Brands .space-photo.slide-five {
position: relative;
/* Le conteneur est peint en blanc sous la photo : le moindre pixel non
couvert - bas de section, arrondi de rendu, changement de palier -
ressort en lisere clair. On met le noir du fondu a la place, ainsi
rien ne peut trancher. */
background-color: #0a0a0e;
background-image:
linear-gradient(to bottom,
rgba(10, 10, 14, 0) 38%,
rgba(10, 10, 14, .42) 58%,
rgba(10, 10, 14, .72) 78%,
rgba(10, 10, 14, .86) 100%),
url(brands-boylston-2400.webp);
background-position: center, 63%;
background-repeat: no-repeat, repeat-x;
background-size: cover, cover;
}
#Brands .space-photo.slide-five {
filter: sepia(.28) saturate(1.22) hue-rotate(-8deg) contrast(1.06) brightness(.96);
}
/* Brands : le ticker remonte du bas de la section.
Il collait au bord (0px sous lui) ; sur le fond desormais assombri il
respire mieux legerement decale. On agit sur lui seul, en relatif :
la grille de logos et le reste de la section ne bougent pas. */
#Brands .footer {
position: relative;
bottom: 26px;
}
/* Colley Cooper descendu de 7px.
Correction optique et non geometrique : son "CAPITAL" en petites
capitales espacees, tres clair, pese moins que la ligne du dessus.
Le logo est donc centre au pixel mais parait remonte. On le pose un
peu plus bas pour que l'oeil le lise aligne sur ses voisins. */
.sa-logo:nth-child(19 of .sa-logo) {
position: relative;
top: 7px;
}
/* Global Icons decale d'un demi-centimetre (19px a 96dpi) vers la gauche. */
.sa-logo:nth-child(9 of .sa-logo) {
position: relative;
left: -19px;
}
/* Maison Bourgeat remonte de 4px : sa baseline "LUNETIER - 1879", tres
fine et espacee, tire son centre optique vers le bas. */
.sa-logo:nth-child(18 of .sa-logo) {
position: relative;
top: -4px;
}
/* Rodman Barney descendu de 7px : son filet horizontal et son
"securities" en tres petit sous le nom allegent le bas du logo. */
.sa-logo:nth-child(20 of .sa-logo) {
position: relative;
top: 7px;
}
/* Contact : l'entree active en blanc franc, sans voile.
Le conteneur .placement-content-menu y porte opacity:.6, qui
s'applique a tout le menu : le blanc y virait au gris, ce qui se
lisait comme de la transparence. L'opacite d'un parent ne pouvant
etre annulee par un enfant, on la remet a 1 sur le conteneur et on la
rend aux quatre autres entrees, qui gardent ainsi leur aspect. */
#Contact .placement-content-menu {
opacity: 1;
}
/* !important : Webflow pose un style="opacity:1" en ligne sur chaque
bouton, qu'une regle ordinaire ne peut pas depasser. */
#Contact .content-menu > a:not([href="#Contact"]) {
opacity: .6 !important;
}
#Contact .content-menu > a[href="#Contact"] {
opacity: 1 !important;
}
/* Au survol, l'entree survolee passe au blanc opaque. */
#Contact .content-menu > a:hover {
opacity: 1 !important;
color: #fff;
}
/* ------------------------------------------------------------------
Hero : rattrapage de la sortie des pastilles sur Safari uniquement.
Safari les fait emerger un peu plus loin de la fente que Blink en
fin de course. On les repousse vers la droite pour retrouver le
cadrage de Chrome, qui reste l'etalon.
Le ciblage passe par -webkit-hyphens, propriete que WebKit expose
et que Blink ne reconnait pas : Chrome et Edge ignorent donc tout
ce bloc. Verifie sur place, CSS.supports('-webkit-hyphens','none')
renvoie false dans Chrome.
On agit par position relative et non par transform : IX2 pose les
translations en style inline, un transform d'auteur ne passerait
pas devant sans !important, ce qui casserait l'animation d'entree.
Ordre visuel, de haut en bas : mid = Pinterest, top = Instagram,
key = Apple, bottom = TikTok. Les deux extremes bougent de 5px,
les deux du milieu de 1px. */
@supports (-webkit-hyphens: none) {
/* 4px du reglage commun + 1px de rattrapage Safari. Ce bloc est plus
specifique que la regle de base (#Home), il doit donc porter la valeur
totale et non le seul rattrapage, sinon il l'annule. Les entrees
mid-image et bottom-image sont tombees avec leurs pastilles. */
#Home .social-image-burger.slide-one.top-image,
#Home .social-image-burger.slide-one.key-image {
/* Rattrapage WebKit historique (1px 7px), plus le recalage Safari
du 18 aout 2026 : descendues de 18px ; le retrait lateral de 9px
a ete annule dans la foulee (retour a 1px). Le decalage commun
voyage dans les keyframes de l'animation ; translate s'y ajoute
au lieu de le remplacer. */
translate: 1px 25px;
}
}
/* ------------------------------------------------------------------
Pastille SA du hero, a la place d'Instagram.
Meme construction que la pastille Apple : le PNG ne contient que le
logo sur transparence, le disque blanc est peint en CSS. La bordure
transparente tient lieu du padding de 4px des PNG d'origine, si bien
que le disque peint fait 92px comme les leurs, et non 100px.
Le padding est a 8px et non 10px comme la pomme : le monogramme est
large (ratio 1.95) et se lit optiquement plus petit qu'une forme
compacte a largeur egale. A 8px il occupe 83% du disque, contre 78%
pour la pomme, ce qui les egalise a l'oeil.
Paliers calques sur ceux de .key-image. */
.social-image-burger.slide-one.sa-image {
width: 100px;
height: 100px;
max-width: none;
border: 4px solid transparent;
padding: 8px;
background-color: #fff;
background-clip: padding-box;
border-radius: 50%;
object-fit: contain;
}
@media screen and (min-width: 1920px) {
.social-image-burger.slide-one.sa-image {
width: 110px;
height: 110px;
min-width: 110px;
min-height: 110px;
border-width: 4px;
padding: 9px;
}
}
@media screen and (max-width: 991px) {
.social-image-burger.slide-one.sa-image {
width: 60px;
height: 60px;
border-width: 4px;
padding: 5px;
}
}
@media screen and (max-width: 479px) {
.social-image-burger.slide-one.sa-image {
width: 50px;
height: 50px;
border-width: 2px;
padding: 4px;
}
}
@media screen and (min-width: 1440px) {
.sa-logo-about.landscape.slide-two { max-width: 25%; }
}
@media screen and (min-width: 1920px) {
.sa-logo-about.landscape.slide-two { width: 30%; max-width: 25%; }
}
@media (prefers-reduced-motion: reduce) {
}
/* ------------------------------------------------------------------
Pastille SA bleu marine du hero, a la place de Pinterest.
Meme construction que .sa-image : le PNG ne porte que le monogramme sur
transparence, le disque est peint en CSS. Seul le fond change, #010045,
releve directement sur le logo Staying Alive de la page d'accueil et non
estime a l'oeil.
Le fichier est la declinaison Offwhite. Des quatre fournies, c'est la
seule qui tienne sur ce fond : Transparent n'embarque pas le creme et se
dissout, Blue a une masse #1A3857 trop proche du fond, Orange passe mais
crie. Offwhite garde en prime l'orange et le navy en relief.
Meme geometrie que .sa-image, ratio de monogramme identique. */
.social-image-burger.slide-one.sa-image-navy {
width: 100px;
height: 100px;
max-width: none;
border: 4px solid transparent;
padding: 8px;
background-color: #010045;
background-clip: padding-box;
border-radius: 50%;
object-fit: contain;
}
@media screen and (min-width: 1920px) {
.social-image-burger.slide-one.sa-image-navy {
width: 110px;
height: 110px;
min-width: 110px;
min-height: 110px;
border-width: 4px;
padding: 9px;
}
}
@media screen and (max-width: 991px) {
.social-image-burger.slide-one.sa-image-navy {
width: 60px;
height: 60px;
border-width: 4px;
padding: 5px;
}
}
@media screen and (max-width: 479px) {
.social-image-burger.slide-one.sa-image-navy {
width: 50px;
height: 50px;
border-width: 2px;
padding: 4px;
}
}
/* Pastille SA du hero a la place de TikTok. Meme fond marine que la
premiere, mais declinaison Orange du monogramme : deux pastilles
identiques a trois positions d'ecart se liraient comme une repetition,
la ou l'alternance creme / orange fait serie. Geometrie identique. */
.social-image-burger.slide-one.sa-image-navy-orange {
width: 100px;
height: 100px;
max-width: none;
border: 4px solid transparent;
padding: 8px;
background-color: #010045;
background-clip: padding-box;
border-radius: 50%;
object-fit: contain;
/* Deplacement par translate et non par top/left : la feuille Webflow
impose position:static a ces images dans plusieurs paliers, et top
n'a aucun effet sur un element statique - c'est ce qui faisait que le
decalage tenait en 1512px et pas en 1920px. translate agit quel que
soit le position, et se compose avec le transform que IX2 pose en
ligne au lieu d'entrer en conflit avec lui. */
}
@media screen and (min-width: 1920px) {
.social-image-burger.slide-one.sa-image-navy-orange {
width: 110px;
height: 110px;
min-width: 110px;
min-height: 110px;
border-width: 4px;
padding: 9px;
}
}
@media screen and (max-width: 991px) {
.social-image-burger.slide-one.sa-image-navy-orange {
width: 60px;
height: 60px;
border-width: 4px;
padding: 5px;
}
}
@media screen and (max-width: 479px) {
.social-image-burger.slide-one.sa-image-navy-orange {
width: 50px;
height: 50px;
border-width: 2px;
padding: 4px;
}
}
/* ------------------------------------------------------------------
Hero : le pictogramme (c) du coin bas droit ressortait trop sur la
photo claire. On l'attenue au repos et on lui rend son opacite pleine
au survol du bloc, pour qu'il reste lisible au moment ou l'on va
chercher la mention. L'opacite porte sur l'image seule et non sur
.copyright, qui abrite aussi le texte revele au survol.
Cadre au hero : les autres sections ont leurs propres fonds. */
#Home .copyright.slide-one .image-6 {
opacity: .45;
transition: opacity .35s;
}
#Home .copyright.slide-one:hover .image-6 {
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
#Home .copyright.slide-one .image-6 { transition: none; }
}
/* ------------------------------------------------------------------
Section Ddddd : les deux pastilles qui rejoignent celle d'Apple.
Meme facture qu'elle : le fichier ne porte que la forme sur
transparence, le disque blanc est peint en CSS. On recopie donc
.apple-dddd a l'identique, seul le padding change.
Le monogramme SA a un ratio de 1.95 et se lit optiquement plus petit
qu'une forme compacte a largeur egale : 6% au lieu de 8% le remet a
la meme presence que la pomme. Le (c) est au contraire un disque
plein, qui gagne a etre rentre, d'ou 14%.
Les conteneurs reprennent le dimensionnement de .apple-logo de la
section, dont ils heritent deja par .landscape et .slide-five. */
.insta-image.image-mobile.slide-4.sa-dddd {
width: 100%;
height: auto;
max-width: none;
aspect-ratio: 1 / 1;
padding: 6%;
background-color: #f9f6e9;
background-clip: padding-box;
border-radius: 50%;
object-fit: contain;
}
.insta-image.image-mobile.slide-4.copy-dddd {
width: 100%;
height: auto;
max-width: none;
aspect-ratio: 1 / 1;
padding: 14%;
background-color: #fff;
background-clip: padding-box;
border-radius: 50%;
object-fit: contain;
}
/* Les deux nouveaux conteneurs se calent sur celui d'Apple, qui porte
deja la largeur et le centrage dans la file. */
.sa-logo-dddd.landscape.slide-five,
.copy-logo-dddd.landscape {
perspective: 1px;
justify-content: center;
align-items: center;
display: flex;
}
/* ------------------------------------------------------------------
Libelles des pastilles (Keynote, Studio).
L'attribut title du navigateur ne convenait pas : il attend une bonne
seconde avant d'apparaitre et se place a droite du curseur, ce qui le
poussait hors cadre sur la derniere pastille, collee au bord droit.
On le remplace par une bulle dessinee en CSS : 140ms d'apparition, et
surtout un calage sur le bord droit de la pastille (right: 0), donc la
bulle grandit vers l'interieur de la page et ne peut jamais deborder,
quelle que soit la longueur du mot ou la position dans la file.
L'attribut aria-label prend le relais pour les lecteurs d'ecran. */
[data-bulle] {
position: relative;
}
[data-bulle]::after {
content: attr(data-bulle);
position: absolute;
top: calc(100% + 7px);
right: 0;
z-index: 20;
white-space: nowrap;
font-family: "Helvetica Neue", Arial, sans-serif;
font-size: 11px;
font-weight: 500;
line-height: 1;
letter-spacing: .07em;
text-transform: uppercase;
color: #fff;
background-color: rgba(0, 0, 0, .82);
padding: 5px 8px 4px;
border-radius: 3px;
opacity: 0;
pointer-events: none;
transition: opacity .14s;
}
[data-bulle]:hover::after,
[data-bulle]:focus-visible::after {
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
[data-bulle]::after { transition: none; }
}
/* ------------------------------------------------------------------
Agency : les pastilles Apple et SA rejoignent le pied de section, a
gauche du (c). Le bloc .copyright empile ses enfants ; on le passe en
ligne, aligne a droite, pour que la file se termine sur le (c) sans
deplacer celui-ci d'un pixel.
.message-c-footer, qui porte la mention revelee au survol, est en
position absolue : il n'entre pas dans le flux et n'est donc pas
affecte par le passage en ligne. */
#Agency .copyright.slide-video,
#Contact .copyright.slide-one {
flex-direction: row;
justify-content: flex-end;
align-items: center;
}
.social-footer {
display: flex;
flex-direction: row;
align-items: center;
gap: 6px;
/* Le (c) est reduit a .725 : sa boite fait toujours 50px mais le cercle
n'en occupe que 36, ce qui laisse ~7px de vide de chaque cote et
creusait l'ecart avec la pomme. Le SA, lui, deborde de sa boite de
3.5px puisqu'il est a 1.14. On resorbe la difference par une marge
negative, pour que les deux intervalles se lisent pareil. */
margin-right: -4px;
}
/* Les pastilles tiraient leur largeur d'un pourcentage du groupe qu'elles
occupaient sous le menu ; dans ce pied de section elles s'ecrasaient a
quelques pixels. On les fixe au calibre du (c) voisin, 50px, pour que la
file soit d'un seul tenant. */
.social-footer > a {
flex: 0 0 auto;
position: relative;
width: 50px;
height: 50px;
min-width: 50px;
display: flex;
justify-content: center;
align-items: center;
}
.social-footer > a > img {
width: 100%;
height: 100%;
max-width: none;
object-fit: contain;
}
/* Les deux calques de fond du gabarit Webflow (les ellipses qui s'echangent
au survol) n'ont plus lieu d'etre : le PNG porte deja son disque. */
.social-footer > a > img.bg-insta,
.social-footer > a > img.bg-insta-white,
.social-footer > a > img.bg-pinterest,
.social-footer > a > img.bg-pinterest-white {
display: none;
}
/* En pied de page la bulle n'a pas la place de descendre : on la passe
au-dessus, toujours calee a droite pour ne pas sortir du cadre. */
.social-footer > [data-bulle]::after {
top: auto;
bottom: calc(100% + 7px);
}
/* Le pictogramme (c) du pied se cale sur le calibre des pastilles voisines
pour que la file soit reguliere, et devient l'ancre de sa propre bulle. */
#Agency .c-footer-skate.slide-vid-o {
position: relative;
width: 50px;
height: 50px;
min-width: 50px;
display: flex;
justify-content: center;
align-items: center;
}
#Agency .c-footer-skate.slide-vid-o > img {
width: 100%;
height: 100%;
object-fit: contain;
}
#Agency .c-footer-skate.slide-vid-o[data-bulle]::after {
top: auto;
bottom: calc(100% + 7px);
}
/* Le disque d'Apple change d'epaisseur de bordure selon le palier, ce qui
fait varier son diametre peint. Sans ces deux paliers, le disque de SA
restait plus large que celui d'a cote entre 1440 et 1920px. */
@media screen and (min-width: 1440px) {
.insta-image.image-mobile.slide-4.sa-dddd { border-width: 6px; }
}
@media screen and (min-width: 1920px) {
.insta-image.image-mobile.slide-4.sa-dddd { border-width: 4px; }
}
/* ------------------------------------------------------------------
Brands : les trois pastilles sous le menu.
Elles montaient jusqu'a mordre le filet du menu, qui finit a 9px
au-dessus d'elles. On double la respiration.
Les trois fichiers sont desormais des disques noirs dans lesquels la
forme est percee a jour : la couleur visible est celle du fond de
l'![]()
, donc pilotable au survol sans second fichier. Blanc au repos,
rouge de la section au survol - #ff2600, releve sur le menu actif de
Brands et non estime. */
/* Les pastilles logees dans un menu - Brands, Agency - suivent son etat :
elles descendent avec le panneau deploye et remontent avec lui.
C'est ce que faisait Webflow, avec un translate3d de 14vh pose en style
en ligne. On reprend le principe en l'accrochant a la classe d'etat,
avec la meme course que le trait et la meme courbe : les trois elements
bougent ensemble. !important est ici la consequence du style inline
laisse par IX2, pas un raccourci de specificite. */
.sa-menu .social {
transform: translateY(0) !important;
transition: transform 900ms cubic-bezier(.22, .61, .36, 1);
}
.sa-menu.sa-menu--ferme .social {
transform: translateY(calc(-1 * var(--sa-h-panneau, 131px))) !important;
}
#Brands .social.slide-six {
margin-top: 26px;
}
@media (prefers-reduced-motion: reduce) {
.sa-menu .social { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
}
/* Pied d'Agency : calage optique des trois formes.
Le monogramme a un ratio de 1.95 : a largeur egale il ne remplit qu'un
quart de la hauteur de sa boite et se lit plus petit que ses voisins. Le
(c) fait l'inverse, c'est un disque qui occupe tout le cadre. On corrige
par une mise a l'echelle, qui ne touche ni au flux ni aux gouttieres. */
.social-footer > a[data-bulle="Studio"] > img.social-image-burger {
transform: scale(1.14);
}
#Agency .c-footer-skate.slide-vid-o > img {
transform: translate(5px, -2px) scale(.725);
}
/* Les trois formes sont deja centrees geometriquement sur la meme ligne,
mais la pomme paraissait basse : son centre de masse tombe a 58.3% de sa
hauteur - la feuille monte, la masse du fruit reste en bas - contre 50%
pour le monogramme et le (c). Le repere retenu est le corps de la pomme
seul : le profil du fichier montre la feuille de 0 a 23% de la hauteur,
puis un etranglement a 37px de large, puis le fruit. Le centre de ce
corps tombe a 61.5% du cadre, d'ou 11.5% de 50px a rattraper. On aligne
ainsi les centres optiques et non les boites. */
.social-footer > a[data-bulle="Keynote"] > img.social-image-burger {
transform: translateY(-6px);
}
/* Le (c) porte desormais sa propre bulle : la mention qui glissait au
survol fait doublon, et c'est elle qui posait un probleme de lisibilite
sur les fonds clairs. On la retire dans les deux sections concernees.
Le texte reste dans le document pour les lecteurs d'ecran via les
aria-label des pastilles. */
#Agency .message-c-footer.slide-vid-o,
#Brands .message-c-footer.slide-five.we-did {
display: none;
}
/* Ddddd : comme dans Agency et Brands, le (c) porte sa bulle, la mention
qui glissait au survol fait double emploi. */
#Ddddd .message-c-footer.slide-five {
display: none;
}
/* Le (c) de Ddddd est un et non un
: il ne recoit pas le
dimensionnement des deux pastilles voisines et ne fait que 60px de haut
contre 72. Comme sa bulle se cale sur 100% de son ancre, elle s'ouvrait
6px plus haut que les autres.
On l'etire a la hauteur de la ligne plutot que de coder 72px en dur :
les trois ancres finissent alors au meme niveau a tous les paliers, et
l'image reste centree dedans, sa taille ne bouge pas. */
#Ddddd .link-footer-skate.slide-five > .insta-logo.landscape[data-bulle] {
align-self: stretch;
display: flex;
justify-content: center;
align-items: center;
}
/* ------------------------------------------------------------------
Contact : meme pied qu'Agency - les formes seules, sans disque - mais
dans la couleur du menu de la section, qui est blanc, et non en noir.
Les trois fichiers sont du noir pur sur transparence : invert(1) les
rend donc blanc pur, sans second jeu d'images a maintenir ni masque
CSS. Rien d'autre n'est affecte, les fichiers n'ont pas d'autre teinte.
Les reglages d'echelle et de calage optique poses pour Agency portent
sur .social-footer sans prefixe de section : Contact en herite deja,
il n'y a que le (c) a rattraper ici. */
/* Les trois formes sont livrees dans le sable du menu burger, #f0e2bc,
releve sur .gros-trait-burger de la section. Un filtre n'aurait pas
permis d'atteindre cette teinte depuis du noir : invert donne du blanc,
et le reste ne se retrouve qu'a l'approximation. Elles reprennent aussi
l'opacite du burger, 0.72, pour se fondre de la meme facon sur la photo. */
#Contact .social-footer > a > img.social-image-burger,
#Contact .c-footer-skate.slide-1 > img {
opacity: .72;
}
/* Le (c) porte sa bulle : la mention qui glissait au survol fait doublon,
comme dans les trois autres sections. */
#Contact .copyright.slide-one > .legal-copyright.slide-one {
display: none;
}
#Contact .c-footer-skate.slide-1 {
position: relative;
width: 50px;
height: 50px;
min-width: 50px;
display: flex;
justify-content: center;
align-items: center;
}
#Contact .c-footer-skate.slide-1 > img {
width: 100%;
height: 100%;
/* Une regle amont plafonne cette image a 75% de sa boite : width:100% ne
suffit pas a la debrider, le pictogramme sortait a 27px de large la ou
Agency en fait 36. */
max-width: none;
object-fit: contain;
transform: translate(5px, -2px) scale(.725);
}
#Contact .c-footer-skate.slide-1[data-bulle]::after {
top: auto;
bottom: calc(100% + 7px);
}
/* About : le (c) porte sa bulle, la mention qui glissait au survol fait
doublon. Deux blocs la portent dans cette section, l'un pour le bandeau
vert, l'autre pour la variante claire ; on neutralise les deux. */
#About .message-c-footer.slide-two,
#About .message-c-footer.slide-five.about {
display: none;
}
/* Les deux pastilles sont dans un bandeau clair : la bulle sombre s'ouvre
vers le haut pour ne pas deborder du bandeau. */
#About .link-footer-skate > [data-bulle]::after,
#About .c-footer-skate.slide-2[data-bulle]::after {
top: auto;
bottom: calc(100% + 7px);
}
#About .c-footer-skate.slide-2 {
position: relative;
}
/* Le decalage des pastilles voyage dans l'animation elle-meme.
Il etait porte par translate, en remplacement de top/left que la feuille
Webflow annulait en repassant ces images en position:static. Mais le
resultat n'est toujours pas au rendez-vous sur Safari, et je n'ai aucun
moyen de l'y observer. On cesse donc de dependre d'une propriete de
positionnement : une animation d'auteur passe devant tout, y compris le
transform que IX2 laisse en ligne, sur tous les moteurs. Le point
d'arrivee porte le decalage - 8px a droite, 36px vers le bas - ajoute
aux 70% de la position d'origine. */
@keyframes sa-pastille-entre {
/* 500% : depart entierement hors ecran a droite (280% laissait la
pastille visible, l'entree se lisait comme un simple glissement). */
from { transform: translate3d(500%, 0, 0) scale(.93); }
to { transform: translate3d(calc(70% + 19px), 36px, 0) scale(.93); }
}
/* Resserre l'espace entre les deux pastilles : la SA remonte vers la
pomme. translate se compose avec le transform anime, quel que soit
le moteur. */
#Home .social-image-burger.slide-one.sa-image-navy-orange {
translate: 0 -11px;
}
/* Rattrapage Safari du SA. Ce bloc doit rester APRES la regle commune
ci-dessus : a specificite egale, c'est l'ordre du fichier qui tranche,
et place plus haut il perdait - les deux pastilles se collaient, la
pomme descendant seule de 25px. La valeur est totale : l'ecart de -6
par rapport a la pomme (25 - 6 = 19), pas un delta a ajouter. */
@supports (-webkit-hyphens: none) {
#Home .social-image-burger.slide-one.sa-image-navy-orange {
translate: 0 14px;
}
}
/* L'entree ne se joue qu'une fois Home POSEE a l'ecran, pas avant :
fp-completely, que fullPage n'accorde qu'a la fin du defilement.
Declenchee au depart du scroll (.active / .sa-en-vue), l'animation se
consommait pendant le glissement et l'on arrivait devant des pastilles
deja en place.
fill:both fait le reste : avant l'arrivee (et pendant les delais en
cascade) les pastilles attendent hors champ, apres quoi elles gardent
leur point de chute - 7px a droite, 36px plus bas que le repos IX2,
reduites de 7%. */
/* Deux conditions, et pas une de plus :
- Home visee par le defilement (.active / .sa-en-vue, posees des le
DEPART du scroll, pas a la fin) ;
- le menu au bout de sa course d'ouverture (sa-menu-fini, pose sur
par le script des menus, jamais retire).
Sur le chemin splash vers HP, le menu se deploie pendant le glissement
et les pastilles enchainent des sa fin de course. */
/* Les delais vivent DANS le raccourci : ecrits a part, ils etaient
ecrases par le delai implicite (0s) du raccourci, plus specifique -
les deux pastilles partaient ensemble. */
html.sa-menu-fini #Home.active .social-image-burger.slide-one.key-image,
html.sa-menu-fini #Home.sa-en-vue .social-image-burger.slide-one.key-image {
animation: sa-pastille-entre 1000ms cubic-bezier(.23, 1, .32, 1) 0ms both;
}
html.sa-menu-fini #Home.active .social-image-burger.slide-one.sa-image-navy-orange,
html.sa-menu-fini #Home.sa-en-vue .social-image-burger.slide-one.sa-image-navy-orange {
animation: sa-pastille-entre 1000ms cubic-bezier(.23, 1, .32, 1) 300ms both;
}
/* Tant que les conditions ne sont pas reunies, l'animation n'existe pas
et le transform IX2 en ligne placerait les pastilles : on les masque
pour que ni l'attente ni le retrait ne se voient. */
#Home:not(.active):not(.sa-en-vue) .social-image-burger.slide-one.key-image,
#Home:not(.active):not(.sa-en-vue) .social-image-burger.slide-one.sa-image-navy-orange,
html:not(.sa-menu-fini) #Home .social-image-burger.slide-one.key-image,
html:not(.sa-menu-fini) #Home .social-image-burger.slide-one.sa-image-navy-orange {
opacity: 0;
}
/* Preference systeme respectee : tout est en place d'emblee, sans mouvement.
Le point de chute des pastilles est alors pose en dur - !important pour
passer devant le transform IX2 en ligne - et le masquage hors champ saute. */
@media (prefers-reduced-motion: reduce) {
#Home .all-trait > .sa-menu-trait.idk,
#Home .content-menu,
#Home .social-image-burger.slide-one.key-image,
#Home .social-image-burger.slide-one.sa-image-navy-orange {
animation: none;
}
#Home .social-image-burger.slide-one.key-image,
#Home .social-image-burger.slide-one.sa-image-navy-orange {
transform: translate3d(calc(70% + 19px), 36px, 0) scale(.93) !important;
opacity: 1;
}
}
/* Contact : geometrie et couleurs de son burger. Ses classes ont ete
renommees lors de la reconstruction, avant que les six menus ne soient
unifies ; l'animation est desormais commune, seul l'habillage reste ici. */
#Contact .sa-menu-zone {
flex-direction: column;
align-items: flex-end;
display: flex;
}
#Contact .sa-menu-barre,
#Contact .sa-menu-barre-fine {
height: 35px;
min-height: 35px;
max-height: 35px;
margin: 0 24px 12px 0;
background-color: #f0e2bc;
opacity: .72;
}
#Contact .sa-menu-barre {
width: 175px;
min-width: 175px;
max-width: 175px;
}
#Contact .sa-menu-barre-fine {
width: 150px;
min-width: 150px;
max-width: 150px;
}
#Contact .sa-menu-trait {
background-color: #f0e2bc;
opacity: .72;
}
/* Le burger de Contact aux paliers mobiles de Webflow : ses barres ont
ete renommees et ne recevaient plus les tailles de .gros-trait-burger
(75/65 x 15 sous 991, 100/80 x 20 sous 767, 75/65 x 15 sous 479). Elles
restaient a 175 x 35, et le panneau du menu - cale a gauche du bloc,
qui n'est pas en flex - se retrouvait 100px trop a gauche du trait.
Constate sur iPhone le 18 aout 2026. */
@media screen and (max-width: 991px) {
#Contact .sa-menu-barre,
#Contact .sa-menu-barre-fine {
height: 15px;
min-height: 15px;
max-height: 15px;
margin-bottom: 5px;
}
#Contact .sa-menu-barre {
width: 75px;
min-width: 75px;
max-width: 75px;
}
#Contact .sa-menu-barre-fine {
width: 65px;
min-width: 65px;
max-width: 65px;
}
}
@media screen and (max-width: 767px) {
#Contact .sa-menu-barre,
#Contact .sa-menu-barre-fine {
height: 20px;
min-height: 20px;
max-height: 20px;
}
#Contact .sa-menu-barre {
width: 100px;
min-width: 100px;
max-width: 100px;
}
#Contact .sa-menu-barre-fine {
width: 80px;
min-width: 80px;
max-width: 80px;
}
}
@media screen and (max-width: 479px) {
#Contact .sa-menu-barre,
#Contact .sa-menu-barre-fine {
height: 15px;
min-height: 15px;
max-height: 15px;
}
#Contact .sa-menu-barre {
width: 75px;
min-width: 75px;
max-width: 75px;
}
#Contact .sa-menu-barre-fine {
width: 65px;
min-width: 65px;
max-width: 65px;
}
}
/* ==================================================================
LES SIX MENUS - un seul mecanisme
==================================================================
Les interactions Webflow tenaient leur propre etat ouvert/ferme, en
memoire, illisible depuis l'exterieur. Des lors que Contact etait
pilote a la main, deux compteurs coexistaient et divergeaient : un
menu s'ouvrait sans que son texte apparaisse, parce que IX2 commandait
un display correspondant a l'etat qu'il croyait etre le sien.
Les six menus sont donc sortis de son emprise : .placement-content-menu
et .trait-burger renommes, data-w-id retires, trait deplace apres le
panneau. Un seul etat, une seule animation, plus aucune divergence.
Les barres du burger gardent leurs classes d'origine : leurs couleurs
et leurs effets de survol ne sont pas concernes.
================================================================== */
/* Le trait est reste dans la zone des barres, sa place d'origine : le
sortir du flux pour le placer sous le panneau poussait tout ce qui suit,
et dans Brands les trois pastilles se retrouvaient au milieu de la page.
Il descend donc visuellement, comme le faisait Webflow - mais de la
hauteur mesuree du panneau, pas d'une constante. */
.sa-menu-trait {
width: 175px;
height: 6px;
max-width: 100%;
margin: 0 24px 0 0;
align-self: flex-end;
transform: translateY(var(--sa-h-panneau, 131px));
transition: transform 900ms cubic-bezier(.22, .61, .36, 1);
}
.sa-menu-panneau {
/* Geometrie reprise de .placement-content-menu, dont le renommage a
laisse le panneau sans regle : il flottait 44px a droite des barres
au lieu d'aligner son bord gauche sur le leur. Meme largeur que les
barres et meme gouttiere de 24px, donc memes bords. */
width: 175px;
align-self: flex-end;
/* 8px de marge donnent 12px d'air au-dessus du premier mot : le lien
deborde de 4px vers le haut. C'est la meme respiration que sous le
dernier mot, ou le trait est a 12px. Le menu est ainsi cadre pareil
en haut et en bas. */
margin: 8px 24px 0 0;
opacity: 1;
/* Le premier lien du menu deborde de 9px au-dessus de son panneau : un
rognage au bord exact lui coupait le haut. On laisse 24px de marge en
haut, le devoilement ne se joue que par le bas. */
clip-path: inset(-24px 0 0 0);
transform: translateY(0);
transition: opacity 200ms linear,
clip-path 900ms cubic-bezier(.22, .61, .36, 1),
transform 900ms cubic-bezier(.22, .61, .36, 1);
}
/* Etat ouvert. La duree vaut aussi pour l'arrivee sur le hero, qui
emprunte cette meme transition : un seul reglage pour les deux. */
.sa-menu-panneau {
opacity: 1;
/* Bord bas du rognage a -12px : le trait finit 12px sous le dernier
mot (l'air ajoute par le script), et le bord du devoilement, qui
s'arretait pile sous le mot, prenait 12px de retard sur lui en fin
de course - une bande masquee au-dessus du trait, "Contact" ne se
devoilant qu'apres son passage. Le bord suit maintenant le trait
d'un bout a l'autre. Constate sur iPhone le 18 aout 2026. */
clip-path: inset(-24px 0 -12px 0);
transform: translateY(0);
transition: opacity 300ms linear,
clip-path 900ms cubic-bezier(.22, .61, .36, 1),
transform 900ms cubic-bezier(.22, .61, .36, 1);
}
.sa-menu-trait {
transition: transform 900ms cubic-bezier(.22, .61, .36, 1);
}
.sa-menu.sa-menu--ferme .sa-menu-panneau {
opacity: 0;
clip-path: inset(-24px 0 100% 0);
transform: translateY(-14px);
transition: opacity 900ms cubic-bezier(.22, .61, .36, 1),
clip-path 900ms cubic-bezier(.22, .61, .36, 1),
transform 900ms cubic-bezier(.22, .61, .36, 1);
}
/* Replie, le trait revient a sa place naturelle, juste sous les barres. */
.sa-menu.sa-menu--ferme .sa-menu-trait {
transform: translateY(0);
}
/* Couleur du trait par section : elle venait de .trait-burger, que le
renommage a laisse sans regle. Valeurs relevees sur le rendu d'origine. */
#Home .sa-menu-trait { background-color: #fff1e3; opacity: .8; }
#About .sa-menu-trait { background-color: #18e7cf; opacity: 1; }
#Agency .sa-menu-trait { background-color: #fff; opacity: .8; }
#Ddddd .sa-menu-trait { background-color: #f8ba00; opacity: 1; }
#Brands .sa-menu-trait { background-color: #fff; opacity: .8; }
@media (prefers-reduced-motion: reduce) {
.sa-menu-trait,
.sa-menu-panneau {
transition: none;
}
}
/* ------------------------------------------------------------------
Bandeaux de bas de section : apparition garantie.
Webflow les revele sur un declencheur « entre dans la vue », qui suppose
un defilement. Or fullPage saute d'une section a l'autre : en arrivant
par un clic du menu, le declencheur ne part jamais et le bandeau reste a
opacite 0. Au defilement il fonctionnait, d'ou une apparition capricieuse.
On l'accroche a la classe .active que fullPage pose sur la section
courante, valable quel que soit le mode d'arrivee. !important parce que
IX2 laisse une opacite en style en ligne. */
/* Le bandeau et tout ce qu'il contient - texte, pastilles, (c) - forment
un seul bloc : ils apparaissent ensemble ou pas du tout.
Webflow anime chaque enfant separement, avec ses propres delais : le
texte se revelait avant la barre turquoise. On neutralise donc leurs
animations individuelles - opacite et flou, tous deux poses en style en
ligne - et on ne garde qu'une seule apparition, celle du conteneur.
Elle est accrochee a .active, la classe que fullPage pose sur la section
courante : le bandeau reste masque tant qu'on n'y est pas, puis tout
monte d'un seul mouvement. */
/* Les enfants du bandeau sont forces a opacite pleine, en !important :
l'animation Webflow d'origine - reveillee par le declencheur du titre,
qu'on a du conserver - cible ces elements par classe et pose des
opacites en ligne. Sans animation de notre cote, le !important est
sans danger et la rend inoperante. */
.section .align-items > * {
opacity: 1 !important;
filter: none !important;
visibility: visible !important;
/* et aucun deplacement : l'opacite etait verrouillee mais Webflow
faisait encore glisser les elements par transform. */
transform: none !important;
}
@media (prefers-reduced-motion: reduce) {
.section .align-items { transition: none; }
}
/* Hero : les entrees du menu passent a l'orange au survol, #fe4828, celui
du splash et de la page /key. Les barres du burger gardent leur creme
d'origine, seul le mot survole change. */
/* Hero : deux etats seulement, le creme au repos et l'orange au survol.
Webflow a une interaction de survol sur ces liens : elle pose une
couleur en style en ligne et, quand la souris sort, rejoue vers son
ancienne teinte - on voyait donc passer un orange intermediaire avant
le retour au creme. On fixe les deux etats, ce qui ne laisse plus de
place a une valeur intercalaire. */
#Home .content-menu > a,
#Home .content-menu > a strong {
/* Blanc pur, plus le creme #fff1e3 : demande du 18 aout 2026. */
color: #fff !important;
transition: color .18s ease;
}
/* Les entrees du menu Home portaient une opacite Webflow de .6 : creme
translucide sur fond clair, illisible. Opacite pleine en permanence. */
#Home .content-menu > a {
opacity: 1 !important;
}
#Home .content-menu > a:hover,
#Home .content-menu > a:hover strong,
#Home .content-menu .w-button:hover {
color: #fe4828 !important;
}
/* ------------------------------------------------------------------
Contour parasite autour des pastilles.
Webflow empile sous chaque pastille une ou deux images d'ellipse, qui
lui servaient de fond et de survol. Nos pastilles portent desormais
leur propre disque - peint dans le PNG et colore par background-color -
si bien que ces ellipses ne font plus que depasser d'un cheveu et
dessiner un anneau clair autour.
On les retire. Le survol ne repose plus sur elles mais sur la couleur
de fond de l'image, cf. les regles de Brands et About plus haut. */
#About .sa-logo-about > img.bg-insta,
#About .sa-logo-about > img.bg-insta-white,
#About .apple-logo > img.bg-insta,
#About .apple-logo > img.bg-insta-white,
#Brands .social-burger > img.bg-insta,
#Brands .social-burger > img.bg-insta-white,
#Brands .social-burger > img.bg-pinterest,
#Brands .social-burger > img.bg-pinterest-white,
#Brands .social-burger > img.bg-tik-tok,
#Brands .social-burger > img.bg-tik-tok-white {
/* opacity et non display : cette ellipse est l'element qui donne sa
taille au conteneur de la pastille. La sortir du flux fait s'effondrer
la pastille a 0x0. On la rend invisible en lui laissant sa place.
!important : les interactions de survol posent une opacite en ligne
sur ces ellipses et les faisaient reapparaitre en contour epais. */
opacity: 0 !important;
}
/* Ddddd : calibre et respiration des trois pastilles.
La bordure transparente qui les rentrait a ete retiree avec celles des
disques noirs ; les deux disques remplissaient alors toute leur boite et
depassaient le (c). On les rentre a nouveau, et on ecarte les trois. */
#Ddddd .link-footer-skate.slide-five {
gap: 10px;
}
/* Le (c) n'occupe pas toute sa boite : son image y est deja rentree. A
bordure egale les deux disques paraissaient donc plus gros. On les
rentre de 4px, ce qui les amene a 64px de disque visible - la taille du
(c) une fois sa propre marge deduite. */
#Ddddd .insta-image.image-mobile.slide-4.apple-dddd,
#Ddddd .insta-image.image-mobile.slide-4.sa-dddd {
border: 4px solid transparent;
background-clip: padding-box;
}
/* ==================================================================
PASTILLES D'ABOUT ET DE BRANDS - disque vectoriel
==================================================================
Fin de la saga du lisere. Le disque etait peint dans le bitmap : son
bord antialiase laissait toujours transparaitre le fond blanc, quel
que soit le retrait - six reglages de padding n'y ont rien fait, et
pour cause : le probleme n'etait pas reglable en decalant le fond.
Le disque est desormais un pseudo-element CSS, net a toute echelle.
La forme est decoupee par mask-image dans les fichiers *-plain, dont
seul l'alpha compte ; sa couleur vient du CSS, ce qui garde le survol
colore sans second jeu d'images. Les ![]()
d'origine restent en place
a opacite nulle : ce sont elles qui dimensionnent les conteneurs. */
#Brands .social-burger,
#About .sa-logo-about,
#About .apple-logo {
position: relative;
}
#Brands .social-burger img,
#About .sa-logo-about img,
#About .apple-logo img {
opacity: 0;
}
/* Brands : mes retouches successives avaient reduit ces images a 2px,
ce qui ecrasait les pastilles. Taille restituee explicitement. */
#Brands .social-burger img.social-image-burger {
width: 52px;
height: 52px;
padding: 0;
border: 0;
}
/* Le disque : calé sur la hauteur du conteneur, carre, centre. */
#Brands .social-burger::before,
#About .sa-logo-about::before,
#About .apple-logo::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
height: 100%;
aspect-ratio: 1 / 1;
transform: translate(-50%, -50%);
background-color: #000;
border-radius: 50%;
}
/* La forme est portee par l'![]()
elle-meme, pas par ::after : la bulle
d'info occupe deja ::after sur ces memes elements, et les deux regles
fusionnaient - la bulle apportait son opacity:0 de repos, la forme
etait la mais invisible. C'etait la cause des deux echecs du vectoriel.
L'image sert de toile : son bitmap est pousse hors cadre par
object-position, son fond porte la couleur, le masque decoupe la forme.
Le survol ne change que la couleur de fond. */
#Brands .social-burger img.social-image-burger,
#About .sa-logo-about img.sa-about-image,
#About .apple-logo img.apple-image {
opacity: 1;
/* Meme geometrie que le disque ::before : dans About, l'image restait
dans le flux et s'affichait sous l'ellipse invisible qui dimensionne
le conteneur - le monogramme sortait du disque. */
position: absolute;
top: 50%;
left: 50%;
/* Webflow pose bottom:0 sur .insta-image.image-mobile sous 767px : le
bas l'emportait sur le haut et la forme remontait d'une demi-
pastille (vu sur les copies mobiles d'About). */
bottom: auto;
right: auto;
height: 100%;
width: auto;
aspect-ratio: 1 / 1;
transform: translate(-50%, -50%);
object-fit: none;
object-position: -9999px -9999px;
background-color: #fff;
-webkit-mask-image: var(--sa-forme);
mask-image: var(--sa-forme);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: var(--sa-part, 62%);
mask-size: var(--sa-part, 62%);
transition: background-color .4s;
}
/* Quelle forme sur quelle pastille. Le monogramme est large, il lui faut
plus de place pour peser autant que la pomme a l'oeil. */
#Brands .social-burger[data-bulle="Keynote"],
#About .apple-logo { --sa-forme: url(icons/apple-plain.png); --sa-part: 56%; }
#Brands .social-burger[data-bulle="Studio"],
#About .sa-logo-about { --sa-forme: url(icons/sa-plain.png); --sa-part: 78%; }
#Brands .social-burger[data-bulle^="All rights"]
{ --sa-forme: url(icons/copy-forme.png); --sa-part: 60%; }
/* Survols : le rouge de Brands, le vert du bandeau d'About. */
#Brands .social-burger:hover img.social-image-burger,
#Brands .social-burger:focus-visible img.social-image-burger {
background-color: #ff2600;
}
#About .sa-logo-about:hover img.sa-about-image,
#About .apple-logo:hover img.apple-image,
#About .sa-logo-about:focus-visible img.sa-about-image,
#About .apple-logo:focus-visible img.apple-image {
background-color: #18e7cf;
}
@media (prefers-reduced-motion: reduce) {
#Brands .social-burger img.social-image-burger,
#About .sa-logo-about img.sa-about-image,
#About .apple-logo img.apple-image { transition: none; }
}
/* Bandeau de bas de section : il entre d'un seul bloc.
Le bandeau, les pastilles, le texte et le (c) partagent une seule
apparition - celle du conteneur. Les enfants sont forces a opacite
pleine (regle plus haut) et n'ont donc aucun etat propre : ils vivent
dans l'opacite du parent, rien ne peut etre la avant lui.
Accroche a .active, la classe que fullPage pose sur la section
courante, valable au defilement, au clic du menu et au chargement
direct. Les !important repondent aux styles qu'IX2 laisse en ligne. */
/* L'entree du bandeau est une ANIMATION, pas une transition : sur cet
element, les transitions demarrent puis restent figees a t=0 - deux
CSSTransition "running" a currentTime 0, constatees a l'inspection.
Et une transition en cours prime sur tout, meme un inline !important :
c'etait le fantome qui maintenait l'opacite a 0 depuis deux jours.
Consequence : pas de !important sur l'opacite de repos, il battrait
notre propre animation (cascade : author !important > animations).
L'inline opacity:1 que IX2 laisse apres son passage ne gene que les
sections hors ecran, donc invisibles de toute facon ; pendant l'entree
et une fois en place, l'animation et son fill l'emportent. */
/* Bandeau : AUCUN effet, aucune condition. Il est la, point - au reload,
au clic, au scroll, sur tout navigateur. La purge JS arrache les styles
en ligne que Webflow tente de poser, les !important verrouillent. */
.section .align-items {
opacity: 1 !important;
filter: none !important;
visibility: visible !important;
display: flex !important;
}
/* LE fin mot de la saga : le fond turquoise n'existait NULLE PART en
CSS - seule l'animation Webflow le posait, en style en ligne, pendant
son revele au scroll. Sans scroll, pas de timeline, pas de vert : le
texte flottait sur la photo et le bandeau semblait absent, opacite
pourtant a 1 des la premiere milliseconde (chrono du 18 aout).
On grave la couleur dans la feuille, ou elle aurait toujours du etre. */
#About .align-items {
background-color: #18e7cf !important;
}
.section .align-items {
transform: none !important;
}
/* Le parent du bandeau est lui aussi anime par Webflow : l'opacite d'un
parent emporte tout son contenu, verrous compris. On fige toute la
chaine - aucun effet ne doit subsister sur ce bloc. Le conteneur de
section d'About est inclus : son revele en fondu emportait le bandeau ;
les animations du titre, portees par ses enfants, ne sont pas touchees. */
#About .space-photo,
.section .footer-skate,
.section .content-skate {
opacity: 1 !important;
filter: none !important;
transform: none !important;
}
@media (prefers-reduced-motion: reduce) {
.section .align-items { opacity: 1; }
.section.sa-en-vue .align-items { animation: none; }
}
/* About : le (c) du bandeau s'aligne sur l'axe vertical du burger menu.
Mesure : centre du burger a 142px du bord droit, le (c) etait a 76px.
Le decalage recale les deux centres au pixel. */
#About .c-footer-skate.slide-2 {
/* 132 et non 66 : le parent flex redistribue la moitie de la marge,
chaque pixel ne deplace le (c) que d'un demi. Verifie a la mesure. */
margin-right: 132px;
}
/* About, bandeau : geometrie posee en dur apres un effondrement en
cascade - l'ellipse en % de l'ancre, l'ancre dimensionnee par
l'ellipse : tout tombait a zero, pastilles et (c) compris.
Les ancres font 52px comme les pastilles de Brands a cet ecran, le (c)
54px comme a l'origine, et le texte est centre sur LA PAGE par position
absolue - il etait cale a gauche par le flex, a 340px du centre. */
#About .sa-logo-about,
#About .apple-logo {
width: 52px;
height: 52px;
min-width: 52px;
max-width: none;
flex: 0 0 auto;
}
#About .sa-logo-about > img.bg-insta,
#About .apple-logo > img.bg-insta {
width: 100%;
height: 100%;
}
/* la forme remplit son disque : Webflow plafonne ces images a 75%. */
#About .sa-logo-about img.sa-about-image,
#About .apple-logo img.apple-image {
max-width: none;
}
#About .link-footer-skate {
flex: 0 0 auto;
/* le groupe ne colle plus au bord gauche du bandeau */
margin-left: 104px;
}
#About .c-footer-skate.slide-2 img {
width: 54px !important;
height: 54px;
max-width: none;
}
#About .align-items {
position: relative;
}
#About .desc-footer-skate {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) !important;
width: max-content;
max-width: 82%;
}
/* About : la pomme se rapproche du SA. Le SA ne bouge pas - c'est la
pomme qui vient vers lui par une marge negative ; les ancres font 95px
pour 52 de disque, l'ecart visuel etait de ~43px, le voici reduit. */
#About .apple-logo {
/* 8px d'ecart : le -26px datait des ancres de 95px, il faisait
chevaucher les disques depuis leur passage a 52px. */
margin-left: 8px;
}
/* Splash d'ouverture sur mobile : l'animation etait trop petite dans
l'ecran en portrait. +26%, par scale pour ne toucher ni au flux ni au
cadrage de la video. Le laptop n'est pas concerne. */
@media screen and (max-width: 767px) {
#hero .background-video-2 {
transform: scale(0.72);
transform-origin: center center;
}
}
/* Le trait sous le menu suit la largeur des barres du burger a chaque
palier - il etait fige a 175px et debordait largement sur mobile.
Valeurs relevees sur .gros-trait-burger dans la feuille Webflow. */
@media screen and (max-width: 991px) {
.sa-menu-trait { width: 75px; }
}
@media screen and (max-width: 767px) {
.sa-menu-trait { width: 100px; }
}
@media screen and (max-width: 479px) {
.sa-menu-trait { width: 75px; }
}
/* Home sur mobile : le burger et le trait restent beiges (#fff1e3, comme
les barres Webflow des 991px), avec le deroule commun aux six menus.
Seul le texte change de couleur : le beige et le blanc se perdent dans
le ciel clair de la photo, le noir criait. Marron kaki preleve dans le
terrain de la photo (moyenne des bruns du sol, #79462b / #633e2b),
demande du 18 aout 2026. */
@media screen and (max-width: 991px) {
/* Barres et trait : strictement la meme couleur, #fff1e3 opaque.
A .8 (opacite posee en ligne par l'export Webflow), la teinte
dependait du fond : les barres sur le ciel blanc tiraient vers le
blanc, le trait sur le sol sombre vers le brun - jamais pareils.
Opaques tous les deux, ils rendent le meme pixel ou qu'ils soient.
!important pour passer devant le style en ligne des barres. */
#Home .gros-trait-burger,
#Home .gros-trait-burger-fin,
#Home .sa-menu-trait {
/* Barres et trait identiques. Couleur relevee sur une capture du
burger sur l'iPhone de l'utilisateur (18 aout 2026), qui rendait
le #f6e4cf precedent en #f3e5d2 ; on prend la valeur relevee. */
background-color: #f3e5d2 !important;
opacity: 1 !important;
}
#Home .content-menu > a,
#Home .content-menu > a strong {
/* Un cran sous le trait, desature pour tirer vers le marron plutot
que l'orange : hsl 30deg, 45%, 60% (le trait est a 68% de
saturation), puis assombri d'un cran : luminosite 60% -> 53,5%.
Demande du 18 aout 2026. */
color: #be8853 !important;
}
/* La ligne "BRAND | MUSIC | SPORT | URBAN CULTURE - INFLUENCE" est
retiree sur mobile : elle ne tenait pas entre le A de "A BRAND NEW
DAY" et l'arete de l'image (essais de couleur, de decalage et de
taille le 18 aout 2026, puis decision de la supprimer). */
#Home .text-block-6 {
display: none;
}
/* Les deux pastilles (pomme, SA) ne sortaient jamais : leur point de
chute desktop (70% + 19px a droite) les envoyait hors de la colonne
.shadow-div, que Webflow reduit a 10% de large (39px, pour des
pastilles de 47) avec overflow:hidden sous 479px. Sur mobile elles
atterrissent a leur place Webflow, sans decalage ; la colonne garde
son rognage, c'est lui qui donne l'effet du desktop : les pastilles
arrivent de la droite et sortent de la fente. */
html.sa-menu-fini #Home.active .social-image-burger.slide-one.key-image,
html.sa-menu-fini #Home.sa-en-vue .social-image-burger.slide-one.key-image {
animation-name: sa-pastille-entre-mobile;
}
html.sa-menu-fini #Home.active .social-image-burger.slide-one.sa-image-navy-orange,
html.sa-menu-fini #Home.sa-en-vue .social-image-burger.slide-one.sa-image-navy-orange {
animation-name: sa-pastille-entre-mobile;
}
}
/* Point de chute : un tiers de la pastille passe sous la fente (le bord
de la colonne la rogne), comme glissee sous le pan de droite. */
@keyframes sa-pastille-entre-mobile {
from { transform: translate3d(500%, 0, 0) scale(.93); }
to { transform: translate3d(33.3%, 0, 0) scale(.93); }
}
/* Retour du tap (20 aout 2026, apres deux essais - sortie de fente puis
grossissement) : un lisere orange s'allume autour du disque touche,
puis le lien s'ouvre. Le survol souris fait pareil. box-shadow suit
l'arrondi du disque, avec un cheveu de blanc entre disque et lisere
pour qu'il se detache sur la photo. */
@media screen and (max-width: 479px) {
#Home .shadow-link img.social-image-burger {
transition: box-shadow 180ms ease;
}
#Home .shadow-link.sa-tape img.social-image-burger,
#Home .shadow-link:hover img.social-image-burger {
box-shadow: 0 0 0 1.5px #fff, 0 0 0 4px #fe4828;
}
}
/* La "fente" verticale sur la photo de Home, c'est le bord droit de la
colonne .shadow-div : son degrade radial (centre a 150% de sa largeur)
s'arrete net a son bord, et c'est de la que sortent les pastilles.
Webflow la pose a 57% et 10% de large sous 479px : trop etroite pour
les pastilles (47px), qui finissaient rognees. Elargie a 51px (47 + 2
de padding de chaque cote), meme hauteur. Son bord droit - la fente -
tombe au milieu du burger et du trait (8px de padding du header + 24px
de gouttiere + 75/2), a l'aplomb du (c) ; les pastilles sont juste a
gauche de la fente. Demandes du 18 aout 2026. */
@media screen and (max-width: 479px) {
#Home .shadow-div {
width: 51px;
left: calc(100% - 32px - 37.5px - 51px);
}
/* IX2 laisse un translate3d(20%) en ligne sur la file des pastilles :
10px a droite dans une colonne de 51, la pastille sortait du cadre
et se faisait rogner. Sans effet utile sur mobile. */
#Home .container-r-seaux {
transform: none !important;
/* 162px du palier + 52px + 7px (demandes des 18 et 20 aout 2026). */
margin-top: 221px;
}
/* Le (c) vient a l'aplomb des pastilles arrivees (centre a ~314px sur
390 : 6px a gauche de la fente) et descend de 12px, a mi-hauteur du Y de "DAY" (bande DAY
relevee dans le PNG : lignes 433-559 sur 561, soit 575-627px a
l'ecran de 390, milieu a 601 ; le (c) etait centre a 589).
translate compose avec le positionnement Webflow sans y toucher. */
#Home .copyright {
/* -17.3px : centre des pastilles a 314.2px sur 390 depuis leur
passage a 5vh, le (c) Webflow etant centre a 331.5. */
translate: -17.3px 12px;
}
/* Les pastilles a la taille du (c), qui fait 5vh (max-height Webflow
du palier). Le disque, c'est la boite entiere de l'img (fond colore
+ border-radius 50%, bordure transparente comprise) ; le padding ne
fait que reduire l'icone dedans. Elles arrivent a scale(.93) :
boite = 5vh / .93. Meme padding pour les deux, pour que les icones
soient a la meme echelle - la pomme paraissait plus grosse. */
#Home .social-image-burger.slide-one.sa-image-navy-orange,
#Home .social-image-burger.slide-one.key-image {
width: 5.376vh;
height: 5.376vh;
/* Webflow peint le fond en padding-box : la bordure transparente de
2px n'etait pas coloree, le disque visible faisait 31px et non 35,
et le (c) paraissait plus grand. Bordure a 0, le padding reprend
ses 2px pour garder l'icone a la meme taille. */
padding: 5px;
border-width: 0;
}
/* Le SA descend de 2px (19 aout), puis l'ecart pomme/SA grandit de
2px (20 aout) : -9 -> -7 en regle commune, 16 -> 18 en Safari. */
#Home .social-image-burger.slide-one.sa-image-navy-orange {
translate: 0 -7px;
}
@supports (-webkit-hyphens: none) {
#Home .social-image-burger.slide-one.sa-image-navy-orange {
translate: 0 18px;
}
}
}
/* ------------------------------------------------------------------
Menu sur mobile : nos tailles, plus celles de Webflow.
Les paliers mobiles de la feuille Webflow dimensionnent les entrees
en vh et visaient .placement-content-menu, classe renommee lors de la
reconstruction des menus : le panneau heritait de tailles enormes, le
rognage coupait le premier mot en deux et le trait partait 300px plus
bas (la course etant mesuree sur ce panneau geant). Constate sur
iPhone le 18 aout 2026.
On fixe des corps en pixels - un menu n'a pas a respirer avec la
hauteur d'un telephone - et une colonne calee a droite sous le
burger, meme gouttiere de 24px. !important pour passer devant les
regles Webflow a deux et trois classes des paliers. */
/* La colonne du menu fait la largeur du burger et partage sa gouttiere
de 24px : le texte demarre exactement sur son bord gauche. Les
largeurs suivent celles du trait, palier par palier (75/100/75). */
@media screen and (max-width: 991px) {
.sa-menu-panneau {
width: 75px;
margin-right: 24px;
/* Meme air au-dessus d'About qu'entre Contact et le trait (12px de
boite, ~14 a l'oeil). Sous la derniere barre il y a deja 5px de
marge et les 6px du trait en flux : 1px suffit ici, contre 8 sur
desktop. Demande du 18 aout 2026. */
margin-top: 1px;
}
.content-menu {
width: auto;
min-width: 0;
max-width: none;
/* Sous 479px, Webflow sort la liste du flux (position: absolute,
margin-top: -8px) : le panneau se retrouvait a 0px de haut et son
rognage clip-path, calcule sur cette boite vide, ne laissait voir que
la marge haute de 24px - un seul mot du menu. Constate le 18 aout
2026 sur iPhone. La liste reste dans le flux, le panneau prend sa
hauteur, le rognage decouvre tout. */
position: relative;
margin-top: 0;
}
/* Depart du panneau replie : -7px et non -14, pour que le bord du
devoilement parte du haut du trait au repos (6px de trait + 1px de
marge, contre 6 + 8 sur desktop). */
.sa-menu.sa-menu--ferme .sa-menu-panneau {
transform: translateY(-7px);
}
.content-menu > a.w-button,
.content-menu > a.w-button strong {
font-size: 13px !important;
line-height: 19px !important;
}
.content-menu > a.w-button {
width: auto !important;
min-width: 0 !important;
padding: 0 !important;
margin: 0 !important;
text-align: left;
background-color: transparent;
}
}
@media screen and (max-width: 767px) {
.sa-menu-panneau { width: 100px; }
}
@media screen and (max-width: 479px) {
.sa-menu-panneau { width: 75px; }
.content-menu > a.w-button,
.content-menu > a.w-button strong {
font-size: 11px !important;
line-height: 16px !important;
}
}
/* About, sur mobile : "creative & branding agency" devient "creative
agency", et "social presence & partnerships" devient "social presence"
- les lignes debordaient. Les morceaux retires sont enveloppes dans un
span que l'on masque sous 991px (les deux instances du paragraphe).
Demande du 18 aout 2026. */
@media screen and (max-width: 991px) {
.sa-desktop-seul {
display: none;
}
}
/* Et la deuxieme ligne ("Branding, design, advertising film, digital,
print, social.") tient sur une seule ligne : il lui manquait 2px a
82% de large, le "social." passait a la ligne. */
@media screen and (max-width: 479px) {
#About .desc-footer-skate {
max-width: 90%;
}
/* Un peu d'air entre les trois phrases : interligne 14 -> 18px
(Webflow serrait a 14px pour 14px de corps). Demande du 19 aout
2026. */
#About .desc-footer-skate .paragraph-7 {
/* Corps fixe : Webflow le met en 2vh, donc 14px sur un iPhone avec
ses barres (~700px de haut) mais 17px plein ecran, et la ligne des
services repassait a la ligne. 14px partout. */
font-size: 14px;
line-height: 18px;
}
}
/* About sur mobile : la rangee sous le bandeau montrait encore les
trois reseaux de l'export Webflow (Instagram, Pinterest, TikTok). Ils
sont remplaces dans le markup par des copies des pastilles du desktop
(SA -> Studio, pomme -> Keynote, classes .sa-mobile), qui heritent du
disque vectoriel et du survol. Meme taille et meme pas que les disques
qu'elles remplacent : 36.6px de disque dans une ancre de 48.8px a
390 de large, soit 9.4vw et 1.56vw de marge de chaque cote. Le (c)
reste. Demande du 19 aout 2026. */
#About .link-footer-skate-mobile .sa-mobile {
width: 9.4vw;
height: 9.4vw;
min-width: 0;
/* .apple-logo.landscape.slide-two plafonne sa hauteur a 33% : la
pomme s'ecrasait a 12px. */
max-height: none;
margin: 0 1.56vw;
flex: 0 0 auto;
}
/* Le (c) de la rangee : meme boite carree que les deux pastilles, image
entiere dedans (Webflow la plafonnait a 75% de large avec object-fit
fill : 26x34, ecrasee), et sa bulle "All rights reserved" comme dans
Ddddd (attribut data-bulle ajoute au markup). */
#About .link-footer-skate-mobile > .insta-logo.we-did {
width: 9.4vw;
height: 9.4vw;
min-width: 0; /* Webflow : 25% sous 767px */
max-width: none;
margin: 0 1.56vw;
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
#About .link-footer-skate-mobile > .insta-logo.we-did > img {
width: 100%;
height: 100%;
max-width: none;
object-fit: contain;
}
/* Le (c) sur disque noir, comme les deux autres et comme le (c) de
Brands : disque en ::before, forme copy-forme.png decoupee par masque
sur l'image (meme technique que les pastilles vectorielles). */
#About .link-footer-skate-mobile > .insta-logo.we-did {
position: relative;
}
#About .link-footer-skate-mobile > .insta-logo.we-did::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
height: 100%;
aspect-ratio: 1 / 1;
transform: translate(-50%, -50%);
background-color: #000;
border-radius: 50%;
}
#About .link-footer-skate-mobile > .insta-logo.we-did > img {
position: relative;
object-fit: none;
object-position: -9999px -9999px;
background-color: #fff;
-webkit-mask-image: url(icons/copy-forme.png);
mask-image: url(icons/copy-forme.png);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: 60%;
mask-size: 60%;
transition: background-color .4s;
}
#About .link-footer-skate-mobile > .insta-logo.we-did:hover > img {
background-color: #18e7cf;
}
/* Formes plus petites dans ces disques de 37px : a 78% / 56% (valeurs
des disques de 52px du desktop) le monogramme et la pomme mangeaient
tout le disque. */
#About .link-footer-skate-mobile > .sa-logo-about { --sa-part: 62%; }
#About .link-footer-skate-mobile > .apple-logo { --sa-part: 44%; }
/* Puis, demande du 19 aout 2026 : le format d'Agency mobile plutot que
les disques noirs - les formes seules, blanches, memes proportions
(SA 62%, pomme 44%, (c) 49%), meme resserrement (SA et (c) glissent de
2vw vers la pomme), survol dans le turquoise du menu d'About. */
@media screen and (max-width: 767px) {
#About .link-footer-skate-mobile > .sa-logo-about::before,
#About .link-footer-skate-mobile > .apple-logo::before,
#About .link-footer-skate-mobile > .insta-logo.we-did::before {
display: none;
}
#About .link-footer-skate-mobile > .insta-logo.landscape.we-did > img {
-webkit-mask-size: 49%;
mask-size: 49%;
}
#About .link-footer-skate-mobile > .sa-logo-about { translate: 2vw 0; }
#About .link-footer-skate-mobile > .apple-logo { translate: 0 -2px; } /* la pomme remonte d'un chouia */
#About .link-footer-skate-mobile > .insta-logo.we-did { translate: -2vw 0; }
#About .link-footer-skate-mobile > .sa-mobile,
#About .link-footer-skate-mobile > .insta-logo.we-did { margin: 0; }
#About .link-footer-skate-mobile > .sa-logo-about:hover img.sa-about-image,
#About .link-footer-skate-mobile > .apple-logo:hover img.apple-image,
#About .link-footer-skate-mobile > .insta-logo.we-did:hover > img {
background-color: #18e7cf;
}
/* bulles toujours centrees sur la rangee (ici au milieu de la page, la
longue tient) : pas de 7.4vw (9.4 - 2). */
/* (selecteurs renforces d'une classe : les regles a 12.52vw plus bas
dans le fichier gagnaient sinon a specificite egale) */
#About .link-footer-skate-mobile > .sa-logo-about.sa-mobile[data-bulle]::after {
left: calc(50% + 7.4vw);
}
#About .link-footer-skate-mobile > .insta-logo.landscape.we-did[data-bulle]::after {
left: calc(50% - 7.4vw);
}
}
/* Bulles centrees sur la largeur des trois disques (le milieu de la
rangee, donc de la page), quel que soit le disque survole. Chaque
bulle est positionnee par rapport a son disque : on la decale du pas
d'un disque (9.4vw + 2 x 1.56vw = 12.52vw) vers le centre. */
#About .link-footer-skate-mobile > [data-bulle]::after {
right: auto;
left: 50%;
transform: translateX(-50%);
}
#About .link-footer-skate-mobile > .sa-logo-about[data-bulle]::after {
left: calc(50% + 12.52vw);
}
#About .link-footer-skate-mobile > .insta-logo.we-did[data-bulle]::after {
left: calc(50% - 12.52vw);
}
/* La rangee descend en bas de page, a 9px du bord. Elle sort du flux
(son bloc .mobile-footer-rs y reste, pour ne pas faire bouger le
bandeau et le texte) et se cale sur la section, que fullPage
positionne. Le bloc etait sticky : il aurait servi de repere. */
#About .mobile-footer-rs {
position: static;
/* garde la hauteur de la rangee dans le flux : vide, il laissait le
bandeau vert s'etirer de 35px. */
height: 9.4vw;
/* Le bandeau vert (.footer-skate, flex: 1) s'etire jusqu'a ce bloc :
sa marge basse fixe donc l'ecart bandeau / disques. 78px d'origine
-> 24px : le bandeau descend a 12px au-dessus des disques (12px de
bord + 37 de disques + 12 d'air = 61 = 24 + 37 de ce bloc).
Demande du 19 aout 2026. */
margin-bottom: 24px;
}
/* Le bandeau garde sa hauteur naturelle et descend tout entier : c'est
.footer-skate qui s'etire (flex: 1), le bandeau .align-items se cale
en bas de lui. Le bord haut du bandeau descend donc d'autant, et la
photo reprend l'espace libere. Demande du 19 aout 2026. */
@media screen and (max-width: 479px) {
#About .footer-skate {
align-items: flex-end;
}
#About .footer-skate > .align-items {
flex: 0 0 auto;
width: 100%;
/* .footer-skate est une colonne : c'est margin-top:auto qui pousse
le bandeau en bas, pas align-self. */
margin-top: auto;
/* Son texte est en position absolue (centre sur la page) : sans
hauteur posee, le bandeau tombe a 0. 120px = sa hauteur d'avant
(4 lignes de 18px + 24px d'air haut et bas). */
height: 120px;
}
}
#About .link-footer-skate-mobile {
position: absolute;
left: 0;
right: 0;
bottom: 12px; /* 9px, puis remontee de 3 (19 aout 2026) */
align-items: center;
justify-content: center;
}
/* Si pres du bord, la bulle s'ouvre vers le haut. */
#About .link-footer-skate-mobile > [data-bulle]::after {
top: auto;
bottom: calc(100% + 7px);
}
/* Mobile, toutes sections : le logo et les langues s'ecartent du bord
gauche a peu pres comme le burger du bord droit (32px), mais a 28px
depuis le bord de l'ecran : a l'oeil, 32 paraissait plus large que
la marge du burger. 8px de padding du header + 20. Demande du 19
aout 2026. */
@media screen and (max-width: 991px) {
.header .icon {
margin-left: 20px;
}
}
/* Home mobile : le (c) porte une bulle "All rights reserved" sous lui,
comme dans les autres sections (attribut data-bulle ajoute au markup).
La mention verticale "Legal - Copyright" qui glissait au survol fait
doublon : masquee. Le desktop garde son mecanisme d'origine, la bulle
y est neutralisee. Demande du 19 aout 2026. */
@media screen and (max-width: 991px) {
#Home .copyright.slide-one > .legal-copyright.slide-one {
display: none;
}
}
@media screen and (min-width: 992px) {
#Home .c-footer-skate.slide-1[data-bulle]::after {
display: none;
}
}
/* Agency sur telephone : Webflow masque .background-video sous 479px,
or TOUTE la section vit dedans (video, header, menu, texte) : ecran
vide. On la reaffiche telle que la feuille de base la definit (colonne
flex plein ecran). Demande du 19 aout 2026. */
@media screen and (max-width: 479px) {
#Agency .background-video {
display: flex;
flex-direction: column;
justify-content: flex-start;
overflow: hidden;
/* Webflow peint la