@charset "UTF-8";
/* CSS Document */
/* ©pascale moise v1 mai 2025 */
/*     pascalemoise.com       */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap');

html, body {
	height: 100%;
}
body { 
	margin: 0;
	font-size: 14px;
}

:root {
	--vspace: 80px;
}

* {
	font-family: 'Montserrat', sans-serif;
	font-size: 16px;
	color: #424b4c;
	box-sizing: border-box;         /* For IE and modern versions of Chrome */
	-moz-box-sizing: border-box;    /* For Firefox                          */
	-webkit-box-sizing: border-box;
	line-height: 1em;
    -webkit-user-drag: none !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}

main *, p {
	white-space:normal;
}
.material-symbols-outlined {
  font-variation-settings:
  'FILL' 1,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}

.hidden {
	display: none;
}
div img, span img {
	max-width: 100%;
	height: auto;
}
span.scrollicon {
	display: inline-block;
	position: fixed;
	left: 50vw;
	bottom: 36px ;
	width: 36px;
	height: 36px;
	border: 1px solid #333;
	background: url(../img/scroll_h.svg)no-repeat left center;
	background-size: 400% auto;
	will-change: background-position;
	background-position: 0px 0;
	-webkit-animation-name: scrollicon;
          animation-name: scrollicon;
  -webkit-animation-timing-function: steps(3);
          animation-timing-function: steps(3);
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
}
@-webkit-keyframes scrollicon {
	0% {
		background-position: 0 0;
	}
	  100% {
	    background-position-x: -102px;
	  }
}

section.titre {
	position: relative;
    display: flex;
    flex-direction: column;  
    justify-content: center; 
    align-items: center;      
    height: 100vh;          
    text-align: center;     
}
section.titre h2 {
	font-size: 5vw;
	margin: 1vh 0;
}
section.titre h3 {
	font-size: 3vw;
	margin: 1vh 0;
}
section.titre h4 {
	font-size: 2vw;
	margin: 1vh 0;
	max-width: 120vh;
	width: 80vw;
}
section.titre h5 {
	font-size: 1.5vw;
	margin: 1vh 0;
}

section.titre div.objet.flipenter {
	position: relative;
	width: 40vw;
	height: 40vh;
	max-width: 40vh;
	max-height: 40vw;
	cursor: grab;
	cursor: -moz-grab;
    cursor: -webkit-grab;
	display: none;
}
section.titre div.objet img {
	display: block;
	max-width: 100%;
	-webkit-filter: drop-shadow(0px 5px 5px rgba(0,0,0,.2));
	filter: drop-shadow(0px 5px 5px rgba(0,0,0,.2));
}

section.titre div.objet.flipenter {
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}

section.titre div.objet.flipenter.dragging {
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}


.flipenter img {
	position: absolute;
	left: 0;
	top: 0;
	display: none;
}
.flipenter img:nth-child(1) {
	display: block;
}

@media (orientation: portrait) {
	section.titre {
		padding: 0 20px;
	}
	section.titre h2 {
		font-size: 6vh;
	}
	section.titre h3 {
		font-size: 4vh;
	}
	section.titre h4 {
		font-size: 2vh;
	}
	section.titre h5 {
		font-size: 1.5vh;
	}
}

/*------------------------- SOMMAIRE  ---------------------*/
body.homepage main {
	display: flex;
	justify-content: center;
	align-content: center;
	height: calc(100% - 90px);
}
section.sommaire {
	display: flex;
	justify-content:center;
	align-content:center;
}

section.sommaire ul {
	display: block;
	margin: 0 auto;
	padding: 0;
	list-style:none;
	width: 50vw;
max-width: 50vw;
}
section.sommaire ul li {
	position: relative;
	display: block;
	width: 50vw;
max-width: 50vw;
	height: 10vh;
}
section.sommaire ul li::before {
    content: "";
    position: absolute;
    width: 50vw;
max-width: 50vw;
 	height: 10vh;
    display: block;
    background-image: url(../img/lignedenage.png);
    background-size: 100% 100%; 
    background-repeat: no-repeat;
    background-position: center;
}
section.sommaire ul li a {
	position: absolute;
	display: block;
	width: 50vw;
max-width: 50vw;
 	height: 50%;
 	text-align: center;
 	color: #fff;
 	text-decoration:none;
}
section.sommaire ul li a.annee {
	line-height: 3.5vh;
	top: 50%;
	font-size: 2vh;
	font-weight: 600;
}
section.sommaire ul li a.titre {
	font-size: 3vh;
	line-height: 5.2vh;
}


body.homepage section.intro {
	display: flex;
	justify-content: center;
	align-content: center;
	height: calc(100% - 90px);
	width: 30%;
}
body.homepage section.intro div.content {
	padding: 3vw 2vw 3vw 3vw;
}
body.homepage section.intro h2 {
	display: block;
	text-align: right;
	font-size: 2.5vw;
	color: #000;
}
body.homepage section.intro h3 {
	display: block;
	text-align: right; 
	font-weight: normal;
	line-height: 1.25em;
}


body.homepage aside {
	width: 30%;
	display: flex;
    justify-content: center;
    align-items: center;
	transform:translateX(-5vw) translateY(15vh);
	height: auto;
	max-height: 40vh;
}
body.homepage aside div {
	background: #bb0000;
	border-radius:50%;
	padding:25px;
	width: 35vh;
	height: 35vh;
	display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    clip-path: circle(50%);
}
body.homepage aside div p {
	color: #fff;
	font-size: 1.5vh;
	line-height:1.2em;
}
@media (orientation: portrait) {
	body.homepage main {
		display: block;
		padding: 15px 30px;
	}
	body.homepage section.intro, body.homepage section.sommaire, body.homepage aside {
		width: 100%;
		max-wdith:100%;
	}
	body.homepage section.intro {
		height: auto;
	}
	body.homepage section.intro div.content {
		padding: 0;
	}
	section.sommaire {
		height: auto;
	}
	
	body.homepage section.intro h2,body.homepage section.intro h3 {
		text-align: left;
	}
	body.homepage section.intro h2 {
		font-size: 2.5vh;
	}
	section.sommaire ul {
		height: auto;
		max-height: auto;
		width: 100%;
		max-width: 100%;
	}
	section.sommaire ul li, section.sommaire ul li::before,section.sommaire ul li a  {
		height: calc(90vw / 8);
		width: 100%;
		max-width: 100%;
		
	}
	section.sommaire ul li a.titre {
		font-size: 4vw;
		line-height: 2.8vh;
	}
	section.sommaire ul li a.annee {
		font-size: 1.25vh;
		line-height: 2.15vh;
	}
	body.homepage aside {
		transform:translateX(0) translateY(-1.5vh);
	}


}




/*------------------------- HEADER PAGE ---------------------*/
header {
	position: fixed;
	top: 0;
	width: 100%;
	height: 60px;
	background: #fff;
	overflow: hidden;
	z-index: 99;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}
header h1 a {
	font-size: 24px !important;
	line-height: 42px;
	padding: 0 30px 0 60px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 16px;
	color: #000;
	display: inline-block;
	text-decoration: none;
}

header span.active {
	color: #9900FF;
}
div.postheader {
	display: block;
	height: 60px;
}

header a.home {
	display: inline-block;
	text-decoration: none;
	position: absolute;
	left: 20px;
	top: 22px;
	color: #000;
}
header a.home::before {
	content: '\e88a';	
	font-family: 'Material Symbols Outlined';
	font-size:30px;
}

header a.estienne, header a.licra, header a.credits, header a.savoirplus {
	display: inline-block;
	text-decoration: none;
	position: absolute;
	top: 22px;
	color: #000;
}
header a img {
	height: 40px;
	width: auto;
}
header a.credits, header a.savoirplus {
	right: 30px;
	top: 15px;
	font-size: .7em;
}
header a.savoirplus {
	top: 35px;
}

header a.estienne {
	right: 130px;
	top: 10px;
}
header a.licra {
	right: 240px;
	top: 7px;
}
header a.licra img {
	height: 50px;
}


@media (orientation: portrait) {
	header h1  {
		font-size: 18px !important;
		line-height: 40px;
	}
	header a.home::before {
		font-size: 24px;
	}
	header h1 span {
		display: none;
	}
	header h1 a {
		font-size: 18px !important;
		padding: 0 30px 0 40px;
		line-height: 40px;
	}
	header a.home {
		left: 10px;
		top: 22px;
	}
	header a.estienne {
		right: 50px;
		top: 5px;
	}
	header a.licra {
		right: 10px;
		top: 0px;
		height: 25px;
	}
	header a img {
		height: 30px;
	}
	header a.licra img {
		height: 40px;
	}
	header a.credits, header a.savoirplus {
		right: 10px;
		top: 45px;
	}
	header a.savoirplus {
		top: 45px;
		right: 60px;
	}

}


/*------------------------- FOOTER PAGE ---------------------*/
footer {
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 30px;
	background: #fff;
	overflow: hidden;
	z-index: 99;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}
footer ul::before {
	content: ' ';
	display: inline-block;
	position: absolute;
	top: 12px;
	left: 30px;
	width: calc(100% - 60px);
	height: 6px;
	/*background: turquoise;*/
	z-index: -1;
}

footer ul {
	list-style: none;
	display: flex;
	width: 100%;
	margin: 0;
	padding: 4px 30px;
	-webkit-justify-content: space-around;
}
footer ul li a {
	display: inline-block;
	background: #fff;
	font-size: .8em;
	text-decoration: none;
	font-weight: 600;
	padding: 5px;
	color: #999;
}
footer ul li a.active {
	color: #000;
}

@media (orientation: portrait) {
	footer ul {
		padding: 4px 10px;
	}
	footer ul li a {
		font-size: .7em;
	}
}
/*------------------------- CREDITS ---------------------*/

body.credits main, body.savoirplus main {
	text-align: center;
	height: 100%;
	min-height: 100%;
}
body.credits main section,body.savoirplus main section {
	text-align: left;
	margin: auto;
	display: inline-block;
	max-width: 800px;
	padding: 80px 30px;
	font-weight: normal;
	height: auto;
	min-height: auto;
	max-height: auto;
}
body.credits main section h2,body.savoirplus main section h2 {
	line-height:1.5em;
	font-size: 1.25em;
}
body.savoirplus main section h2 {
	padding: 0 30px;
}

body.credits main section h3,body.savoirplus main section h3 {
	line-height:1em;
	font-size: 1.15em;
}
body.credits main section .encadre,body.savoirplus main section .encadre {
	background: #f2f2f2;
	padding: 30px;
}	
body.credits main section p,body.savoirplus main section p, body.credits main section p *,body.savoirplus main section p * {
	line-height:1.75em;
}	


/*----------------------- COMMONS  -------------*/
section {
	position: relative;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: bold;
	width: auto;
}
section div.wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
section img.back {
	display: block;
	height: 100%;
	position: relative;
	width: auto;
}
body section > a.cliquable {
	height: 100%;
	max-height: 100%;
}
body section > a.cliquable img{
	position: relative;
	max-height: 100%;
	width: auto;
}
body.hgrab main section.carton {
	width: 100vw;
	min-width: 100vw;
}

/*------------------------- Scroll icons ---------------------*/
a.scrolldown, a.scrollright, a.scrollnext {
	display: block;
	position: absolute;
	bottom: calc(60px + 3vh);
	text-align: center;
	text-decoration: none;
	animation: scrolldown 1.5s infinite ease-in-out;
}
a.scrolldown::before, a.scrollnext::before,a.scrollright::before  {
	content: '\e313';
	font-family: 'Material Symbols Outlined';
	font-size:5vh;
}
a.scrollright {
	animation: scrollright 1.5s infinite ease-in-out;
}
a.scrollright::before { 
	content: '\e5cc';
}

@keyframes scrolldown {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(+2vh);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes scrollright {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(+2vh);
  }
  100% {
    transform: translateX(0);
  }
}


/*------------------------- cliquables ---------------------*/
@keyframes glow {
  0% {
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8));
  }
  50% {
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 1));
  }
  100% {
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8));
  }
}
/*------------------------- animations commons ---------------------*/
.anim {
	position: absolute;
	 user-select: none !important;
}
/*------------------------- éléments cliquables + infowindow ---------------------*/

img {
	    -webkit-touch-callout: none;
     -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

}
a.cliquable {
  display: inline-flex;
  align-items: center;
  position: absolute;
}
a.cliquable img {
  animation: glow 1.5s infinite ease-in-out;
  max-height: 100%;
}
section:not(.active) div.infowindow {
	opacity: 0;
}
div.infowindow {
	position: fixed;
	visibility: hidden;
	opacity:0;
	display: inline-flex;
	align-items: center;
	top: calc(10vh + 80px);
	left: calc((100vw - 60vh)/2);
	aspect-ratio:1/1;
	width: 60vh;
	max-width: 80vw;
	background: url(../img/case.svg)no-repeat center center;
	background-size: 100%;
	transition:all .5s;
}

@media (orientation: portrait) {
	div.infowindow {
		left: 10vw;
	}
}
div.infowindow.active {
	visibility: visible;
	opacity:1;
	cursor:pointer;
}
div.infowindow div.content {
	display: inline-flex;
	align-items: center;
	padding: 2vh 5vw;
	height: 100%;
	line-height: 1.5em;
	font-size: 2vh;
	text-align: center;	-webkit-user-select: none;
    -webkit-touch-callout: none;
     -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

}
div.infowindow a.close {
	position: absolute;
	top: 15px;
	right: 15px;
	width: 30px;
	height: 30px;
	background:url('../img/close.png') no-repeat center center;
	background-size: contain;
}
/*------------------------- sections cartons ---------------------*/
section.carton {
	display: flex;
	align-items: center;
	justify-content: center;
}
section.carton div.content {
	display: inline-flex;
	align-items: center;
	padding: 2vh 5vw;
	aspect-ratio:1/1;
	height: auto;
	max-width: 60vw;
	max-height: 60vh;
	background: url(../img/case.svg)no-repeat center center;
	background-size: 100%;
	user-select: none;
	
}
section.carton div.content, section.carton div.content p {
	white-space: wrap;
	line-height: 1.5em;
	font-size: 2vh;
	text-align: center;
	-webkit-user-select: none;
    -webkit-touch-callout: none;
     -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
@media (orientation: portrait) {
	section.carton div.content {
		max-width: 80%;
		max-height: 60%;
	}
	section.carton div.content, section.carton div.content p {
		font-size: 1.75vh;
	}

}


/*------------------------- flipping ---------------------*/


.flipping img {
	position: absolute;
	display: none;
}
.flipping img:nth-child(1) {
	display: block;
}



/*------------------------- HORIZONTAL LIBRE GRAB ---------------------*/

body.hgrab  {
	max-height: 100vh;
    overflow-y: hidden; /* Empêche le scroll hors limites */
 }
body.hgrab main {
    display: flex;
    cursor: grab;
	height: calc(100vh - 90px);
	max-height: calc(100vh - 90px);
	border
    flex-direction: row;
    width: auto; 
    overflow-x: auto; 
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    white-space: nowrap; 
}
body.hgrab main section {
	height: calc(100vh - 105px);
	max-height: calc(100vh - 105px);
	width: 100vw;
	min-width: 100vw;
}
body.hgrab section.titre {
	width: 100vw;
	min-width: 100vw;
	padding: 0 30px;
}




/* width */
body.hgrab ::-webkit-scrollbar {
  width: 5px;
}
/* Track */
body.hgrab ::-webkit-scrollbar-track {
  background: #f1f1f1;
}
/* Handle */
body.hgrab ::-webkit-scrollbar-thumb {
  background: #666;
}
/* Handle on hover */
body.hgrab ::-webkit-scrollbar-thumb:hover {
  background: #000;
}
body.hgrab ::-webkit-scrollbar-thumb:active {
  cursor: grabbing;
}


/*------------------------- FULL SCREEN HORIZONTAL ---------------------*/


body.fullh main {
    display: flex;
    flex-direction: row;
    height: 100vh;
    width: auto; 
    overflow-x: auto; 
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    white-space: nowrap; 
}
body.fullh section {
    flex: 0 0 100vw; 
    scroll-snap-align: start; 
	overflow: hidden;
 }
body.fullh section > img {
	position: absolute;
	height: 100vh;
	width: 100vw;
	object-fit:cover;
}


/*------------------------- FULL SCREEN VERTICAL ---------------------*/
body.fullv {
	overflow-x: hidden;
}
body.fullv main {
    flex-direction: column; 
    height: auto; 
    width: 100vw;
	overflow-x: hidden;
	overflow-y: scroll;
  scroll-snap-points-y: repeat(100vh);
  scroll-snap-type: y mandatory;
  	padding-bottom: 30px;

}

body.fullv section {
	 position: relative;
    flex: 0 0 100vh; 
    width: 100%; 
    scroll-snap-align: start; 
 }
body.fullv section > img {
	position: absolute;
	height: 100%;
	width: 100vw;
	object-fit:cover;
}

/* width */
body.fullv::-webkit-scrollbar {
  width: 15px;
}

/* Track */
body.fullv::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
body.fullv::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
body.fullv::-webkit-scrollbar-thumb:hover {
  background: #555;
}


/*------------------------- CARRE DANS UNE SECTION FULL ---------------------*/

section.full {
	width: 100vw;
	height: 100vh;
	display: flex;
    justify-content: center; 
    align-items: center; 
    scroll-snap-align: start; 
}
section.full .square {
	position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
	aspect-ratio: 1/1;
	border: 1px solid #333;
}
section.full .square img {
	height: 100%;
	width: 100%;
    object-fit: contain; 
}

/*------------------------- CARRÉ HORIZONTAL ---------------------*/


body.square main {
    flex-direction: row; 
    height: calc(100vh - 80px); 
    width: 100%; 
    overflow-x: scroll; 
    overflow-y: hidden; 
    scroll-snap-type: x mandatory;
}

body.square section {
    flex: 0 0 100vw; 
    scroll-snap-align: start; 
	display: flex; 
    justify-content: center; 
    align-items: center; 
}

body.square section > img {
	position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    object-fit: cover; 
 }
@media (orientation: landscape) {
  body.square section img {
    height: calc(100vh - 200px); 
    width: calc(100vh - 200px); 
  }
  body.square div.cartouche {
  	left: 30px;
  	top: 60px;
  	max-width: calc((100vw - 100vh) /2);
  }
}
@media (orientation: portrait) {
  body.square section img {
    height: calc(100vw - 60px); 
    width: calc(100vw - 60px); 
  }
  body.square div.cartouche {
  	bottom: 30px;
  	top: auto;
  	left: 0;
  	width: 100vw;
  	max-width: 100vw;
  	text-align: center;
  	padding: 30px;
  }
}

/*------------------------- bulles ---------------------*/
div.bulle {
	position: absolute;
	padding: 2vh 2vw;
	background: #fff;
	border-radius: 50%;
	height: auto;
	width: 30vw;
} 
div.bulle p {
	position: relative;
    z-index: 1;
	text-align: center;
	font-size: 1.5vw;
	margin: 0;
	padding: 0;
	z-index: 2;
	white-space: normal;
}
div.bulle::before {
	content: ' ';
	position: absolute;
	width: 8vw;
	height: 3vw;
	top: 0;
	left: 0;
	background: url(../img/bulle_triangle.svg)no-repeat center center;
	background-size: contain;
} 
div.bulle.hg::before {
	left: 0;
}
div.bulle.bd::before {
	left: auto;
	right: 0;
	top: auto;
	bottom: 0;
	transform: scale(-1,-1);
}
div.bulle.bg::before {
	left: 0;
	right: auto;
	top: auto;
	bottom: 0;
	transform: scaleY(-1);
}
div.bulle.hd::before {
	left: auto;
	right: 0;
	transform: scale(-1, 1);
}

@media (orientation: portrait) {
	div.bulle p,div.bullepensee p {
		font-size: 2vw;
	}
	
}