@import url('https://fonts.googleapis.com/css?family=Space+Mono:400,700i&display=swap');
@import url('https://fonts.googleapis.com/css?family=Ubuntu&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');
@import url('link href="https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap');

* {	margin:0;	padding: 0; }
::selection {  background: #03045e; color:white;}
::-moz-selection {  background: #03045e; color:white;}
a { text-decoration: none !important;	cursor: pointer; }
a:visited {	color: inherit; }
li a {	color: inherit; }
a:hover {cursor:pointer !important;}
svg {margin:0; padding: 0;}

body {font-family: 'Helvetica', 'Arial', sans-serif; background-color: transparent; overflow-x: hidden;}

.gradient {	background: linear-gradient(-45deg, #03045e, #abd1e5, #8F57E9, #A1D1D8);	background-size: 400% 400%;	animation: gradient 30s ease infinite;	height: 100vh;	width: 100%;z-index: -1!important; position: fixed;}
@keyframes gradient {	0% {		background-position: 0% 50%;	}	50% {		background-position: 100% 50%;	}	100% {		background-position: 0% 50%;	}}
ul.menu {list-style: none; color:#03045e; line-height: 2.5vmin; font-size: 2.5vmin;}
ul.menu li a {z-index: 100 !important;}

/*EFFET NEGATIF*/
/*.link::after{
  content: "";
  background: #6000ff;
	mix-blend-mode: difference;
  width: calc(100% + 20px);
  height: 0;
  position: absolute;
  bottom: -4px;
  left: -10px;
	transition: all .3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
	z-index: 0 !important;
}


.link:hover::after{
	height: calc(100% + 8px)
}*/



a.effect-shine {transition: .5s ease}
a.effect-shine:hover { transition: .5s ease;  color:#AFB3F7; -webkit-mask-image: linear-gradient(-75deg, rgba(143,87,233,.6) 30%, #000 50%, rgba(143,87,233,.6) 70%);  -webkit-mask-size: 200%;  animation: shine 2s infinite;}
@-webkit-keyframes shine {  from {    -webkit-mask-position: 150%;  }  to {    -webkit-mask-position: -50%;  }}


span.puce {font-size: 1.6vmin; vertical-align: text-bottom;}
.legende {color:#03045e; line-height: 2.5vmin; font-size: 2vmin; padding-top: 1vmin;}
.legende a {color:#03045e; transition: .5s ease}
.legende a:hover {color:#6000ff; transition: .5s ease}
.projet {padding-bottom: 3vmin; }
p.legende:hover < img  {filter: hue-rotate(180deg);}
.projet img:hover ~ p.legende {color:white; transition: .5s ease;}
.projet img:hover ~ p.legende a {color:white; transition: .5s ease;}
.projet img:hover {cursor: pointer;  mix-blend-mode: exclusion;   background-color: blue;  transition: all 0.6s ease; }
.projet img {background-color: #03045E;  mix-blend-mode: normal;  transition: all 0.6s ease;}

#projets-tableau {font-family: 'Helvetica', 'Arial', sans-serif; font-size: 2vmin; font-weight: normal !important; width: 80%;}
#projets-tableau th, #projets-tableau  td  {font-weight: normal !important;   padding-left: 1vmin; padding-right: 1vmin; padding-bottom: 0.5vmin; transition: all 0.6s ease;}
#projets-tableau tr:hover {color:white; /*background-color: #AFB3F7;*/}
#projets-tableau tr:hover a {color:white; }
#projets-tableau a {cursor: pointer; color:#03045e; transition: all 0.6s ease;}
/*#projets-tableau a:hover {color:white;}*/
#projets-tableau th.date {width: 5%;}
/*.img-container {width: 20%;}*/

.hover_img a { position:relative; }
.hover_img a span { position:fixed; display:none; z-index:99; bottom:0; right:0; transition: all 0.6s ease;}
.hover_img a:hover span { display:block;overflow: visible; width: 80vmin; mix-blend-mode: exclusion; transition: all 0.6s ease; }

.fond-1 {height: 100vh;	width: 100%;z-index: -1!important; position: fixed; background-color: #8F57E9;}


.slick-slide img {  top: 0;  padding:0;}
.slideshow:hover {  cursor: pointer;}
/*.slick-list {background-color: #03045E;}*/
span.pagingInfo, span.projetdate  {font-size: 2vmin !important; line-height: 2.5vmin;}
.projettitre {line-height: 2.5vmin; font-size: 2.5vmin;}
.txt-courant p {font-size: 2vmin !important; line-height: 2.5vmin;}
.txt-courant p a {color:#b091aa; transition: .5s ease;}
.txt-courant p a:hover {color:white; transition: .5s ease;}
.txt-courant p u {text-decoration: none ; color:#b091aa;}
.apropos p strong {  color: #03045e; line-height: 2.5vmin; font-size: 2.5vmin; }
.apropos p strong::before, .apropos p strong::after  {content: " ● "; color: #03045e;  font-size: 1.6vmin; vertical-align: text-bottom;}
.apropos hr {color:transparent; height: 5vmin !important;}

a.active {color:white; transition: all 0.6s ease;}
a.active:hover {color:black; transition: all 0.6s ease;}

/*!!!!!!!!!!!!  MOBILE  !!!!!!!!!!!!*/

@media (max-width: 991.98px) {
.container-fluid {padding: 0 !important;}
ul.menu {margin: 0; padding: 0;}
.menu li {font-size: 3.5vmin; line-height: 4vmin;}
.projettitre  {font-size: 4.5vmin; line-height: 5vmin; text-align: center;}
span.pagingInfo, span.projetdate, .txt-courant p, p.legende  {font-size: 3.5vmin !important; line-height: 4vmin;}
.slideshow {padding-bottom: 2vmin;}
p.legende  {padding-top: 2vmin;}

#projets-tableau {font-family: 'Helvetica', 'Arial', sans-serif; font-size: 3.5vmin; font-weight: normal !important; width: 100%;}
th.nom {width: 80% !important;}
th.commanditaire, th.lieu, th.mots {display: none;}

 }

/*!!!!!!!!!!!!  PRINT  !!!!!!!!!!!!*/

 @media print {
* {color:black !important;}
  }