/*	2024 EDITION STYLE	-	-	-	-	-	-	-	-	-	-	*/
/*	-	-	-	-	-	-	-	-	-	-	-	-	-	-	-	*/


/*
	<!-- 

		TO-DO
		CONCEPT: 

		colors stable: blue assos, pink secteurs, yellow finance
		forms random: establish a semi-randomized pattern of forms for each pageview

	-->
*/

.decoGrid { 
	position: absolute; 
	top:0; 
	left:0; 
	width:100%; 
	height: 100%;
	z-index: -1;
	display: flex; 
	flex-wrap: wrap; 
	gap:0; 
	align-items: stretch;
	overflow: hidden;

	/* outline: 1px solid #F1357A; outline-offset: -4px; */
}
.decoGrid > * { }

.decoGrid .box { 
	position: relative;
	overflow: hidden;
	/* display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center; */
	/* outline: 1px solid #357AF1;  outline-offset: -2px; */

	container-type: size;
	container-name: box;
}

.decoGrid .box svg{ 
	position: absolute;
	top:50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	display: block;
	fill: inherit;
	width: 100%;

	 width:max(100cqmax);
	height:max(100cqmax);

	/* height: 100%; */
	aspect-ratio: 1;
	/* outline: 1px solid #F1357A; outline-offset: -4px; */
}








.ChapterIntro.singleItemDeco{ 
	/* outline: 8px solid #F0F; outline-offset: -4px;  */
}
.ChapterIntro.singleItemDeco .decoContainer{
	overflow: hidden;
	/* outline: 1px solid #357AF1;  outline-offset: -2px; */
}

.ChapterIntro.singleItemDeco .decoContainer .imageShim{ 
	position: relative;
	container-type: size;
	container-name: box;
	width: 100%;
	height: 100%;
	/* outline: 1px solid #F1357A; outline-offset: -4px; */
}

.ChapterIntro.singleItemDeco .decoContainer .imageShim svg{
	/* outline: 1px solid #7AF135; outline-offset: -8px; */
	position: absolute;
	top:50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	display: block;
	fill: inherit;
	width: 100%;
	 width:100cqmin;
	height:100cqmin;
}

.ChapterIntro.singleItemDeco:has(svg.wide) .decoContainer .imageShim svg{
	 width:100cqmax;
	height:100cqmax;
}








.ChapterIntro h1 {
}

.underlineDeco,
.ChapterIntro h1 span{
	width: fit-content;
	position: relative;
	z-index:2;
}

.underlineDeco:after,
.ChapterIntro h1 span:after{
	display: block;
	content: "";
	width: 100%;
	height: 0.5em;
	background-color: #FFF9;
	position: absolute;
	bottom: 0.125em;
	z-index: -1;
}


/* #mainNavList {
	background-color: rgb(var(--BleuPastel));
} */



@media screen {
	div.ChapterIntro { 
		/* min-height: 25vh !important;  */
		/* width: 100%; */
	}
	
}


div.ChapterIntro#EspacesFemmesIntro, 
div.ChapterIntro#EspaceHommesIntro,
div.ChapterIntro#CPMIntro,
div.ChapterIntro#ICIntro,
div.ChapterIntro#FormationIntro {
	/* min-height: unset !important; */
}



/* - - - - - - - - - - - - - - - - - - - - - - */
/* Cover */

#Cover {}

#Cover #coverGraphic{ }

#Cover #coverGraphic #coverTitle{ 
	width: 100%;
	height: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	justify-content: space-between;
	align-items: flex-start;
	/* align-content: space-between; */

}
#Cover #coverGraphic #coverTitle > * {
	margin: 0;
	line-height: 0.87;
}

#Cover #coverGraphic #coverTitle img.logo{
	/* flex: 0 1 calc(50% - 1rem); */
	width: calc(40% - 1rem);
}

#Cover #coverGraphic #coverTitle .raTitle{
	color: #235585;
	font-weight: 400 !important;
	flex: 0 1 calc(50% - 1rem);
	font-size: 12vw;
	letter-spacing: -0.02em;
}

#Cover #coverGraphic #coverTitle .raYear{
	font-family: 'IBM Plex Serif';
	font-weight: 900;
	color: black;
	flex: 0 0 100%;
	font-size: 38vw;
	text-align: center;
}

#Cover #coverGraphic {
	background: url("rsrc/graphics/cover.png") no-repeat center center;
	background-size: cover;
}

/* - - - - - - - - - - - - - - - - - - - - - - */

/* Section deco */

section { 
	position: relative; 
	/* overflow: hidden;  */
}
section .backgroundContainer{
	position:absolute; 
	z-index: -99; 
	top:0; left:0;
	width:100%; height:100%; 
	overflow: hidden; 
}

section{
	fill: rgb(var(--BleuPastel));
}
#Editorial{ fill: rgb(var(--BleuPastel)); }
#Activites{ fill: rgb(var(--BleuPastel)); }
#Comite{ fill: rgb(var(--BleuPastel)); }
#Collaborat{ fill: rgb(var(--BleuPastel)); }
#Qualite{ fill: rgb(var(--BleuPastel)); }
#InterpretariatCommunautaire{ fill: rgb(var(--BleuPastel)); }
#CPM{ fill: rgb(var(--BleuPastel)); }
#EspacesSociaux{ fill: rgb(var(--Saumon)); }
#EspacesFemmes{ fill: rgb(var(--Saumon)); }
#EspaceHommes{ fill: rgb(var(--Saumon)); }
#Formation{ fill: rgb(var(--Saumon)); }
#RapportRevision{ fill: rgb(var(--Jaune)); }
#Bilan{ fill: rgb(var(--Jaune)); }
#CompteExploitation{ fill: rgb(var(--Jaune)); }
#Partenaires{ fill: rgb(var(--BleuPastel)); }
#Soutien{ fill: rgb(var(--BleuPastel)); }



#EspacesSociaux > .backgroundContainer{
	display: none;
}


section .backgroundContainer {
	container-type: size;
	container-name: backgroundContainer;
	position: sticky; top:0;
	overflow: hidden; 
}

section .backgroundContainer .svgBox{
	max-height: 100cqh;
	width: 50cqw;
}

section .backgroundContainer .svgBox:nth-of-type(even){ margin-left: 10cqw;}
section .backgroundContainer .svgBox:nth-of-type(odd){ margin-left: 40cqw;}

section .backgroundContainer .svgBox svg{
	opacity: 0.5;
	max-height: 100cqh;
}



/* - - - - - - - - - - - - - - - - - - - - - - */

.contentArea h1 {
	color: #235585;
}
.isHat{
	color: #235585;
}

.ChapterIntro h1.chapterTitle{
	color: var(--darkBlue);
	font-weight: 300;
}

#Editorial .isHat{
	/* background: url("rsrc/graphics/ra2024_00.svg") no-repeat center center;
	background-size: cover; */
	position: relative;
}
#Editorial .isHat:after{
	display: block;
	width: 100%;
	aspect-ratio: 1;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: -1;
	content: url("rsrc/graphics/ra2024_00.svg");
	opacity: 0.67;
}

@media(max-width: 75rem){
	#Editorial .isHat:after{
		opacity: 0.5;
		top: 0;
		transform: translateY(-20%);
	}
}

/* @media(max-width: 50rem){
	#Editorial .isHat:after{
		opacity: 0.5;
		top: 0;
		transform: translateY(-20%);
	}
} */



/* overriding normal design */
section.hasStats { display: initial; }

section.hasStats .stats { 
	padding: 2rem;
	columns: auto;
	column-width: 20rem;
	column-gap: 1rem;
	/* display: flex; 
	flex-wrap: wrap; 
	gap: 1rem;
	align-items: flex-start; */
}

section.hasStats .stats .statBlock { 
	background-color: rgba(var(--BleuPastel),0.3);
	border-top: 1px solid rgba(var(--BleuPastel),1);
	padding: 1rem;
	width: 100%;
	break-inside: avoid;
	margin-bottom: 1rem;
}


#Collaborat{
	--SectionAccentColor: rgb(var(--BleuPastel));
}
#InterpretariatCommunautaire, #CPM, #EspacesSociaux, #Formation {
	--SectionAccentColor: rgb(var(--Saumon));
}

section.hasStats .stats .statBlock.chiffreCle{
	background-color: var(--SectionAccentColor);
}





/* - - - - - - - - - - - - - - - - - - - - - - */
/* Sidebar NAV */
/* - - - - - - - - - - - - - - - - - - - - - - */

nav#Sidebar {
	/* padding-left: 1em; */
	background-color: #FFF;
	color: #222;
}

nav#Sidebar a {
	color: inherit;
}

nav#Sidebar a[href="#AssociationIntro"]{ background-color: rgb(var(--BleuPastel)); }
   nav#Sidebar a[href="#SecteursIntro"]{ background-color: rgb(var(--Saumon)); }
   nav#Sidebar a[href="#FinancesIntro"]{ background-color: rgb(var(--Jaune)); }

nav#Sidebar a.menuItem.active[href="#AssociationIntro"]{ background-color: rgb(var(--BleuPastel)); color: #222; }
   nav#Sidebar a.menuItem.active[href="#SecteursIntro"]{ background-color: rgb(var(--Saumon)); color: #222; }
		nav#Sidebar a.menuItem.active[href="#InterpretariatCommunautaire"]{ background-color: rgba(var(--Saumon),0.5); color: #222; }
		                        nav#Sidebar a.menuItem.active[href="#CPM"]{ background-color: rgba(var(--Saumon),0.5); color: #222; }
		             nav#Sidebar a.menuItem.active[href="#EspacesSociaux"]{ background-color: rgba(var(--Saumon),0.5); color: #222; }
		                  nav#Sidebar a.menuItem.active[href="#Formation"]{ background-color: rgba(var(--Saumon),0.5); color: #222; }
   nav#Sidebar a.menuItem.active[href="#FinancesIntro"]{ background-color: rgb(var(--Jaune)); color: #222;}
		   nav#Sidebar a.menuItem.active[href="#RapportRevision"]{ background-color: rgb(var(--Jaune-light)); color: #222; }
		             nav#Sidebar a.menuItem.active[href="#Bilan"]{ background-color: rgb(var(--Jaune-light)); color: #222; }
		nav#Sidebar a.menuItem.active[href="#CompteExploitation"]{ background-color: rgb(var(--Jaune-light)); color: #222; }

nav#Sidebar ul#mainNavList > li:first-child a.menuItem { 
	background-color: var(--darkBlue); 
}

#mainNavList li:first-child:after {
		display: none;
}


/* - - - - - - - - - - - - - - - - - - - - - - */
/* BORERS */
/* - - - - - - - - - - - - - - - - - - - - - - */
#Sidebar { border-right: 1px solid #222; }
#Cover { border-bottom: 1px solid #222; }
.chapter, section { border-top: 1px solid #222; }
#EspacesFemmes:before,
#EspaceHommes:before { display: block; border-top: 1px solid #222; content: "";}

#Editorial,
#Activites,
#RapportRevision,
#Partenaires { border-top: none;}


#mainNavList li{
	/* border-bottom: 1px solid #222; */
}
#mainNavList li {
	position: relative;
}

#mainNavList li:after {
	content: "";
	position: absolute;
	width: calc(100% - 4rem);
	margin-left: 2rem;
	border-bottom:1px solid #222;
}