w/* HOME */
.home-hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:flex-end;
  isolation:isolate;
  overflow:hidden;
}

.home-hero__image,
.home-hero__veil{
  position:absolute;
  inset:0;
}

.home-hero__image{
  z-index:-4;
  background:url("../../media/HERO.webp") center 42%/cover no-repeat;
  filter:saturate(.88) contrast(1.05) brightness(.7);
  transform:scale(1.05);
  animation:heroDrift 22s ease-in-out infinite alternate;
}

.home-hero__veil{
  z-index:-3;
  background:
    linear-gradient(90deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.48) 48%,rgba(0,0,0,.12) 100%),
    linear-gradient(180deg,rgba(0,0,0,.05) 34%,var(--black) 100%),
    radial-gradient(circle at 72% 40%,rgba(201,163,92,.17),transparent 30%);
}

@keyframes heroDrift{
  to{transform:scale(1.13) translate3d(-1.2%,-1%,0)}
}

.home-hero__content{
  padding:145px 0 105px;
}



/* =====================================================
   LOGO ROCKAURA DU HERO
===================================================== */

.hero-title{
  position:relative;

  display:flex;
  align-items:center;

  width:max-content;
  max-width:100%;

  margin:0;

  filter:
    drop-shadow(
      0 20px 46px
      rgba(0,0,0,.62)
    );
}


.hero-title img{
  display:block;

  width:auto;
  max-width:none;

  user-select:none;
  pointer-events:none;
}


/* ROCK */

.hero-title__rock{

    position:relative;
    z-index:1;

    height:clamp(
        105px,
        14.5vw,
        220px
    );

    animation:rockFloat 6.5s ease-in-out infinite;
}

.hero-title__aura{

    position:relative;
    z-index:2;

    height:clamp(
        100px,
        13.5vw,
        208px
    );

    /* rapproche Aura de Rock */
    margin-left:clamp(
        -68px,
        -4vw,
        -28px
    );

    animation:auraFloat 7.2s ease-in-out infinite;
}




/* =====================================================
   ANIMATIONS
===================================================== */

@keyframes rockFloat{

  0%,
  100%{
    transform:
      translate3d(
        0,
        0,
        0
      )
      rotate(0);
  }

  50%{
    transform:
      translate3d(
        -4px,
        -6px,
        0
      )
      rotate(-.5deg);
  }

}


@keyframes auraFloat{

  0%,
  100%{
    transform:
      translate3d(
        0,
        0,
        0
      )
      rotate(0);
  }

  50%{
    transform:
      translate3d(
        5px,
        5px,
        0
      )
      rotate(.6deg);
  }

}


/* =====================================================
   TABLETTE
===================================================== */

@media(max-width:900px){

  .hero-title__rock{
    height:clamp(
      180px,
      34vw,
      330px
    );
  }


  .hero-title__aura{
    height:clamp(
      170px,
      32vw,
      315px
    );

    margin-left:clamp(
      -100px,
      -8vw,
      -45px
    );
  }

}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:680px){

  .hero-title{
    width:100%;

    justify-content:flex-start;
  }


  .hero-title__rock{
    height:auto;
    width:63vw;
  }


  .hero-title__aura{
    height:auto;
    width:53vw;

    margin-left:-15vw;
  }

}


/* =====================================================
   PETITS MOBILES
===================================================== */

@media(max-width:390px){

  .hero-title__rock{
    width:66vw;
  }


  .hero-title__aura{
    width:55vw;

    margin-left:-17vw;
  }

}


/* =====================================================
   ACCESSIBILITÉ
===================================================== */

@media(prefers-reduced-motion:reduce){

  .hero-title__rock,
  .hero-title__aura{
    animation:none;
  }

}



.hero-wave{
  width:min(620px,75vw);
  height:2px;
  margin-top:26px;
  background:linear-gradient(90deg,transparent,var(--gold),var(--gold-light),var(--gold),transparent);
  box-shadow:0 0 22px rgba(201,163,92,.55);
  transform-origin:left;
  animation:wavePulse 3.5s ease-in-out infinite;
}

@keyframes wavePulse{
  50%{transform:scaleX(.86);opacity:.62}
}

.home-hero__hook{
  max-width:680px;
  margin:28px 0 0;
  color:rgba(255,255,255,.9);
  font-size:clamp(1.22rem,2vw,1.8rem);
  font-style:italic;
}

.home-hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:34px;
}

.hero-stats{
  display:flex;
  flex-wrap:wrap;
  gap:12px 28px;
  margin-top:40px;
  color:rgba(255,255,255,.68);
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.hero-stats span::before{
  content:"•";
  margin-right:10px;
  color:var(--gold);
}

.home-intro{
  background:
    radial-gradient(circle at 85% 10%,rgba(201,163,92,.08),transparent 26%),
    linear-gradient(180deg,var(--black),var(--black-2));
}

.intro-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:center;
  gap:clamp(50px,8vw,110px);
}

.intro-image{
  position:relative;
}

.intro-image img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:var(--radius);
  filter:saturate(.84) contrast(1.06) brightness(.83);
  box-shadow:var(--shadow);
}

.intro-image::before{
  content:"";
  position:absolute;
  inset:18px -18px -18px 18px;
  z-index:-1;
  border:1px solid rgba(201,163,92,.4);
  border-radius:var(--radius);
}

.quote-line{
  margin-top:32px;
  padding:22px 0 22px 24px;
  border-left:3px solid var(--gold);
  color:var(--ivory-soft);
  font-family:Georgia,serif;
  font-size:1.18rem;
  font-style:italic;
  line-height:1.6;
}

.marquee{
  overflow:hidden;
  border-block:1px solid var(--line);
  background:#0b0a08;
}

.marquee__track{
  display:flex;
  width:max-content;
  gap:44px;
  padding:22px 0;
  animation:marquee 24s linear infinite;
}

.marquee__track span{
  color:var(--ivory-soft);
  font-family:"Bebas Neue",sans-serif;
  font-size:1.5rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.marquee__track span::after{
  content:"✦";
  margin-left:44px;
  color:var(--gold);
}

@keyframes marquee{to{transform:translateX(-50%)}}

.home-cards{
  background:
    linear-gradient(rgba(7,7,6,.88),rgba(7,7,6,.95)),
    url("../../media/RockAura.jpg") center/cover fixed;
}

.experience-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}

.experience-card{
  min-height:360px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:32px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:rgba(8,8,7,.68);
  backdrop-filter:blur(13px);
  transition:transform .45s var(--ease),border-color .35s ease;
}

.experience-card:hover{
  transform:translateY(-9px);
  border-color:rgba(201,163,92,.48);
}

.experience-card > span{
  margin-bottom:auto;
  color:var(--gold);
  font-family:"Bebas Neue",sans-serif;
  font-size:2rem;
}

.experience-card h3{
  font-family:"Bebas Neue",sans-serif;
  font-size:2.7rem;
  font-weight:400;
  text-transform:uppercase;
}

.home-preview{
  background:linear-gradient(180deg,var(--black),#0d0b09);
}

.preview-grid{
  display:grid;
  grid-template-columns:1.3fr .7fr;
  grid-template-rows:260px 260px;
  gap:16px;
}

.preview-grid a{
  position:relative;
  overflow:hidden;
  border-radius:20px;
}

.preview-grid a:first-child{grid-row:1/3}

.preview-grid img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.84) brightness(.75);
  transition:transform .9s var(--ease),filter .9s ease;
}

.preview-grid a:hover img{
  transform:scale(1.06);
  filter:saturate(1) brightness(.9);
}

.preview-label{
  position:absolute;
  left:20px;
  bottom:18px;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(0,0,0,.62);
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}

/* GROUPE */
.groupe-hero .page-hero__image{background-image:url("../../media/RockAura.jpeg")}

.story-grid{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:clamp(45px,8vw,110px);
  align-items:start;
}

.story-number{
  position:sticky;
  top:130px;
  color:rgba(201,163,92,.18);
  font-family:"Bebas Neue",sans-serif;
  font-size:clamp(8rem,18vw,16rem);
  line-height:.8;
}

.story-copy p{font-size:1.05rem}

.members-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:14px;
}

.member-card{
  min-height:300px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:22px;
  border:1px solid var(--line);
  border-radius:20px;
  background:
    linear-gradient(180deg,transparent,rgba(0,0,0,.8)),
    url("../../media/CHA.jpg") center/cover;
  transition:transform .4s var(--ease),filter .4s ease;
}

.member-card:nth-child(2){background-image:linear-gradient(180deg,transparent,rgba(0,0,0,.82)),url("../../media/GEL.jpg")}
.member-card:nth-child(3){background-image:linear-gradient(180deg,transparent,rgba(0,0,0,.82)),url("../../media/GAC.jpg")}
.member-card:nth-child(4){background-image:linear-gradient(180deg,transparent,rgba(0,0,0,.82)),url("../../media/BAS.jpg")}
.member-card:nth-child(5){background-image:linear-gradient(180deg,transparent,rgba(0,0,0,.82)),url("../../media/BAT.jpg")}

.member-card:hover{transform:translateY(-8px)}
.member-card strong{
  color:var(--ivory);
  font-family:"Bebas Neue",sans-serif;
  font-size:1.8rem;
  font-weight:400;
  text-transform:uppercase;
}
.member-card span{color:var(--gold);font-size:.7rem;text-transform:uppercase;letter-spacing:.1em}

.tech-panel{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
}

.tech-card{
  padding:28px;
  border:1px solid var(--line);
  border-radius:20px;
  background:var(--panel);
}

.tech-card span{
  display:block;
  margin-bottom:12px;
  color:var(--gold);
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.15em;
  text-transform:uppercase;
}

/* MEDIAS */
.medias-hero .page-hero__image{background-image:url("../../media/RockAura7.jpg")}

.video-feature{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:#000;
  box-shadow:var(--shadow);
}

.video-feature video{width:100%;aspect-ratio:16/9}

.youtube-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:28px;
}

.youtube-card{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--panel);
  transition:transform .4s var(--ease),border-color .3s ease;
}

.youtube-card:hover{
  transform:translateY(-7px);
  border-color:rgba(201,163,92,.45);
}

.youtube-card img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
}

.youtube-card div{padding:18px}
.youtube-card span{
  color:var(--gold);
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.youtube-card strong{
  display:block;
  margin-top:8px;
  color:var(--ivory-soft);
}

.masonry{
  columns:3 300px;
  column-gap:16px;
}

.masonry button{
  width:100%;
  margin:0 0 16px;
  padding:0;
  overflow:hidden;
  border:0;
  border-radius:18px;
  background:#111;
  cursor:pointer;
  break-inside:avoid;
}

.masonry img{
  width:100%;
  filter:saturate(.84) brightness(.8);
  transition:transform .85s var(--ease),filter .85s ease;
}

.masonry button:hover img{
  transform:scale(1.045);
  filter:saturate(1) brightness(.92);
}

/* AGENDA */
.agenda-hero .page-hero__image{background-image:url("../../media/RockAura.jpg")}

.agenda-list{
  display:grid;
  gap:14px;
}

.agenda-item{
  display:grid;
  grid-template-columns:150px 1fr auto;
  gap:28px;
  align-items:center;
  padding:25px 28px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--panel);
  transition:transform .35s var(--ease),border-color .3s ease;
}

.agenda-item:hover{
  transform:translateX(8px);
  border-color:rgba(201,163,92,.45);
}

.agenda-date{
  color:var(--gold);
  font-family:"Bebas Neue",sans-serif;
  font-size:2.5rem;
  line-height:.9;
}

.agenda-item h3{
  font-family:"Bebas Neue",sans-serif;
  font-size:2rem;
  font-weight:400;
  text-transform:uppercase;
}

.agenda-item small{color:var(--muted)}

.agenda-empty{
  padding:46px;
  border:1px dashed rgba(255,255,255,.22);
  border-radius:22px;
  text-align:center;
  background:rgba(255,255,255,.025);
}

/* CONTACT */
.contact-hero .page-hero__image{background-image:url("../../media/RockAura1.jpg")}

.contact-grid{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:clamp(45px,8vw,110px);
}

.contact-points{
  display:grid;
  gap:12px;
  margin-top:28px;
}

.contact-points span{
  color:var(--ivory-soft);
  line-height:1.5;
}

.contact-points span::before{
  content:"✦";
  margin-right:10px;
  color:var(--gold);
}

.contact-form{
  display:grid;
  gap:18px;
  padding:clamp(26px,4vw,48px);
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--panel);
  box-shadow:var(--shadow);
}

.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

label{
  display:grid;
  gap:9px;
  color:var(--ivory-soft);
  font-size:.8rem;
  font-weight:700;
}

input,textarea{
  width:100%;
  border:1px solid rgba(255,255,255,.13);
  border-radius:12px;
  outline:none;
  color:var(--ivory);
  background:rgba(255,255,255,.045);
}

input{min-height:50px;padding:0 15px}
textarea{padding:15px;resize:vertical}

input:focus,textarea:focus{border-color:var(--gold)}

.form-status{
  min-height:20px;
  margin:0;
  font-size:.82rem;
}
.story-section {
  background:
    radial-gradient(
      circle at 82% 15%,
      rgba(201, 163, 92, 0.08),
      transparent 27%
    ),
    linear-gradient(
      180deg,
      var(--black),
      var(--black-2)
    );
}

.story-copy {
  display: grid;
  gap: 38px;
}

.story-intro h2 {
  max-width: 850px;
}

.story-text {
  max-width: 850px;
}

.story-text p {
  margin: 0 0 22px;
  font-size: clamp(1rem, 1.4vw, 1.08rem);
}

.story-text p:last-child {
  margin-bottom: 0;
}

.story-text strong,
.story-conclusion strong {
  color: var(--ivory);
  font-weight: 700;
}

.story-values {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  max-width: 900px;
}

.story-value {
  position: relative;
  min-height: 145px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 22px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.035),
      transparent
    ),
    var(--panel);
  transition:
    transform 0.4s var(--ease),
    border-color 0.35s ease,
    background 0.35s ease;
}

.story-value::after {
  content: "";
  position: absolute;
  right: -30px;
  bottom: -45px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: rgba(201, 163, 92, 0.1);
  filter: blur(10px);
}

.story-value:hover {
  transform: translateY(-7px);
  border-color: rgba(201, 163, 92, 0.5);
  background:
    linear-gradient(
      145deg,
      rgba(201, 163, 92, 0.08),
      transparent
    ),
    var(--panel);
}

.story-value span {
  color: var(--gold);
  font-family: "Bebas Neue", sans-serif;
  font-size: 1.45rem;
}

.story-value strong {
  position: relative;
  z-index: 2;
  color: var(--ivory);
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(1.55rem, 2.5vw, 2.15rem);
  font-weight: 400;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.story-quote {
  max-width: 860px;
  margin-top: 0;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
}

.story-conclusion {
  max-width: 850px;
  margin: 0;
  padding-top: 8px;
  color: var(--ivory-soft);
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
}
/* =====================================================
   AGENDA DYNAMIQUE
===================================================== */


/* -----------------------------------------------------
   SECTIONS
----------------------------------------------------- */

.agenda-section {
  background:
    radial-gradient(
      circle at 80% 10%,
      rgba(201, 163, 92, 0.08),
      transparent 27%
    ),
    var(--black);
}


.agenda-archives-section {
  background:
    linear-gradient(
      180deg,
      var(--black),
      var(--black-2)
    );
}


/* -----------------------------------------------------
   GRILLE DES CONCERTS
----------------------------------------------------- */

.agenda-cards {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(260px, 320px)
    );

  justify-content: center;
  align-items: start;

  gap: 24px;
}


/* -----------------------------------------------------
   CARTE
----------------------------------------------------- */

.agenda-card {
  position: relative;

  width: 100%;

  overflow: hidden;

  border:
    1px solid var(--line);

  border-radius: 20px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.035),
      transparent
    ),
    var(--panel);

  box-shadow:
    0 20px 55px
    rgba(0, 0, 0, 0.32);

  transition:
    transform 0.4s var(--ease),
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}


.agenda-card:hover {
  transform:
    translateY(-6px);

  border-color:
    rgba(201, 163, 92, 0.48);

  box-shadow:
    0 28px 70px
    rgba(0, 0, 0, 0.46);
}


/* -----------------------------------------------------
   AFFICHE
----------------------------------------------------- */

.agenda-card__visual {
  position: relative;

  display: block;

  width: 100%;
  padding: 0;

  overflow: hidden;

  border: 0;

  background:
    #080808;

  cursor: pointer;
}


.agenda-card__visual img {
  display: block;

  width: 100%;

  /*
   * On conserve le format vertical des affiches,
   * mais dans une carte beaucoup moins large.
   */
  aspect-ratio: 4 / 5;

  object-fit: cover;
  object-position: center;

  filter:
    saturate(0.88)
    contrast(1.04)
    brightness(0.84);

  transition:
    transform 0.8s var(--ease),
    filter 0.8s ease;
}


.agenda-card:hover
.agenda-card__visual img {
  transform:
    scale(1.035);

  filter:
    saturate(1)
    contrast(1.04)
    brightness(0.94);
}


/* -----------------------------------------------------
   BADGE
----------------------------------------------------- */

.agenda-card__status {
  position: absolute;

  top: 13px;
  right: 13px;

  padding:
    7px 10px;

  border:
    1px solid
    rgba(255, 255, 255, 0.16);

  border-radius:
    999px;

  color:
    var(--ivory-soft);

  background:
    rgba(7, 7, 6, 0.78);

  backdrop-filter:
    blur(12px);

  font-size:
    0.58rem;

  font-weight:
    800;

  letter-spacing:
    0.1em;

  text-transform:
    uppercase;
}


.agenda-card__status--upcoming {
  color:
    #171008;

  border-color:
    rgba(201, 163, 92, 0.6);

  background:
    linear-gradient(
      135deg,
      var(--gold-light),
      var(--copper)
    );
}


/* -----------------------------------------------------
   CONTENU DE LA CARTE
----------------------------------------------------- */

.agenda-card__content {
  display: grid;

  grid-template-columns:
    58px
    minmax(0, 1fr);

  gap: 14px;

  padding: 16px;
}


/* -----------------------------------------------------
   DATE
----------------------------------------------------- */

.agenda-card__date {
  min-width: 0;

  display: flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    flex-start;

  padding-right:
    13px;

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

  text-align:
    center;
}


.agenda-card__date strong {
  color:
    var(--gold-light);

  font-family:
    "Bebas Neue",
    sans-serif;

  font-size:
    2.2rem;

  font-weight:
    400;

  line-height:
    0.86;
}


.agenda-card__date span {
  margin-top:
    7px;

  color:
    var(--gold);

  font-size:
    0.62rem;

  font-weight:
    800;

  letter-spacing:
    0.1em;
}


.agenda-card__date small {
  margin-top:
    3px;

  color:
    var(--muted);

  font-size:
    0.64rem;
}


/* -----------------------------------------------------
   INFORMATIONS
----------------------------------------------------- */

.agenda-card__information {
  min-width: 0;
}


.agenda-card__information h3 {
  margin:
    0;

  color:
    var(--ivory);

  font-family:
    "Bebas Neue",
    sans-serif;

  font-size:
    clamp(
      1.35rem,
      2vw,
      1.75rem
    );

  font-weight:
    400;

  line-height:
    1;

  text-transform:
    uppercase;
}


.agenda-card__location,
.agenda-card__time {
  margin:
    7px 0 0;
}


.agenda-card__location {
  color:
    var(--ivory-soft);

  font-size:
    0.82rem;

  font-weight:
    600;

  line-height:
    1.45;
}


.agenda-card__time {
  color:
    var(--gold);

  font-size:
    0.7rem;

  font-weight:
    800;

  letter-spacing:
    0.07em;

  text-transform:
    uppercase;
}


/* -----------------------------------------------------
   BOUTON VIDÉO
----------------------------------------------------- */

.agenda-card__actions {
  grid-column:
    1 / -1;

  margin-top:
    2px;
}


.agenda-card__actions .button {
  width:
    100%;

  min-height:
    43px;

  padding:
    10px 16px;

  font-size:
    0.68rem;
}


/* -----------------------------------------------------
   MESSAGE VIDE
----------------------------------------------------- */

.agenda-empty {
  max-width:
    760px;

  margin-inline:
    auto;

  padding:
    36px 28px;

  border:
    1px dashed
    rgba(255, 255, 255, 0.22);

  border-radius:
    20px;

  background:
    rgba(255, 255, 255, 0.025);

  text-align:
    center;
}


.agenda-empty h3 {
  margin:
    0;

  color:
    var(--ivory);

  font-family:
    "Bebas Neue",
    sans-serif;

  font-size:
    clamp(
      2rem,
      4vw,
      2.6rem
    );

  font-weight:
    400;

  text-transform:
    uppercase;
}


.agenda-empty p {
  max-width:
    620px;

  margin:
    16px auto 23px;
}
/* =====================================================
   CONTACT FORMULAIRE
===================================================== */

/* Champ anti-spam invisible */

.form-honeypot{
  position:absolute!important;
  left:-10000px!important;
  top:auto!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden!important;
}


/* Select */

.contact-form select{

  width:100%;
  min-height:52px;

  padding:0 44px 0 16px;

  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;

  color:var(--ivory);

  background:
    linear-gradient(45deg,transparent 50%,var(--gold) 50%)
      calc(100% - 19px) 23px/6px 6px no-repeat,

    linear-gradient(135deg,var(--gold) 50%,transparent 50%)
      calc(100% - 13px) 23px/6px 6px no-repeat,

    rgba(255,255,255,.045);

  appearance:none;
  outline:none;
  cursor:pointer;

  transition:
    border-color .25s,
    background-color .25s;

}


.contact-form select:focus{

  border-color:var(--gold);

}


.contact-form select option{

  color:#111;
  background:#fff;

}


/* Consentement */

.form-consent{

  display:grid;
  grid-template-columns:auto 1fr;

  gap:14px;

  align-items:flex-start;

  cursor:pointer;

}


.form-consent input{

  width:18px;
  height:18px;

  margin-top:4px;

  accent-color:var(--gold);

}


.form-consent span{

  color:var(--muted);

  font-size:.82rem;

  line-height:1.6;

}


/* Etat du formulaire */

.form-status{

  min-height:24px;

  margin-top:10px;

  text-align:center;

  font-size:.88rem;

  font-weight:500;

}


.form-status.is-loading{

  color:var(--gold);

}


.form-status.is-success{

  color:#9fd9a8;

}


.form-status.is-error{

  color:#ff9b8f;

}


/* Bouton */

.contact-form button:disabled{

  opacity:.55;

  cursor:not-allowed;

  transform:none!important;

}


/* Note */

.form-note{

  margin-top:6px;

  text-align:center;

  color:var(--muted);

  font-size:.74rem;

  line-height:1.5;

}


/* Animation */

.contact-form input,
.contact-form textarea,
.contact-form select{

  transition:
    border-color .25s,
    box-shadow .25s,
    background-color .25s;

}


.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus{

  border-color:var(--gold);

  box-shadow:
    0 0 0 3px
    rgba(201,168,92,.14);

}


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

@media(max-width:680px){

  .form-consent{

    grid-template-columns:auto 1fr;

    gap:10px;

  }

}


@media(max-width:520px){

  .contact-form select{

    min-height:50px;

  }

}
/* =====================================================
   CORRECTION SAFARI IPHONE / IPAD — TITRE ROCKAURA
===================================================== */

.hero-title {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 100%;
  overflow: visible;
  filter: none;
}

.hero-title img {
  display: block;
  flex: 0 0 auto;
  max-width: none;
  opacity: 1;
  visibility: visible;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

@media (max-width: 900px) {
  .hero-title__rock,
  .hero-title__aura {
    animation: none !important;
  }
}

@media (max-width: 680px) {
  .hero-title {
    min-height: 110px;
  }

  .hero-title__rock {
    width: 63vw;
    height: auto;
  }

  .hero-title__aura {
    width: 53vw;
    height: auto;
    margin-left: -15vw;
  }
}
/* =====================================================
   HERO MOBILE - VERSION BANDEAU
===================================================== */

@media (max-width: 680px) {

  /* Hero plus haut pour éviter que le header coupe le contenu */
  .home-hero {
    min-height: 360px !important;
    height: 360px !important;
    max-height: 360px !important;

    display: flex;
    align-items: center;

    overflow: hidden;
  }

  /* Image de fond */
  .home-hero__image {
    background-image: url("../../media/hero-desktop.webp") !important;
    background-position: center 35% !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;

    transform: none !important;
    animation: none !important;
  }

  /* Overlay sombre pour garder les textes lisibles */
  .home-hero__veil {
    background:
      linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.48) 0%,
        rgba(0, 0, 0, 0.62) 55%,
        rgba(0, 0, 0, 0.78) 100%
      ) !important;
  }

  /* Contenu descendu sous le header */
  .home-hero__content {
    width: 100%;

    padding: 105px 0 24px !important;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
  }

  /* Suppression du logo RockAura dans le Hero */
  .hero-title {
    display: none !important;
  }

  /* Groupe live · Pays de Gex */
  .hero-eyebrow,
  .home-hero .eyebrow {
    margin: 0 0 12px;

    font-size: 0.82rem;
    line-height: 1.3;
    letter-spacing: 0.2em;

    text-align: center;
  }

  /* Phrase d'accroche */
  .home-hero__hook {
    display: block !important;

    max-width: 330px;

    margin: 0 auto 20px;

    font-size: 1.12rem;
    line-height: 1.4;
    font-style: italic;

    text-align: center;
  }

  /* Boutons */
  .home-hero__actions {
    display: flex !important;
    justify-content: center;
    flex-wrap: wrap;

    gap: 10px;

    margin: 0;
  }

  .home-hero__actions .button {
    min-width: 145px;
    min-height: 43px;

    padding: 10px 14px;

    font-size: 0.7rem;
  }

  /* Informations rapides */
  .hero-stats {
    display: flex !important;
    justify-content: center;
    flex-wrap: wrap;

    gap: 9px 16px;

    margin-top: 19px;

    font-size: 0.66rem;
    line-height: 1.4;

    text-align: center;
  }

  .hero-stats span::before {
    margin-right: 7px;
  }

  /* Suppression de la ligne dorée */
  .hero-wave {
    display: none !important;
  }

}


/* =====================================================
   PETITS MOBILES
===================================================== */

@media (max-width: 390px) {

  .home-hero {
    min-height: 380px !important;
    height: 380px !important;
    max-height: 380px !important;
  }

  .home-hero__content {
    padding-top: 110px !important;
  }

  .home-hero__hook {
    max-width: 290px;
    font-size: 1.03rem;
  }

  .home-hero__actions .button {
    min-width: 138px;
    font-size: 0.66rem;
  }

  .hero-stats {
    max-width: 320px;
    gap: 8px 12px;
    font-size: 0.62rem;
  }

}