/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - GENERAL - - - - - - - - - - - - - - - - - - - - - - - - */

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

a:not([class]) { 
	color:inherit;
	color: #000;
	color: var(--Appartenances-Bleu); font-weight: 500;
	text-decoration: underline;
	text-decoration-color: var(--Appartenances-Bleu);
	text-decoration-thickness: 1px;
	text-underline-offset: 2.5px;
	/* background-color: var(--Appartenances-Bleu); */
	/* background-color: hsla( var(--Appartenances-Bleu), 0.8); */
	/* background-color: color-mix(in srgb, var(--Appartenances-Bleu) 10%, transparent); */
	
}
a:not([class]):hover{
	background-color: var(--Appartenances-Bleu-30);
	background-color: color-mix(in srgb, var(--Appartenances-Bleu) 30%, transparent);
	text-decoration-color: var(--Appartenances-Bleu-Dark);
	/* text-shadow: 0 0 2px white; */
}


ul {
	list-style-type: disc;
	list-style-position: inside;
	color: var(--Appartenances-Bleu)
}
li {
	margin: 0.5em 0;
}

main p {
	margin-bottom: 1rem;
}





/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - LAYOUT  - - - - - - - - - - - - - - - - - - - - - - - - */

body { margin: 0; }
body > * { }


/* body flow */
body{
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	gap: 0;
}
body > * { flex: 0 0 auto; }

/* footer { margin-top: auto; } */



:root{ --headerHeight: 4rem; }

html {
	scroll-padding-block-start: var(--headerHeight);
	scroll-behavior: smooth;

	/* https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding */
}


.middle{
	margin: auto;
}
body:not(.accueil) .container-component,/*.item-page, /* joomla? la classe item-page s'ajoute aux pages affichant un article */
.textBlockContent{
	max-width: 75ch;
	margin: auto;
}




/* fix layout for pages that don't have a sidebar, except the home page * /
*:not(:has(.intro)) 
*:not(:has( > .sidebar)) > .mainContent{
	max-width: 75ch;
	margin: auto;
}/* plus nécessaire */











/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - HEADER  - - - - - - - - - - - - - - - - - - - - - - - - */

header { 
	padding: 1rem 3rem;

	min-height: var(--headerHeight);

	position: sticky;
	top:0;
	z-index: 999;
	box-shadow: 0 0 0.33em 0em #0003;
	--HeaderBkg: #F8F8F8;
	background-color: var(--HeaderBkg);
	border-bottom: 1px solid #DDD;

}

header {
	overflow-x: clip;
	/* overflow-y: overflow; */
}

header > * { max-width: min-content; } 


header, header.row {
	display: flex;
	justify-content: space-between;
	align-items: center; 
	gap: 3rem;
}

header .search { margin-left: auto; }


/* - - #Logo - -  */
header #Logo img,
header .brand-logo img {
	max-width: 16rem;
	min-width: 12rem;
	width: 100%;
	transform: translateY(-6%);
	height: unset;
}
header #Logo,
header .brand-logo{
	z-index:2000;
}






/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - all nav ULs - - - - - - - - - - - - - - - - - - - - - - */

nav ul, ul.nav,
ul#NavBar, 
ul#NavBar ul {
	list-style-type: none;
	padding: 0;

	& li {
		margin:0;
	}

}/* ul#NavBar */









/* appartenances_UI-megamenu.css */







/* - - nav#Search - - */

header nav#Search { display: none; }

header div.search input {
	height: 2.5rem;
	background-color: #F4F4F4;
	border: 1px solid #CCC;
	padding: 0.25rem;
	border-radius: 0.25rem;
}
header div.search input:focus {
	border: 3px solid var(--Appartenances-Bleu);
	font-weight: 400;
}

/* .element-invisible from Joomla */ /* TO-DO check if this appears elewhere, if this code breaks something… */
.element-invisible {
	visibility: hidden;
	position: absolute;
}










/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - INTRODUCTION  - - - - - - - - - - - - - - - - - - - - - */

#IntroText h1,#IntroText .h1{
	font-family: 'IBM Plex Serif', serif;
	font-style: italic;
	font-weight: 400;
	font-size: var(--sizeXXL);
}


body#level1 #Introduction {
	padding-left: 0;
	gap:0;
}

body#level1 #Introduction > * { 
	flex: 1 0 50%; 

	display: flex;
	align-items: stretch;
}


body#level1 #Introduction img {
	object-fit: cover;
	object-position: center top;

}
/* TO-DO: javascript to take the ref of the image out of the HTML and put it in the background? */
body#level1 #Introduction #IntroImg{
	background: url("rsrc/image.jpg") no-repeat center center;
	background-size: cover;
	position: relative;
}
body#level1 #Introduction #IntroImg:after,body #Introduction #IntroImg > div > div:after {
	display: block;
	position: absolute;
	top:0;
	right:-1px;
	width: 33%;
	height: 100%;
	content: " ";
	/* border: 1px solid #F0F; */
	background: linear-gradient(90deg, #FFF0, #FFFF);
}


body#level1 #Introduction #IntroText,body #Introduction #IntroText{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-wrap: balance;
	padding: 3rem;
}


@media (min-width: 920px){
	.djslider { 
		width: 50vw; 
		aspect-ratio: 16/9;
		height: unset !important;
		min-height:100%;
	}
	
	.djslider-loader, .djslider-loader-default,
	.djslider, 
	.djslider *,
	.djslider li { 
		height: 100%!important; 
	}
}

@media (max-width: 920px) {
	.carousel{
		flex-direction: column;
	}
	.djslider { 
		height: unset !important;
		aspect-ratio: 24/9;	
	}
	.IntroText,
	body#level1 #Introduction #IntroText,body #Introduction #IntroText{
		padding: 1rem;
	}
	#IntroText h1, #IntroText .h1 {
		font-size: var(--sizeL);
		font-weight: 500;
	}
}



/* z-index pour bouton next slider */
.next-button {
	z-index: 1;
}









/* Intro #level2  */

body#level2 .introGallery {
	width: 100%;
	max-width: 100vw;
	max-width: 100dvw;
	aspect-ratio: 64/9;
	display: flex;
	gap: 0;
}

body#level2 .introGallery > * {
	aspect-ratio: 16/9;
	flex: 1;
}
body#level2 .introGallery > *,
body#level2 .introGallery img {
	width: 100%; height: 100%;
	object-fit: cover;
}

body#level2 #Introduction {
	position: relative;
}
body#level2 #Introduction #IntroText {
	/* position: absolute;
	top:0;
	left:0;
	width: 100%;
	height: 100%; 
	background: linear-gradient( 90deg, hsla(209, 71%, 55%, 80%), hsla(209, 71%, 100%, 10%));
*/
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding: 3rem;
}

body#level2 #Introduction #IntroText * {
	/* color: #FFF; */
}






/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - Intro stats  - - - - - - - - - - - - - - - - - - - */

.introStats{
	display: flex;
	justify-content: space-evenly;
	width: 100%;
	/* background-color: var(--Appartenances-Bleu-10); */
	/* border-bottom: 1px solid var(--Appartenances-Bleu-30); */
	padding-bottom: 2rem;
	padding-top: 2rem;
}
.introStats * {}

.introStats h2 { 
	font-family: 'IBM Plex Mono', monospace; 
	font-weight: 600;
	color: var(--Appartenances-Bleu)
}
.introStats h3 { 
	font-size: var(--sizeM);
	color: #000;
	font-weight: 400;
}





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


#MainBlocks {}
#MainBlocks .secteur {}

/* This is all standard .blocksGrid */








/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - Level 2 Starting Top Blocks - - - - - - - - - - - - - - */

.mainContent:has(.startingBlocks){
	padding-top:0 !important; /* TO-DO 🙁 */
	padding-left: 0 !important; /* TO-DO 🙁 */
	padding-right: 0 !important; /* TO-DO 🙁 */
}
main.hasSidebar:has(.startingBlocks){ gap:0; } /* TO-DO 🙁 */

/* this was in UI css, does not belong, putting it here if anyone is looking for it… */
/* .mainContent{
	margin: 3rem;
} */



.startingBlocks {

	display: grid;
	/* grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); */
	/* grid-auto-flow: column; */
	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); /* https://css-tricks.com/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit/ */
	
	gap: 2rem;
	background-color: var(--Turquoise-lighter);

	padding-left: 3rem;
	padding-right: 3rem;
	padding-top: 1rem;
	padding-bottom: 3rem;
}

/* !!! */
main.hasSidebar:has(.startingBlocks) .mainSidebar,
.startingBlocks{
	padding-top: 2rem;
}


.startingBlocks .block{
	background-color: #FFF;
	padding:1rem;
	border: 1px solid #00000009;
	border-top: 2px solid var(--Appartenances-Bleu);
	box-shadow: 0.5rem 0.5rem 0.67rem #0003;
}

.startingBlocks .block h3 {
	font-size: var(--sizeL);

}
.startingBlocks .block h3 a { text-decoration: none; }

.startingBlocks .block p { font-size: var(--sizeS); }


.startingBlocks .block:hover{ /* transform… */ }


.startingBlocks .block{ position: relative; }
.startingBlocks .block a.more {
	display: block;
	width:0px;
	height:0px;
	overflow: hidden;
}
.startingBlocks .block a.more:after{
	display: none;
	position: absolute;
	bottom:8px;
	right:8px;
	width: 32px;
	aspect-ratio: 1/1;
	font-size: var(--sizeXL);
	border-radius: 50%;
	color: var(--Appartenances-Bleu-50);
	background-color: var(--Appartenances-Bleu-10);
	text-align: center;
	content: "+";
}
.startingBlocks .block:hover a.more:after{
	display: block;
}
/* <a href="" class="more">En savoir plus…</a> */









/* .mainSidebar */
.mainSidebar { 
	background-color: var(--Appartenances-Bleu-10);
}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - SideBarInfoMenu - - - - - - - - - - - - - - - - - - - - */








/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - Formations & News - - - - - - - - - - - - - - - - - - - */

/* #Formations { display: none; } */

#Formations h4, 
#News h4 {
	font-size: var(--sizeL);
	font-weight: 300;
	color: var(--Appartenances-Bleu-Dark)
}

a.mainLink {
	color: var(--Appartenances-Bleu);
	border: 1px solid;
	white-space: nowrap;
	width: min-content;
	border-radius: 0.5em;
	padding: 0.5em;
}

a.mainLink:hover {
	background-color: var(--Appartenances-Bleu);
	color: #FFF;
}

#Formations .row:first-child div,
      #News .row:first-child div{
	display: flex;
}
#Formations .row:first-child div:last-child,
      #News .row:first-child div:last-child{
	justify-content: flex-end;
}




/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - FORMATION BLOCKS GRID - - - - - - - - - - - - - - - - - */

#Formations {
	padding: 3rem ;
}

#FormationsBlocks { 
	padding: 1.5rem 0;
	gap: 1.5rem;
}

.formationBlock { 
	display: flex;
	background-color: var(--Appartenances-Bleu-10);
	border-top: 2px solid var(--Appartenances-Bleu);
	box-shadow: 0.5rem 0.5rem 0.67rem #0003;
}

.formationBlock .formImage { 
	flex: 0 0 25%; 
	display: flex;
	align-items: stretch;
}

.formationBlock .formImage img {  object-fit: cover; }

.formationBlock .formTexte {
	padding: 1.5rem;
}

.formationBlock .formTexte h3 {
	font-size: var(--sizeL);
	margin-bottom: 1em;
}

.formationBlock .formTexte .date {
	color: var(--Appartenances-Bleu);
	font-size: var(--sizeS);
	font-weight: 400;
	font-family: 'IBM Plex Mono', monospace;
	border-top: 1px solid;
	margin-top: 1rem;
	width: min-content;
	white-space: nowrap;
}

.formationBlock .formTexte * {
	font-size: var(--sizeM);
}

.formationBlock:hover{
	transform: scale(105%);
	transition: all 0.25s;
}


/* 2026-01-26 */

#ProchainesFormations h3 {
	font-size: var(--sizeS)
}

.blocksGrid .ic-section.ic-group {

	font-size: var(--sizeXS);
	/* text-wrap: balance; */

		hr { 
		border: none;
		border-top: 1px solid var(--Appartenances-Bleu-20);
		margin-block-start: 0.5em;
		margin-block-end: 0.5em;
	}

	a { 
		text-decoration: none;
		display: block;
	}

	.ic-datetime-div, .iceventlist-title{
		display: inline;
	}

	.ic-block{
		margin-block-start: 0.5em;

		.ic-datetime-div {
			margin-inline-end: 1em;
			color: var(--Appartenances-Bleu-Dark);
		}

		.iceventlist-title{ }
	}
}









/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - NEWS BLOCKS GRID  - - - - - - - - - - - - - - - - - - - */

#News {
	padding: 3rem;
	background-color: var(--Appartenances-Bleu-20);
}

#NewsBlocks {
	padding: 1.5rem 0;
	gap: 1.5rem;
}

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

#NewsBlocks .newsBlock * {
	font-size: var(--sizeM);
}

#NewsBlocks .newsBlock.hero {
	padding: 0;
}
#NewsBlocks .newsBlock.hero img {
	/* aspect-ratio: 4/3;
	object-fit: cover; */
}
#NewsBlocks .newsBlock.hero *:not(img) {
	padding: 1.5rem;
}





/* To-DO: ick, ugly hack */
#NewsBlocks .newsBlock:has(ul){
	/* outline: 1px solid #F0F; */
	position: relative;
  min-height: 30rem;
}

#NewsBlocks .newsBlock ul{
	/* outline: 1px solid #FC0; */
	position: absolute;
	top:0;
	left:1rem;
	height: calc(100% - 1rem);
	width: calc(100% - 2rem );
	overflow-y: scroll;
}


/* newsList in #SecteurF  */

#ProchainesFormations {
	margin-top: 1rem;
	padding-top: 0.5rem;
	border-top: 1px solid var(--Appartenances-Bleu);
}


#ProchainesFormations ul.newsList {
}

#ProchainesFormations ul.newsList * {
	margin: 0;
	padding: 0;
	font-size: var(--sizeXS) !important; /* TO-DO */
}

#ProchainesFormations ul.newsList li a {
	padding: 0.5rem 0 !important;
}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - Blog 2 colonnes - Rapports annuels  - - - - - - - - - - */
@supports (display: grid) {
  .blog-items {
    grid-gap: 1em;
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    margin: 0 0 1em;
    display: grid;
  }

  .blog-items .blog-item {
    padding: 0;
  }

  .blog-items[class^="columns-"] > div, .blog-items[class*=" columns-"] > div {
    flex: 0 auto;
    width: auto;
    max-width: none;
  }

  @media (width >= 992px) {
    .blog-items.columns-2 {
      grid-template-columns: 1fr 1fr;
    }

    .blog-items.columns-3 {
      grid-template-columns: 1fr 1fr 1fr;
    }

    .blog-items.columns-4 {
      grid-template-columns: 1fr 1fr 1fr 1fr;
    }
  }
}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - FOOTER  - - - - - - - - - - - - - - - - - - - - - - - - */

/* body */
footer { 
	margin-top: auto; /* stucks to the bottom with body flex column */
		/* body { min-height: 100vh; display: flex; flex-direction: column; gap: 0; } */

	/* border-top: 1px solid #0002; */

	min-height: 3rem;
	background-color: var(--Appartenances-Bleu-20);
	/* body > * { padding: 0 1rem; } */
	padding: 3rem;
	padding-bottom: 1rem;
	text-align: center;
}

footer, footer * {
	font-size: var(--sizeXS);
	line-height: 1.5;
	font-weight: 400;
}

footer .row > *:first-child{ text-align: left; }
footer .row > *:not(:nth-child(1)){ text-align: center; }
footer .row > *:last-child{ text-align: right; }

footer img { max-width: 8rem; display: inline-block; }

p.copyright{
	font-size: var(--sizeXXXS);
	color: #CCC;
}




.ic-dates-list,
.ic-label,
.ic-value {
    width: 100%;
}
.ic-button-box.ic-registration-box-info{display:none}
ul.ic-date-vertical {
    list-style-type: none;padding:0
}

@media (min-width: 698px){
.icagenda .row-fluid *:has([class*="col-"]),
.ic-info.ic-clearfix,
.icagenda .row-fluid {
	display: flex;
	gap: 1rem;
}

.ic-info.ic-clearfix > *:nth-child(1){ flex: 1 0 60%; }
.ic-info.ic-clearfix > *:nth-child(2){ flex: 0 1 40%; }
}






/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - TO-DO - - - - - - - - - - - - - - - - - - - - - - - - - */

#Machin a { 
	display: block; 
}

.visually-hidden { display: none; } 






/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* 
	outline: 1px solid #F0F;
	outline-offset: -2px;
 */