/*VARIABLES COULEURS*/

:root {
  /*--blue: rgb(50, 38, 210);*/
  --blue: rgb(0,0,0,0.5);
}


/*FONTS*/

@font-face {
font-family: 'FreeSans';
  src: url("font/FreeSans.otf");
}

@font-face {
font-family: 'DINdong-MOI';
  src: url("font/DINdong-MOI.woff");
}

@font-face {
font-family: 'FreeSansOblique';
  src: url("font/FreeSansOblique.otf");
}

/*Diaporamas images*/

* {box-sizing: border-box}
.posters, .packlogo, .portrait, .bb, .urbex, .extypo, .fct, .posters, .gtc, .66c, .jpo2020, .facade, .livret, .memoire, .dnsep, .emmaus, .deserturbain, .fil, .but, .blockaus, .logo {display: none}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  /*max-width: 1000px;*/
  position: relative;
  margin: auto;
  padding-top:0px;
  cursor: none!important; /* cache le curseur par défaut */
  position: relative;
}

.first{
	padding-top: 0px;
}

/* Slideshow container photo */
.slideshow-container-photo {
  /*max-width: 1000px;*/
  position: relative;
  width: 66.6666666666%;
  cursor: none!important; /* cache le curseur par défaut */
}

span{
  font-family: 'FreeSans';
}

.custom-cursor {
  position: fixed;
  font-size: 42px;
  color:white;
  pointer-events: none;
  mix-blend-mode: difference;
  user-select: none;
  z-index: 9998;
  transition: transform 0.2s ease;
  visibility: hidden;
  display:none;
}




.prev, .next {
    z-index: 1;
    width: 50%;
    position: absolute;
    height: 100%;
    top: 0;
    right: 0;
/*    cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='70' height='84' viewport='0 0 100 100' style='fill:rgb(50, 38, 210);font-size:42px;'><text y='30%' x='10%'>→</text></svg>") 16 0, auto;
*/
    padding: 0;
}


/* Position the "next button" to the right */

.prev {
  left: 0;
/*  cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='70' height='84' viewport='0 0 100 100' style='fill:rgb(50, 38, 210);font-size:42px;'><text y='30%' x='10%'>←</text></svg>") 16 0, auto;
*/}


.hover-image {
  display: none;
}

body:not(.mobile) .hover-title:hover + .hover-image {
  display: flex;
  pointer-events: none;
}

.hover-image {
  position: absolute;
/*  margin-left: 50%;*/
  margin-top: -200px;
  z-index: 99;
  pointer-events: none;
  width: 8rem;
/*  transform: translate(-50%, -50%);*/
/*  flex-direction: column;
  align-items: center;
  justify-content: center;*/
  /* Change width and height to scale images */
  /*height: 30%;*/
/*  height: 25vh;
*/
  }

.hover-image img {
/*  max-width: 20% !important;*/
/*  max-height: 20% !important;
  width: auto !important;
  height: auto !important;*/
}



/*Page globale*/

body{
    -webkit-font-smoothing: antialiased;
    margin:0;
}

::-moz-selection {
    background-color: black;
}

::selection {
    background-color: black;
    color: white;
}

/*a::selection {
    color: var(--blue) !important;
}*/

.slideshow-container, img{
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
     user-select: none;
    }
}

.ALS {
  position: relative;
  line-height: 0;
}

.ALS video {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  background-color: black;
}


.sound-toggle {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(25, 25, 25, 0.5);
  color: white;
  border: 0px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  width: 25px;
  height: 25px;
  font-size: 0.8rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  z-index: 9999;
}

.sound-toggle:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: white;
  transform: scale(1);
}

.sound-toggle.muted::after {
  content: '';
  position: absolute;
  width: 25px;        /* largeur de la barre */
  height: 1.2px;        /* épaisseur de la barre */
  background: white;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  pointer-events: none;
}

/*Styles texte*/

h1{
	font-family: 'FreeSans';
	font-size: 2.3em;
	letter-spacing: 0.0em;
	-webkit-font-smoothing: antialiased;
    margin: 0;
    font-weight: normal;
	}

h1 a{
    color:#000;
}

h1 a:hover{
    color:rgba(128,128,128,0.7);
    cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='55' height='66' viewport='0 0 100 100' style='fill:rgb(50,38,210);font-size:33px;rotate:11.25deg;'><text y='45%'>✺</text></svg>") 16 0,auto;
}

h2{
	font-family: 'FreeSans';
	font-size: 1.2rem;
	line-height: 1.1rem;
 	letter-spacing: 0.0rem;
	padding-left: 15px;
	padding-right: 15px;
	-webkit-font-smoothing: antialiased;
	/*text-transform: uppercase;*/
	font-weight: normal;
	/*margin-bottom: 0px;*/
	}

p{
	font-family: 'FreeSans';
	font-size: 1rem;
 	line-height: 1.1rem;
/*	letter-spacing: 0.05rem;*/
 	padding-left: 15px;
 	padding-right: 15px;
	-webkit-font-smoothing: antialiased;
	margin-top: 5px;
	}

#col-texte p:hover {
  /*padding-left: 50px;*/

}

#experience p:hover {
  /*padding-left: 50px;*/

}

sup{
  line-height: 0;
}


ss04{
	font-family: 'DINdong-MOI';
}

li{
    font-family: 'FreeSans';
    /*font-size: 0.8rem;*/
    line-height: 0.8rem;
    /*letter-spacing: 0.05rem;*/
    -webkit-font-smoothing: antialiased;
    font-weight: normal;
}

a{
    text-decoration: none;
    color:#000000;
}

a:hover{
    text-decoration: none;
    
    color:rgba(0,0,0,0.5);
}

date{
  font-family: 'FreeSans';
  -webkit-font-smoothing: antialiased;
  font-size: 1rem;
  line-height: 1rem;
  margin-left: 1.2em;
  position:absolute;
  font-weight: normal;
}

wip{
  -webkit-font-smoothing: antialiased;
  font-size: 1rem;
  line-height: 1.35rem;
  animation-duration: 1s;
  animation-name: clignoter;
  animation-iteration-count: infinite;
  transition: none;
}

wip a{
  color:auto;
}

.italic{
  font-family: "FreeSansOblique";
}

italic{
  font-family: "FreeSansOblique";
}

/*Animation clignotement*/

@keyframes clignoter {
  0%   { opacity: :1;color:black; }
  49%   { opacity: :1;color:black; }
  50% { opacity:1;color:var(--blue); }
  100% { opacity:1;color:var(--blue); }
}

voir{
    margin-left: 0.5em;
}

voir a{
    cursor: pointer;
}

section{
    margin:0px;
    padding:0px;
}

.bloc-cv{
  margin-top:5px;
}

#experience p{
    margin: 0 0 0px 100px;
}

main>section {
    position: relative;
}


figcaption{
    display: none;
}


/* header */

.header {
  background-color: #fff;
  /*box-shadow: 1px 1px 4px 2px rgba(50,38,210,0.7);*/
  position: fixed;
  border-bottom: 1px solid var(--blue);
  width: 100%;
  z-index: 3;
  top:0;
  left:0;
}

.header ul {
  margin: 0 0 0 5px;
  padding: 0;
  list-style: none;
  overflow: hidden;
  /*background-color: #fff;*/
}

.header li a {
  display: block;
  padding: 10px 15px;
  text-decoration: none;
  color:#000;
  font-size: 1.2em;
  
}


header a:hover{
  color:rgba(0,0,0,0.5);
/*margin-top: -5px;
text-decoration:underline;
text-underline-offset:4px;
text-decoration-thickness:1px;*/
}

.header .logo {
  display: block;
  float: left;
  /*padding-left: 10px;*/
  text-decoration: none;
  /*text-transform: uppercase;*/
}

/* menu */

.header .menu {
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
}

/* menu icon */

.header .menu-icon {
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 15px;
  position: relative;
  user-select: none;
}

.header .menu-icon .navicon {
  background: #000;
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 18px;
}

.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
  background: #000;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

.header .menu-icon .navicon:before {
  top: 5px;
}

.header .menu-icon .navicon:after {
  top: -5px;
}

/* menu btn */

.header .menu-btn {
  display: none;
}

.header .menu-btn:checked ~ .menu {
  max-height: 240px;
}

.header .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}

.header .menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
}

.header .menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}

.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  top: 0;
}

/* 48em = 768px */

@media (min-width: 36em) {
  .header li {
    float: left;
  }
  .header li a {
    padding: 15px;
  }
  .header .menu {
    clear: none;
    float: right;
    max-height: none;
  }
  .header .menu-icon {
    display: none;
  }

}

/*@media (max-width: 400px) {
  h1{
    font-size: 1.5em;
  }

  .header .menu-icon {
    padding: 28px 20px 20px;
  }

  li{
    font-size: 0.9rem;
    line-height: 0.7rem;
  }


}
*/



/*@media (max-width: 291px) {
  h1{
    font-size: 1.3em;
  }

  .header .menu-icon {
    padding: 25px 20px 20px;
  }

}*/

/*@media (max-width: 266px) {
  h1{
    font-size: 1em;
  }

  .header .menu-icon {
    padding: 20px 15px 15px;
  }

  li{
    font-size: 0.8rem;
    line-height: 0.2rem;
  }
}*/

/*Menu Langues*/

#entete-english{
	position:fixed;
	padding:0;
	right:0;
}

#entete-francais{
	position:fixed;
	padding:0;
	right:0;
}


/*Portfolio texte*/

#col-texte {
    width: 40%;
    height:calc(100% - 30px);
    border-left: 1px solid var(--blue);
    /*border-bottom: 3px solid var(--blue);*/
    position: absolute;
    top: 44px;
    right: 0;
    overflow-y: scroll;
    padding: 0px;

}

#col-texte .texte{
  cursor: pointer;
  padding-top:10px;
}





#bandeau-bio{
  margin-top: 60px;
}

#bandeau-bio h2{
  /*font-family: "FreeSansOblique";*/
  text-transform: none;
  font-size: 25px;
  line-height: 28px;
}

#absolute{
  position: relative;
  margin: 0px;
  padding:0px;
  border-top: 1px solid var(--blue);
  width: 100%;
}

/*À propos texte*/
#col-texte-apropos{
	border-right: 1px solid var(--blue);
}



#col-texte-apropos, #col-texte-contact {
    width: 60%;
    /*height: calc(100% - 70px);*/
    /*border-left: 0px solid var(--blue);
    border-bottom: 3px solid var(--blue);*/
    position: absolute;
    /*top: 44px;*/
    left: 0;
    right: 34%;
    padding-bottom:15px;
    overflow-y: scroll;

}

#col-texte-apropos h2{

/*    font-size: 1.1rem;
    line-height: 1.35rem;
    letter-spacing: 0.05rem;*/
/*    padding:10px 15px 5px 115px;
    margin-block-end: 0.3em;*/
    -webkit-font-smoothing: antialiased;

}

#col-texte-contact .texte{
  border-bottom: none;
  cursor: default;
}

#col-texte-apropos .texte{
  border-bottom: none;
  cursor: default;
}

/*CV texte*/

#col-texte-ef {
    width: 40%;
    /*height: calc(100% - 70px);*/
    /*border-left: 1px solid rgba(0,0,0,1);*/
    border-bottom: 0px solid var(--blue);
    position: absolute;
    /*top: 44px;*/
    right: 0;
    overflow-y: scroll;

}

#col-texte-ef .texte{
    cursor: default;
}

#col-texte-ef p{
    /*font-size: 1rem;*/
}

.texte {
    width: 100%;
    height: auto;
    /*border-top: 1px solid rgba(50, 38, 210,0);*/
    border-bottom: 1.2px solid var(--blue);
/*    font-size: .4em;*/
    /*padding: 10px;*/
    line-height: 1.25em;
    display: block;
    cursor: default;
}



.noborderbottom{
    border-bottom: none !important;
}

/*separation bleue si besoin*/

#separation {
    width: 100vw;
    border-top: 3px solid var(--blue);
    position: fixed;
    top: 70px;
    z-index: 1000;
}

.separation {
    width: 100%;
    /*border-bottom: 3px solid var(--blue);*/
    clear: both;
    padding:0;
}

/*Portfolio images*/

#col-image {
    width: 60%;
    height: calc(100% - 30px);
    /*border-bottom: 3px solid var(--blue);*/
    position: absolute;
    top: 44px;
    left: 0;
    right: 40%;
    padding: 0px;
    margin:0;
    overflow-y: scroll;
}


/*Photographie*/

#total-photographie{
	position: absolute;
	z-index: 0;
	left:0;
}

.prem{
  padding-top: 40px;
}

.col-photographie{
  display: flex;
  position: relative;
  height: calc(100% - 140px);
  top: 44px;
  margin: 0;
  padding: 15px;
  border-bottom: solid 1px var(--blue);
}

.col-photographie .texte-d{
  width:33.3333333333%;
  border-bottom: 0px solid var(--blue);
  margin-bottom: 25px;
  margin-left: 1%;
}

.col-photographie .texte-g{
  width:33.3333333333%;
  border-bottom: 0px solid var(--blue);
  margin-bottom: 25px;
  margin-right: 1%;
  margin-left: -1%;
}

.titre-photo{
  display: inline-flex;
}

.col-photographie h2{
  margin-bottom:0;
  margin-left: 0;
}

statut{
  font-family: 'DINdong-MOI';
  -webkit-font-smoothing: antialiased;
  font-weight: normal;
}


.col-photographie p{
  margin-bottom:0;
  padding-bottom: 20px;
}

.col-photographie .don{
  position: absolute;
  bottom: 0;
}

#total-photographie .don{
  position: fixed;
  margin-right: 15px;
  bottom: 0;
  left: 0;
}


/*FOOTER*/

#footer{
  display: flex;
  position: relative;
  background-color: #f7f7f7;
  width: 100%;
  box-shadow: 1px 0px 4px 2px rgba(50,38,210,0.7);
}

#mentions{
  display: flex;
  position: relative;
  background-color: #FFF;
  width: 100%;
}

#col-image #mentions{
  display: none;
}

#footer p{
  font-variant-caps: all-small-caps;
  line-height: 1rem;
  margin: 0;
  padding: 10px 10px 0px 10px;
  width: 100%;
  bottom:0;
  padding-bottom: 0;
  text-align: center;
}

#mentions p{

  line-height: 1rem;
  margin: 0;
  padding: 10px 10px 0px 10px;
  width: 100%;
  bottom:0;
  padding-bottom: 0;
  text-align: center;
}

/*Montrer cacher pour responsive*/

.max{
    display: block;
}

.min{
    display: none;
}

.minnoborderbottom{
  border-bottom: 1px solid var(--blue);
}

/*#dnsepmin, #memoiremin, #livretmin{
        display: none;
    }
*/

/*boutons pub*/

div .don{
  margin-top:0px;
  margin-bottom: 10px;
  margin-left:15px;
  margin-right: 15px;
  background-color: white;
  box-shadow: 0px 0px 3px 1.3px rgba(50,38,210,0.7);
  border-radius: 2px;
  border:1px solid rgba(50, 38, 210,0);
  display: inline-block;
}

div .don:hover{
  cursor: pointer;
  border:1px solid var(--blue);
  box-shadow: 0px 0px 3px 2px rgba(50,38,210,0);
  color:var(--blue);
}

.don{
  font-family: 'Syne';
  font-size: 1rem;
  line-height: 1.35rem;
  letter-spacing: 0.05rem;
  padding:5px 10px 5px 10px;
  -webkit-font-smoothing: antialiased;
}

/*RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE*/
/*RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE RESPONSIVE*/

@media screen and (max-width: 800px){

  .max{
    display: none;
  }

  .min{
    display: block;
  }

  header a:hover{
    margin-top: 0px!important;
  }

  .minnoborderbottom{
    border-bottom: 0px solid rgba(50, 38, 210,0)!important;
  }

  button{
    z-index: 2;
    position: absolute;
    display: block;
    background-color: rgba(255,255,255,1);
    color: black;
    /*padding: 2px;*/
    margin: 10px;
    border: 1px solid rgba(50, 38, 210, 0);
    border-radius: 100%;
    cursor: pointer;
    text-align: center;
    font-family: FreeSans; 
    font-size: 0.8rem;
    text-transform: lowercase;
    left:0px;
    bottom:0px;
    /*box-shadow: 0px 0px 3px 1.3px rgba(50,38,210,0.7);*/
  }

  button:hover{
    box-shadow:none;
    /*border: 1px solid var(--blue);*/
    text-decoration: none;
    color:black;
  }

  #gauche{
    font-family: 'fleches';
    -webkit-text-stroke: 0.7px;
    border-radius: 50px;
    border: 1px solid rgba(50, 38, 210, 0);
    width:31px;
    height:31px;
    left:0px;
    top:50%;
    padding: 9px;
  }

  #gauche:hover{
    box-shadow:none;
    border: 1px solid var(--blue);
  }

  #droite{
    font-family: 'fleches';
    -webkit-text-stroke: 0.7px;
    border-radius: 50px;
    border: 1px solid rgba(50, 38, 210, 0);
    width:31px;
    height:31px;
    right: 0px;
    left: auto;
    top:50%;
    padding: 9px;
  }

  #droite:hover{
    box-shadow:none;
    border: 1px solid var(--blue);
  }


  body{
      margin: 0;
      height: 100%;
  }


  #col-image {
      width: 100%;
      height:100%;
      border-bottom: 0px;
  }

  #col-image #mentions{
    display: block;
  }

  #col-texte {
    width: 100%;
    height: 100%;
    /*border-left: 3px solid var(--blue);
    border-bottom: 3px solid var(--blue);
    border-top: 3px solid var(--blue);
    position: absolute;
    top: 70px;
    right: 0;
    overflow-y: scroll;*/
  }

  .texte{
    border-bottom: 0px;
  }


  .slideshow-container{
  	/*box-shadow: 1px 1px 4px 2px rgba(50,38,210,0.7);*/
  }

 	/*photographie*/

 	#total-photographie{
 		top: 15px;
 	}

  .slideshow-container-photo {
  	/*box-shadow: 1px 1px 4px 2px rgba(50,38,210,0.7);*/
	  position: relative;
	  width: 100%;
   }

	.col-photographie .texte-d{
		width: 100%;
	}

	.col-photographie .texte-g{
		width: 100%;
	}

  .col-photographie{
  	display: block;
  	padding-top: 0px;
  	margin:0;
  	border-bottom: 0px solid var(--blue);
  }

  .prem{
  padding-top: 0px;
}

  .titre-photo{
		display: block;
	}

  statut{
    padding-left: 15px;
    margin-left: 0;
  }

	.col-photographie .don{
	 	bottom: auto;
	}

  /*FOOTER*/

  #mentions{
    box-shadow: 1px 0px 4px 2px rgba(50,38,210,0.7);
  }


  /*A PROPOS*/
  #col-texte-apropos{
	border-right: 0px solid var(--blue);

  }

  #col-texte-apropos, #col-texte-contact {
    width: 100%;
    position: relative;
    border-top: 0px solid var(--blue);
    border-bottom: 1px solid var(--blue);
    height: 100%;
    overflow-y: hidden;
  }

  #col-texte-ef {
    width: 100%;
    position: relative;
    border-left: 0px solid var(--blue);
    border-top: 0px solid var(--blue);
    height: 100%;
  }

  #experience p{
    margin: 0 0 0px 45px;
  }

  p{
    font-size: 0.9rem;
    line-height: 1rem;
  }

  date{
    font-size: 0.9rem;
    margin-left: 0.9em;
    margin-bottom: 0;
  }

  #bandeau-bio h2{
  text-transform: none;
  font-size: 1.2rem;
  line-height: 1.2rem;
}

  #col-texte-apropos h2{
    /*padding:0px 0px 0px 60px;*/
  }

  #col-texte-ef .min{
      border-top: 0px;
  }

  #contact .min{
    border-bottom: 0px solid var(--blue);
  }

  #typographies, #reseaux, #ef, #copaines{
    border-bottom: 1px solid var(--blue);
  }




  /* scrollbar */
::-webkit-scrollbar {
  display: none;
}


@media screen and (max-width: 575px){
	#col-image, #col-texte-contact{
		top:33px;
    }

  .logo{
    /*padding-left: 5px!important;*/
    }

  #bandeau-bio h2{
    margin-top: -15px;
  }

  .col-photographie{
    top:33px !important;
  }
}

/*  @media screen and (max-width: 291px){
    #col-image, #col-texte-contact, #col-texte-ef{
      top:49px;
    }
  }*/




@media screen and (max-width: 762px){
  #footer p{
  	font-size: 0.8rem;
    line-height: 0.8rem;
  }

  #mentions p{
    font-size: 0.8rem;
    line-height: 0.8rem;
  }

}