/* ── Fonts ── */

@font-face {
  font-family: 'Velvelyne';
  src: url('../assets/fonts/Velvelyne-Regular.woff2') format('woff2'),
       url('../assets/fonts/Velvelyne-Regular.woff') format('woff');
  font-weight: normal;
}

@font-face {
  font-family: 'Velvelyne';
  src: url('../assets/fonts/Velvelyne-Bold.woff2') format('woff2'),
       url('../assets/fonts/Velvelyne-Bold.woff') format('woff');
  font-weight: bold;
}

@font-face {
  font-family: 'Josafronde';
  src: url('../assets/fonts/Josafronde.woff2') format('woff2'),
       url('../assets/fonts/Josafronde.woff') format('woff');
  font-weight: normal;
}


/* ── Back home ── */

#back-home {
  position: fixed;
  top: 30px;
  left: 50px;
  z-index: 100;
  font-family: 'Velvelyne', serif;
  font-size: 4rem;
  color: white;
  -webkit-text-stroke: 1px black;
  text-decoration: none;
  line-height: 1;
}


/* ── Base ── */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  overflow: hidden;
  background: #F6F6F6;
}


/* ── Slider ── */

.slider {
  display: flex;
  width: 100vw;
  height: 100vh;
  overflow-x: scroll;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0 20px;
  isolation: isolate;
}

.slider::-webkit-scrollbar {
  display: none;
}


/* ── Slide ── */

.slide {
  position: relative;
  width: calc(100vw - 40px);
  min-width: calc(100vw - 40px);
  height: 100vh;
  flex-shrink: 0;
  scroll-snap-align: center;
  display: flex;
  flex-direction: row;
  overflow: hidden;
}



/* ── Section gauche ── */

.slide__left {
  width: 60%;
  height: 100%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 148px 50px 200px 148px;
}

.slide__left h2 {
  font-family: 'Velvelyne', serif;
  font-weight: bold;
  font-size: 3rem;
  line-height: 1;
  color: #F6F6F6;

}

.slide__left h3 {
  font-family: 'Velvelyne', serif;
  font-weight: bold;
  font-size: 3rem;
  line-height: 1;

}

.slide__left h4 {
  font-family: 'Josafronde', serif;
  font-size: 1.125rem;
  line-height: 1.75rem;
  margin-top: 1.5rem;

}

.slide__left p {
  font-family: 'Josafronde', serif;
  font-size: 1.125rem;
  line-height: 1.75rem;
  margin-top: 1.5rem;
  color: #F6F6F6;
}


/* ── Section droite ── */

.slide__right {
  width: 40%;
  height: 100%;
  flex-shrink: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  padding: 148px 148px 200px 20px;
  gap: 16px;
}

.card {
  background-color: #C0C0C0;
  min-width: 0;
  min-height: 0;
}

img.card {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card--1 { transform: rotate(-1deg); }
.card--2 { transform: rotate(1deg);  }
.card--3 { transform: rotate(-1deg); }
.card--4 { transform: rotate(1deg);  }


/* ── Navigation flèches ── */

.nav-arrow {
  position: absolute;
  bottom: 60px;
  font-family: 'Velvelyne', serif;
  font-size: 4rem;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 10;
  color: #F6F6F6;
  line-height: 1;
  padding: 8px;
  opacity: 0.6;
  transition: opacity 0.2s;
}

.nav-arrow--left  { left:  148px; }
.nav-arrow--right { right: 148px; }

.slide--intro .nav-arrow--left { display: none; }

.nav-arrow:hover {
  opacity: 1;
}

/* ── Stroke couleur slide adjacente ──
   Ordre : intro → slide--1 → slide--2 → slide--4 → (retour intro)
   ← gauche = couleur slide précédente / → droite = couleur slide suivante  */

/* intro  : →  slide--1  #FCB27A */
.slide--intro .nav-arrow--right { -webkit-text-stroke: 1.5px #FCB27A; }

/* slide--1 : ← intro    #F6F6F6  (on utilise #FDAABA, couleur distinctive de l'intro) */
.slide--1 .nav-arrow--left  { -webkit-text-stroke: 1.5px #FDAABA; }
/* slide--1 : →  slide--2  #CADD72 */
.slide--1 .nav-arrow--right { -webkit-text-stroke: 1.5px #CADD72; }

/* slide--2 : ← slide--1  #FCB27A */
.slide--2 .nav-arrow--left  { -webkit-text-stroke: 1.5px #FCB27A; }
/* slide--2 : →  slide--4  #F6F6F6 */
.slide--2 .nav-arrow--right { -webkit-text-stroke: 1.5px #F6F6F6; }

/* slide--4 : ← slide--2  #CADD72 */
.slide--4 .nav-arrow--left  { -webkit-text-stroke: 1.5px #CADD72; }
/* slide--4 : →  intro     #FDAABA */
.slide--4 .nav-arrow--right { -webkit-text-stroke: 1.5px #FDAABA; }


/* ── Slide intro ── */

.slide--intro {
  background-color: #F6F6F6;
  overflow: hidden;
}

.intro__content {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-width: none;
  padding: 148px 50px 200px 148px;
  display: flex;
  flex-direction: column;
  background-image: url('../assets/images/carrousel/explications.webp');
  background-repeat: no-repeat;
  background-position: right top;
  background-size: auto 100%;
  background-attachment: local;
}

.intro__content::-webkit-scrollbar {
  display: none;
}

.intro__text {
  font-family: 'Josafronde', serif;
  font-size: 1.125rem;
  line-height: 1.75rem;
  margin-top: 3rem;
}

.intro__right {
  width: 40%;
  height: 100%;
  flex-shrink: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  padding: 148px 148px 200px 20px;
  gap: 16px;
}

.intro__card {
  background-color: #C0C0C0;
  min-width: 0;
  min-height: 0;
}

.intro__card--1 { transform: rotate(-1deg); }
.intro__card--2 { transform: rotate(1deg);  }
.intro__card--3 { transform: rotate(-1deg); }
.intro__card--4 { transform: rotate(1deg);  }


.title--intro {
  font-family: 'Velvelyne', serif;
  font-weight: bold;
  font-size: 96px;
  line-height: 1;
  color: #FDAABA;
}

.slide__rect {
  position: relative;
  width: 100%;
  flex: 1;
  height: 0;
  min-height: 0;
  margin-top: 2rem;
  object-fit: cover;
}

.slide__rect iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.archive-fullscreen-link {
  display: block;
  margin-top: 1rem;
  text-decoration: none;
  font-family: 'Velvelyne', serif;
  font-weight: bold;
  font-size: 1.4rem;
  color: white;
  -webkit-text-stroke: 1.4px #FDAABA;
}

.intro__title--second {
  margin-top: 10%;
}

.title--outline {
  color: transparent;
  -webkit-text-stroke: 2px #FDAABA;
}


/* ── Background explications slide intro ── */

.title--intro,
.intro__text {
  max-width: 55%;
}

.slide--intro .slide__nav {
  position: relative;
  z-index: 2;
}


/* ── Slide colors ── */

.slide--1 {
  background-color: #FCB27A;
  background-image: url('../assets/images/objets/orange.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 95% auto;
}
.slide--2 {
  background-color: #CADD72;
  background-image: url('../assets/images/objets/vert.png');
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: auto 70%;
}
.slide--3 {
  background-color: #E2CCFD;
  background-image: url('../assets/images/carrousel/purple.webp');
  background-repeat: no-repeat;
  background-position: right top;
  background-size: auto 100%;
  overflow: hidden;
}
.slide--4 {
  background-color: #F6F6F6;
  background-image: url('../assets/images/carrousel/blanc-end.webp');
  background-repeat: no-repeat;
  background-position: right top;
  background-size: auto auto;
  background-attachment: local;
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-width: none;
  flex-wrap: wrap;
  align-content: flex-start;
}

.slide--4::-webkit-scrollbar { display: none; }

.slide--4 .slide__left {
  padding-bottom: 200px;
}



/* ── Nav wrapper base (ne modifie pas le desktop) ── */
.slide__nav {
  position: static;
}


/* ── TABLETTE / PETIT LAPTOP (769px – 1200px) ── */

@media (min-width: 769px) and (max-width: 1200px) {

  .slide__left {
    padding: 80px 40px 120px 80px;
  }

  .slide__right {
    padding: 80px 60px 120px 20px;
  }

  .intro__content {
    padding: 80px 40px 120px 80px;
  }

  .nav-arrow--left  { left:  60px; }
  .nav-arrow--right { right: 60px; }

  .title--intro { font-size: 4rem; }

  .slide__left h2,
  .slide__left h3 { font-size: 2.5rem; }
}


/* ── MOBILE (≤768px) ── */

@media (max-width: 768px) {

  #back-home { top: 16px; left: 16px; font-size: 1.8em; }

  .slider { padding: 0 10px; overflow-y: hidden; }

  /* Chaque slide scrollable verticalement */
  .slide {
    width: calc(100vw - 20px);
    min-width: calc(100vw - 20px);
    flex-direction: column;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* Section texte : hauteur naturelle, pas de clip */
  .slide__left {
    width: 100%;
    flex: none;
    padding: 60px 24px 16px;
    height: auto;
    overflow: visible;
  }

  .slide__left h2,
  .slide__left h3 { font-size: 2rem; }

  .slide__left h4,
  .slide__left p  { font-size: 0.9rem; line-height: 1.5rem; margin-top: 0.75rem; }

  /* Rect (vidéo / image / iframe) : hauteur fixe */
  .slide__rect { height: 200px; flex: none; margin-top: 0.75rem; }

  /* Photos : colonne unique */
  .slide__right {
    width: 100%;
    flex: none;
    height: auto;
    display: flex;
    flex-direction: column;
    padding: 0 12px;
    gap: 12px;
  }

  img.card {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 4px;
  }

  .card--1, .card--2, .card--3, .card--4 { transform: none; }

  /* Flèches masquées sur mobile */
  .slide__nav { display: none; }

  /* Espace de scroll sous les images */
  .slide__right { padding-bottom: 80vh; }

  /* Slide intro */
  .intro__content {
    width: 100%;
    flex: none;
    padding: 60px 24px 202px;
    height: auto;
    overflow: visible;
  }

  .title--intro         { font-size: 2.8rem; }
  .intro__title--second { margin-top: 8%; }
  .intro__text          { font-size: 0.9rem; line-height: 1.5rem; margin-top: 1.5rem; }
}