@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=Young+Serif&display=swap');
   
/* Reset minimal */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', sans-serif; line-height: 1.6; background: white; color: #333; }
html{ scroll-padding-top: 12vh; scroll-behavior: smooth;}
a { text-decoration: none; color: inherit; display: inline-block;}
h1{ font-size: clamp(1.6em, 2vw, 2.2rem);}
h2{ font-size: clamp(1.4em, 2vw, 2rem); font-family: 'ZCOOL+XiaoWei';}
h1,h2,h3{ font-family: 'Young Serif';}
p{font-size: clamp(1.05rem, 1.1vw, 1.17em); font-family: 'Montserrat', Arial, Helvetica, sans-serif; font-weight: 400;}

/* == Header == */
header {
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  min-height: 50px;
  height: 12vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  color: white;
  padding: 1em;
  z-index: 100;
}
nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2vw;
}
nav a {
  color: white;
  font-weight: bold;
  font-size: clamp(1em, 2.5vw, 1.8em);
  text-decoration: none;
  transition: color 0.18s;
  padding: 0.4em 0.3em;
  border-radius: 5px;
  font-family: 'Young Serif', serif;
  font-weight: 400;
  letter-spacing: 3px;
}
nav a:hover {
  background: gray;
  color: white;
}
nav img.logo-grant {
  width: 60%;
  min-width: 30px;
  max-width: 80px;
}

.logo-grant:hover{ cursor: pointer;}

/* ======= Burger Menu Button ======= */
.burger {
  display: none;
  background: none;
  border: none;
  outline: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 46px;
  height: 46px;
  cursor: pointer;
  z-index: 201;
  transition: filter 0.2s;
}
.burger span {
  display: block;
  height: 4px;
  width: 32px;
  background: white;
  margin: 3px 0;
  border-radius: 2px;
  transition: all 0.32s cubic-bezier(.4,2,.6,1);
  pointer-events: none;
}
/* --- Burger to Cross Animation --- */
.burger.open span:nth-child(1) {
  transform: translateY(10px) rotate(45deg);
}
.burger.open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0.1);
}
.burger.open span:nth-child(3) {
  transform: translateY(-10px) rotate(-45deg);
}

/* ======= Menu Overlay ======= */
.mobile-menu-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: #111;
  z-index: 200;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  animation: menuIn 0.3s;
}
.mobile-menu-overlay.open {
  display: flex;
}
@keyframes menuIn { from { opacity: 0; } to { opacity: 1; } }

.mobile-menu-header {
  display: flex;
  width: 100%;
  justify-content: flex-start;
  align-items: center;
  padding: 2.5em 2em 1.5em 2em;
}
.mobile-menu-header .logo-grant {
  width: 68px;
  min-width: 36px;
  height: auto;
}

/* Liens menu mobile */
.mobile-menu-links {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 4.5vh;
  gap: 2.4em;
  width: 100vw;
}
.mobile-menu-links a {
  color: #fff;
  text-decoration: none;
  font-family: 'Young Serif', serif;
  font-weight: 500;
  font-size: 2.1rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  transition: color 0.15s;
}
.mobile-menu-links a:hover {
  color: #aaa;
}

/* Responsive : masque nav, affiche burger sur mobile */
@media (max-width: 800px) {
  header{ justify-content: space-between; padding: 2em;}
  nav a { display: none; }
  .burger { display: flex; }
}

/* Ajuste la taille du header et overlay sur mobile si besoin */
@media (max-width: 480px) {
  header {
    padding: 1em;
    min-height: 40px;
  }
  
  .mobile-menu-header .logo-grant {
    width: 54px;
    min-width: 28px;
  }
  .mobile-menu-links {
    gap: 1.6em;
    margin-top: 3.2vh;
  }
  .mobile-menu-links a {
    font-size: 1.2rem;
    letter-spacing: 0.15em;
  }
}

/* Body no-scroll quand menu ouvert (optionnel, JS) */
body.menu-open {
  overflow: hidden;
}

/* Header fond noir au scroll */
header.header-scrolled {
  background: #0C0C0C !important;
  transition: background 0.25s;
}



/* == Hero Section  ==*/
.hero{
  position: relative;
  background-image: url('img/tatoo-hero.png');
  background-size: cover;
  background-position: center;
  width: 100vw;
  height: 90vh;
  overflow: hidden;
  z-index: 1;
}

.hero-overlay{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0.6;
  z-index: 1;
}

.hero-text{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3em;
  width: 100%;
  height: 100%;
  color: white;
}

.hero-text img{
  width: 50%;
  height: auto;
  max-width: 150px;
  z-index: 3;
}

.hero-text h1{
  color: white;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  padding: 1em;
  z-index: 3;
}

.hero-text button{
  border: solid 2px white;
  background-color: #191919;
  width: 100%;
  height: 100%;
  max-width: 300px;
  max-height: 50px;
  font-size: clamp(1em, 1.5vw, 1.2em);
  color: white;
  z-index: 3;
}

.hero-text button:hover{
  cursor: pointer;
}

.separator-hero{
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100vw;
  height: 10vh;
  z-index: 3;
}

@media (max-width: 480px){
  .hero-text button{ width: 70%;}
  .hero-text img{
    width: 100px;
    height: 100px;
  }
}



/* == Artists Section ==*/
.artists {
  width: 100%;
  margin: 0 auto;
  max-width: 1400px;
  padding: 4em 2em 4em 2em;
  margin-bottom: 2em;
}

.artists h2 {
  text-align: center;
  letter-spacing: 0.11em;
  margin-bottom: 2em;
  font-size: 2.2rem;
  font-family: 'Young Serif';
  font-weight: 400;
}

.artists-wrapper {
  display: flex;
  flex-direction: column;
  gap: 3.5em;
}

.artist {
  display: grid;
  grid-template-columns: 1fr 2fr;
  align-items: center;
  gap: 2.2em 3.5em;
  max-width: 1100px;
  margin: 0 auto;
  background: transparent;
}

.artist-img img {
  width: 100%;
  max-width: 350px;
  display: block;
  margin: 0 auto;
}

.artist-infos {
  width: 100%;
}

.artist h3 {
  margin: 0 0 0.5em 0;
  font-size: 1.2em;
  font-family: 'Montserrat';
  font-weight: 900;
}
.artist h4 {
  margin: 0 0 1em 0;
  font-size: 1em;
  font-weight: bold;
  color: #252525;
  letter-spacing: 0.03em;
}
.artist p {
  margin: 0;
  font-size: 1em;
  color: #343434;
  line-height: 1.5;
}

/* Pour inverser l'ordre (texte à gauche, image à droite) */
.artist-right {
  grid-template-columns: 2fr 1fr;
}
.artist-right .artist-img {
  grid-column: 2;
}
.artist-right .artist-infos {
  grid-column: 1;
  text-align: left;
}

@media (max-width: 950px) {
  .artists-wrapper{ gap: 0;}
  .artist, .artist-right {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    gap: 0.5em;
  }
  .artist-infos {
    order: 1;
    margin-bottom: 0.9em;
  }
  .artist-img {
    order: 2;
    margin-bottom: 2.2em;
  }
}


@media (max-width: 480px){
  .artist-infos{ text-align: left;}
}

/* == Gallery Section == */
.gallery {
  width: 100vw;
  padding: 4em 0 4em 0;
  background: #222;
}
.gallery h2 {
  color: #fff;
  text-align: center;
  font-family: 'Young Serif', serif;
  font-size: 2.2rem;
  letter-spacing: 0.13em;
  margin-bottom: 2.3em;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);  /* 4 colonnes assez étroites */
  grid-template-rows: repeat(6, 10vw);    /* 6 lignes assez hautes */
  gap: 1vw;
  width: 92vw;
  max-width: 1500px;
  margin: 0 auto;
}

.item { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; box-shadow: 0 3px 18px #0006; background: #111; }

/* --- Placement pensé pour verticales --- */
.item1 { grid-column: 1/2; grid-row: 1/3; }   /* Verticale en haut à gauche */
.item2 { grid-column: 2/3; grid-row: 1/4; }   /* Grande verticale au centre */
.item3 { grid-column: 3/5; grid-row: 1/3; }   /* Bloc horizontal (paysage si tu as) */
.item4 { grid-column: 1/2; grid-row: 3/6; }   /* Très grande verticale à gauche */
.item5 { grid-column: 2/3; grid-row: 4/6; }   /* Petite verticale */
.item6 { grid-column: 3/4; grid-row: 3/6; }   /* Moyenne verticale */
.item7 { grid-column: 4/5; grid-row: 3/5; }   /* Verticale droite */
.item8 { grid-column: 4/5; grid-row: 5/7; }   /* Dernière colonne, bas */

@media (max-width: 900px) {
  .gallery-grid {
    display: flex;
    flex-direction: column;
    gap: 1.2em;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 0 1em;
    box-sizing: border-box;
  }
  .item {
    margin: auto;
    width: 80%;
    height: auto;
    border-radius: 6px;
    object-fit: cover;
  }
}

@media(max-width: 480px){
  .gallery-grid img{
    max-height: 240px;
  }
}



/* == About Section == */

.about {
  position: relative;
  width: 100vw;
  padding: 2em 2em 4em 2em;
  background-color: black;
  color: white;
}

.about-wrapper {
  max-width: 1400px;
  margin: 0 auto;
  padding: 4em 4em 6em 4em;
  display: flex;
  align-items: center;
  gap: 2em;
}

.about-photos {
  flex: 1 1 40%;
  display: flex;
  flex-direction: column;
  gap: 2em;
  align-items: center;
  min-width: 220px;
}

.about-photos img {
  width: 100%;
  max-width: 380px;
  min-width: 180px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 2px 20px #0007;
}

.about-text {
  flex: 1 1 45%;
  display: flex;
  flex-direction: column;
  gap: 1em;
  min-width: 240px;
  max-width: 540px;
}

.about-text h2 {
  font-size: clamp(2rem, 2.5vw, 3rem);
  letter-spacing: 0.18em;
  font-weight: 400;
  margin: 0;
}

.about-text p {
  line-height: 1.55;
  margin: 0 0 1.5em 0;
}

.about-text h3 {
  font-size: 1.22em;
  margin: 0;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.about-text ul {
  padding: 0;
  list-style: none;
  font-size: 1.09em;
}

.about-text ul li {
  margin-bottom: 12px;
  line-height: 1.5;
  font-weight: 400;
}

.about-text ul li strong {
  font-weight: 600;
}

.separator-about{
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100vw;
  height: 10vh;
  z-index: 3;
}

.salon-desktop{
  display: block;
}

.salon-mobile{
  display: none;
}

@media (max-width: 1100px) {
  .about-wrapper {
    padding: 3em 2em;
    gap: 2.2em;
    margin-bottom: 2vh;
  }
  .about-photos img {
    max-width: 350px;
  }
  .about-text { max-width: 100%; }
}

@media (max-width: 800px) {
  .about-wrapper {
    flex-direction: column;
    align-items: stretch;
    gap: 2.8em;
    padding: 2.2em 0.9em;
    margin-bottom: 4vh;
  }
  .about-photos {
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
  }
  .about-photos img {
    max-width: 200px;
    min-width: 80px;
    border-radius: 7px;
  }
  .about-text {
    gap: 1.4em;
    min-width: 0;
  }
  .salon-mobile{
    display: block;
  }
  .salon-desktop{
    display: none;
  }
}

@media (max-width: 480px) {
  .about{ padding: 1.5em 1.5em 2em 1.5em}
  .about-wrapper {
    padding: 0;
    gap: 2em;
    margin-bottom: 8vh;
  }
  .about-photos {
    gap: 0.6em;
  }
  .about-photos img {
    max-width: 45vw;
    min-width: 0;
  }
  .about-text h2 {
    font-size: 1.32em;
    letter-spacing: 0.09em;
  }
  .about-text p, .about-text ul { font-size: 0.99em; }
}

/* == Section Contact == */

.contact{
  width: 100vw;
  background-color: white;
  color: black;
  padding: 2em;
}

.contact h2{
  text-align: center;
  margin-bottom: 2%;
  text-transform: uppercase;
  letter-spacing: 10px;
}

.contact form{
  width: 50%;
  max-width: 1200px;
  margin: auto;
}

form div{
  display: flex;
  gap: 0.6em;
}

form label{
  padding-left: 1vw;
}

form .col{
  flex-direction: column;
  width: 100%;
}

form .row{
  flex-direction: row;
  justify-content: space-between;
}

form .row .col{
  width: 49%;
}

form .row input{
  width: 100%;
}

form input{
  height: 5vh;
  max-height: 50px;
  padding-left: 2%;
}

form textarea{
  min-height: 70px;
  height: 10vh;
  max-height: 450px;
  resize: none;
  padding: 2%;
  text-align: left;
}

.contact p{
  display: flex;
  align-items: center;
  justify-content: center;
}

@media(max-width: 1100px){
  .contact form{
    width: 80%;
    max-width: 500px;
  }
}

@media(max-width: 800px){
  .contact form{
    width: 90%;
  }
}

@media(max-width: 480px){
  .contact form{
    width: 95%;
  }
  .contact h2{
    letter-spacing: 5px;
  }
}

/* == Footer == */

footer{
  background-color: white;
  padding: 2em 4em;
  display: flex;
  justify-content: space-around;
  align-items: center;
  text-align: center;
  border-top: 1px solid black;
}

footer .socials{
  text-align: center;
  width: 30%;
}

.socials a{
  margin-right: 1em;
}

.socials img{
  width: 25px;
  height: 25px;
}

footer .footer-nav{
  width: 50%;
}

.footer-nav a{
  margin-right: 1em;
  font-size: clamp(0.8em, 2vw, 1.2em);
}

@media(max-width: 800px){
  footer{
    padding: 1.5em 2em;
  }
}

@media (max-width: 480px){
  footer{
    padding: 1em 1em;
    align-items: center;
  }
  .socials{
    gap: .4em;
  }
  .socials a{
    margin-right: 0;
  }
  .footer-nav{
    padding: .4em;
    width: 60%;
    line-height: 1em;
  }
  .footer-nav a{
    padding-bottom: 10px;
  }
}