/* ═══ STRUT — Ose le rose ═══ */

@font-face {
  font-family: 'Archivo Black';
  src: url('../fonts/archivo-black.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-500.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-800.woff2') format('woff2');
  font-weight: 800;
  font-display: swap;
}

:root {
  --rose-vif: #EC427A;
  --rose-clair: #FBB7C8;
  --rose-fonce: #F48BA3;
  /* plafonnée aussi par la hauteur (22vh) : sur fenêtre basse, le titre
     rétrécit pour ne jamais toucher le bouton Shop */
  --taille-titre: clamp(72px, min(11.5vw, 22vh), 170px);
}

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

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', sans-serif;
  background: var(--rose-clair);
  overflow-x: hidden;
  transition: background-color 0.6s ease;
}

/* ═══ HERO ═══ */
.hero {
  position: relative;
  height: 100vh;
  min-height: 640px;
  /* le dégradé rejoint la teinte du haut de la vidéo pour une jonction invisible */
  background: linear-gradient(180deg, #F6A9BF 0%, #E27396 62%, #E27396 100%);
  overflow: hidden;
}

.nav {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  padding: 34px 5.5vw;
  z-index: 10;
}
.nav-brand { display: flex; align-items: center; gap: 12px; }
.nav-logo { height: 34px; }
.nav-name { color: #fff; font-weight: 800; font-size: 20px; letter-spacing: 3px; }
.nav-links { flex: 1; display: flex; justify-content: center; gap: 44px; }
.nav-links a, .nav-panier {
  color: rgba(255,255,255,0.92);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
}
.nav-panier { font-weight: 800; }
.nav-links a:hover { color: #fff; }

.hero-video {
  /* calée sur la HAUTEUR du hero et collée à droite :
     la tête et les sneakers sont TOUJOURS visibles, sur tout écran */
  position: absolute;
  bottom: 0;
  right: 0;
  height: 100%;
  width: auto;
  z-index: 0;
}

/* voile = extension du fond du hero (même dégradé vertical) qui déborde
   de 340px sur la vidéo puis s'efface via un masque horizontal :
   la couture gauche de la vidéo est invisible quelle que soit sa teinte */
.hero::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(100% - 177.78vh + 340px);
  background: linear-gradient(180deg, #F6A9BF 0%, #E27396 62%, #E27396 100%);
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 340px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 calc(100% - 340px), transparent 100%);
  z-index: 1;
  pointer-events: none;
}

.titre {
  position: absolute;
  left: 5.5vw;
  top: 12vh;
  font-family: 'Archivo Black', sans-serif;
  color: #fff;
  font-size: var(--taille-titre);
  line-height: 0.92;
  z-index: 2;
}
.titre .ligne { display: block; }
.titre .l2 { margin-left: 1.7em; }
.titre .l3 { margin-left: 0.4em; }

.accroche {
  position: absolute;
  right: 4.5vw;
  top: 14vh;
  color: #fff;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.5;
  text-align: left;
  z-index: 4;
}

.hero-actions {
  position: absolute;
  left: 5.5vw;
  bottom: 5vh;
  z-index: 7;
}
.btn-shop {
  display: inline-block;
  background: #fff;
  color: var(--rose-vif);
  font-weight: 800;
  font-size: 16px;
  padding: 16px 30px;
  border-radius: 999px;
  text-decoration: none;
  transition: transform 0.25s ease;
}
.btn-shop:hover { transform: translateY(-3px); }
.btn-rond {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px; height: 54px;
  background: #fff;
  color: var(--rose-vif);
  font-size: 20px;
  border-radius: 50%;
  text-decoration: none;
  margin-left: 10px;
  transition: transform 0.25s ease;
}
.btn-rond:hover { transform: translateY(-3px) rotate(90deg); }

.pastilles { display: flex; gap: 15px; margin-top: 24px; }
.pastille {
  width: 22px; height: 22px;
  border-radius: 50%;
  transition: transform 0.2s ease;
}
.pastille:hover { transform: scale(1.3); }
.pastille.active { box-shadow: 0 0 0 3px #fff; }
.p-rose  { background: #EF4C8B; }
.p-creme { background: #EED8C8; }
.p-noir  { background: #1C1A1F; }
.p-bleu  { background: #B1CCD7; }

.badge {
  position: absolute;
  right: 5vw;
  bottom: 10vh;
  width: 128px; height: 128px;
  border: 1.5px solid rgba(255,255,255,0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
  z-index: 6;
  animation: flotte 5s ease-in-out infinite;
}
@keyframes flotte {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

.indicateur-scroll {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.85);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  z-index: 6;
}
.indicateur-scroll span {
  display: block;
  text-align: center;
  animation: descend 1.6s ease-in-out infinite;
}
@keyframes descend {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(8px); opacity: 0.4; }
}

/* ═══ SECTIONS COLORIS ═══ */
.coloris {
  position: relative;
  height: 100vh;
  min-height: 600px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.coloris-contenu {
  position: relative;
  z-index: 2;
  padding-left: 8vw;
  max-width: 46vw;
}
.coloris h2 {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(64px, 9vw, 130px);
  line-height: 0.95;
}
.coloris .numero {
  display: block;
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 6px;
  opacity: 0.55;
  margin-bottom: 18px;
}
.coloris .edition {
  font-size: 19px;
  font-weight: 500;
  margin: 26px 0 34px;
  opacity: 0.8;
}
/* même groupe d'actions que le hero, aux couleurs de la section :
   bouton = encre sur fond du coloris (contraste garanti sur crème/bleu) */
.coloris .btn-shop,
.coloris .btn-rond {
  background: var(--encre, #fff);
  color: var(--fond, var(--rose-vif));
}
.coloris .pastille.active { box-shadow: 0 0 0 3px var(--encre, #fff); }

.coloris .sneaker {
  position: absolute;
  right: 6vw;
  top: 50%;
  height: 74vh;
  z-index: 1;
  filter: drop-shadow(0 40px 50px rgba(0,0,0,0.22));
  /* position de départ gérée par GSAP */
}

/* ═══ OUTRO ═══ */
.outro {
  height: 62vh;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  text-align: center;
  color: #fff;
}
.outro-logo { height: 74px; }
.outro h3 {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(40px, 6vw, 84px);
}
.outro p { font-weight: 500; opacity: 0.85; }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .titre { top: 13vh; }
  .mascotte { right: -6vw; height: 64vh; }
  .accroche { display: none; }
  .badge { display: none; }
  .coloris-contenu { max-width: 80vw; }
  .coloris .sneaker { height: 46vh; right: 2vw; }
}

/* ═══ MOBILE (≤ 600px) — cadrage téléphone ═══
   Hero empilé : nav → typo en escalier → flamant ENTIER (tête + sneakers)
   → actions en bas. Aucun chevauchement typo / flamant. */
@media (max-width: 600px) {
  :root {
    --t-mob: min(68px, 8svh, 17.5vw);          /* taille de la typo hero */
    --titre-haut: 78px;
    --actions-h: 146px;                          /* zone boutons + pastilles */
  }

  /* — nav — */
  .nav { padding: 14px 20px; }
  .nav-logo { height: 30px; }
  .nav-name { font-size: 17px; letter-spacing: 2.5px; }
  .nav-panier {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 14px;
  }

  /* — hero — */
  .hero {
    height: 100vh;
    height: 100svh;
    min-height: 620px;
    /* le fond rejoint la teinte du haut de la vidéo (au-dessus de la tête)
       puis celle du sol (sous les sneakers) : jonctions invisibles */
    background: linear-gradient(180deg,
      #FBAFC6 0%,
      #FF9FB9 calc(var(--titre-haut) + 2.76 * var(--t-mob) + 6px),
      #FFA6C0 calc(100% - var(--actions-h) - 60px),
      #FFADC6 calc(100% - var(--actions-h)),
      #FCB1C8 100%);
  }
  .hero::before { display: none; }

  .titre {
    left: 22px;
    top: var(--titre-haut);
    font-size: var(--t-mob);
    line-height: 0.92;
  }

  /* la vidéo occupe la bande entre la typo et les actions ;
     calée à droite/en bas = le flamant tient en entier dans le cadre */
  .hero-video {
    top: calc(var(--titre-haut) + 2.76 * var(--t-mob) + 6px);
    bottom: var(--actions-h);
    left: 0;
    right: 0;
    width: 100%;
    height: calc(100% - var(--titre-haut) - 2.76 * var(--t-mob) - 6px - var(--actions-h));
    object-fit: cover;
    object-position: 100% 100%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14px, #000 calc(100% - 12px), transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 14px, #000 calc(100% - 12px), transparent 100%);
  }

  .hero-actions {
    left: 20px;
    right: 20px;
    bottom: 18px;
  }
  .hero-actions .btn-shop,
  .coloris .btn-shop { padding: 16px 28px; font-size: 16px; }
  .btn-rond { width: 52px; height: 52px; }

  /* pastilles : point de 22px, zone tactile de 44px */
  .pastilles { gap: 2px; margin-top: 8px; margin-left: -11px; }
  .pastille {
    position: relative;
    width: 44px; height: 44px;
    padding: 11px;
    background-clip: content-box;
  }
  .pastille.active,
  .coloris .pastille.active { box-shadow: none; }
  .pastille.active::after {
    content: '';
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    border: 3px solid var(--encre, #fff);
  }
  .pastille:hover { transform: none; }

  .indicateur-scroll {
    left: auto;
    right: 20px;
    bottom: 26px;
    transform: none;
    font-size: 11px;
    letter-spacing: 2.5px;
  }

  /* badge : réapparaît, petit, sur le sol vide à gauche des pattes */
  .badge {
    display: flex;
    left: 14px;
    right: auto;
    bottom: calc(var(--actions-h) + 27%);
    width: 78px; height: 78px;
    font-size: 9px;
    line-height: 1.45;
    border-width: 1.5px;
  }

  /* — sections coloris : zone sneaker en haut, texte posé en bas — */
  .coloris {
    --s-mob: min(42svh, 84vw);                   /* taille de la sneaker */
    --texte-h: 336px;                             /* hauteur du bloc texte */
    display: block;
    height: 100vh;
    height: 100svh;
    min-height: 640px;
  }
  .coloris-contenu {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 26px;
    padding-left: 0;
    max-width: none;
  }
  .coloris h2 { font-size: min(60px, 15.5vw); line-height: 0.95; }
  .coloris .numero { font-size: 14px; letter-spacing: 5px; margin-bottom: 10px; }
  .coloris .edition { font-size: 16px; margin: 14px 0 20px; }

  .coloris .sneaker {
    left: 50%;
    right: auto;
    top: calc((100% - var(--texte-h) - var(--s-mob)) / 2 + 6px);
    width: var(--s-mob);
    height: var(--s-mob);
    object-fit: contain;
    filter: drop-shadow(0 26px 26px rgba(0,0,0,0.22));
  }

  .outro h3 { font-size: 44px; }
  .outro p { padding: 0 24px; font-size: 15px; }
}

/* Mobile : chaque coloris porte sa propre couleur de fond, qui défile avec sa chaussure
   (sinon le fond de page bascule à mi-écran pendant que la section précédente est encore visible) */
@media (max-width: 600px) {
  .coloris { background: var(--fond); }
}