/* ========================================================================== MOBILE + TABLETTE (<= 1199px) - calages par parties Ce fichier est enveloppe dans des @media (max-width:1199px) : AUCUN effet sur desktop (>= 1200px). Aucune regle existante du site n'est modifiee. 3 paliers de largeur de cadre (le texte remplit toute la largeur du cadre) : portrait < 480px : cadre 290px paysage 480-767px : cadre 420px tablette 768-1199px : cadre 640px (max-width:640px du site sur toute la plage) Pour annuler une partie : supprimer son bloc. Pour tout annuler : retirer la ligne de ce fichier dans les pages. ========================================================================== */ /* ========================================================================== PARTIE 1 - Titre principal EXECUTIVE / CREATIVE / DIRECTOR / MULTIMEDIA / DIRECTOR / DIGITAL ACTIVATION & / INNOVATIVE TECHNOLOGY Pages : index.html, profil.html, contact.html (version FR) Chaque ligne a sa PROPRE taille, la plus grande possible : toutes touchent le bord droit du cadre (meme largeur que le texte). Aucun mot coupe. Coupures : - EXECUTIVE / CREATIVE / DIRECTOR (CREATIVE et DIRECTOR separes, sans trait rose) - MULTIMEDIA / DIRECTOR - DIGITAL ACTIVATION & / INNOVATIVE TECHNOLOGY Le HTML n'est pas modifie. Une ligne = soit un bloc, soit la ::first-line d'un bloc, soit le reste du bloc : H3 n1 : EXECUTIVE = le H3 ; CREATIVE = ::first-line du bloc .titre-highlight-rose ; DIRECTOR = le reste de ce bloc H3 n2 : MULTIMEDIA = ::first-line du H3 ; DIRECTOR = le reste H5 : DIGITAL ACTIVATION & = ::first-line ; INNOVATIVE TECHNOLOGY = le reste Tailles calculees sur l'encre reelle (Roboto 900 italique, espacement 1px), marge de 2px au bord (et 2px sur la largeur d'avance pour les deux lignes a plusieurs mots, afin qu'elles ne passent jamais a la ligne). CRENAGE : Safari iPhone n'applique pas le crenage des paires de lettres (AT, LT, VA...) sur ce texte, Chrome si : les mots etaient ~1,5% plus larges sur iPhone (MULTIMEDIA depassait, "&" tombait a la ligne). On force donc font-kerning:none sur ces titres (rendu identique sur tous les navigateurs) et les tailles sont calculees sur les largeurs SANS crenage. portrait (290px) paysage (420px) tablette (640px) EXECUTIVE 54.4px 79.7px 122.5px CREATIVE 60.7px 88.7px 136.3px DIRECTOR 60.4px 88.4px 135.8px MULTIMEDIA 47.7px 69.9px 107.5px DIRECTOR 60.4px 88.4px 135.8px DIGITAL ACTIVATION & 25.3px 37.6px 58.4px INNOVATIVE TECHNOLOGY 21.7px 32.2px 50.1px Graisse : 900 (Roboto Black) fixee explicitement sur chaque bloc. Les tailles ci-dessus sont calculees pour cette graisse : si on la change, les recalculer. Reglage : variables --pl-h-* ci-dessous. ========================================================================== */ /* TABLETTE (768-1199px) : le cadre fait 640px sur toute cette plage (max-width:640px) */ @media only screen and (max-width: 1199px) { :root { --pl-h-exec: 122.5px; --pl-h-cre: 136.3px; --pl-h-dir1: 135.8px; --pl-h-mm: 107.5px; --pl-h-dir2: 135.8px; --pl-h-dig: 58.4px; --pl-h-inn: 50.1px; } } @media only screen and (max-width: 767px) { :root { --pl-h-exec: 79.7px; --pl-h-cre: 88.7px; --pl-h-dir1: 88.4px; --pl-h-mm: 69.9px; --pl-h-dir2: 88.4px; --pl-h-dig: 37.6px; --pl-h-inn: 32.2px; } } @media only screen and (max-width: 479px) { :root { --pl-h-exec: 54.4px; --pl-h-cre: 60.7px; --pl-h-dir1: 60.4px; --pl-h-mm: 47.7px; --pl-h-dir2: 60.4px; --pl-h-dig: 25.3px; --pl-h-inn: 21.7px; } } @media only screen and (max-width: 1199px) { /* ---- Pages EN/ : meme titre, mais enveloppe dans une balise dans le HTML (..

..

..

..
). Pour chaque regle ci-dessous, la variante "> i > h3 / h5" cible cette structure ; les valeurs (tailles, coupures) sont strictement les memes que sur les pages FR. */ /* ---- H3 n1 : EXECUTIVE / CREATIVE / DIRECTOR --------------------------- !important necessaire : tailles ecrites en style inline dans le HTML, et top-banner.css impose deja 20px/32px en !important sur l'accueil. */ section.portfolio-full-width-grid > .sub-section-title:first-child > h3:nth-of-type(1), #content-wrapper section.pages > #section-title ~ h3:nth-of-type(1), section.portfolio-full-width-grid > .sub-section-title:first-child > i > h3:nth-of-type(1), #content-wrapper section.pages > #section-title ~ i > h3:nth-of-type(1) { font-size: var(--pl-h-exec) !important; line-height: 1 !important; font-weight: 900 !important; font-kerning: none !important; overflow-wrap: normal !important; word-wrap: normal !important; word-break: normal !important; } /* "CREATIVE DIRECTOR" : le surlignage etait un bloc insecable (nowrap) qui debordait. On le laisse se couper entre les deux mots. */ section.portfolio-full-width-grid > .sub-section-title:first-child > h3:nth-of-type(1) .titre-highlight-rose, #content-wrapper section.pages > #section-title ~ h3:nth-of-type(1) .titre-highlight-rose, section.portfolio-full-width-grid > .sub-section-title:first-child > i > h3:nth-of-type(1) .titre-highlight-rose, #content-wrapper section.pages > #section-title ~ i > h3:nth-of-type(1) .titre-highlight-rose { display: block; font-size: var(--pl-h-dir1) !important; } section.portfolio-full-width-grid > .sub-section-title:first-child > h3:nth-of-type(1) .titre-highlight-rose::first-line, #content-wrapper section.pages > #section-title ~ h3:nth-of-type(1) .titre-highlight-rose::first-line, section.portfolio-full-width-grid > .sub-section-title:first-child > i > h3:nth-of-type(1) .titre-highlight-rose::first-line, #content-wrapper section.pages > #section-title ~ i > h3:nth-of-type(1) .titre-highlight-rose::first-line { font-size: var(--pl-h-cre) !important; } section.portfolio-full-width-grid > .sub-section-title:first-child > h3:nth-of-type(1) .titre-highlight-rose b, #content-wrapper section.pages > #section-title ~ h3:nth-of-type(1) .titre-highlight-rose b, section.portfolio-full-width-grid > .sub-section-title:first-child > i > h3:nth-of-type(1) .titre-highlight-rose b, #content-wrapper section.pages > #section-title ~ i > h3:nth-of-type(1) .titre-highlight-rose b { white-space: normal; } /* Trait sous CREATIVE DIRECTOR : retire (mobile seulement). Seul le trait DANS ce titre est cible ; les autres traits de la page restent affiches. */ section.portfolio-full-width-grid > .sub-section-title:first-child > h3:nth-of-type(1) .titre-highlight-rose .gare-splash, #content-wrapper section.pages > #section-title ~ h3:nth-of-type(1) .titre-highlight-rose .gare-splash, section.portfolio-full-width-grid > .sub-section-title:first-child > i > h3:nth-of-type(1) .titre-highlight-rose .gare-splash, #content-wrapper section.pages > #section-title ~ i > h3:nth-of-type(1) .titre-highlight-rose .gare-splash { display: none !important; } /* ---- H3 n2 : MULTIMEDIA / DIRECTOR ------------------------------------- */ section.portfolio-full-width-grid > .sub-section-title:first-child > h3:nth-of-type(2), #content-wrapper section.pages > #section-title ~ h3:nth-of-type(2), section.portfolio-full-width-grid > .sub-section-title:first-child > i > h3:nth-of-type(2), #content-wrapper section.pages > #section-title ~ i > h3:nth-of-type(2) { font-size: var(--pl-h-dir2) !important; line-height: 1 !important; font-weight: 900 !important; font-kerning: none !important; overflow-wrap: normal !important; word-wrap: normal !important; word-break: normal !important; } section.portfolio-full-width-grid > .sub-section-title:first-child > h3:nth-of-type(2)::first-line, #content-wrapper section.pages > #section-title ~ h3:nth-of-type(2)::first-line, section.portfolio-full-width-grid > .sub-section-title:first-child > i > h3:nth-of-type(2)::first-line, #content-wrapper section.pages > #section-title ~ i > h3:nth-of-type(2)::first-line { font-size: var(--pl-h-mm) !important; } /* ---- H5 : DIGITAL ACTIVATION & / INNOVATIVE TECHNOLOGY ----------------- */ section.portfolio-full-width-grid > .sub-section-title:first-child > h5, #content-wrapper section.pages > #section-title ~ h5:nth-of-type(1), section.portfolio-full-width-grid > .sub-section-title:first-child > i > h5, #content-wrapper section.pages > #section-title ~ i > h5:nth-of-type(1) { font-size: var(--pl-h-inn) !important; line-height: 1 !important; font-weight: 900 !important; font-kerning: none !important; overflow-wrap: normal !important; word-break: normal !important; } section.portfolio-full-width-grid > .sub-section-title:first-child > h5::first-line, #content-wrapper section.pages > #section-title ~ h5:nth-of-type(1)::first-line, section.portfolio-full-width-grid > .sub-section-title:first-child > i > h5::first-line, #content-wrapper section.pages > #section-title ~ i > h5:nth-of-type(1)::first-line { font-size: var(--pl-h-dig) !important; } /* Chaque lettre (animation gare-effect.js) herite de la taille de sa ligne */ section.portfolio-full-width-grid > .sub-section-title:first-child span.gare-char, #content-wrapper section.pages > #section-title ~ h3 span.gare-char, #content-wrapper section.pages > #section-title ~ h5:nth-of-type(1) span.gare-char, #content-wrapper section.pages > #section-title ~ i > h3 span.gare-char, #content-wrapper section.pages > #section-title ~ i > h5:nth-of-type(1) span.gare-char { font-size: inherit !important; line-height: inherit !important; } } /* ========================================================================== PARTIE 2 - Titre "PARIS / NEW YORK / MONTREAL" (profil.html, contact.html) Chaque mot a sa PROPRE taille, la plus grande possible : PARIS, NEW YORK et MONTREAL touchent tous le bord droit du cadre (meme largeur que le texte et le trait de separation en dessous). Aucun mot coupe ; "NEW YORK" reste sur une seule ligne (espace insecable   dans le HTML). - Le HTML n'est pas modifie : "PARIS NEW YORK" est un seul bloc qui passe a la ligne apres PARIS. PARIS = ::first-line de ce bloc, NEW YORK = le reste du bloc, MONTREAL = le bloc suivant (.pny-line2). - Tailles calculees sur l'encre reelle de chaque mot (police Roboto 900 italique, espacement 1px, SANS crenage - cf. PARTIE 1), marge de 2px au bord : PARIS NEW YORK MONTREAL portrait (290px) 100px 56.9px 54.6px paysage (420px) 145.8px 83.2px 79.9px tablette (640px) 223.3px 127.8px 122.7px - Interligne, graisse, espacement des lettres : inchanges. - Espaces de la page (au-dessus / en dessous du titre, trait de separation) : style.css les calcule a partir de --h1fs ; on lui donne ici la taille de la premiere ligne (haut) et de la derniere (bas) pour garder le meme rythme. Graisse : 900 fixee explicitement (cf. fin du bloc). Tailles calculees pour 900. Reglage : variables --pl-pny-1 / -2 / -3 ci-dessous. ========================================================================== */ /* TABLETTE (768-1199px) : cadre de 640px */ @media only screen and (max-width: 1199px) { :root { --pl-pny-1: 223.3px; --pl-pny-2: 127.8px; --pl-pny-3: 122.7px; } } @media only screen and (max-width: 767px) { :root { --pl-pny-1: 145.8px; --pl-pny-2: 83.2px; --pl-pny-3: 79.9px; } } @media only screen and (max-width: 479px) { :root { --pl-pny-1: 100px; --pl-pny-2: 56.9px; --pl-pny-3: 54.6px; } } @media only screen and (max-width: 1199px) { /* NEW YORK = corps du bloc 1 ; PARIS = sa premiere ligne ; MONTREAL = bloc 2 */ #section-title h1.pny-title, #section-title h1.pny-title span.pny-line1 { font-size: var(--pl-pny-2) !important; } #section-title h1.pny-title span.pny-line1::first-line { font-size: var(--pl-pny-1) !important; } #section-title h1.pny-title span.pny-line2 { font-size: var(--pl-pny-3) !important; } /* Chaque lettre (animation gare-effect.js) herite de la taille de sa ligne */ #section-title h1.pny-title span.gare-char { font-size: inherit !important; line-height: inherit !important; } #content-wrapper:has(h1.pny-title) { --h1fs: var(--pl-pny-1); } #section-title:has(h1.pny-title) { --h1fs: var(--pl-pny-3); } /* Graisse fixee explicitement a 900 (Roboto Black). Avant, elle venait de l'empilement (400 -> 700 -> 900) : fragile. Rendu identique. */ #section-title h1.pny-title, #section-title h1.pny-title span.pny-line1, #section-title h1.pny-title span.pny-line2 { font-weight: 900 !important; font-kerning: none !important; } }