/* ═══════════════════════════════════════════════════════════
   BYSAR — home.css
   Hero plein écran + bande Instagram ancrée en bas
   ═══════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────
   LAYOUT GLOBAL DE LA PAGE D'ACCUEIL
   #main-content occupe exactement 100dvh
   (hero flex:1 + bande fixe = 100dvh)
   Le footer est dans le flux HTML, en
   dessous des 100dvh → visible en scrollant.
───────────────────────────────────────── */
body.home {
  /* Scroll natif : le footer apparaît quand on "force" */
  overflow-y: scroll;
}

.home #main-content {
  /* Hauteur exacte de la zone visible initiale */
  height: 100dvh;
  min-height: 0;          /* autorise flex-item à réduire si besoin */
  display: flex;
  flex-direction: column;
  overflow: hidden;       /* empêche l'overflow interne de dépasser */
}

/* ─────────────────────────────────────────
   HERO — prend tout l'espace restant
───────────────────────────────────────── */
.hero {
  position: relative;
  flex: 1 1 0;            /* s'étire pour remplir 100dvh - hauteur bande */
  overflow: hidden;
  min-height: 0;          /* autorise flex à réduire en deçà de son contenu */
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.hero-ph {
  position: absolute;
  inset: 0;
  min-height: unset;      /* annule le min-height du .ph générique */
}

/* Dégradé bas vers la bande */
.hero-gradient {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 40%;
  z-index: 1;
  background: linear-gradient(to top, var(--black) 0%, transparent 100%);
  pointer-events: none;
}

/* ─────────────────────────────────────────
   BANDE INSTAGRAM — vignettes carrées centrées
───────────────────────────────────────── */
.insta-strip {
  flex-shrink: 0;
  height: 170px;                /* ← hauteur max = côté du carré */
  background: var(--black);
  border-top: 1px solid var(--dark-mid);
  position: relative;
}

/* Piste : vignettes centrées avec filleurs auto à gauche/droite */
.insta-strip-track {
  display: flex;
  align-items: stretch;
  justify-content: center;      /* ← centre les vignettes (filleurs auto) */
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.insta-strip-track::-webkit-scrollbar { display: none; }

/* ── Miniature carrée ── */
.insta-thumb {
  flex-shrink: 0;
  height: 100%;
  aspect-ratio: 1 / 1;          /* ← carré parfait : 150 × 150 */
  position: relative;
  overflow: hidden;
  scroll-snap-align: start;
  display: block;
  border-right: 1px solid var(--dark-mid);
  text-decoration: none;
}
.insta-thumb:last-child { border-right: none; }

.insta-thumb .ph {
  position: absolute;
  inset: 0;
  min-height: unset;
  border: none;
}
.insta-thumb img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s var(--ease-out);
}
.insta-thumb:hover img { transform: scale(1.08); }

/* Overlay icône Instagram au hover */
.insta-thumb-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--pure-white);
  background: rgba(8,8,8,0);
  opacity: 0;
  transition: background .3s var(--ease), opacity .3s var(--ease);
  pointer-events: none;
}
.insta-thumb:hover .insta-thumb-overlay {
  background: rgba(8,8,8,.45);
  opacity: 1;
}

/* ── Dernière case — label "@bysar" ── */
.insta-thumb--label {
  background: var(--dark);
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: none;
  /* Carrée comme les autres : on n'override pas l'aspect-ratio */
  padding: 0 .35rem;             /* ← marges latérales réduites */
}

.insta-all-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1;
  transition: color var(--t-fast);
}

/* Logo Instagram en gradient officiel */
.insta-all-label i {
  font-size: 2.8rem;             /* logo bien visible */
  background: linear-gradient(45deg,
    #f09433 0%,
    #e6683c 25%,
    #dc2743 50%,
    #cc2366 75%,
    #bc1888 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  transition: transform var(--t-fast);
}

.insta-thumb--label:hover .insta-all-label i {
  transform: scale(1.1);
}

/* Pseudo sur une seule ligne, taille adaptative */
.insta-handle {
  font-size: .58rem;             /* ← petit pour tenir dans le carré */
  letter-spacing: .04em;
  color: var(--white);
  white-space: nowrap;
  transition: color var(--t-fast);
}
.insta-thumb--label:hover .insta-handle {
  color: var(--off-white);
}
/* ─────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────── */
@media (max-width: 900px) {
  .insta-strip { height: 130px; }
  .insta-all-label i { font-size: 2rem; }
  .insta-handle { font-size: .5rem; }
}
@media (max-width: 600px) {
  .insta-strip { height: 110px; }
  .insta-strip-track { justify-content: flex-start; }
  .insta-all-label i { font-size: 1.7rem; }
  .insta-handle { font-size: .45rem; }
  .insta-thumb--label { padding: 0 .2rem; }
}
@media (max-width: 380px) {
  .insta-strip { height: 95px; }
  .insta-all-label i { font-size: 1.4rem; }
  .insta-handle { font-size: .4rem; }
}