:root{--bg:#02070b;--gold:#d6a247;--gold-light:#f0c878;--text:#f4efe6;--align-shift:30px;}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--text);font-family:"Segoe UI",Arial,sans-serif;overflow-x:hidden;}
a{color:inherit;text-decoration:none}

.hero{
  height:65vh;
  min-height:650px;
  max-height:850px;
  background:url("../img/hero-base.png") center 30%/cover no-repeat;
  position:relative;
  overflow:hidden;
}

.hero:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:250px;
  background:linear-gradient(
    180deg,
    rgba(2,7,11,0) 0%,
    rgba(2,7,11,.06) 75%,
    #02070b 100%
  );
  pointer-events:none;
}
.header{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(18px,4vw,58px);background:linear-gradient(180deg,rgba(0,0,0,.90),rgba(0,0,0,.75) 40%,rgba(0,0,0,.35) 80%,rgba(0,0,0,0));position:relative;z-index:2}
.logo{width:140px;filter:drop-shadow(0 6px 16px rgba(0,0,0,.9))}
.menu{display:flex;gap:clamp(12px,1.8vw,26px);align-items:center;text-transform:uppercase;letter-spacing:.08em;font-size:.82rem}
.menu a{padding:7px 0;border-bottom:2px solid transparent;opacity:.92}
.menu a:hover,.menu .active{color:var(--gold-light);border-color:var(--gold)}
.cards-section{
  margin-top:-40px;
  position:relative;
  z-index:3;
  background:transparent;
  padding:14px clamp(16px,4vw,56px) 10px;
}
.cards{
  max-width:1180px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,182px);
  justify-content:center;gap:10px;
  position:relative;
  left:var(--align-shift);}
.card{width:182px;min-height:220px;padding:18px 14px 14px;background:linear-gradient(180deg,rgba(6,15,22,.96),rgba(1,6,10,.98));border:1px solid rgba(214,162,71,.34);border-radius:12px;display:flex;flex-direction:column;align-items:center;text-align:center;box-shadow:0 10px 24px rgba(0,0,0,.28);transition:.2s ease}
.card:hover{transform:translateY(-3px);border-color:rgba(214,162,71,.72)}
.icon-wrap{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;margin-bottom:10px;background:radial-gradient(circle,rgba(214,162,71,.18),rgba(214,162,71,.03) 62%,transparent)}
.icon{width:34px;height:34px;color:var(--gold-light);stroke-width:2.8}
.card h2{color:#f4dfba;text-transform:uppercase;letter-spacing:.14em;font-size:.95rem;margin-bottom:8px}
.card p{font-size:.78rem;line-height:1.35}
.arrow{margin-top:auto;color:var(--gold);font-size:1.25rem;padding-top:7px}
.bottom{
  background:var(--bg);
  padding:55px 20px 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  color:var(--gold);
  position:relative;
  left:var(--align-shift);
}
.bottom:before,.bottom:after{content:"";height:1px;width:min(260px,20vw);background:linear-gradient(90deg,transparent,rgba(214,162,71,.75))}
.bottom:after{background:linear-gradient(90deg,rgba(214,162,71,.75),transparent)}
.wave{width:180px;min-width:180px}
.phrase{color:rgba(214,162,71,.82);text-transform:uppercase;letter-spacing:.22em;font-size:.9rem;font-weight:500;text-align:center;line-height:1.6}
@media(max-width:1120px){.hero{height:480px;max-height:none;background-position:center 58%}.menu{font-size:.78rem;gap:13px}}
@media(max-width:760px){.hero{height:360px;min-height:360px;background-position:center 55%}.header{height:auto;min-height:98px;flex-direction:column;justify-content:center;gap:10px;padding:12px}.menu{flex-wrap:wrap;justify-content:center;font-size:.74rem}.cards{grid-template-columns:1fr}.card{width:100%;min-height:auto}.bottom{flex-direction:column;gap:8px}.bottom:before,.bottom:after{display:none}.wave{width:120px;min-width:120px}.phrase{letter-spacing:.1em;font-size:.78rem}}


/* Textes sous V28 modifiables dans index.html */
.hero-text{
    position:absolute;
    left:50%;
    top:80%;
    transform:translate(calc(-50% + var(--align-shift)), -50%);
    z-index:2;
    width:min(900px,90vw);
    text-align:center;
    pointer-events:none;
}

.hero-title{
 /*color:#d6a247;*/
  /*color:#e5c16c;*/
  color:#f4dfba;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:1.35rem;
  font-weight:600;
  line-height:1.5;
  /*text-shadow:0 4px 18px rgba(0,0,0,.95);*/
  margin-bottom:28px;
  text-shadow:
    0 2px 4px rgba(0,0,0,.8),
    0 0 12px rgba(214,162,71,.15);
}

.hero-title span{
  /*color:#c8ccd1;*/
  color:#d6a247;
  padding:0 .28em;
}

.hero-subtitle{
    margin-top:22px;
    color:rgba(244,239,230,.82);
    font-size:1.05rem;
    line-height:1.6;
    text-shadow:0 4px 18px rgba(0,0,0,.95);
}
@media(max-width:1120px){
  .hero-text{top:55%;}
}

@media(max-width:760px){
  .hero-text{top:56%;}
  .hero-title{font-size:.86rem;letter-spacing:.1em;}
  .hero-subtitle{margin-top:14px;font-size:.82rem;}
}