@font-face{font-family:"Seasons";src:url("Seasons.otf") format("opentype")}
@font-face{font-family:"Dash";src:url("fonts/Dash.otf") format("opentype")}
@font-face{font-family:"FuturaBold";src:url("fonts/Futura-Bold.ttf") format("truetype")}
@font-face{font-family:"FuturaRegular";src:url("fonts/Futura-Regular.ttf") format("truetype")}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  background:#F2E4E2;
  color:#151515;
  font-family:"FuturaRegular",Arial,sans-serif;
  overflow-x:hidden;
  cursor:none;
}

a,button,input,textarea{cursor:none}
a{text-decoration:none;color:inherit}

.cursor{
  width:20px;
  height:20px;
  background:#E96545;
  border-radius:50%;
  position:fixed;
  pointer-events:none;
  z-index:99999;
  transform:translate(-50%,-50%);
  transition:transform .2s ease,background .3s ease;
}

.cursor.hover{transform:translate(-50%,-50%) scale(2)}
.cursor.menu-open{background:#F0C4BD}
body[data-page="josette"] .cursor{background:#B3A300}

/* HEADER */

.header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:96px;
  padding:0 50px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  z-index:1000;
}

.logo img{
  height:42px;
  width:auto;
  display:block;
}

.header-right{
  display:flex;
  align-items:center;
  gap:28px;
  position:relative;
}

.header-pill{
  position:absolute;
  right:-20px;
  top:50%;
  transform:translateY(-50%);
  width:170px;
  height:58px;
  background:#E96545;
  border-radius:999px;
  z-index:-1;
  display:none;
}

body[data-page="home"] .header-pill{
  display:block;
}

.lang-switch{
  display:flex;
  align-items:center;
  gap:9px;
  height:22px;
  font-family:"FuturaBold";
  font-size:13px;
  letter-spacing:2px;
  position:relative;
  z-index:2;
}

.lang-switch button{
  background:none;
  border:none;
  color:#151515;
  font-family:"FuturaBold";
  font-size:13px;
  line-height:1;
  letter-spacing:2px;
  padding:0;
}

.lang-switch span{
  display:flex;
  align-items:center;
  line-height:1;
  color:#151515;
}

body[data-page="home"] .lang-switch button,
body[data-page="home"] .lang-switch span{
  color:#F2E4E2;
}

.lang-btn.active{color:#E96545}

body[data-page="home"] .lang-btn.active{
  color:#F5EEDC;
}

.burger{
  width:42px;
  height:30px;
  background:none;
  border:none;
  position:relative;
  z-index:1002;
}

.burger span{
  position:absolute;
  left:0;
  width:42px;
  height:2px;
  background:#151515;
  transition:.4s ease;
}

body[data-page="home"] .burger span{
  background:#F2E4E2;
}

.burger span:first-child{top:8px}
.burger span:last-child{bottom:8px}

.burger.active span{background:#F2E4E2}

.burger.active span:first-child{
  transform:rotate(45deg);
  top:14px;
}

.burger.active span:last-child{
  transform:rotate(-45deg);
  bottom:14px;
}

/* MENU */

.menu{
  position:fixed;
  inset:0;
  background:#8199E3;
  display:flex;
  justify-content:center;
  align-items:center;
  transform:translateY(-100%);
  transition:.8s cubic-bezier(.77,0,.18,1);
  z-index:999;
}

.menu.active{transform:translateY(0)}

.menu nav{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}

.menu nav a{
  font-family:"Dash","FuturaBold",Arial,sans-serif;
  font-size:clamp(46px,7vw,108px);
  line-height:1.1;
  color:#F2E4E2;
  transition:.3s ease;
}

.menu nav a:hover{
  color:#F0C4BD;
  transform:translateX(10px);
}

/* ACCUEIL */

.hero{
  height:100vh;
  background-image:url("images/hero.jpg");
  background-size:cover;
  background-position:center;
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:120px 50px;
}

.hero-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.30);
}

.hero-content{
  position:relative;
  z-index:2;
  color:white;
}

.hero-subtitle{
  font-family:"Dash","FuturaBold",Arial,sans-serif;
  letter-spacing:3px;
  font-size:13px;
  text-transform:uppercase;
  margin-bottom:26px;
  animation:fadeUp 1s ease forwards;
}

.hero h1{
  font-family:"Seasons","FuturaBold",Arial,sans-serif;
  font-size:clamp(70px,10vw,145px);
  line-height:1.05;
  letter-spacing:-1px;
  font-weight:normal;
  color:white;
  animation:fadeUp 1s ease forwards .15s;
  opacity:0;
}

.hero-description{
  margin-top:26px;
  font-family:"Dash","FuturaBold",Arial,sans-serif;
  font-size:clamp(22px,2vw,32px);
  color:white;
  animation:fadeUp 1s ease forwards .3s;
  opacity:0;
}

.hero-footer{
  position:fixed;
  bottom:30px;
  left:50px;
  right:50px;
  height:70px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid rgba(255,255,255,.45);
  z-index:100;
}

.hero-footer p,
.hero-footer a{
  font-family:"FuturaBold";
  color:white;
  text-transform:uppercase;
  letter-spacing:2px;
  font-size:13px;
}

/* PAGES */

.page{
  min-height:100vh;
  padding:160px 50px 110px;
}

.page-title{
  font-family:"Seasons","FuturaBold",Arial,sans-serif;
  font-size:clamp(54px,7vw,110px);
  line-height:1.05;
  letter-spacing:-1px;
  font-weight:normal;
  color:#8199E3;
  margin-bottom:70px;
  text-align:center;
}

.page-intro{
  max-width:820px;
  margin:0 auto 90px;
  text-align:center;
  font-family:"Dash","FuturaBold",Arial,sans-serif;
  font-size:clamp(18px,1.6vw,25px);
  line-height:1.45;
}

body[data-page="contact"] .page-intro{
  font-size:clamp(17px,1.4vw,22px);
}

.section-title{
  font-family:"Seasons","FuturaBold",Arial,sans-serif;
  font-size:clamp(38px,5vw,70px);
  line-height:1.05;
  color:#8199E3;
  margin-bottom:42px;
  text-align:center;
}

/* ABOUT */

.about-layout{
  display:grid;
  grid-template-columns:520px 1fr;
  gap:80px;
  align-items:start;
}

.about-image img{
  width:100%;
  height:650px;
  object-fit:cover;
  filter:grayscale(100%);
  transition:filter .4s ease;
}

.about-image img:hover{filter:grayscale(0%)}

.about-text p{
  max-width:850px;
  line-height:1.9;
  margin-bottom:22px;
  color:rgba(21,21,21,.75);
}

.quote{
  font-family:"Dash","FuturaBold",Arial,sans-serif;
  font-size:30px;
  color:#8199E3!important;
  line-height:1.25!important;
}

.about-skills{margin-top:120px}

.skills-grid{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  max-width:1000px;
  margin:auto;
  justify-content:center;
}

.skills-grid span{
  border:1px solid rgba(21,21,21,.25);
  padding:14px 20px;
  border-radius:999px;
  font-family:"FuturaBold";
  text-transform:uppercase;
  letter-spacing:1.5px;
  font-size:13px;
  background:rgba(255,255,255,.25);
}

.cv-link{
  display:block;
  width:max-content;
  margin:60px auto 0;
  color:#E96545;
  font-family:"FuturaBold";
  text-transform:uppercase;
  letter-spacing:2px;
}

/* EXPÉRIENCES */

.formation-section{margin-top:60px}

.formation-wrapper{
  display:flex;
  align-items:center;
  gap:20px;
}

.formation-track{
  display:flex;
  gap:30px;
  overflow-x:auto;
  scroll-behavior:smooth;
  scrollbar-width:none;
  padding:20px 0 35px;
}

.formation-track::-webkit-scrollbar{display:none}

.formation-card{
  min-width:430px;
  max-width:430px;
  background:white;
  padding:38px;
  border-radius:24px;
  box-shadow:0 20px 50px rgba(0,0,0,.05);
}

.formation-card span{
  font-family:"FuturaBold";
  color:#E96545;
  letter-spacing:2px;
}

.formation-card h3{
  font-family:"FuturaBold";
  font-size:28px;
  line-height:1.2;
  font-weight:normal;
  margin:18px 0;
}

.formation-card p{
  line-height:1.8;
  color:rgba(21,21,21,.75);
}

.formation-arrow{
  min-width:58px;
  height:58px;
  border-radius:50%;
  border:none;
  background:#8199E3;
  color:white;
  font-size:25px;
}

.experience-section{margin-top:140px}

.timeline{
  position:relative;
  padding-left:100px;
}

.timeline::before{
  content:"";
  position:absolute;
  left:20px;
  top:0;
  bottom:0;
  width:1px;
  background:#8199E3;
}

.timeline-item{
  position:relative;
  margin-bottom:80px;
}

.timeline-item::before{
  content:"";
  position:absolute;
  left:-88px;
  top:10px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:#E96545;
}

.timeline-date{
  font-family:"FuturaBold";
  margin-bottom:10px;
  color:#8199E3;
}

.timeline-content h3{
  font-family:"FuturaBold";
  font-size:34px;
  line-height:1.1;
  font-weight:normal;
}

.timeline-content p{
  margin-top:10px;
  line-height:1.8;
  color:rgba(21,21,21,.75);
}

.cta-josette{
  margin-top:130px;
  padding:75px;
  background:#8199E3;
  border-radius:30px;
  text-align:center;
}

.cta-josette p{
  font-family:"FuturaBold";
  color:white;
  margin-bottom:18px;
}

.cta-josette a{
  font-family:"Dash","FuturaBold";
  font-size:clamp(44px,6vw,78px);
  line-height:1.05;
  color:#F2E4E2;
}

/* PROJETS */

.projects-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:30px;
}

.project-card{
  position:relative;
  height:560px;
  overflow:hidden;
  background:black;
}

.project-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:grayscale(100%);
  transition:.8s ease;
}

.project-card:hover img{
  filter:grayscale(0);
  transform:scale(1.08);
}

.project-info{
  position:absolute;
  bottom:30px;
  left:30px;
  z-index:2;
  color:white;
}

.project-info span{
  font-family:"FuturaBold";
  letter-spacing:2px;
  color:#F0C4BD;
}

.project-info h2{
  font-family:"FuturaBold";
  font-size:clamp(36px,4vw,60px);
  line-height:1.05;
  font-weight:normal;
}

.project-info p{font-family:"FuturaRegular"}

.project-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  backdrop-filter:blur(20px);
  display:flex;
  justify-content:center;
  align-items:center;
  opacity:0;
  pointer-events:none;
  transition:.5s;
  z-index:2000;
}

.project-modal.active{
  opacity:1;
  pointer-events:auto;
}

.project-modal-content{
  width:min(920px,90%);
  max-height:82vh;
  background:#F2E4E2;
  overflow-y:auto;
  padding:55px;
  position:relative;
  border-radius:24px;
}

#closeProject{
  position:absolute;
  top:25px;
  right:32px;
  background:none;
  border:none;
  font-size:42px;
  color:#151515;
}

.project-open h1{
  font-family:"Seasons","FuturaBold",Arial,sans-serif;
  font-size:clamp(42px,5vw,78px);
  line-height:1.05;
  color:#8199E3;
  font-weight:normal;
  margin-bottom:20px;
}

.project-open h2{
  font-family:"FuturaBold";
  text-transform:uppercase;
  letter-spacing:2px;
  color:#E96545;
  font-size:13px;
  margin:34px 0 10px;
}

.project-open p{
  max-width:760px;
  line-height:1.8;
}

.project-open img{
  width:100%;
  max-height:420px;
  object-fit:cover;
  margin-top:32px;
  border-radius:18px;
}

/* JOSETTE */

body[data-page="josette"]{
  background:#F5EEDC;
}

.josette-main{
  background:#F5EEDC;
  color:#151515;
}

.josette-hero-clean{
  min-height:52vh;
  padding:20px 50px 45px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
}

.josette-logo-clean{
  width:min(250px,55vw);
  margin-bottom:18px;
}

.josette-kicker{
  font-family:"Dash","FuturaBold",Arial,sans-serif;
  text-transform:uppercase;
  letter-spacing:3px;
  color:#B3A300;
  margin-bottom:10px;
}

.josette-hero-clean h1,
.josette-story-clean h2,
.josette-services-clean h2,
.instagram-section h2,
.josette-cta-clean h2{
  font-family:"Seasons","FuturaBold",Arial,sans-serif;
  font-size:clamp(42px,6vw,88px);
  line-height:1.05;
  font-weight:normal;
  color:#B3A300;
  margin-bottom:20px;
}

.josette-intro{
  max-width:700px;
  margin:0 auto;
  line-height:1.8;
  font-size:17px;
}

.josette-story-clean{
  padding:90px 50px;
  max-width:1050px;
  margin:auto;
}

.josette-story-clean p{
  max-width:760px;
  line-height:1.9;
  margin-bottom:18px;
}

.josette-services-clean{
  padding:95px 50px;
  background:#F5EEDC;
  border-top:1px solid rgba(179,163,0,.25);
  border-bottom:1px solid rgba(179,163,0,.25);
}

.services-lines{
  max-width:1000px;
  margin:auto;
}

.services-lines p{
  font-family:"FuturaBold";
  font-size:clamp(26px,4vw,50px);
  padding:26px 0;
  border-bottom:1px solid rgba(179,163,0,.35);
  transition:.3s ease;
}

.services-lines p:hover{
  padding-left:26px;
  color:#B3A300;
}

.instagram-section{
  padding:95px 50px;
  text-align:center;
  background:#F5EEDC;
}

.instagram-intro{
  max-width:700px;
  margin:0 auto 35px;
  line-height:1.8;
  font-size:17px;
}

.instagram-widget{
  max-width:1050px;
  margin:35px auto 0;
}

.instagram-embed-placeholder{
  border:1px solid rgba(179,163,0,.35);
  padding:35px;
  border-radius:24px;
}

.instagram-button{
  display:inline-block;
  margin-top:20px;
  font-family:"FuturaBold";
  text-transform:uppercase;
  letter-spacing:2px;
  color:#B3A300;
}

.josette-cta-clean{
  padding:95px 50px;
  text-align:center;
  background:#B3A300;
}

.josette-cta-clean h2,
.josette-cta-clean p,
.josette-cta-clean a{
  color:#F5EEDC;
}

.josette-cta-clean p{
  max-width:700px;
  margin:0 auto 30px;
  line-height:1.8;
}

.josette-cta-clean a{
  display:inline-block;
  font-family:"FuturaBold";
  text-transform:uppercase;
  letter-spacing:2px;
}

/* CONTACT */

.contact-links{
  display:flex;
  flex-direction:column;
  gap:18px;
  margin-bottom:60px;
  align-items:center;
}

.contact-links a{
  font-family:"FuturaBold";
  font-size:clamp(28px,3vw,54px);
  color:#8199E3;
  text-align:center;
}

form{
  max-width:720px;
  margin:auto;
  display:flex;
  flex-direction:column;
  gap:20px;
}

input,textarea{
  background:transparent;
  border:none;
  border-bottom:1px solid rgba(21,21,21,.3);
  padding:18px 0;
  font-family:"FuturaRegular";
  font-size:16px;
  outline:none;
}

textarea{
  min-height:150px;
  resize:vertical;
}

form button{
  width:fit-content;
  border:none;
  background:#E96545;
  color:white;
  padding:16px 30px;
  border-radius:50px;
  font-family:"FuturaBold";
  margin-top:20px;
}

/* ANIMATIONS */

.hidden-element{
  opacity:0;
  transform:translateY(40px);
  transition:.8s ease;
}

.visible{
  opacity:1;
  transform:translateY(0);
}

@keyframes fadeUp{
  from{opacity:0;transform:translateY(24px)}
  to{opacity:1;transform:translateY(0)}
}

/* RESPONSIVE */

@media(max-width:950px){
  body{cursor:auto}
  .cursor{display:none}
  a,button,input,textarea{cursor:auto}

  .header{padding:0 24px}
  .logo img{height:38px}
  .lang-switch{display:none}

  .hero,
  .page{
    padding-left:24px;
    padding-right:24px;
  }

  .hero-footer{
    left:24px;
    right:24px;
  }

  .about-layout,
  .projects-grid{
    grid-template-columns:1fr;
  }

  .about-image img{height:520px}

  .formation-card{
    min-width:300px;
    max-width:300px;
  }

  .formation-wrapper{gap:10px}

  .formation-arrow{
    min-width:48px;
    height:48px;
  }

  .project-card{height:420px}

  .project-modal-content{
    padding:42px 24px;
  }

  .timeline{padding-left:60px}

  .timeline-item::before{
    left:-48px;
  }

  .cta-josette{
    padding:45px 25px;
  }

  .josette-hero-clean{
    min-height:48vh;
    padding:15px 24px 35px;
  }

  .josette-logo-clean{
    width:min(230px,70vw);
  }

  .josette-story-clean,
  .josette-services-clean,
  .instagram-section,
  .josette-cta-clean{
    padding-left:24px;
    padding-right:24px;
  }
}