/* .............................................................................
TITLES
............................................................................. */
h1, .h1, .titleHome, .titlePage, .titleResponsive, .titleArticle {color:var(--color-green); font-size: 8.3em;font-weight: 900;line-height: 0.7;text-wrap: balance;}
h2, .h2, .titleOffer, .h2--inCtn {color:var(--color-green); font-size: 5.8em; font-weight: 900; line-height: 1.05;text-wrap: balance; }
h3, .h3, .h3--big, .h3--bigger, .h3--biggest, .h3--inCtn {color:var(--color-green); font-size: 1.7em; font-weight: 900; line-height: 1.1;text-wrap: balance; }

	/* Margins : common (ajuster l'espacement EN HAUT de l'element). */
	* + h1, * + .h1 {margin-top: 0.75em; }
	* + h2, * + .h2 {margin-top: 1em; }
	* + h3, * + .h3 {margin-top: 2em; }

	/* Note, c'est maintenant possible de savoir si le titre est suivi 
	d'un element en particulier, avec :has :
	h3:has(+ p) { }
	ou l'inverse : h3:not(:has(+ p)) { } */

	/* Margins : after (ajuster l'espacement EN BAS de l'element). */
		
	/* Margins : specific (COMBINAISONS particulieres d'elements). */

	/* Font-size particuliers pour page head. */
	.titleHome {font-size: 10.25vw;line-height: 1;}
	.titlePage {font-size: min(10.25vw, 14em);line-height: 1;}
	.titleResponsive {font-size: min(7vw, 11em);}
	.titleArticle {font-size: min(4vw, 5em);line-height: 1;}
	.titleOffer {font-size: 4em;line-height: 1.1; }
		
		/* Fix sinon les accents sont hidden */
		.titleHome:has(.animLine),
		.titlePage:has(.animLine),
		.titleArticle:has(.animLine),
		.titleResponsive:has(.animLine) {line-height: 1.3; }

	/* ALTs pour titres */
	.h2--inCtn, .typo--h2InCtn h2 {font-size: 2.4em;line-height: 1.1;color: var(--color-red);}
	.h3--big, .typo--h3Big h3 {font-size: 2.5em; }
	.h3--bigger, .typo--h3Bigger h3 {font-size: 3em;}
	.h3--biggest, .typo--h3Biggest h3 {font-size: 4.2em;}
	.h3--inCtn, .typo--h3InCtn h3 {font-size: 1.2em; line-height: 1.2; color: var(--color-red);}

	/* Note pour titre */
	.h1__note {display: block;font-size: 0.35em;margin-bottom: 0.5em;}
	h2 .note, .h2 .note {display: block;font-size: 0.35em;margin-bottom: -0.3em;}
	h3 .note, .h3 .note {display: block;font-size: 0.4em;margin-bottom: -0.2em;}

	/* On green */
	.onGreen h1, .onGreen .h1,
	.onGreen h2, .onGreen .h2,
	.onGreen h3, .onGreen .h3 {color: var(--color-base-on-green);}

	/* On red */
	.onRed h1, .onRed .h1,
	.onRed h2, .onRed .h2,
	.onRed h3, .onRed .h3 {color: var(--color-base-on-red);}

	/* Sizes */
	@media (max-width:62rem) {
		h1, .h1 {font-size: 6em; }
		h2, .h2 {font-size: 4em; }
		h3, .h3 {font-size: 1.5em; }

		.titleHome {font-size: 15.5vw;}
		.titlePage {font-size: 14vw;}
		.titleResponsive {font-size: 9vw; }
		.titleArticle, .titleOffer {font-size: 3.5em; }
		
		/* TODO : Reviser */
		.h2--inCtn, .typo--h2InCtn h2 {font-size: 2.4em; }
		
		/* TODO : Reviser */
		.h3--big, .typo--h3Big h3 {font-size: 2.5em; }

		.h3--bigger, .typo--h3Bigger h3 {font-size: 2.25em; }
		.h3--biggest, .typo--h3Biggest h3 {font-size: 3.5em; }
	}

	@media (max-width:46rem) {
		h1, .h1 {font-size: min(18vw, 4.4em);}
		h2, .h2, .h3--biggest, .typo--h3Biggest h3 {font-size: 3em;}
		h3, .h3, .h3--bigger, .typo--h3Bigger h3 {font-size: 1.5em;}

		.titleArticle, .titleOffer {font-size: 2.25em; }

		/* TODO : Reviser */
		.h2--inCtn, .typo--h2InCtn h2 {font-size: 2em; }

		/* TODO : Reviser */
		.h3--big, .typo--h3Big h3 {font-size: 2em;}
	}



/*
SUPTITLE
Suptitle over the title, same style as listOfferMeta li.
On kill la marge du prochain élément, qui devrait etre un titre.
Ensuite, on set la marge directement sur le supTitle. Faire
ainsi permet d'avoir une marge constante, peu importe si le
titre qui le suit a un gros font-size ou un petit. */
.supTitle {font-size: 1.15em; font-weight: bold; }
.supTitle + * {margin-top: 0; }
.supTitle:has(+ *) {margin-bottom: 1em; }
.phPage__back + .phPage__header > .supTitle {margin-top: 1.3em;}