@charset "UTF-8";
/* CSS Document */

  @font-face{
                        font-family: 'OuvertureScript';
                        src: url("ouverturescript-webfont.woff");}


:root{
	--text-color:rgba(0, 0, 0);
	--background-color:rgba(255, 255, 255);
	--transparent:rgba(0, 12, 243, 0);
}

.darkmode{
	--text-color:rgba(255, 255, 255);
	--background-color:rgba(0, 0, 0);
	--transparent:rgba(167, 32, 243, 0)
}

#theme-switch img:first-child{
	display:none;
}

.darkmode #theme-switch img:last-child{
	display:none;
}

.darkmode #theme-switch img:first-child{
	display:block;
}

body {
    overflow-x: auto;
	background:var(--text-color)
}

html, body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}


html, body {
    overflow-x: hidden;
    overflow-y: auto;
    width: 100%;
}

body 	{
			font-family: "Roboto";
			margin:0px!important;
			padding:0px!important;
			color:var(--background-color);
			font-weight: normal!important;
			overflow-x: hidden!important;
		}

/**
* {
      cursor: url("images/cursor.png"), auto;
}

.button
{cursor: url("images/cursor-hover.png"), pointer}

a
{cursor: url("images/cursor-hover.png"), pointer}
**/




html{overflow-x: hidden!important;}

span.ouverture
{font-family: 'OuvertureScript';
font-size:167%;}

a
{color:var(--text-color);}

.display-1
{font-weight:normal;
font-size:16vw!important;}

.nav-link
{color:var(--text-color)!important;
padding:0px!important;
margin:30px;}

.nav-link.white
{color:var(--background-color)!important;
padding:0px!important;
margin:30px;}



.nav-link.active
{border-bottom:solid 1px var(--text-color)!important;}

.nav-link:hover
{border-bottom:solid 1px var(--text-color)!important;}

body > nav > div > button
{border:none!important;}


body > nav > div > button > span
{background-image:url("images/Fichier 2.svg")!important;
font-size:2em!important;}

body > nav > div > button > span.photo
{background-image:url("images/Fichier 2-white.svg")!important;
font-size:2em!important;}


.sticky
{position:sticky!important;
top:0!important;
padding-top:65px;}

h2
{font-size:12vw!important;
font-weight:normal;
line-height: 60px!important;}


@media (min-width: 1200px) {
  h2 {
   font-size:7em!important;
font-weight:normal;
line-height: 60px!important;
  }
}

a.ocean
{background-image: url("images/ImgResponsive_Placeholder.tif")!important;
height: 1000px!important;
background-repeat: no-repeat;
background-size: cover;
background-position: center;}

h1
{line-height: 100%;
font-weight:normal!important;
font-size:15vw!important;}


a
{text-decoration: none!important;}



.internshipcard
{	background-image: url("images/internshipreport-title.jpg");
	background-size: cover;
	border-radius: 0!important;
	border:0px;
background-position: center;}

.ameliecard
{	background-image: url("images/ameliepoulain-title.jpg");
	background-size: cover;
	border-radius: 0!important;
	border:0px;
background-position: center;}

.introversationcard
{	background-image: url("images/introversation.png");
	background-size: cover;
	border-radius: 0!important;
	border:0px;
background-position: center;}

.acoustiqueriecard
{	background-image: url("images/ALX_7020-2.jpg");
	background-size: cover;
	border-radius: 0!important;
	border:0px;
background-position: center;}

.fringalecard
{	background-image: url("images/fringale-ch.jpg");
	background-size: cover;
	border-radius: 0!important;
	border:0px;
background-position: center;}

.usfncard
{	background-image: url("images/usfn.jpg");
	background-size: cover;
	border-radius: 0!important;
	border:0px;
background-position: center;}

.dontalkabutheclubcard
{	background-image: url("images/dontalkaboutheclub-2.jpg");
	background-size: cover;
	border-radius: 0!important;
	border:0px;
background-position: center;}

.lanuitdelalecturecard
{	background-image: url("images/lanuitdelalecture-title.jpg");
	background-size: cover;
	border-radius: 0!important;
	border:0px;
background-position: center;}

.weatherappcard
{	background-image: url("images/DSC_3043-min.jpg");
	background-size: cover;
	border-radius: 0!important;
	border:0px;
	background-position: center;}

.tennispostercard
{	background-image: url("images/ALX_5100-min.jpg");
	background-size: cover;
	border-radius: 0!important;
	border:0px;
background-position: center;}

.oceanfestivalcard
{	background-image: url("images/oceanfestival.jpg");
	background-size: cover;
	border-radius: 0!important;
	border:0px;
background-position: center;}

.bottlecard
{	background-image: url("images/objet_alexiane2-min.JPG");
	background-size: cover;
	border-radius: 0!important;
	border:0px;
background-position: center;}

.journalcard
{	background-image: url("images/ALX_5035.jpg");
	background-size: cover;
	border-radius: 0!important;
	border:0px;
background-position: center;}

.skincard
{	background-image: url("images/skincredits.jpg");
	background-size: cover;
	border-radius: 0!important;
	border:0px;
background-position: center;}

.futurecitycard
{	background-image: url("images/mockup-futurecity-2.jpg");
	background-size: cover;
	border-radius: 0!important;
	border:0px;
background-position: center;}




h2.card-title {
  font-size: 100px!important;
  opacity: 0;
  transform: translateY(20px);
	color:var(--background-color);
	background-color: rgba(0,0,0,0.41);
}
p.card-title {
  font-size: 18px;
  opacity: 0;
  transform: translateY(20px);
	color:white;
	background-color: rgba(0,0,0,0.41);
}




.card:hover .card-title {
  animation: slide-up 0.5s forwards;
}

@keyframes slide-up {
  0% {
    transform: translateY(0px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}


.cardbuttonhomespecial 
{	
	background-size: cover;
	border-radius: 0!important;
	border:0px;}


h2.card-titlebuttonhomespecial {
  font-size: 100px!important;
  opacity: 0;
  transform: translateY(20px);
	color:var(--background-color);
	background-color: rgba(0,0,0,0);
}
p.card-titlebuttonhomespecial {
  font-size: 18px;
  opacity: 0;
  transform: translateY(20px);
	color:var(--background-color);
	background-color: rgba(0,0,0,0);
}
.cardbuttonhomespecial:hover .card-titlebuttonhomespecial {
  animation: slide-up 0.5s forwards;
}

@keyframes slide-up {
  0% {
    transform: translateY(0px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}




p.text-end
{text-align: end;}



header
{padding-top:70px;}




body > nav.nav-mobile.d-lg-none.navbar.fixed-top.navbar-expand-lg.navbar-light.bg-white.pt-5.pb-3
{font-size:50px!important;}

nav.nav-mobile > div > div > ul > li > a.active, nav.nav-mobile > div > div > ul > li > a:hover
{font-family:'OuvertureScript';
border:none!important;}

@media (max-width: 992px){
.navbar-collapse
{height:100vh;}}



nav.nav-mobile > div > div > ul
{position:relative;
}

.appear-after-1s {
  opacity: 0;
  animation: slide-down 2s forwards;
  animation-delay: 1s;
}

@keyframes slide-down {
  0% {
    transform: translateY(-125px);
	  opacity: 0;
  }
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

.appear-after-2s {
  opacity: 0;
  animation: fadein 1s forwards;
  animation-delay: 2s;
}

@keyframes fadein {
  to {
    opacity: 1;
  }
}

.appear-after-3s {
  opacity: 0;
  animation: fadein 1s forwards;
  animation-delay: 3s;
}

@keyframes fadein {
  to {
    opacity: 1;
  }
}


body > section > div > div.mx-3.row.d-flex > div > a > div > h2
{padding:300px 0px 30px 0px!important;}

body > section > div > div.mx-3.row.d-flex > div > a > div > p
{padding:20px 0px 300px 0px!important;}


.filter-btn {
  background-color: #fff;
  border: 1px solid var(--text-color);
	border-radius:10px;
  padding: 8px 25px;
  font-size: 16px;
  cursor: pointer;
	color:var(--text-color);
}

.filter-btn:hover {
  background-color: #000000;
color:var(--background-color);}

.filter-btn.selected {
  background-color: #000000;
  color: #fff;
}

.bg-dark
{background-color:#000!important;}


h3
{font-size:70px;
font-weight:normal;
line-height:80px;}

@media (min-width: 992px)
{h3
{font-size:140px;
font-weight:normal;
line-height:180px;}}






div.footer-hildbrand
{margin-top:-90px;}

footer
{height:100vh;
z-index:10000000000;
position:relative;}

footer a 
{color:var(--background-color)!important;}

p.cv
{font-size:110px;
margin:0px;
padding:0px;
position:absolute;
top:-20px;}



.aboutmebutton
{position:relative;
top:-40px;
font-size:90px;}

@media (min-width: 1200px) {
  .aboutmebutton {
    font-size: 120px;
	position:relative;
	top:-40px;
  }
}

@media (min-width: 1900px) {
  .aboutmebutton {
    font-size: 150px;
	position:relative;
	top:-40px;
  }
}



.flechegif
{position:relative;
height:30%;
width:30%;}

.cardbuttonhomespecial
{background:  url("images/about-portrait-scaled-e1701113002929.jpg");
background-size:cover;
height:50vh!important;
background-position: center;
margin:100px 0px 100px 0px!important;}


.cardbuttonhomespecial-eyes
{background:  url("images/espana23/ALX_3988-min.jpg");
background-size:cover;
height:50vh!important;
background-position:bottom;
margin:100px 0px 100px 0px!important;}





.cardfleche
{height:100%;
width:200;
background-size:contain;
background-repeat:no-repeat;}

.cardfleche:hover
{background-image:url("images/fleche.gif");
height:100%;
width:200;
background-size:30%;
background-repeat:no-repeat;
background-position:bottom right;}

body > section > div.mx-3.row.d-flex.justify-content-start > div > a > div > div > h3, body > section:nth-child(6) > div.mx-3.row.d-flex.justify-content-end > div > a > div > div > h3
{line-height: 50px;}

.footercvetliens
{margin-top:100px!important;}

footer a:hover
{text-decoration:underline!important;}


.abouttitle
{margin-top:50px;
	line-height: 180px;}

@media (max-width: 992px) {
.abouttitle
{margin-top:50px;
	line-height: 110px;}
}



.projecttitle
{margin-top:50px;
line-height: 180px;}

@media (max-width: 992px) {
.projecttitle
{margin-top:50px;
	line-height: 110px;}
}


.btn-primary
{border:1px solid var(--text-color);
background-color:rgba(0,0,0,0.00); 
color:var(--text-color);
font-size:30px;
height:40px;
line-height:0px;
border-radius:10px;}

.btn-primary-orange
{border:1px solid #ED632C;
background-color:rgba(0,0,0,0.00); 
color:#ED632C;
font-size:30px;
height:40px;
line-height:0px;
border-radius:10px;}

.btn-primary-2
{border:1px solid var(--text-color);
background-color:rgba(0,0,0,0.00); 
color:var(--text-color);
font-size:30px;
height:80px;
line-height:30px;
border-radius:10px;
width:250px;}

.btn-primary:hover
{border:1px solid var(--text-color);
background-color:var(--text-color); 
color:var(--background-color);
font-size:30px;
height:40px;
line-height:0px;
border-radius:10px;
}

.btn-primary-orange:hover
{border:1px solid #ED632C;
background-color:#ED632C; 
color:var(--background-color);
font-size:30px;
height:40px;
line-height:0px;
border-radius:10px;
}

.btn-primary:active
{border:1px solid var(--text-color);
background-color:var(--text-color); 
color:var(--background-color);
font-size:30px;
height:40px;
line-height:0px;
border-radius:10px;
}

.btn-primary-orange:active
{border:1px solid #ED632C;
background-color:#ED632C; 
color:var(--background-color);
font-size:30px;
height:40px;
line-height:0px;
border-radius:10px;
}

.btn-primary-2:hover
{border:1px solid var(--text-color);
background-color:var(--text-color); 
color:var(--background-color);
font-size:30px;
height:80px;
line-height:30px;
border-radius:10px;
width:250px;
}

.btn-primary-2:active
{border:1px solid var(--text-color);
background-color:var(--text-color); 
color:var(--background-color);
font-size:30px;
height:80px;
line-height:30px;
border-radius:10px;
width:250px;
}

.portraitaboutbackgroud
{background-image: url("images/DSC_0106.jpg");
height:800px;
background-size: contain;
background-position:center;
background-repeat:no-repeat;}


.btn-secondary
{border:2px solid var(--text-color);
background-color:rgba(0,0,0,0.00); 
color:var(--text-color);
font-size:50px;
height:80px;
line-height:0px;
border-radius:10px;}

.btn-secondary:hover
{border:2px solid var(--text-color);
background-color:var(--text-color); 
color:var(--background-color);
font-size:50px;
height:80px;
line-height:0px;
border-radius:10px;}

.btn-secondary:active
{border:2px solid var(--text-color)!important;
background-color:var(--text-color)!important; 
color:var(--background-color);
font-size:50px;
height:80px;
line-height:0px;
border-radius:10px;}


.btn-orange
{border:2px solid var(--background-color);
background-color:rgba(0,0,0,0.00); 
color:var(--background-color);
font-size:50px;
height:80px;
line-height:0px;
border-radius:10px;}

.btn-orange:hover
{border:2px solid var(--background-color);
background-color:var(--background-color); 
color:var(--text-color);
font-size:50px;
height:80px;
line-height:0px;
border-radius:10px;}







@media (min-width: 992px) {
.mt-5-about
{margin-top:200px;}
}


.internshipreport-titleimage
{background-image: url("images/internshipreport-title.jpg");
background-size: cover;
height:600px;
background-position: center;}

.acoustiquerie-titleimage
{background-image: url("images/ALX_7020-2.jpg");
background-size: cover;
height:600px;
background-position: center;}

.fringale-titleimage
{background-image: url("images/fringale-ch.jpg");
background-size: cover;
height:600px;
background-position: center;}

.ameliepoulain-titleimage
{background-image: url("images/ameliepoulain-title.jpg");
background-size: cover;
height:600px;
background-position: center;}

.usfn-titleimage
{background-image: url("images/usfn.jpg");
background-size: cover;
height:600px;
background-position: center;}

.dontalkaboutheclub-titleimage
{background-image: url("images/dontalkaboutheclub-2.jpg");
background-size: cover;
height:600px;
background-position: center;}

.lanuitdelalecture-titleimage
{background-image: url("images/lanuitdelalecture-title.jpg");
background-size: cover;
height:600px;
background-position: center;}

.introversation-titleimage
{background-image: url("images/introversation.png");
background-size: cover;
height:600px;
background-position: center;}

.tennisposter-titleimage
{background-image: url("images/ALX_5100-min.jpg");
background-size: cover;
height:600px;
background-position: center;}

.weatherapp-titleimage
{background-image: url("images/DSC_3043-min.jpg");
background-size: cover;
height:600px;
background-position: center;}

.oceanfestival-titleimage
{background-image: url("images/oceanfestival.jpg");
background-size: cover;
height:600px;
background-position: center;}


.threedbottle-titleimage
{background-image: url("images/objet_alexiane2-min.JPG");
background-size: cover;
height:600px;
background-position: center;}

.journal-titleimage
{background-image: url("images/ALX_5035.jpg");
background-size: cover;
height:600px;
background-position: center;}

.skin-titleimage
{background-image: url("images/skincredits.jpg");
background-size: cover;
height:600px;
background-position: center;}

.futurecity-titleimage
{background-image: url("images/mockup-futurecity-2.jpg");
background-size: cover;
height:600px;
background-position: center;}





.rotate
{rotate: 180deg;}





    /* Icône Burger */
    .burger-icon {
      position: fixed;
      right: 0px;
      cursor: pointer;
      z-index: 1100;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 24px;
      width: 30px;
		margin:3rem;
    }

    .burger-icon .line {
      width: 100%;
      height: 2px;
      background-color: var(--text-color);
      transition: all 0.3s ease-in-out;
    }
    .burger-icon .linephoto {
      width: 100%;
      height: 2px;
      background-color: var(--background-color);
      transition: all 0.3s ease-in-out;
    }

    /* Transformation burger → croix */
    .burger-icon.active .line:nth-child(1) {
      transform: rotate(45deg) translate(0, 15px);
      transform-origin: center;
    }

    .burger-icon.active .line:nth-child(2) {
      opacity: 0;
    }

    .burger-icon.active .line:nth-child(3) {
      transform: rotate(-45deg) translate(0, -15px);
      transform-origin: center;
    }

    /* Changer la couleur des lignes en blanc en mode croix */
    .burger-icon.active .line {
      background-color: var(--background-color);
    }
@media (max-width: 992px) {
.fullscreen-menu
{overflow-y:auto;}
}
    /* Fullscreen Menu */
    .fullscreen-menu {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: var(--text-color);
      color: var(--background-color);
      display: none;
      justify-content: center;
      z-index: 1000;
	margin:0;
		padding:3rem;
    }

.menu-content
{width:100%;
margin:0;
padding:0;}

    .menu-list li {
		list-style: none;
    }

    .menu-list a {
      color: white;
      text-decoration: none;
      transition: color 0.3s ease;
    }
    .menu-list a:hover {
      color: #AFAFAF;
      text-decoration: none;
      transition: color 0.3s ease;
    }
.menu-list
{margin:0;
padding: 0;}
.firstpartmenu
{font-size:90px;
line-height:80px;}

@media (min-width: 1200px) {
.firstpartmenu
{font-size:200px;
line-height:200px;}
}

.line.orange
{background:#C;}

#fullscreenMenu > div > ul.menu-list.secondpartmenu.col-12 > li 
{border-bottom:solid 1px white;
padding: 10px 0px 10px 0px;}

#fullscreenMenu > div > ul.menu-list.secondpartmenu.col-12 > li:nth-child(2)
{border-bottom:solid 1px white;
border-top:solid 1px white;
padding: 10px 0px 10px 0px;}

#fullscreenMenu > div > ul.menu-list.secondpartmenu.col-12.col-lg-6 > p
{text-align: end;}

#fullscreenMenu > div > ul.menu-list.firstpartmenu.col-12.col-lg-6 > li:nth-child(1)
{margin-top:70px;}

#fullscreenMenu > div > ul.menu-list.secondpartmenu.col-12.col-lg-6 > li:nth-child(13)
{margin-bottom:30px;}

#fullscreenMenu > div > ul.menu-list.firstpartmenu.col-12.col-lg-6
{justify-content: end;
display:flex;
flex-direction: column;}

#fullscreenMenu > div > ul.menu-list.secondpartmenu.col-12.col-lg-6
{margin-top:60px;}





.degradecouleurfondnav
{background: linear-gradient(
  var(--text-color),
  var(--transparent)
);
height:30vh;}

.degradecouleurfondnavenvers
{background: linear-gradient(
  var(--transparent),
	var(--text-color)
);
height:15vh;}


.logoquichangedecouleur
{fill:var(--background-color);}


hr
{border:0.5px solid var(--background-color);
width:98%;}

.img-fluid
{border-radius: 10px;}