/* ==========================================================
   FHN Clean — Static site (Hostinger ready)
   Palette & typo alignées sur l'identité FHN (navy / gold)
========================================================== */

:root{
  --navy:#0b1d35;
  --navy2:#13294b;
  --gold:#c9a84c;
  --gold2:#e4c97a;
  --cream:#f7f5f0;
  --cream2:#ede9e1;
  --white:#ffffff;
  --text:#1a1c22;
  --muted:#6b7280;

  --fd:'Cormorant Garamond', Georgia, serif;
  --fb:'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;

  --ease:cubic-bezier(.16,1,.3,1);
  --radius:14px;
  --shadow:0 18px 55px rgba(0,0,0,.10);
  --nav-h:80px;

  --container:1200px;
}

/* Reset */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--fb);
  color:var(--text);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font-family:inherit}
p{margin:0}
ul{margin:0;padding:0;list-style:none}

.container{
  width:min(var(--container), 100% - 10%);
  margin-inline:auto;
}

.section{padding: clamp(3.2rem, 5vw, 5.8rem) 0}
.section--tight{padding: clamp(2.4rem, 4vw, 4.2rem) 0}
.section--navy{background:var(--navy); color:#fff}
.section--navy2{background:var(--navy2); color:#fff}
.section--white{background:#fff}
.section--cream2{background:var(--cream2)}

.kicker{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.72rem; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold);
}
.kicker::before{content:""; width:18px; height:1px; background:var(--gold); opacity:.95}
.h1{
  font-family:var(--fd);
  font-weight:900;
  font-size:clamp(2.35rem, 4.2vw, 4rem);
  line-height:1.03;
  letter-spacing:-.02em;
  margin:.9rem 0 0;
}
.h2{
  font-family:var(--fd);
  font-weight:900;
  font-size:clamp(1.8rem, 2.8vw, 2.8rem);
  line-height:1.08;
  letter-spacing:-.01em;
  margin:.6rem 0 0;
}
.lead{
  margin-top:1rem;
  font-size:clamp(.95rem, 1.15vw, 1.05rem);
  line-height:1.8;
  color:rgba(255,255,255,.62);
}
.lead--dark{color:var(--muted)}
.small{font-size:.9rem; line-height:1.7; color:var(--muted)}
.hr{height:1px;background:rgba(201,168,76,.12); border:0; margin:2rem 0}

.btns{display:flex; gap:.9rem; flex-wrap:wrap; margin-top:1.7rem}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.95rem 1.25rem;
  border-radius:6px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:.74rem;
  border:1px solid transparent;
  transition:transform .15s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
  user-select:none;
}
.btn:active{transform:translateY(0)}
.btn--gold{background:var(--gold); color:var(--navy); box-shadow:0 10px 32px rgba(201,168,76,.25)}
.btn--gold:hover{background:var(--gold2); transform:translateY(-1px)}
.btn--outline{border-color:rgba(255,255,255,.25); color:#fff; background:transparent}
.btn--outline:hover{border-color:rgba(255,255,255,.55); transform:translateY(-1px)}
.btn--navy{background:var(--navy); color:#fff}
.btn--navy:hover{transform:translateY(-1px)}
.btn--ghost{background:transparent; border-color:rgba(11,29,53,.18); color:var(--navy)}
.btn--ghost:hover{transform:translateY(-1px); border-color:rgba(11,29,53,.35)}

/* ==========================================================
   NAV
========================================================== */
.site-header{
  position:fixed; inset:0 0 auto 0;
  z-index:999;
  transition: background .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease);
}
.site-header.sc{
  background:rgba(11,29,53,.97);
  backdrop-filter: blur(16px);
  box-shadow:0 1px 0 rgba(201,168,76,.15);
}
.nav{
  height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;
}
.brand{
  display:flex; align-items:center; gap:.75rem;
  min-width: 210px;
}
.brand img{height:40px; width:auto; filter: drop-shadow(0 2px 6px rgba(0,0,0,.35))}
.brand b{
  font-family:var(--fd);
  font-size:1.5rem;
  color:#fff;
  letter-spacing:-.01em;
}
.brand b span{color:var(--gold)}
.nav-links{
  display:flex; align-items:center; gap:1.7rem;
}
.nav-links a{
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:rgba(255,255,255,.62);
  position:relative;
  padding:.35rem 0;
}
.nav-links a:hover{color:#fff}
.nav-links a::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:1px; background:var(--gold);
  transform:scaleX(0); transform-origin:left;
  transition: transform .35s var(--ease);
}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-cta{margin-left:.4rem}
.nav-cta .btn{padding:.75rem 1.05rem}

.hamb{display:none; background:transparent; border:0; padding:.35rem; cursor:pointer}
.hamb span{display:block;width:26px;height:2px;background:#fff;border-radius:2px;margin:6px 0; transition:.25s var(--ease)}
.hamb.op span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.hamb.op span:nth-child(2){opacity:0}
.hamb.op span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

.dropdown{position:relative}
.dropdown > button{
  background:transparent; border:0; color:rgba(255,255,255,.62);
  font-size:.74rem; font-weight:700; letter-spacing:.10em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:.4rem; cursor:pointer;
  padding:.35rem 0;
}
.dropdown > button:hover{color:#fff}
.drop-panel{
  position:absolute; top:calc(100% + .9rem); left:-.6rem;
  width: 290px;
  background:rgba(11,29,53,.98);
  border:1px solid rgba(201,168,76,.18);
  border-radius:12px;
  box-shadow:0 18px 55px rgba(0,0,0,.35);
  padding:.75rem;
  display:none;
}
.dropdown:hover .drop-panel{display:block}
.drop-panel a{
  display:block;
  padding:.75rem .75rem;
  border-radius:10px;
  color:rgba(255,255,255,.72);
  font-size:.78rem;
  letter-spacing:.02em;
  text-transform:none;
}
.drop-panel a strong{display:block; font-size:.83rem; color:#fff; margin-bottom:.15rem}
.drop-panel a span{display:block; font-size:.75rem; color:rgba(255,255,255,.45); line-height:1.35}
.drop-panel a:hover{background:rgba(201,168,76,.10); color:#fff}
.drop-panel a::after{display:none}

/* ==========================================================
   HERO (split)
========================================================== */
.hero-split{
  background:var(--navy);
  color:#fff;
  padding-top:var(--nav-h);
  min-height:100vh;
  display:grid;
  grid-template-columns: 1.08fr .92fr;
  align-items:stretch;
  overflow:hidden;
}
.hero-left{
  display:flex; flex-direction:column; justify-content:center;
  padding: clamp(3rem, 5vw, 5rem) 0;
}
.hero-left .container{width:min(var(--container), 100% - 10%);}
.hero-badge{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.55);
}
.hero-badge::before{
  content:""; width:9px; height:9px; border-radius:50%;
  background:var(--gold); box-shadow:0 0 0 8px rgba(201,168,76,.12);
}
.hero-sub{
  margin-top:1rem;
  font-size:1rem;
  line-height:1.85;
  color:rgba(255,255,255,.60);
  max-width: 52ch;
}
.hero-stats{
  display:flex; gap:1.8rem; flex-wrap:wrap;
  margin-top:1.8rem;
  border-top:1px solid rgba(201,168,76,.18);
  padding-top:1.2rem;
}
.stat{min-width: 150px}
.s-num{
  font-family:var(--fd);
  font-weight:900;
  font-size:2rem;
  color:var(--gold2);
  line-height:1;
}
.s-lbl{
  margin-top:.35rem;
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.45);
}
.hero-right{
  position:relative;
  min-height:calc(100vh - var(--nav-h));
}
.hero-right img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position: 50% 15%;
  opacity:.82;
  transform:scale(1.02);
  transition: transform 8s ease;
}
.hero-right::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(11,29,53,.92) 0%, rgba(11,29,53,.35) 45%, rgba(11,29,53,.10) 100%);
  z-index:1;
}
.hero-right::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(ellipse 60% 60% at 60% 35%, rgba(201,168,76,.12) 0%, transparent 70%);
  z-index:1;
}
.hero-right .hero-mini{
  position:absolute; right:6%; bottom:7%;
  display:grid; grid-template-columns:repeat(3, 92px);
  gap:.7rem; z-index:2;
}
.hero-mini img{
  position:static; width:92px; height:92px;
  border-radius:14px;
  object-fit:cover;
  opacity:1;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 18px 45px rgba(0,0,0,.30);
}
.hero-right:hover img{transform:scale(1.07)}

/* ==========================================================
   TRUST BAR
========================================================== */
.trust-bar{
  background:#0b1d35;
  border-top:1px solid rgba(201,168,76,.10);
  border-bottom:1px solid rgba(201,168,76,.10);
  padding: 1.1rem 0;
}
.trust-items{
  display:flex; gap:2.2rem; flex-wrap:wrap; justify-content:center; align-items:center;
  color:rgba(255,255,255,.48);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.10em;
  text-transform:uppercase;
}
.trust-items b{color:var(--gold); font-weight:900}
.dot{width:4px;height:4px;border-radius:50%;background:rgba(201,168,76,.35)}

/* ==========================================================
   CARDS / GRIDS
========================================================== */
.grid{display:grid; gap:1.2rem}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
@media (max-width: 980px){
  .grid--3,.grid--4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 640px){
  .grid--2,.grid--3,.grid--4{grid-template-columns:1fr}
}
.card{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow:0 14px 45px rgba(0,0,0,.06);
  transition: transform .2s var(--ease), box-shadow .25s var(--ease);
}
.card:hover{transform:translateY(-3px); box-shadow:0 22px 70px rgba(0,0,0,.10)}
.card-img{height:180px; background:var(--cream2); overflow:hidden}
.card-img img{width:100%; height:100%; object-fit:cover; transition: transform .6s var(--ease)}
.card:hover .card-img img{transform:scale(1.05)}
.card-body{padding:1.25rem 1.25rem 1.35rem}
.card-k{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(11,29,53,.45); font-weight:900}
.card h3{margin:.55rem 0 .45rem; font-family:var(--fd); font-size:1.35rem; color:var(--navy); line-height:1.15}
.card p{margin:0; font-size:.92rem; color:var(--muted); line-height:1.7}
.card-cta{margin-top:1rem; display:inline-flex; gap:.45rem; align-items:center; font-weight:900; color:var(--navy); font-size:.8rem}
.card-cta span{color:var(--gold)}

/* ==========================================================
   FEATURE LIST
========================================================== */
.features{margin-top:2rem}
.feature{
  display:flex; gap:.9rem; align-items:flex-start;
  padding:1rem 1.05rem;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius: 14px;
}
.f-ico{
  width:40px; height:40px;
  border-radius:12px;
  background:rgba(201,168,76,.13);
  display:flex; align-items:center; justify-content:center;
  color:var(--navy);
  font-weight:900;
  flex-shrink:0;
}
.feature h4{margin:0; font-size:.95rem; color:var(--navy)}
.feature p{margin:.25rem 0 0; font-size:.88rem; color:var(--muted); line-height:1.65}

/* ==========================================================
   BREADCRUMB
========================================================== */
.breadcrumb{
  display:flex; gap:.55rem; flex-wrap:wrap; align-items:center;
  font-size:.82rem;
  color:rgba(255,255,255,.55);
}
.breadcrumb a{color:rgba(255,255,255,.72)}
.breadcrumb a:hover{color:#fff}
.breadcrumb .sep{opacity:.6}

/* ==========================================================
   FORM
========================================================== */
.form-wrap{
  background:#fff;
  border:1px solid rgba(0,0,0,.10);
  border-radius: 16px;
  box-shadow: var(--shadow);
  overflow:hidden;
}
.form-head{
  background:var(--navy);
  color:#fff;
  padding:1.4rem 1.6rem;
  border-bottom:2px solid var(--gold);
}
.form-head h3{
  margin:0;
  font-family:var(--fd);
  font-size:1.6rem;
  font-weight:800;
}
.form-head p{margin:.25rem 0 0; font-size:.8rem; color:rgba(255,255,255,.45)}
.form-body{padding:1.6rem}
.fg{margin-bottom:1rem}
.fg label{
  display:block;
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--navy);
  margin-bottom:.35rem;
}
.fg label em{color:var(--gold); font-style:normal}
.fg input,.fg select,.fg textarea{
  width:100%;
  padding:.78rem .9rem;
  border:1px solid rgba(0,0,0,.15);
  border-radius:10px;
  background:var(--cream);
  font-size:.95rem;
  outline:none;
  transition:border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.fg textarea{min-height:110px; resize:vertical}
.fg input:focus,.fg select:focus,.fg textarea:focus{
  background:#fff;
  border-color: var(--navy);
  box-shadow:0 0 0 3px rgba(11,29,53,.07);
}
.fg-row{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
@media(max-width:640px){.fg-row{grid-template-columns:1fr}}
.form-note{
  margin-top:.6rem;
  font-size:.78rem;
  color:var(--muted);
  text-align:center;
}
.form-msg{
  display:none;
  margin-top:1rem;
  padding:.9rem 1rem;
  border-radius:12px;
  font-size:.92rem;
  line-height:1.55;
}
.form-msg.ok{display:block; background:#e8f5e0; border-left:4px solid #4caf50; color:#1b5e20}
.form-msg.err{display:block; background:#fce8e8; border-left:4px solid #e53935; color:#7f0000}

.checkbox-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:.55rem;
  margin:.35rem 0 1rem;
}
@media(max-width:640px){.checkbox-grid{grid-template-columns:1fr}}
.chk{
  position:relative;
}
.chk input{position:absolute; opacity:0; width:0; height:0}
.chk label{
  display:flex; align-items:center; gap:.55rem;
  padding:.75rem .9rem;
  border:1px solid rgba(0,0,0,.12);
  border-radius:12px;
  background:#fff;
  cursor:pointer;
  font-size:.9rem;
  color:var(--muted);
  user-select:none;
  transition: border-color .2s var(--ease), transform .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.chk label::before{
  content:"";
  width:14px;height:14px;border-radius:4px;
  border:2px solid rgba(0,0,0,.25);
  flex-shrink:0;
}
.chk input:checked + label{
  border-color: rgba(11,29,53,.45);
  color:var(--navy);
  background:rgba(11,29,53,.04);
  transform: translateY(-1px);
}
.chk input:checked + label::before{
  border-color: var(--gold);
  background: var(--gold);
  box-shadow:0 0 0 4px rgba(201,168,76,.18);
}

/* ==========================================================
   ACCORDION (FAQ)
========================================================== */
.accordion{margin-top:1.6rem}
.acc{
  border:1px solid rgba(0,0,0,.10);
  border-radius:14px;
  background:#fff;
  overflow:hidden;
  margin-bottom:.8rem;
}
.acc button{
  width:100%;
  background:#fff;
  border:0;
  padding:1rem 1.1rem;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem;
  font-weight:900;
  color:var(--navy);
  cursor:pointer;
  text-align:left;
}
.acc button span{font-size:1rem; line-height:1.3}
.acc button i{
  width:34px;height:34px;border-radius:10px;
  background:rgba(201,168,76,.14);
  display:flex; align-items:center; justify-content:center;
  font-style:normal; color:var(--navy); font-weight:900;
  flex-shrink:0;
}
.acc .panel{
  display:none;
  padding:0 1.1rem 1.05rem;
  color:var(--muted);
  line-height:1.75;
  font-size:.95rem;
}
.acc.open .panel{display:block}
.acc.open button i{background:rgba(11,29,53,.08)}

/* ==========================================================
   FOOTER
========================================================== */
.footer{
  background:#050b14;
  color:#fff;
  border-top:1px solid rgba(201,168,76,.10);
}
.footer-grid{
  display:grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap:2.2rem;
  padding:3.6rem 0 2rem;
}
@media(max-width:980px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:640px){.footer-grid{grid-template-columns:1fr;}}
.footer h5{
  margin:0 0 1rem;
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold);
}
.footer a{
  display:block;
  color:rgba(255,255,255,.35);
  margin:.45rem 0;
  font-size:.9rem;
}
.footer a:hover{color:#fff}
.footer p{color:rgba(255,255,255,.35); line-height:1.8}
.footer-bot{
  border-top:1px solid rgba(255,255,255,.06);
  padding:1.15rem 0;
  display:flex; align-items:center; justify-content:space-between;
  gap:.8rem;
  font-size:.78rem;
  color:rgba(255,255,255,.22);
}
@media(max-width:640px){.footer-bot{flex-direction:column; text-align:center}}

.badge{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.76rem; color:rgba(255,255,255,.45);
  margin-top:.8rem;
}
.badge .pulse{
  width:8px;height:8px;border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 0 0 rgba(201,168,76,.55);
  animation:pulse 2s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(201,168,76,.45)}
  70%{box-shadow:0 0 0 10px rgba(201,168,76,0)}
  100%{box-shadow:0 0 0 0 rgba(201,168,76,0)}
}

/* ==========================================================
   TOAST
========================================================== */
.toast{
  position:fixed; right:1.5rem; bottom:1.5rem; z-index:9999;
  max-width:min(360px, calc(100% - 3rem));
  background:var(--navy);
  color:#fff;
  border-left:4px solid var(--gold);
  border-radius: 14px;
  box-shadow:0 18px 55px rgba(0,0,0,.35);
  padding: .9rem 1.1rem;
  transform: translateY(140%);
  opacity:0;
  transition: transform .45s var(--ease), opacity .45s var(--ease);
  font-size:.92rem;
  line-height:1.45;
}
.toast.on{transform:none; opacity:1}

/* ==========================================================
   REVEAL
========================================================== */
.rv{opacity:0; transform:translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease)}
.rv.on{opacity:1; transform:none}

/* ==========================================================
   RESPONSIVE NAV
========================================================== */
@media(max-width: 980px){
  :root{--nav-h:74px}
  .dropdown:hover .drop-panel{display:none}
  .nav-links{
    position:fixed;
    top:var(--nav-h); left:0; right:0;
    background:rgba(11,29,53,.98);
    backdrop-filter: blur(16px);
    border-top:1px solid rgba(201,168,76,.12);
    padding:1.2rem 5%;
    display:none;
    flex-direction:column;
    align-items:flex-start;
    gap:1.0rem;
    max-height: calc(100vh - var(--nav-h));
    overflow:auto;
  }
  .nav-links.op{display:flex}
  .nav-cta{display:none}
  .hamb{display:block}
  .dropdown{width:100%}
  .dropdown > button{width:100%; justify-content:space-between; padding:.7rem 0}
  .drop-panel{
    position:static;
    display:none;
    width:100%;
    margin:.1rem 0 .3rem;
    padding:.5rem;
    border-radius:14px;
  }
  .dropdown.op .drop-panel{display:block}
}
@media(max-width: 900px){
  .hero-split{grid-template-columns:1fr; min-height:auto}
  .hero-right{min-height: 340px}
  .hero-right::before{background:linear-gradient(180deg, rgba(11,29,53,.15) 0%, rgba(11,29,53,.85) 75%)}
  .hero-right .hero-mini{display:none}
}


/* ============================
   HERO SLIDER (RIGHT)
============================ */
.hero-right{ position:relative; overflow:hidden; }
.hero-slides{ position:absolute; inset:0; }
.hero-slide{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  transform: scale(1);
  transition: opacity .8s var(--ease), transform 8s ease;
}
.hero-slide.is-active{ opacity:.75; }
.hero-right:hover .hero-slide.is-active{ transform: scale(1.04); }

.hero-mini{
  position:absolute;
  bottom:18px;
  left:18px;
  display:flex;
  gap:10px;
  z-index:2;
}
.hero-thumb{
  border:1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.2);
  padding:0;
  width:92px;
  height:64px;
  border-radius:10px;
  overflow:hidden;
  cursor:pointer;
  transition: transform .2s var(--ease), border-color .2s var(--ease);
}
.hero-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.hero-thumb:hover{ transform: translateY(-2px); border-color: rgba(201,168,76,.55); }
.hero-thumb.is-active{ border-color: rgba(201,168,76,.85); }

/* ============================
   AVANT/APRÈS SLIDER (FADE)
============================ */
.ba-slider{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  background: #0b1d35;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: var(--shadow);
  margin-top: 1.6rem;
  min-height: 360px;
}
.ba-item{
  position:absolute;
  inset:0;
  opacity:0;
  transition: opacity .7s var(--ease);
}
.ba-item.is-active{ opacity:1; }
.ba-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.ba-item figcaption{
  position:absolute;
  left:16px;
  right:16px;
  bottom:16px;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(0,0,0,.06);
  border-radius:14px;
  padding: 12px 14px;
}
.ba-item figcaption strong{ display:block; color: var(--navy); font-weight:800; }
.ba-item figcaption span{ display:block; color: rgba(11,29,53,.65); margin-top:2px; font-size:.95rem; }

.ba-nav{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.35);
  color:#fff;
  font-size:28px;
  line-height:44px;
  text-align:center;
  cursor:pointer;
  z-index:3;
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.ba-nav:hover{ background: rgba(0,0,0,.5); transform: translateY(-50%) scale(1.03); }
.ba-prev{ left:14px; }
.ba-next{ right:14px; }

.ba-dots{
  position:absolute;
  left:0;
  right:0;
  bottom:14px;
  display:flex;
  gap:8px;
  justify-content:center;
  z-index:3;
}
.ba-dot{
  width:8px; height:8px;
  border-radius:999px;
  background: rgba(255,255,255,.4);
}
.ba-dot.is-active{ background: rgba(201,168,76,.9); }