@media(max-width:1020px){
  .site-header__inner{grid-template-columns:auto auto}
  .header-cta{display:none}
  .menu-toggle{display:flex;justify-self:end}
  .main-nav{
    position:fixed;
    inset:84px 0 auto;
    display:grid;
    gap:0;
    padding:18px 22px 26px;
    border-bottom:1px solid var(--line);
    background:rgba(7,7,6,.98);
    transform:translateY(-130%);
    transition:transform .4s var(--ease);
  }
  .main-nav.is-open{transform:translateY(0)}
  .main-nav a{padding:16px 3px;border-bottom:1px solid rgba(255,255,255,.07)}
  .main-nav a::after{display:none}
  .menu-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .menu-toggle.is-open span:nth-child(2){opacity:0}
  .menu-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  .intro-grid,
  .story-grid,
  .contact-grid{grid-template-columns:1fr}

  .story-number{position:static;font-size:8rem}
  .members-grid{grid-template-columns:repeat(2,1fr)}
  .experience-grid,
  .youtube-grid{grid-template-columns:repeat(2,1fr)}
  .preview-grid{grid-template-columns:1fr 1fr;grid-template-rows:420px 240px}
  .preview-grid a:first-child{grid-column:1/3;grid-row:auto}
  .footer-grid{grid-template-columns:1fr 1fr}
  .agenda-item{grid-template-columns:120px 1fr}
  .agenda-item .button{grid-column:2}
}

@media(max-width:680px){
  .container{width:min(calc(100% - 28px),var(--container))}
  .site-header__inner{min-height:72px}
  .main-nav{top:72px}
  .brand img{width:145px}
  .home-hero{min-height:860px}
  .home-hero__image{background-position:58% center}
  .home-hero__content{padding-top:125px;padding-bottom:125px}
  .hero-title{display:block}
  .hero-title span{font-size:clamp(5.4rem,25vw,8.8rem)}
  .hero-title__aura{margin-left:.16em;margin-top:-.15em}
  .home-hero__actions{flex-direction:column}
  .button{width:100%}
  .hero-stats{display:grid}
  .experience-grid,
  .youtube-grid,
  .members-grid,
  .tech-panel,
  .form-row,
  .footer-grid{grid-template-columns:1fr}
  .preview-grid{display:grid;grid-template-columns:1fr;grid-template-rows:repeat(3,260px)}
  .preview-grid a:first-child{grid-column:auto}
  .page-hero{min-height:620px}
  .page-hero__content{padding-top:125px}
  .page-hero h1{font-size:clamp(4.3rem,22vw,7rem)}
  .agenda-item{grid-template-columns:1fr;gap:15px}
  .agenda-item .button{grid-column:auto}
  .footer-bottom{align-items:flex-start;flex-direction:column}
  .audio-dock{right:14px;bottom:14px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,
  *::before,
  *::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  .reveal{opacity:1;transform:none}
}
@media (max-width: 900px) {
  .story-values {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .story-copy {
    gap: 30px;
  }

  .story-values {
    grid-template-columns: 1fr;
  }

  .story-value {
    min-height: 115px;
  }

  .story-intro h2 br {
    display: none;
  }
}
@media (max-width: 900px) {

  .agenda-cards {
    grid-template-columns: 1fr;
  }

}


@media (max-width: 520px) {

  .agenda-card__content {
    grid-template-columns: 1fr;
  }


  .agenda-card__date {
    min-width: 0;
    align-items: flex-start;
    padding-right: 0;
    padding-bottom: 17px;
    border-right: 0;
    border-bottom:
      1px solid var(--line);
    text-align: left;
  }


  .agenda-card__date strong {
    font-size: 2.8rem;
  }

}

/* =====================================================
   AGENDA RESPONSIVE
===================================================== */

@media (max-width: 900px) {

  .agenda-cards {
    grid-template-columns:
      repeat(
        auto-fit,
        minmax(250px, 310px)
      );

    justify-content: center;
    gap: 22px;
  }

}


@media (max-width: 620px) {

  .agenda-cards {
    grid-template-columns:
      minmax(0, 340px);

    justify-content: center;
    gap: 22px;
  }


  .agenda-card__content {
    grid-template-columns:
      52px
      minmax(0, 1fr);

    gap: 12px;
    padding: 15px;
  }


  .agenda-card__date {
    min-width: 0;
    padding-right: 11px;
  }


  .agenda-card__date strong {
    font-size: 2rem;
  }


  .agenda-card__information h3 {
    font-size: 1.45rem;
  }

}


@media (max-width: 380px) {

  .agenda-cards {
    grid-template-columns: 1fr;
  }


  .agenda-card__content {
    grid-template-columns: 1fr;
    gap: 13px;
  }


  .agenda-card__date {
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    gap: 7px;

    padding-right: 0;
    padding-bottom: 11px;

    border-right: 0;
    border-bottom: 1px solid var(--line);

    text-align: left;
  }


  .agenda-card__date span,
  .agenda-card__date small {
    margin-top: 0;
  }

}
/* =====================================================
   PORTRAITS DES MUSICIENS — TABLETTE ET MOBILE
===================================================== */

@media (max-width: 1020px) {

  .members-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .member-card {
    min-height: 0;
    aspect-ratio: 4 / 5;

    /* Conserve la tête dans la partie visible */
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
  }

}


/* Mobile */
@media (max-width: 680px) {

  .members-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .member-card {
    width: 100%;
    aspect-ratio: 4 / 5;
    min-height: 390px;
    background-position: center top;
  }

}


/* Très petits téléphones */
@media (max-width: 390px) {

  .member-card {
    min-height: 360px;
  }

}
@media (max-width: 1020px) {

  /* Chanteuse */
  .member-card:nth-child(1) {
    background-position: center 10%;
  }

  /* Guitare électrique */
  .member-card:nth-child(2) {
    background-position: center 8%;
  }

  /* Guitare acoustique */
  .member-card:nth-child(3) {
    background-position: center 8%;
  }

  /* Basse */
  .member-card:nth-child(4) {
    background-position: center 6%;
  }

  /* Batterie */
  .member-card:nth-child(5) {
    background-position: center 5%;
  }

}