/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - MAIN BLOCKS GRID  - - - - - - - - - - - - - - - - - - - */


.blocksGrid {
	padding: 1.5rem 0;
	padding: 3rem;

	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-auto-rows: 1fr;

	gap: 1.5rem;

	background-color: var(--blocsBackgroundColor);
}



.blocksGrid > * {
	background-color: #FFF;
	border-top: 2px solid var(--Appartenances-Bleu);
	padding: 1rem;
	box-shadow: 0.5rem 0.5rem 0.67rem #0003;

	/* TO-DO: check this doesn't break things… */
	overflow-x: hidden;
}

.blocksGrid,
.blocksGrid p {
	font-size: var(--sizeS);
}

.blocksGrid > * > h1:first-child, 
.blocksGrid > * > h2:first-child, 
.blocksGrid > * > h3:first-child, 
.blocksGrid > * > h4:first-child, 
.blocksGrid > * > h5:first-child{
	margin-bottom: 1rem;
}


/*  */

:has(.sidebar) .blocksGrid{
	padding:0;
	display: grid;
	grid-auto-flow: column;
	grid-template-columns: unset; 
	gap: 1rem;
}
:has(#Introduction) .sidebar, :has(#Introduction) .blocksGrid {
	margin-top: 3rem;
}

/* TO-DO: check these breakpoints… move this to mobile*/
@media( max-width: 1280px ) { 
	.blocksGrid {
		padding: 1rem;
		grid-template-columns: 1fr 1fr;
	}

	:has(.sidebar) .blocksGrid{
		grid-auto-flow: unset;
		grid-template-columns: 1fr 1fr;
		/* grid-auto-rows: 1fr; */
	}
}
@media( max-width: 800px ) {
	.blocksGrid {
		padding:0;
		grid-template-columns: 1fr;
	}
	
	:has(.sidebar) .blocksGrid{
		grid-auto-flow: unset;
		grid-template-columns: 1fr;
		/* grid-auto-rows: 1fr; */
	}
}





/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - -BLOCK LINKS  - - - - - - - - - - - - - - - - - - - */

/* TO-DO */
/* see function blockLinks() in UI-elements.js */
/* .blockLink{ display: none; } */
.blocksGrid > *:has(.blockLink){}

a.blockLink{}


/* .blocksGrid > *:has(.blockLink){ transition: transform ease-in-out 0.25s; }
.blocksGrid > *:has(.blockLink):hover{ transform: scale(105%); } */

/* JS adds the .blockLinked class on the parent */

.blockLinked { transition: transform ease-in-out 0.25s; }
.blockLinked:hover { transform: scale(105%); }

.blockLinked a.blockLink{ display: block; width:0; height:0; overflow: clip; }

.blockLinked { position: relative; }
.blockLinked a.blockLink:after{
	display: block;
	content: "+";
	position: absolute;
	bottom:0.5rem;
	right:0.5rem;

	background-color: var(--Appartenances-Bleu-30);
	color: #FFF;
	
	display: flex;
	justify-content: center;
	align-items: center;
	
	font-size: var(--sizeL);
	line-height: 0;
	font-weight: 900;

	padding:0.1em;
	padding-bottom: 0.25em;
	

	aspect-ratio: 1;
	border-radius: 50%;

	opacity: 0.5;
}
.blockLinked:hover a.blockLink:after{ opacity: 1; }





/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - CAPSULE BUTTONS / LINKS - - - - - - - - - - - - - - - - */

button, input {
	font-family: 'IBM Plex Sans';
}

a.capsule,
button.capsule,
ul.capsuleList a {
	text-decoration: none;
	border: none;
	padding: 0;
	margin:0;

	background-color: var(--Saumon-light);
	border: 1px solid rgb(255, 219, 233);
	font-size: var(--sizeS);
	font-weight: 500;
	letter-spacing: 0;
	padding: 0.25em 0.5em;
	border-radius: 0.5em;
	color: var(--Appartenances-Bleu-Dark);
	/* */
}

a.capsule:hover,
button.capsule:hover,
ul.capsuleList a:hover {
	background-color: var(--Saumon);
	color: #FFF;
	cursor: pointer;
}

/* container elements for capsules */
*:has(> .capsule), 
ul:has(>li>.capsule),
ul.capsuleList:has(a) {
	list-style: none;
	padding: 1rem 0;
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
}
ul:has(>li>.capsule) li{ 
	display: block;
	/* white-space: nowrap; */
	margin: 0;
	/* or just: */
	display: contents;
}





/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - SUBMENU LINKS - - - - - - - - - - - - - - - - */

/* could be <a> links in a .submenu, or just something containing a.submenu links */
.subMenu a,
a.subMenu,
ul.secteurLocations a { 
	color: var(--Appartenances-Bleu);
	text-decoration: none;
	padding: 0.67rem;
	display: block;
	font-size: var(--sizeS);
	font-weight: 500;
}

.subMenu a:hover,
a.subMenu:hover,
ul.secteurLocations a:hover { 
	background-color: var(--Appartenances-Bleu-20);
}

.subMenu a:after,
a.subMenu:after,
ul.secteurLocations a:after { 
	display:block;
	content: '';
	border-bottom: 1px solid var(--Appartenances-Bleu);
	transform: scaleX(0);  
	transition: transform 250ms ease-in-out;
}
.subMenu a:hover::after,
a.subMenu:hover:after { transform: scaleX(1); transform-origin:  0% 50%; }

/*ul.secteurLocations a:before {
content:"\f3c5";
font-family:var(--fa-style-family,"Font Awesome 6 Free");
padding-right:.5em
}*/


/* .submenu Parents */
*:has(>a.subMenu), 
ul:has(>li>a.subMenu),
ul.subMenu,
ul.secteurLocations:has(>li>a) {
	padding: 0.5rem 0;
	display: flex;
	gap: 0 1rem;
	flex-wrap: wrap;
	align-items: baseline;
}
ul.subMenu li, 
ul:has(>li>a.subMenu) li,
ul.secteurLocations:has(>li>a) li { 
	display: block;
	white-space: nowrap;
	margin: 0;
	/* or just: */
	display: contents;
}


*:has(>a.subMenu), 
ul:has(>li>a.subMenu),
ul.subMenu,
ul.secteurLocations:has(>li>a) {
	border-top: 1px solid var(--Appartenances-Bleu);
}

/* TO-DO, maybe */
/* left borders on all but first .subMenu links. hard if we don't decide if it's a partent or child class… */
/* 
.subMenu a, a.subMenu{
	border-left: 1px solid var(--Appartenances-Bleu);
}

.subMenu a:first-child,
.subMenu li:first-child a{
	border-left-width: 0;
} */





/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - PDF links - - - - - - - - - - - - - - - - - - - - - - - */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - PDF links - - - - - - - - - - - - - - - - - - - - - - - */

.sidebar a[href$=".pdf"]{
	color: var(--Appartenances-Bleu);
	padding: 0.67rem;
	/* display: block; */
	font-weight: 500;
}

.sidebar a[href$=".pdf"]:hover { 
	background-color: var(--Appartenances-Bleu-20);
}

.sidebar a[href$=".pdf"]::before {
	font-family: var(--fa-style-family,"Font Awesome 6 Free");
	font-weight: var(--fa-style,900);
	font-weight: 900;
	display: inline-block;
	padding-right: 3px;
	vertical-align: middle;
	content: "\f1c1";
}

.sidebar a[href$=".pdf"]:after { 
	display:inline-block;
	content: '';
	border-bottom: 1px solid var(--Appartenances-Bleu);
	transform: scaleX(0);  
	transition: transform 250ms ease-in-out;
}

.sidebar a[href$=".pdf"]:hover:after { transform: scaleX(1); transform-origin:  0% 50%; }




/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - page rapports annuels - - - - - - - - - - - - - - - - - */

.rapports-annuels .com-content-category-blog__items.blog-items.columns-2 img,
.rapports-annuels .com-content-category-blog__items a[href$=".pdf"]:before {
    display: none;
}






/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - Action list - - - - - - - - - - - - - - - - - - - - - - - */

ul.actionList, 
ul:has(.actionList){
	padding:0;
	list-style-type: none;
}
ul.actionList li:before, 
ul:has(.actionList) li:before{
	content: "→";
	font-weight: 500;
	display: inline-block;
	width: 1.25em;
}

/*  */



/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - textBlockContent - - - - - - - - - - - - - - - - - - - - - - - */


.textBlockContent{
	max-width: 75ch;
}







/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - Accordion - - - - - - - - - - - - - - - - - - - - - - - */



/* https://dev.to/builderio/creating-animated-accordions-with-the-details-element-and-modern-css-4mio */
/* https://dev.to/link2twenty/native-html-accordion-2fma */
/* https://stackoverflow.com/questions/78477368/accordion-based-on-details-and-summary-animated-with-javascript-doesnt-work-as */

/* function */
.accordion{ 
	position: relative;
}

.accordion details[name="espaceFemmes"]{
	/* remove the name attribut in HTML to remove exclusivity of items.  */
	/* background-color: var(--Saumon-light); */
}
.accordion details::details-content {
	overflow: hidden;
	height: 0;
	/* Enable transitioning of `content-visibility` */
	transition: height 0.3s, content-visibility 0.3s;
	transition-behavior: allow-discrete;
}
.accordion details[open]::details-content {
	height: auto;
}
:root {
	interpolate-size: allow-keywords;
}


/* highlight closd items for UI feedback… */
.accordion details:not([open]) summary:hover{
	background-color: var(--Appartenances-Bleu-10);
}


/* UI */

.accordion .UI {
	position: absolute;
	right: 0;
	top: -1.7rem;
 }
.accordion:has(>.UI){
	margin-top: 3rem;
}

.accordion .UI {
	display: flex;
	gap: 0.5rem;
}

.accordion .UI button {
	border: none; background-color: #FFF0; margin: 0; padding:0;
	
	height: 1.2rem;
	padding: 0 0.33rem;
	
	font-size: var(--sizeXXS);
	color: var(--Appartenances-Bleu);


	/* border: 1px solid var(--Appartenances-Bleu-50);
	background-color: var(--Appartenances-Bleu-05);
	border-radius: 0.33rem; */
	border: 1px solid var(--Appartenances-Bleu-50);
	border-radius: 0.33rem;
}


.accordion .UI button {
	cursor: pointer;
	opacity: 0.5;
}
.accordion .UI button:hover{
	/* border: 1px solid var(--Appartenances-Bleu-50); */
	opacity: 1;
	background-color: var(--Appartenances-Bleu-20);
	color: var(--Appartenances-Bleu-Dark);
}




/* Accordion Details UI */

.accordion details { position:relative; }
.accordion details:after{
	content: "\f078";
	font-family: var(--fa-style-family,"Font Awesome 6 Free");
	color: var(--Appartenances-Bleu-Dark);
	position:absolute;
	top:1rem; 
	right:0.5rem;
	pointer-events: none;
 }
.accordion details[open]:after{
	color: var(--Appartenances-Bleu-30);
	content: "\f077";
 }


/* Accordion Style */
.accordion {
	border-top: 2px solid var(--Appartenances-Bleu);
	padding-left: 1rem;

	margin-top: 2rem;
	margin-bottom: 3rem;

}
.accordion h3,
.accordion h4{
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
}


/* joomla fix – pas de balise titre dans le summary… */
.accordion summary { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.accordion summary > * { padding:0; }

/* visuel = h3 */
.accordion summary {
	line-height: 1.2;
	font-weight: 600;
	font-size: var(--size1);
	color: var(--Appartenances-Bleu);
}
/* /joomla fix */



.accordion details summary {
	list-style: none;
	cursor: pointer;

	 padding-right: 2.5rem; /* visual space for the chevrons (no overlap on really long titles) */
}

.accordion details summary::-webkit-details-marker {
	display: none;
}

.accordion details {
	border-bottom: 1px solid #CCC;	
}

.accordion details:last-child{ }

.accordion details[open]::details-content {
	padding-bottom: 1rem;
}













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

*:has( > .sidebar){
	display: flex;
	gap: 1rem;
}
*:has( > .sidebar) > * {
	flex: 1 1 auto;
}
*:has( > .sidebar) >*:first-child {
	flex: 1 1 auto;
}

.sidebar { 
	flex: 0 0 20rem;
	/* max-width: 20rem; */
	margin-bottom: 2rem;

	font-size: var(--sizeS);
	background-color: var(--Appartenances-Bleu-05);
	padding: 1rem;
}



/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Sidebar Accordion */

.sidebar .accordion {
	border: 0;
	padding: 0;
}


.sidebar .accordion details{
	margin-bottom: 1rem;
	border: 0px;
	border-top: 2px solid var(--Appartenances-Bleu);
	background-color: #FFFC;
	padding: 0 0.5rem;
}
































/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - CTA - - - - - - - - - - - - - - - - - - - - - - - - - - */

.ic-registration-box .ic-button-box.ic-registration-box-register-ok .btn.btn-success,
a.CTA,.actionButton a {
	font-size: var(--sizeM);
	display: block;
	max-width: max-content;
	font-weight: 600;
	text-decoration: none;
	background: unset;
	background-color: unset;
	background-color: var(--Appartenances-Bleu) !important; /* why?? */
	color: white;
	
	
	/*Nope, show the content, wrap if necessary*/
	/*white-space: nowrap;
	overflow-x: hidden;
	text-overflow: ellipsis;
	*/
	text-align: center;
	
	
	padding: 0.67em;
	margin: 0.5rem 0;
	border-radius: 0.33em;
}
a.CTA .fa,.actionButton a .fa {
	color: white;
}
.ic-registration-box .ic-button-box.ic-registration-box-register-ok .btn.btn-success:hover,
a.CTA:hover,.actionButton a:hover {
	background-color: var(--Appartenances-Bleu-Dark) !important; /* why?? */
}
.ic-registration-box .ic-button-box.ic-registration-box-register-ok .btn.btn-success{cursor: pointer;}





/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - .drapeau #ACTION  - - - - - - - - - - - - - - - - - - - */

.drapeau, .drapeau * { max-width: unset; }

.drapeau ul, .drapeau li {
	/* joomla markup */
	display: contents;
}

.drapeau {
	--drapeauWidth: 3rem;
	font-size: var(--sizeS);
	font-weight: 500;
	color: var(--Appartenances-Bleu-Dark);
	display: block;
	position: fixed;
	/* left: calc(100% - 3rem); */
	right:0;
	top: 12rem;
	transform: translateY(-50%);

	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1em;
	padding: 1em 0;

	background-color: var(--Saumon);
	/* opacity: 0.67; */
}

.drapeau a,
.drapeau a:not([class]) { 
	color: var(--Appartenances-Bleu-Dark);
	background-color: unset;
	white-space: nowrap;
	text-decoration: none;
	display: flex;
}

.drapeau a { 
	padding-right: 1rem; 
}

.drapeau .icon {
	/* background-color: blue; */
	flex: 0 0 var(--drapeauWidth);
	text-align: center;
}



.drapeau {
	width: var(--drapeauWidth);
	transition: width 0.3s ease-in-out;
}

/* .drapeau:hover */
.drapeau:hover{
	width: min-content;
}


/* .drapeau a:hover */
.drapeau a:hover,
.drapeau a:not([class]):hover {
	background-color: unset;
	color: #FFF;
	transition: color 250ms ease-in-out;
}
.drapeau a:hover .fa {
	color: #FFF;
}


/* line animation */
/* this does not work with the joomla markup… */
.drapeau a::after { 
	display:block;
	content: '';
	border-bottom: 1px solid var(--Appartenances-Bleu-Dark);
	transform: scaleX(0);  
	transition: transform 250ms ease-in-out;
}
.drapeau a:hover::after { transform: scaleX(1); transform-origin:  0% 50%; }





@media (max-width: 1280px) {
	/* not gonna bother mobile users with this… */
	.drapeau { display: none; }
}











/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - .breadcrumb  - - - - - - - - - - - - - - - - - - - - - - */

nav.breadcrumb {
	font-size: var(--sizeXXS);
	padding: 0.25rem 0;
	background-color: var(--Appartenances-Bleu-10);
}

nav.breadcrumb a {
	color: var(--Appartenances-Bleu);
}

nav.breadcrumb ol.breadcrumb {
	list-style-type: none;
	display: flex;
	/* padding-left: 3rem; */
	/* TO-DO set this as some local variable or inherit? */
}
nav.breadcrumb ol.breadcrumb li{
	margin-right: 0.5rem;
}
nav.breadcrumb ol.breadcrumb li:not(:first-of-type):before{
	content: "/";
	padding-right: 0.5rem;;
}

#level3 nav.breadcrumb {
	margin-bottom: 2rem;
}



/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - .carousel - - - - - - - - - - - - - - - - - - - - - - - */


/* TO-DO */






/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - NEWS / Formation lists  - - - - - - - - - - - - - - - - */

ul.newsList{
	list-style-type: none;
	padding: 0;


	height: 100%;
	display: flex;
	flex-direction: column;
}

ul.newsList a {
	background: none;
	text-decoration: none;
	display: block;
	
	padding: 1rem 0;
	border-bottom: 1px solid var(--Appartenances-Bleu-30);

	color: var(--Appartenances-Bleu);
	font-size: var(--sizeL);
	font-weight: 400;
}
ul.newsList li:last-child a{
	border-bottom: none;
}

ul.newsList .date {
	display: block;
	color: #999;
	font-size: var(--sizeXS) !important; /* TO-DO */
	font-weight: 400;
	font-family: 'IBM Plex Mono', monospace;
	margin-bottom: 0.5rem;
}