/* ---------- ouverture : photographie plein cadre ---------- */
.hero{position:relative;isolation:isolate;display:grid;grid-template-rows:1fr auto;
  grid-template-columns:minmax(0,1fr);
  min-height:clamp(470px,68vh,720px);background:var(--navy);overflow:hidden}
.hero__ph{position:absolute;inset:0;z-index:-2}
.hero__ph picture{display:contents}
.hero__ph img{width:100%;height:100%;object-fit:cover;object-position:50% 48%}
/* voile léger d'ensemble + halo appuyé sous le titre : la photo reste lisible */
.hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(58% 50% at 50% 41%,rgba(21,42,56,.62) 0%,rgba(21,42,56,.42) 54%,
      rgba(21,42,56,0) 84%),
    linear-gradient(180deg,rgba(21,42,56,.34) 0%,rgba(21,42,56,.26) 32%,
      rgba(21,42,56,.34) 60%,rgba(21,42,56,.78) 100%)}

.hero__c{min-width:0;display:grid;justify-items:center;align-content:center;
  gap:clamp(20px,2.6vw,30px);text-align:center;
  padding:clamp(52px,7vw,92px) var(--pad) clamp(6px,1.4vw,18px)}

/* surtitre : la signature de marque, entre deux filets */
.hero__k{display:flex;align-items:center;gap:clamp(13px,1.8vw,22px);
  font-family:var(--ui);font-weight:700;font-size:clamp(.66rem,.82vw,.77rem);
  letter-spacing:.32em;text-transform:uppercase;color:#fff;
  text-shadow:0 1px 2px rgba(11,22,30,.72),0 2px 22px rgba(11,22,30,.7)}
.hero__k i{display:block;width:clamp(22px,4.4vw,54px);height:1px;background:#7FCBEC;
  flex:0 0 auto}
.hero__k span{padding-left:.32em}

/* titre : contraste de graisse sur une même chasse */
.hero__h{display:grid;gap:clamp(0px,.25vw,5px);color:#fff;
  font-size:clamp(1.85rem,4.5vw,3.6rem);line-height:1.05;
  text-shadow:0 1px 3px rgba(11,22,30,.45),0 3px 38px rgba(11,22,30,.55);
  text-wrap:balance}
.hero__h b{font-weight:800;letter-spacing:-.034em}
.hero__h em{font-style:normal;font-weight:300;letter-spacing:-.008em}

.hero__bar{width:1px;height:clamp(64px,9.6vw,136px);
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.78) 46%,
    rgba(255,255,255,0))}

/* recherche intégrée, en transparence */
.hero__s{min-width:0;display:flex;width:min(100%,700px);margin:0 auto;
  padding:0 var(--pad) clamp(30px,4.6vw,56px)}
.hero__f{display:flex;flex:1;min-width:0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0);
  background:rgba(16,32,44,.18);
  backdrop-filter:blur(9px) saturate(.9) brightness(.66);
  -webkit-backdrop-filter:blur(9px) saturate(.9) brightness(.66);
  transition:box-shadow .2s,background .2s}
.hero__f:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.42);
  background:rgba(16,32,44,.26)}
.hero__f:focus-within{box-shadow:inset 0 0 0 1px rgba(255,255,255,.82);
  background:rgba(16,32,44,.32)}
.hero__f input{flex:1;min-width:0;width:100%;border:0;background:transparent;color:#fff;
  font-family:var(--tx);font-size:.96rem;letter-spacing:.005em;padding:17px 22px;
  outline:none}
.hero__f input::placeholder{color:rgba(255,255,255,.94);opacity:1}
.hero__f button{flex:0 0 auto;width:60px;border:0;background:var(--blue);color:#fff;
  cursor:pointer;display:grid;place-items:center;font-size:1.02rem;transition:background .16s}
.hero__f button:hover{background:var(--blue-d)}

/* entrée en cascade, une seule fois au chargement */
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.hero__k,.hero__h b,.hero__h em,.hero__bar,.hero__s{
  animation:rise .64s cubic-bezier(.22,.72,.28,1) both}
.hero__k{animation-delay:.06s}
.hero__h b{animation-delay:.15s}
.hero__h em{animation-delay:.24s}
.hero__bar{animation-delay:.36s}
.hero__s{animation-delay:.44s}

@media (max-width:700px){
  .hero{min-height:clamp(410px,76vh,580px)}
  .hero__k{letter-spacing:.24em}
  .hero__f input{padding:15px 16px;font-size:.92rem}
  .hero__f button{width:54px}
}