/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - Typography  - - - - - - - - - - - - - - - - - - - - - - - */

/* linked in index.html, maybe improves performance? */ /* 
@import url("../fonts/Plex-Sans/Plex-Sans.css");
@import url("../fonts/Plex-Mono/Plex-Mono.css");
*/

body{
	font-family: "PlexSans", system-ui, sans-serif;	
}


/* - text wrap - - - - - */

h1, h2, h3, h4, h5, h6, li,
.personBio { text-wrap: balance; }

#Editorial, #Activites, #Mission, #Valeurs, #Qualite, #Soutien
.secteurIntro, .secteurReport {
	text-wrap: pretty; 
}



/* - line length - - - - - */
#Editorial p, #Activites p, #Mission p, #Valeurs p, #Qualite p, #Soutien p,
.secteurIntro p, .secteurReport p {
	max-width: 80ch;
}



.num, .nobr {
	white-space: nowrap;
}




/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - Font-size  - - - - - - - - - - - - - - - - - - - - - - - */

#TOC, #TOC * {
	font-size: var(--sizeXXS);
}






/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - Color - - - - - - - - - - - - - - - - - - - - - - - - - - */

/*	COLOR VARIABLES	*/

:root{

	/* Pantone 279 C – #3B8EDE */
	--Appartenances-Bleu: hsl(209, 71%, 55%);

	--Appartenances-Bleu-05: hsl(209, 67%, 98%);
	--Appartenances-Bleu-10: hsl(209, 74%, 95%);
	--Appartenances-Bleu-20: hsl(209, 70%, 91%);
	--Appartenances-Bleu-25: hsl(209, 70%, 88%);
	--Appartenances-Bleu-30: hsl(209, 70%, 85%);
	--Appartenances-Bleu-40: hsl(209, 70%, 80%);
	--Appartenances-Bleu-50: hsl(209, 70%, 77%);
	--Appartenances-Bleu-60: hsl(209, 70%, 70%);

	/* Ombrage bleu 40% s/noir */
	--Appartenances-Bleu-Dark: hsl(209, 58%, 33%);

	/* Orange Pantone 716 C */
	--Appartenances-Orange: hsl(30, 100%, 46%);

	/* Jaune Pantone 116 C */
	--Appartenances-Jaune: hsl(48, 100%, 50%);

	/* Turquoise */
	        --Turquoise: hsl(187, 100%, 91%);
	  --Turquoise-light: hsl(187,  94%, 94%);
	--Turquoise-lighter: hsl(187,  97%, 97%);

	/* Saumon */
	      --Saumon: hsl(337, 100%, 86%);
	--Saumon-light: hsl(337, 100%, 93%);

	/* JauneClaire */
	      --JauneClaire: hsl(42, 85%, 89%);
	--JauneClaire-light: hsl(42, 86%, 95%);


	/* Grey */
	--Gris: hsl(209, 0%, 50%);

	/* darkGrey */
	--darkGrey: hsl(209, 0%, 13%);

	/* lightGrey */
	--lightGrey: hsl(209, 0%, 90%);

	/* offWhite */
	--lightGrey: #FCFCFC;
	/* HSL(0, 0%, 99%) */
	
}



:root{
	color-scheme: light; /* TO-DO */

	--CorporateIdentityPrincipal: var(--Appartenances-Bleu);
	/* --CorporateIdentityPrincipal: magenta; */

	--PrimaryColor: var(--CorporateIdentityPrincipal); /*hsl(from var(--CorporateIdentityPrincipal) h s 50%)*/ 
	--PrimaryColorDark: hsl(from var(--PrimaryColor) h s 33%);
	--PrimaryColorLight: hsl(from var(--PrimaryColor) h s 67%);

	--AccentColor: var(--CorporateIdentityPrincipal); /*hsl(from var(--PrimaryColor) calc(h - 23) s 50%)*/ /* -23° matches accessoryColor-Two */ /* would be great if I could move this X degrees towards a cooler color no matter which direction… */
	--AccentColorDark:  hsl(from var(--AccentColor) h s 33%);
	--AccentColorLight: hsl(from var(--AccentColor) h s 67%);

	--neutralColor: hsl(from var(--CorporateIdentityPrincipal) h 5% 50%);

	/* TO-DO – hack something with color.js to calculate an adjacent warmer or cooler color from wherever we are on the spectrum… */
}

h1, h2, h3, h4, h5, h6 { color: var(--PrimaryColor); }

a { color: var(--PrimaryColorDark); }


/* Accessory colors */ /* adapted and reversed ordre from from https://iamkate.com/data/12-bit-rainbow/ */
:root {
	--accessoryColor-One:   	#36b;	/*		H 218°		S  57%		L 47%	*/
	--accessoryColor-Two:   	#09c;	/*		H 195°		S 100%		L 40%	*/
	--accessoryColor-Three: 	#0bc;	/*		H 185°		S 100%		L 40%	*/
	--accessoryColor-Four:  	#2cb;	/*		H 174°		S  71%		L 47%	*/
	--accessoryColor-Five:  	#4d8;	/*		H 147°		S  69%		L 57%	*/
	--accessoryColor-Six:   	#9d5;	/*		H  90°		S  67%		L 60%	*/
	--accessoryColor-Seven: 	#ed0;	/*		H  56°		S 100%		L 47%	*/
	--accessoryColor-Eight: 	#e94;	/*		H  30°		S  83%		L 60%	*/
	--accessoryColor-Nine:  	#c66;	/*		H   0°		S  50%		L 60%	*/
	--accessoryColor-Ten:   	#a35;	/*		H 334°		S  54%		L 43%	*/
	--accessoryColor-Eleven:	#817;	/*		H 309°		S  78%		L 30%	*/
	--accessoryColor-Twelve:	#639;	/*		H 270°		S  50%		L 40%	*/

	--accessoryColor-One: var(--Appartenances-Bleu);
	--accessoryColor-Six: var(--Saumon);
	--accessoryColor-Eleven: hsl( from var(--Turquoise) h s 80% );
	--accessoryColor-Four: var(--JauneClaire);
	--accessoryColor-Nine: var(--Saumon-light);
	--accessoryColor-Two: var(--Turquoise);



	--accessoryColor-Neutral-One:   	hsl(from var(--accessoryColor-One   )	h	calc(s - 30)	l	);
	--accessoryColor-Neutral-Two:   	hsl(from var(--accessoryColor-Two   )	h	calc(s - 30)	l	);
	--accessoryColor-Neutral-Three: 	hsl(from var(--accessoryColor-Three )	h	calc(s - 30)	l	);
	--accessoryColor-Neutral-Four:  	hsl(from var(--accessoryColor-Four  )	h	calc(s - 30)	l	);
	--accessoryColor-Neutral-Five:  	hsl(from var(--accessoryColor-Five  )	h	calc(s - 30)	l	);
	--accessoryColor-Neutral-Six:   	hsl(from var(--accessoryColor-Six   )	h	calc(s - 30)	l	);
	--accessoryColor-Neutral-Seven: 	hsl(from var(--accessoryColor-Seven )	h	calc(s - 30)	l	);
	--accessoryColor-Neutral-Eight: 	hsl(from var(--accessoryColor-Eight )	h	calc(s - 30)	l	);
	--accessoryColor-Neutral-Nine:  	hsl(from var(--accessoryColor-Nine  )	h	calc(s - 30)	l	);
	--accessoryColor-Neutral-Ten:   	hsl(from var(--accessoryColor-Ten   )	h	calc(s - 30)	l	);
	--accessoryColor-Neutral-Eleven:	hsl(from var(--accessoryColor-Eleven)	h	calc(s - 30)	l	);
	--accessoryColor-Neutral-Twelve:	hsl(from var(--accessoryColor-Twelve)	h	calc(s - 30)	l	);

	--accessoryColor-Dark-One:   		hsl(from var(--accessoryColor-One   )	h	calc(s + 10)	calc(l - 15)	);
	--accessoryColor-Dark-Two:   		hsl(from var(--accessoryColor-Two   )	h	calc(s + 10)	calc(l - 15)	);
	--accessoryColor-Dark-Three: 		hsl(from var(--accessoryColor-Three )	h	calc(s + 10)	calc(l - 15)	);
	--accessoryColor-Dark-Four:  		hsl(from var(--accessoryColor-Four  )	h	calc(s + 10)	calc(l - 15)	);
	--accessoryColor-Dark-Five:  		hsl(from var(--accessoryColor-Five  )	h	calc(s + 10)	calc(l - 15)	);
	--accessoryColor-Dark-Six:   		hsl(from var(--accessoryColor-Six   )	h	calc(s + 10)	calc(l - 15)	);
	--accessoryColor-Dark-Seven: 		hsl(from var(--accessoryColor-Seven )	h	calc(s + 10)	calc(l - 15)	);
	--accessoryColor-Dark-Eight: 		hsl(from var(--accessoryColor-Eight )	h	calc(s + 10)	calc(l - 15)	);
	--accessoryColor-Dark-Nine:  		hsl(from var(--accessoryColor-Nine  )	h	calc(s + 10)	calc(l - 15)	);
	--accessoryColor-Dark-Ten:   		hsl(from var(--accessoryColor-Ten   )	h	calc(s + 10)	calc(l - 15)	);
	--accessoryColor-Dark-Eleven:		hsl(from var(--accessoryColor-Eleven)	h	calc(s + 10)	calc(l - 15)	);
	--accessoryColor-Dark-Twelve:		hsl(from var(--accessoryColor-Twelve)	h	calc(s + 10)	calc(l - 15)	);

	--accessoryColor-Light-One:   		hsl(from var(--accessoryColor-One   )	h	calc(S - 25)	calc(l + 25)	);
	--accessoryColor-Light-Two:   		hsl(from var(--accessoryColor-Two   )	h	calc(S - 25)	calc(l + 25)	);
	--accessoryColor-Light-Three: 		hsl(from var(--accessoryColor-Three )	h	calc(S - 25)	calc(l + 25)	);
	--accessoryColor-Light-Four:  		hsl(from var(--accessoryColor-Four  )	h	calc(S - 25)	calc(l + 25)	);
	--accessoryColor-Light-Five:  		hsl(from var(--accessoryColor-Five  )	h	calc(S - 25)	calc(l + 25)	);
	--accessoryColor-Light-Six:   		hsl(from var(--accessoryColor-Six   )	h	calc(S - 25)	calc(l + 25)	);
	--accessoryColor-Light-Seven: 		hsl(from var(--accessoryColor-Seven )	h	calc(S - 25)	calc(l + 25)	);
	--accessoryColor-Light-Eight: 		hsl(from var(--accessoryColor-Eight )	h	calc(S - 25)	calc(l + 25)	);
	--accessoryColor-Light-Nine:  		hsl(from var(--accessoryColor-Nine  )	h	calc(S - 25)	calc(l + 25)	);
	--accessoryColor-Light-Ten:   		hsl(from var(--accessoryColor-Ten   )	h	calc(S - 25)	calc(l + 25)	);
	--accessoryColor-Light-Eleven:		hsl(from var(--accessoryColor-Eleven)	h	calc(S - 25)	calc(l + 25)	);
	--accessoryColor-Light-Twelve:		hsl(from var(--accessoryColor-Twelve)	h	calc(S - 25)	calc(l + 25)	);

}

/* Cycle	1	6	11	4	9	2	7	12	5	10	3	8	*/
/* start at 1	+5	+5	+5	+5	+5	+5	+5	+5	+5	+5	+5 */



/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - Background colors - - - - - - - - - - - - - - - - - - - - */


main { background: #FCFCFC; }

nav, #TOC{ background: #F9F9F9; }

#Cover{ background: #EEE; }

footer{ /* background: #F7F7F7; */ }












/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - Spacing - - - - - - - - - - - - - - - - - - - - - - - - - */


h1, h2, h3, p, table, hr {
	margin-block-start: 1rem;
		margin-bottom: 1rem;
		margin-block-end: 1rem;
}
h4, h5, h6, figure {
	margin-block-start: 0.5rem;
		margin-bottom: 0.5em;
		margin-block-end: 0.5em;
}





/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - Elements  - - - - - - - - - - - - - - - - - - - - - - - - */

/* horizontal rules */
hr{
	border: none;
	border-top: 1px solid currentcolor;
	border-top-color: hsl(from currentcolor h s l /0.33);
}

/* Links */
a { 
	text-decoration-thickness: 1px;
	text-underline-offset: 0.33em;
	text-decoration-color: hsl(from currentcolor h s l /0.33);
}
a:hover{
	text-decoration-thickness: 2px;
	/* text-decoration-color: hsl(from currentcolor h s l /0.67); */
}
a:visited{
	text-decoration-style: dotted;
}






/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - Modules - - - - - - - - - - - - - - - - - - - - - - - - - */




/* - - - - - - - - - -  */
/* Comite */

#Comite{
	--gridUnit: 20rem;
	--gapUnit: 2rem;
} /* un-nested for PrinceXML */

	/* & ul { */
	#Comite ul {
		list-style: none;
		padding:0;
	}

	/* & li { */
	#Comite li {
		/* aspect-ratio: 1; */
	}

	/* & .personName { */ #Comite .personName { display: block; font-size: var(--sizeL);}
	/* & .personRole { */ #Comite .personRole { display: block; font-weight: 300; }
/* } */






#Remercions{
	margin-top: 4rem;
} /* un-nested for PrinceXML */

	/* & ul { */
	#Remercions ul {
		margin-top: 2rem;
		list-style: none;
		padding:0;
		display: flex;
		flex-wrap: wrap;
		gap: 1rem;
	}

	/* & li { */
	#Remercions li {
		font-size: var(--sizeXS);
		max-width: 20rem;
		padding:0.5em;
		/* border: 1px solid #CCC; */
	}

/* } */


#Partenaires{}

#Partenaires layout-row { gap: 2rem; }
@media(max-width: 1200px){ 
	#Partenaires layout-row { 
		flex-direction: column; 
		/* background: pink; */
	}
}

@media screen {

#Partenaires h2, #Partenaires h3 {
	font-size: var(--sizeL);
	min-height: 3.5em;
}


#Partenaires ul {
	padding:0;
	list-style-type: none;
}

#Partenaires ul:first-child h4{
	padding-top: 0;
	margin-top: 0;
}
#Partenaires h4{
	color: black;
	margin-bottom: 1em;
}

#Partenaires li {
	margin-bottom: 1em;
}
#Partenaires li:last-of-type{
}


}/* @media screen  */


/* - - - - - - - - - -  */
/* header #Cover */

#Cover h1 {
	/* font-size: var(--sizeX4L);
	letter-spacing: -0.033em;
	line-height: 1;
	text-shadow: 0 0 1px #FFF, 0 0 1em #FFF; color */
}
#Cover h1 span.arYear {
	/* display: block;
	text-align: right; */
} 

/* #Cover h1:has(.arYear){	font-weight: 300; } */
/* #Cover h1     .arYear {	font-weight: 500; } */




/* - - - - - - - - - -  */
/* footer */
footer{
	color: #666;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}
footer a {
	/* color: hsl( from var(--PrimaryColorLight) h 100% 30% ); */
	/* &:hover {
		text-shadow: 0 0 0.5em #0006;
	} */
}
footer, footer * {
	/* font-size: var(--sizeXXS); */
}

footer #Impressum{
	font-size: var(--sizeXXS); text-align: right;
	color: #CCC;
} /* un-nested for PrinceXML */
	/* & a { color: inherit; text-decoration: none; } */
	footer #Impressum a { color: inherit; text-decoration: none; }
/* } */










/* - - - - - - - - - -  */
/* signatures */


#EditoSigs{
	display: flex;
	gap: 2rem;
}
img.signature{
	max-width: 7rem;
}





/* - - - - - - - - - -  */
/* RapportRevision */

#RapportRevision img {
	/* max-width: 50rem; */
}





/* - - - - - - - - - -  */
/* logos */

.eduQuaLogo{
	max-width: 10rem;
}
.SFBILogo{
	max-width: 8rem;
}










/* - - - - - - - - - -  */
/* .qrcode */
.qrcode{
	margin: 2rem auto;
	padding: 1rem;
	padding-right: 2rem;
	width: max-content;
}





/* - - - - - - - - - -  */
/* .statBlock */
.statBlock {
	/* background: linear-gradient( 
		to bottom, 
		hsl( from var(--PrimaryColor) h 0% 80% / 0.1 ), 
		hsl( from var(--PrimaryColor) h 0% 60% / 0.1 ) 
	); */
}








/* - - - - - - - - - -  */
/* nav */
nav {
	color: #444;
	/* border-bottom: 1px solid #CCC; */
}

nav a {
	color: inherit;
	text-decoration: none;
}


#TOC{
	color: #444;
}