* {
  outline: 1px solid rgba(0, 64, 255, 0); /* DEBUG seulement */
}




/* ====== RESET ====== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ====== VARIABLES ====== */
:root {
  --color-text: #37353E;
  --color-bg: #ffffff;
  --color-grey-light: #00000012;
  --color-grey: #666666;
  --color-accent: #FAF9EE;
  --color-accent-red: #ff0000;
  --header-h: 72px; /* ajuste à la hauteur réelle de ton header */
}




/* On laisse le header fixe, et on scrolle dans <main> */
html, body { height: 100%; }
body { overflow: hidden; }                 /* évite le scroll du body */
main.snap {
  height: 100svh;                          /* viewport height “small” = nickel mobile */
  overflow-y: auto;
  scroll-snap-type: y proximity;          /* snap vertical obligatoire */
  -webkit-overflow-scrolling: touch;       /* inertie iOS */
  overscroll-behavior-y: contain;
  scroll-behavior: smooth;
}

.panel {
  min-height: 100svh;    /* au moins 1 écran */
  height: auto;          /* mais peut s’agrandir si besoin */                       /* 1 section = 1 écran */
  scroll-snap-align: start;                /* “aimanté” en haut */
  scroll-snap-stop: always;                /* ne saute pas deux sections d’un coup */
  position: relative;
  scroll-margin-top: 100px; /* ajuste la valeur à la hauteur de ton bandeau */
}




/* ====== BASE ====== */
body {
  font-family: 'Montserrat', sans-serif;
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  height: auto;       /* laisse la page s’agrandir */
  overflow-y: auto;   /* permet le scroll vertical */
  overflow-x: hidden; /* empêche scroll horizontal si tu veux */
  margin: 0;
  padding: 0px;
  background: var(--color-bg);
}


/* Supprimer la règle globale */
a {
  text-decoration: none;
  color: inherit;
}

/* Menu navigation */
nav ul li a {
  text-decoration: none;
  color: inherit;
  transition: opacity 0.3s;
}

nav ul li a:hover {
  opacity: 0.6;
}




/* Liens de la section contact */

#contact a {
  text-decoration: none;
  color: inherit;
  transition: opacity 0.3s;
}

#contact a:hover {
  opacity: 0.6;
}

#contact ul {
  list-style: none;       /* supprime les puces */
  padding: 0;             /* supprime le padding par défaut du <ul> */
  margin: 0;              /* supprime la marge par défaut */
}

#contact li {
  margin: 0.5rem 0;       /* optionnel : espace entre les lignes */
  padding: 0;             /* optionnel : enlève padding si nécessaire */
}


/* Bloc PJ */
#PJ {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;               
  align-items: center;      /* 👉 centre horizontalement */
  text-align: center;       /* 👉 centre le texte */
}

/* Liens */
#PJ a {
  text-decoration: none;
  color: inherit;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  transition: opacity 0.3s;
}

#PJ a:hover {
  opacity: 0.6;
}

/* Style du h3 interne */
#PJ h3 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}




/* ====== NAVIGATION ====== */
header {
  position: fixed;
  width: 100%;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-grey-light);
  z-index: 9999; /* <-- assure que le header reste au-dessus */
  overflow-x: hidden;
}


nav {
  max-width: 1200px;
  margin: 0 auto;
  padding: 5px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative; /* nécessaire pour centrer absolument le logo */
}

nav .titre {
  font-size: 1rem;
  letter-spacing: -1px;
  color: #000000;
  margin: 0;          /* enlève les marges par défaut */
  align-items: center; /* centre si c’est sur plusieurs lignes */
  display: flex;
  line-height: 1;     /* garde une hauteur de ligne neutre */
}


.logo-swap {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
}

.logo-swap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.4s ease; /* fondu fluide */
}

.logo-noir {
  opacity: 1;
}
.logo-rouge {
  opacity: 0;
}

.logo-swap:hover .logo-noir {
  opacity: 0;
}
.logo-swap:hover .logo-rouge {
  opacity: 1;
}



nav ul {
  margin-right: 20px;
  display: flex;
  gap: 2.5vw;
  list-style: none;
  font-size: 1rem;
}

nav ul li {
  font-weight: 200;
}





/* ====== HERO ====== */
/* HERO : texte entre le header et le slider */

#hero {
 position: relative;
  width: 100%;
  height: 100vh;
  background-color: #000000;
  display: flex;
  justify-content: center;
  align-items: center;
}

#hero img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* L’image est toujours entière */
  filter: blur(0px); 
  filter: opacity(75%);

   animation: zoom 20s ease-in-out infinite alternate; /* zoom infini */
   transform-origin: center center; /* zoom à partir du centre */
}

/* Animation zoom */
@keyframes zoom {
  from {
    transform: scale(1);   /* taille normale */
  }
  to {
    transform: scale(1.1); /* zoom de 5% */
  }
}




/* ====== SLIDER - crossfade ====== */
.slider-container {
  position: relative;
  width: 100%;     /* pleine largeur */
  height: 100vh;   /* pleine hauteur pour le slider */
  overflow: hidden;
}

.slider {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* On empile les .slide les unes sur les autres */
.slides {
  position: relative;
  width: 100%;
  height: 100%;
  /* plus de display:flex ni transition transform ici */
}

/* Chaque slide remplit l'espace et est absolument positionnée */
.slides .slide {
  position: absolute;
  inset: 0; /* top:0; right:0; bottom:0; left:0; */
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Image : pleine surface, fondu de 2s */
.slides .slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 2s ease;
  /* si tu veux garder le zoom animé, tu peux conserver l'animation */
  animation: zoom 10s ease-in-out infinite alternate;
  transform-origin: center center;
}

/* La slide active devient visible */
.slides .slide.active img {
  opacity: 1;
  z-index: 2;
}

/* Chaque slide a sa propre "fenêtre" */
.slide {
  flex: 0 0 100%;      /* occupe 100% de la largeur du conteneur */
  height: 100vh;       /* pleine hauteur comme avant */
  overflow: hidden;    /* masque le débordement du zoom */
  position: relative;
}

/* Image avec effet zoom */
.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: zoom 10s ease-in-out infinite alternate;
  transform-origin: center center;
}

.slider button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #e8dfd3a3;
  font-size: 2rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}


.slider button:hover {
  color: #fff;
}


.prev { left: 10px; }
.next { right: 10px; }



.slider-title {
  position: absolute;
  left: 50%;
  top: 150px; /* ajuste la hauteur du texte */
  transform: translateX(-50%);
  width: 90%;
  max-width: 1200px;
  text-align: center;
  color: var(--color-bg);
  font-size: 1.4rem;
  letter-spacing: -1px;
  line-height: 1.3;
  z-index: 4;
  text-shadow: 0 2px 12px rgba(0,0,0,0.20); /* lisibilité */
}


.slider-title .dot { color: var(--color-accent-red); font-weight: 800; }
.dot { color: var(--color-accent-red); font-weight: 800; }



.slider-title .hover-weight { 
  font-variation-settings: "wght" 200;
  transition: font-variation-settings 0.35s;
  color: var(--color-bg);
}

.slider-title .hover-weight:hover {
  font-variation-settings: "wght" 700;
  color: #ffff;
  text-shadow: 0 2px 12px rgba(0,0,0,0.4); /* lisibilité */
}

/* (Garde ta règle existante) ancrage sections sous header fixe */
.subsection-title {
  scroll-margin-top: 100px; 
}






/* ====== PROJETS ====== */
#works {
  max-width: 1200px;
  margin: 0 auto;
  padding: 6rem 2rem 4rem;
}

#works h2 {
  text-align: center;
  margin-bottom: 3rem;
}

/* Conteneur du titre */
.section-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-bottom: 2rem;
}



.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.card {
  border: none;
  overflow: hidden;
  background-color: var(--color-bg);
  transition: transform 0.3s, box-shadow 0.3s;
}

.card:hover {
  transform: translateY(-4px);
}

.card img {
  width: 100%;
  display: block;
}

.card h3 {
  padding: 1rem;
  text-align: center;
  font-weight: 200;
  color: var(--color-text);
  transition: color 0.3s ease, font-variation-settings 0.3s ease; /* transition fluide */
  font-variation-settings: "wght" 200; /* poids initial léger */
}

.card:hover h3 {
  color: var(--color-text);
  font-variation-settings: "wght" 700; /* un peu plus épais au hover */
}


.collections {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 1rem 0;
  letter-spacing: 1px;
  display: block;
  width: 100%;
  text-align: center;
}

/* Sous-titres des collections */
.subsection-title {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 3rem 0 2rem; /* espace avant et après */
  text-align: center;
  scroll-margin-top: 100px; /* ajuste la valeur à la hauteur de ton bandeau */
  
}

.subsection-title h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
  letter-spacing: -0.5px;
  color: var(--color-grey);
}





/* ====== CONTACT ====== */
#contact {
  text-align: center;
  padding: 6rem 2rem;
  background: var(--color-bg);
}

#contact h3 {
  margin-top: 100px;
  margin-bottom: 1rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: #666666;
}

#contact p {
  font-weight: 200;
}

/* ====== FOOTER ====== */


footer {
  text-align: center;
  padding: 2rem;
  font-size: 0.9rem;
  font-weight: 200;
  color: var(--color-grey);
  margin-bottom: 0px;
}











/* ====== GALERIE PHOTO ====== */



    h1 {
      padding: 1rem;
      text-align: center;
      margin-bottom: 30px;
      font-size: 2rem;
      color: #333;
    }



    .galerie {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 20px;
      list-style: none;
      padding: 0;
      margin: 0;
      margin-right: 20px;
      margin-left: 20px;
      margin-top: 0px;
    }

  
    .galerie li {
      margin: 0;
      padding: 0;
    }

    .galerie figure {
      
      margin: 0;
      overflow: hidden;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .galerie figure:hover {
      transform: scale(1.02);
      }



    .galerie img {
      width: 100%;
      height: auto;
      display: block;
    }

    .galerie figcaption {
      padding: 10px;
      text-align: left;
      font-size: 0.9rem;
      color: #555;
      background: var(--color-bg);
    }



    /* Adaptation mobile */
    @media (max-width: 600px) {
      h1 {
        font-size: 1.5rem;
      }
      .galerie {
        gap: 12px;
      }
      .galerie figcaption {
        font-size: 0.8rem;
        padding: 6px;
      }
    }









    .lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none; /* caché par défaut */
  justify-content: center;
  align-items: center;
  filter: blur(20);
  z-index: 10000;
}

.lightbox img {
  max-height: 100vh;
  width: auto;
  object-fit: contain;
  display: block;
}

.lightbox .close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 2rem;
  color: #e8dfd3a3;
  cursor: pointer;
  user-select: none;
  z-index: 1000; /* important ! */
  transition: all 0.3s ease-in-out;
}

.lightbox .close:hover {
  color: #fff;
}

.lightbox button.prev,
.lightbox button.next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #e8dfd3a3;
  font-size: 2rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  z-index: 1000;
}



.lightbox button:hover {
  color: #fff;
}





.lightbox button.prev { left: 10px; }
.lightbox button.next { right: 10px; }

.lightbox-slides {
  width: 100%;
  height: 100%;
  position: relative;
}

.lightbox-slides img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.lightbox-slides img.active {
  opacity: 1;
  z-index: 2;
}







/* ====== PROJETS DESIGN ====== */

#design-works {
  width: 100%;
  height: 100vh;
  margin: 0 auto;
  padding: 6rem 2rem 4rem;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

.panel-design {
  scroll-snap-align: start;
}

.design-title {
  color: var(--color-text) ;
  font-weight: 700 ;
  font-size: 3rem;
  letter-spacing: -2px;
}


.content {
  font-size: 1rem;
  letter-spacing: 0px;
  opacity: 80%;
  line-height: 150%;
  margin-right: 50vw;
}

.content-2 {
  font-size: 1rem;
  letter-spacing: 0px;
  opacity: 80%;
  line-height: 150%;
  margin-right: 50vw;
  margin-top: 50vh;
}


.illustration {
  text-align: right;
  margin-bottom: 20px;
  margin-top: 20px;
}

.collab-def {
  margin-left: 65px;
  margin-top: -50px;
  font-size: 1rem;
  letter-spacing: 0px;
  opacity: 80%;
  line-height: 150%;
  margin-right: 50vw;
}

h5 {
  font-weight: 400 ;
  font-size: 0.8rem;
  opacity: 80%;
  line-height: 150%;
}

#PD1 {
  
  width: 100%;
  height: 100vh;
  scroll-margin-top: 80px; /* même hauteur que le header */
}



#PD2 {
  display: flex;
  align-items: center;   /* aligne verticalement au centre */
  justify-content: space-between; /* espace entre texte et image */
  gap: 20vw; /* espace entre texte et image */
  margin: 2rem 0;
  width: 100%;
  height: 100vh;
}

#PD2 .content-2 {
  flex: 1; /* le texte prend l’espace dispo */
  margin: 0; /* enlève le margin-top énorme que tu avais */
}

#PD2 img {
  flex: 1; /* l’image prend aussi de la place */
  max-width: 50%; /* limite la largeur */
  height: auto;
  object-fit: cover;
}



#PD3 {
  display: flex;
  align-items: center;   /* aligne verticalement au centre */
  justify-content: space-between; /* espace entre texte et image */
  gap: 20vw; /* espace entre texte et image */
  margin: 2rem 0;
  width: 100%;
  height: 100vh;
}

#PD3 .content-2 {
  flex: 1; /* le texte prend l’espace dispo */
  margin: 0; /* enlève le margin-top énorme que tu avais */
}

#PD3 img {
  flex: 1; /* l’image prend aussi de la place */
  max-width: 50%; /* limite la largeur */
  height: auto;
  object-fit: cover;
}



#PD4 {
  display: flex;
  align-items: center;   /* aligne verticalement au centre */
  justify-content: space-between; /* espace entre texte et image */
  gap: 20vw; /* espace entre texte et image */
  margin: 2rem 0;
  width: 100%;
  height: 100vh;
}

#PD4 .content-2 {
  flex: 1; /* le texte prend l’espace dispo */
  margin: 0; /* enlève le margin-top énorme que tu avais */
}

#PD4 img {
  flex: 1; /* l’image prend aussi de la place */
  max-width: 50%; /* limite la largeur */
  height: auto;
  object-fit: cover;
}



#PD5 {
  display: flex;
  align-items: center;   /* aligne verticalement au centre */
  justify-content: space-between; /* espace entre texte et image */
  gap: 20vw; /* espace entre texte et image */
  margin: 2rem 0;
  width: 100%;
  height: 100vh;
}

#PD5 .content-2 {
  flex: 1; /* le texte prend l’espace dispo */
  margin: 0; /* enlève le margin-top énorme que tu avais */
}

#PD5 img {
  flex: 1; /* l’image prend aussi de la place */
  max-width: 50%; /* limite la largeur */
  height: auto;
  object-fit: cover;
}



#PD6 {
  display: flex;
  align-items: center;   /* aligne verticalement au centre */
  justify-content: space-between; /* espace entre texte et image */
  gap: 20vw; /* espace entre texte et image */
  margin: 2rem 0;
  width: 100%;
  height: 100vh;
}

#PD6 .content-2 {
  flex: 1; /* le texte prend l’espace dispo */
  margin: 0; /* enlève le margin-top énorme que tu avais */
}

#PD6 img {
  flex: 1; /* l’image prend aussi de la place */
  max-width: 50%; /* limite la largeur */
  height: auto;
  object-fit: cover;
}



#PD7 {
  display: flex;
  align-items: center;   /* aligne verticalement au centre */
  justify-content: space-between; /* espace entre texte et image */
  gap: 20vw; /* espace entre texte et image */
  margin: 2rem 0;
  width: 100%;
  height: 100vh;
}

#PD7 .content-2 {
  flex: 1; /* le texte prend l’espace dispo */
  margin: 0; /* enlève le margin-top énorme que tu avais */
}

#PD7 img {
  flex: 1; /* l’image prend aussi de la place */
  max-width: 50%; /* limite la largeur */
  height: auto;
  object-fit: cover;
}

#PD7 .instagram-wrapper {
  display: flex;
  justify-content: center;  /* centre horizontalement */
  align-items: center;      /* centre verticalement si besoin */
  width: 100%;
  padding: 2rem 0;          /* espace autour */
}

#PD8 {
  display: flex;
  align-items: center;      /* centre verticalement */
  justify-content: center;  /* centre horizontalement */
  width: 100%;
  height: 100vh;
  position: relative;       /* permet de repositionner si besoin */
}

.design-end-title {
  color: var(--color-text);
  font-weight: 700;
  font-size: 3rem;
  letter-spacing: -2px;
  text-align: center;
}