@import url('https://fonts.googleapis.com/css2?family=Mona+Sans:ital,wght@0,200..900;1,200..900&display=swap');



/* Variables */


:root {
  --sizeFontBase: 18px;
  --slidePaddingHeight:calc(var( --sizeFontBase)*4);
  --slidePaddingWidth:calc(var( --sizeFontBase) *2);
  --monofont : 'Victor Mono', monospace;
  --mainFont:  "Mona Sans", sans-serif;
  
  --colorBg: #fffcef;
  --colorMain: #023888;
  --colorSecond: rgb(149, 176, 215);
    --colorThird: #325bd6;

  --colorAccent: #e04a52;
  --colorAccentDimmed:#FFC0C3;
}

/* necessary CSS, avoid editing*/

body {
  font-family: var(--mainFont);
  background-image : url(vichy.jpg);
  background-size: 55%;
  background-repeat:repeat;
  color: var(--colorMain);
  font-weight: normal;
}

main {
  background-color: var(--colorBg);
  padding: calc(var(--sizeFontBase) * 1) calc(var(--sizeFontBase) * 2)  calc(var(--sizeFontBase) * 2)  calc(var(--sizeFontBase) * 2);
    margin: calc(var(--sizeFontBase) * 3) auto;

}


main:has(#sectionDesignColl) {
  padding: calc(var(--sizeFontBase) * 1) calc(var(--sizeFontBase) * 2)  calc(var(--sizeFontBase) * 2)  calc(var(--sizeFontBase) * 2);
    margin-left: auto;
    margin-right: auto;
    width: calc(100vw - var(--sizeFontBase) * 10 );

}

#sectionDesignColl details {
  margin-bottom: calc(var(--sizeFontBase) * 1);
}

body:has(#sectionDesignColl){
  padding: 0;
}
img {
  max-width: 100%;
}


.monochromeImgAccentDimmed {
  background-color: var(--colorAccentDimmed);

}


.roundedImg {
    margin: calc(var(--sizeFontBase) * 2) auto;
  padding: calc(var(--sizeFontBase) * 2);
  border-radius: 1000px;
}
.monochromeImg img,
.monochromeImgAccentDimmed img {
display: block;
filter: grayscale();
mix-blend-mode: multiply;
}
.monochromeImgAccentDimmed img:hover,
.monochromeImg img:hover {
  filter: none;
  mix-blend-mode: normal;
}


@media print {
	@page {
		size: A4 landscape;
		margin: 0;
		padding: 2.97cm 2.1cm;
	}

	body {
		background: white;
		color: var(--secondary-color);
		padding: 1cm;
	}

	.page {
		background: white;
		display: block;
		position: relative;
		page-break-after: always;

	}

	.folio {
		display: none;
	}



}

/* titres courants*/

menu {
  display: flex;
  padding: calc(var( --sizeFontBase)*.25);
  margin: 0 auto;
        font-size: calc(var( --sizeFontBase) * 0.65);
  color: var(--third-color);
  background-color: var(--background-color);

  font-size: calc(var( --sizeFontBase)*.5);

  /*horizontal align*/
  transform: translate(-50%, 0%);
  left: 50%;


}

#runningTitles li {
  list-style: none!important;
  font-size: calc(var(--sizeFontBase) *1.25 );
}
.topMenu {
  position: absolute;
  top: calc(var(--slidePaddingHeight));
  justify-content: space-between;
  width: calc(100% - var(--slidePaddingWidth) * 4);


}


.bottomMenu {
  position: absolute;
  bottom: calc(var( --sizeFontBase) * 1.5);
  justify-content: space-evenly;
  width: fit-content;

}

.bottomMenu li {
  margin-right: 1em;
    padding: 0em .25em 0em .25em;
    text-wrap: nowrap;

}