/* ========================================================================== ESPACES UNIFORMES AVANT CHAQUE TITRE (index, profil, contact - FR + EN) 25 octobre 2026 -------------------------------------------------------------------------- Reference : l'espace "vert" mesure sur l'index entre le bas du paragraphe et le haut du titre REALISATIONS = 136 px CSS (66 + 1 + 66 du .divider, plus 3 px de respiration propre a la ligne de texte). Cet espace est maintenant le meme avant TOUS les titres de ces pages, mesure depuis le bas VISIBLE de ce qui precede (texte, bouton TOUS LES PROJETS, logos, petits dessins). Comment c'est construit (une seule recette) : - juste avant le titre :
- plus aucun
parasite entre le contenu et ce divider - quand le contenu qui precede se termine par un petit dessin qui deborde vers le bas (marge negative), la marge haute du divider = 66 px + ce debord (c'est ce qui est note dans le commentaire HTML au-dessus de chaque divider) - dans le bloc footer (REALISATIONS de profil, PARLONS-EN de contact...) la meme valeur est portee par le padding-top de #footer-top. POUR TOUT CHANGER D'UN COUP : ajouter / retirer le meme nombre de px sur ces marges (ou demander la nouvelle valeur cible, elle est recalee partout). ========================================================================== */ /* INDEX : le padding-top du bloc titre (53.25 px, bas du slider -> titre EXECUTIVE CREATIVE DIRECTOR) ne doit s'appliquer qu'au PREMIER bloc. Il s'appliquait aussi a PROCESSUS CREATIF et rajoutait ~50 px. */ body.site-home section.portfolio-full-width-grid > .sub-section-title:not(:first-child){ padding-top: 0; margin-top: 0; } /* PROFIL / CONTACT : titres places dans le bloc #footer-top (PARLONS-EN !, REALISATIONS...). Sur desktop (>= 1200 px) le padding-top de ce bloc est fixe par la variable --esp-titre-top posee en style="" sur chaque bloc (66 px d'origine + ajustement pour retomber sur 136 px visibles). En tablette / mobile, le padding d'origine (66 px) reste en place. */ @media only screen and (min-width: 1200px){ #footer-wrapper #footer-top[style*="--esp-titre-top"]{ padding-top: max(0px, var(--esp-titre-top)); margin-top: min(0px, var(--esp-titre-top)); } } /* ========================================================================== DESSINS DU PROFIL : GROUPES FLOTTANTS (profil.html + EN/profil.html) Chaque groupe de PNG est dans un conteneur .dessins-groupe positionne en absolu (left / top = centre du groupe, depuis le point rouge). Les images du groupe sont placees autour de ce centre : on deplace tout le groupe en changeant seulement left / top du conteneur. Aucun effet sur la hauteur ni sur l'espace entre les blocs. - groupes 1 a 5 : repere = haut du titre (groupe 1 : debut du texte) - groupe 6 : repere = bas du bouton TOUS LES PROJETS Masques en dessous de 1200 px. ========================================================================== */ .dessins-ancre{ position:relative; height:0; width:100%; } .dessins-groupe{ position:absolute; width:0; height:0; } .dessins-groupe > img.groupe-image-float{ position:absolute; margin:0 !important; max-width:none; z-index:300; } @media only screen and (min-width: 1200px){ #footer-wrapper #footer-top.footer-top-projects .dessins-ancre--bas{ margin-left: calc((100% - 1070px) * 0.5); width:auto; } html.pl-chrome-detached #footer-wrapper #footer-top.footer-top-projects .dessins-ancre--bas{ transition: margin-left .45s cubic-bezier(.65,0,.35,1); } html.pl-chrome-detached.desktop-nav-open #footer-wrapper #footer-top.footer-top-projects .dessins-ancre--bas{ margin-left: var(--txt-left); } } @media only screen and (max-width: 1199px){ .dessins-ancre{ display:none; } } /* ========================================================================== ESPACE AVANT LA BANDE DE VIGNETTES (slider fin "realisations", desktop >= 1200 px) Meme unite que l'espace "rouge" avant les titres : 90 px entre le bas du texte (ou du titre) qui precede et le haut de la bande. Valeur propre a chaque page dans style="--esp-slider-top:..px" sur .realisations-marquee-wrap. ========================================================================== */ @media only screen and (min-width: 1200px){ .realisations-marquee-wrap[style*="--esp-slider-top"]{ margin-top: var(--esp-slider-top); } } /* ========================================================================== PROFIL / CONTACT : espace "PARIS NEW YORK MONTREAL" -> "EXECUTIVE CREATIVE DIRECTOR" (desktop >= 1200 px). Etait de ~175 px visibles : ramene a ~67 px visibles, soit l'espace entre "MULTIMEDIA DIRECTOR" et "I MAKE COOL STUFF WITH COOL PEOPLE". Pour regler : padding-bottom ci-dessous (63 px = ~84 px visibles). ========================================================================== */ @media only screen and (min-width: 1200px){ #section-title:has(h1.pny-title){ padding-bottom: 63px; margin-bottom: 0; } } /* ========================================================================== PROFIL / CONTACT : 3 espaces du haut alignes sur les pages projet (mesures sur MONCLER, en px visibles) 1 = bas du bandeau -> haut du titre "PARIS NEW YORK MONTREAL" : 122 px (padding-top 77 -> 113 px) 2 = "MONTREAL" -> "EXECUTIVE CREATIVE DIRECTOR" : 84 px (voir plus haut, padding-bottom 63 px) 3 = "MULTIMEDIA DIRECTOR" -> "I MAKE COOL STUFF..." : 87 px (+20 px sur le tagline) Desktop >= 1200 px. ========================================================================== */ @media only screen and (min-width: 1200px){ #content-wrapper:has(h1.pny-title){ padding-top: 113px; } #content-wrapper:has(h1.pny-title) h5.cool-tagline{ padding-top: 20px; } } /* ========================================================================== INDEX + pages AImagination EN (APOLLO, COLOSSEUM, NISHIKI-GOI, WONDERLAND) - desktop >= 1200 px MEME STRUCTURE D'ESPACES QUE LES PAGES PROJET (mesuree sur MONCLER, en px visibles) : 1 = au-dessus du titre : bas du slider -> "EXECUTIVE CREATIVE DIRECTOR" : 122 px 2 = au-dessus du sous-titre: "MULTIMEDIA DIRECTOR" -> "I MAKE COOL STUFF..." : 84 px (+17 px sur le tagline) 3 = sous le sous-titre : "I MAKE COOL STUFF..." -> premier paragraphe : 87 px (+20.5 px sous le tagline) (avant : 123 / 67 / 67 sur l'index) ========================================================================== */ @media only screen and (min-width: 1200px){ body.site-aimagination section.portfolio-full-width-grid > .sub-section-title:first-child{ padding-top: 53.25px; /* l'index garde sa regle d'origine (53.25 px) */ } section.portfolio-full-width-grid > .sub-section-title:first-child h5.cool-tagline{ padding-top: 17px; padding-bottom: 20.5px; } } /* ========================================================================== PROFIL : tagline "I MAKE COOL STUFF..." -> premier paragraphe = 87 px visibles (comme sous un sous-titre de page projet) (le contact n'a pas de texte sous le tagline : il garde l'espace avant PARLONS-EN) ========================================================================== */ @media only screen and (min-width: 1200px){ #content-wrapper:has(h1.pny-title):has(.mz-zone) h5.cool-tagline{ padding-bottom: 20.5px; } } /* ========================================================================== MENTIONS LEGALES (FR + EN) : meme structure d'espaces que les pages projet (px visibles) : 1 = haut -> titre MENTIONS LEGALES : 122 | 2 = titre -> sous-titre : 84 | 3 = sous-titre -> 1er titre de section : 87 Valeurs calees par page dans style="--m-top / --m-g2 / --m-g3" sur la section .mentions-legales-page. Desktop >= 1200 px. ========================================================================== */ @media only screen and (min-width: 1200px){ .mentions-legales-page #section-title{ margin-top: var(--m-top) !important; padding-top: 0 !important; padding-bottom: 0 !important; margin-bottom: var(--m-g2) !important; } .mentions-legales-page .mentions-content{ margin-top: var(--m-g3); } }