/* ==========================================================================
   MOBILE + TABLETTE - PAGES PROJETS (portfolioIndex/ et EN/portfolioIndex/)
   PARTIE 3 : titres "NETFLIX" (h1) et "TRIPLE FRONTIER" (h4)   (<= 1199px)
   PARTIE 4 : logo de l'agence aligne a droite (en bas de ce fichier)   (<= 767px)

   Meme principe que PARIS / NEW YORK / MONTREAL : chaque LIGNE a sa propre
   taille, la plus grande possible, et touche le bord droit du cadre (290px en
   portrait, 420px en paysage, 640px sur tablette). Tout est dans des @media
   (max-width:1199px) : aucun effet sur desktop (>= 1200px). Aucune regle
   existante n'est modifiee.

   Comment ca marche
   - Chaque titre fait AU PLUS 2 lignes. Le HTML n'est pas modifie :
       ligne 1 = ::first-line du titre ; ligne 2 = le reste du titre.
     Un titre a un seul mot (ex. NETFLIX) n'a qu'une ligne : taille 1 = taille 2.
   - Les tailles sont propres a chaque page (elles dependent du texte) : elles
     sont ecrites dans un petit <style> de la page elle-meme, sous la forme
         --pt-h1a-p / --pt-h1b-p   h1, ligne 1 / ligne 2   (portrait,  < 480px)
         --pt-h4a-p / --pt-h4b-p   h4, ligne 1 / ligne 2   (portrait)
         --pt-h1a-l / ...          idem                    (paysage, 480-767px)
         --pt-h1a-t / ...          idem                    (tablette, 768-1199px)
     Une page SANS ces variables garde exactement son rendu d'origine (repli
     sur les clamp() de top-banner.css).
   - Calcul : largeur reelle du texte mesuree avec la police Roboto 900, sans
     crenage (Safari iPhone ne l'applique pas), marge de 2px au bord. Taille
     plafonnee a 40% de la largeur du cadre pour les tres petits mots (II, HK, 9).
   - Graisse 900 et crenage desactive fixes explicitement.
   - Espaces de la page (au-dessus / en dessous des titres) : style.css les
     calcule avec --h1fs / --h4fs (taille du titre, pour compenser le vide interne
     des lettres). On leur donne la taille de la ligne concernee : ligne 1 pour
     l'espace du haut, ligne 2 pour l'espace du bas, afin de garder le meme rythme.
   Pour annuler : retirer les 2 lignes ajoutees dans la page (<link> + <style>).
   ========================================================================== */

/* TABLETTE (768-1199px) : le cadre fait 640px sur toute la plage */
@media only screen and (max-width: 1199px) {
	:root {
		--pt-h1a: var(--pt-h1a-t); --pt-h1b: var(--pt-h1b-t);
		--pt-h4a: var(--pt-h4a-t); --pt-h4b: var(--pt-h4b-t);
	}
}
@media only screen and (max-width: 767px) {
	:root {
		--pt-h1a: var(--pt-h1a-l); --pt-h1b: var(--pt-h1b-l);
		--pt-h4a: var(--pt-h4a-l); --pt-h4b: var(--pt-h4b-l);
	}
}
@media only screen and (max-width: 479px) {
	:root {
		--pt-h1a: var(--pt-h1a-p); --pt-h1b: var(--pt-h1b-p);
		--pt-h4a: var(--pt-h4a-p); --pt-h4b: var(--pt-h4b-p);
	}
}

@media only screen and (max-width: 1199px) {

	/* ---- Titre h1 (nom de marque / projet) --------------------------------
	   !important : top-banner.css impose deja clamp(28px,11vw,84px) en !important. */
	#content-wrapper.portfolio-project #section-title h1 {
		font-size: var(--pt-h1b, clamp(28px, 11vw, 84px)) !important;
		font-weight: 900 !important;
		font-kerning: none !important;
	}
	#content-wrapper.portfolio-project #section-title h1::first-line {
		font-size: var(--pt-h1a, clamp(28px, 11vw, 84px)) !important;
	}
	/* Chaque lettre (animation gare-effect.js) herite de la taille de sa ligne */
	#content-wrapper.portfolio-project #section-title h1 span.gare-char {
		font-size: inherit !important;
		line-height: inherit !important;
	}

	/* ---- Sous-titre h4 ---------------------------------------------------- */
	#content-wrapper.portfolio-project #section-title + h4 {
		font-size: var(--pt-h4b, clamp(22px, 9vw, 78px)) !important;
		font-weight: 900 !important;
		font-kerning: none !important;
	}
	#content-wrapper.portfolio-project #section-title + h4::first-line {
		font-size: var(--pt-h4a, clamp(22px, 9vw, 78px)) !important;
	}

	/* ---- Espaces de la page ------------------------------------------------ */
	#content-wrapper.portfolio-project {
		--h1fs: var(--pt-h1a, clamp(28px, 11vw, 84px));   /* haut : ligne 1 du h1 */
		--h4fs: var(--pt-h4a, clamp(22px, 9vw, 78px));    /* haut du h4 : ligne 1 */
	}
	.portfolio-project #section-title {
		padding-bottom: calc(88px - 0.195 * var(--pt-h1b, var(--h1fs)));   /* bas du h1 : derniere ligne */
	}
	.portfolio-project #section-title + h4 {
		margin-bottom: calc(60px - 0.21 * var(--pt-h4b, var(--h4fs)));     /* bas du h4 : derniere ligne */
	}
}


/* ==========================================================================
   PARTIE 4 - Logo de l'agence (ex. Fred&Farid sur VILLEBOIS) - pages projets
   Probleme : style.css (<= 767px) place ce logo en absolu a 80px du bord droit
   de la colonne ROLE (right:80px), alors que la colonne ne reserve que 110px a
   droite du texte (padding-right:110px) pour un logo de 111px de large. Le logo
   deborde donc de 80px sur la zone de texte : en portrait il chevauchait le
   texte sur 77 des 92 pages (jusqu'a 29px).
   Correction : logo colle au bord droit de la colonne (right:0), au meme bord que
   les titres et que le trait de separation. Le texte garde sa largeur actuelle :
   il reste au moins 50px de vide entre le texte et le logo sur toutes les pages,
   et aucun texte ne change de nombre de lignes. Position verticale (top:36px)
   inchangee. Aucun effet sur tablette (>= 768px) ni sur desktop.
   ========================================================================== */
@media only screen and (max-width: 767px) {
	.pages .column_one_third:not(.column-footer-widget) img[src*="logos/agences/"] {
		right: 0;
	}
}