:root{
  --creme:#FFFFFF;
  --chocolat:#2C0411;
  --vert:#163228;
  --bordeaux:#480F1B;
  --creme-soft:#F8F6F1;
  --or:#CDA35A;
  --or-dark:#8F6B32;
  --or-light:#E8C687;
  --or-tint:#F3E6CC;
}

*{margin:0;padding:0;box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  background:var(--creme);
  color:var(--vert);
  font-family:'DM Sans', sans-serif;
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,.serif{
  font-family:'Cormorant Garamond', serif;
  font-weight:300;
  color:var(--chocolat);
  line-height:1.15;
}

em{
  font-style:italic;
  color:var(--bordeaux);
}

a{color:inherit;text-decoration:none;}

.container{
  max-width:1180px;
  margin:0 auto;
  padding:0 32px;
}

/* ---------- Header ---------- */
header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(44,4,17,0.08);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 32px;
  max-width:1180px;
  margin:0 auto;
}
.logo-mark{
  display:flex;
  align-items:center;
  gap:10px;
}
.logo-mark img{height:38px;width:auto;}
nav.primary-nav{
  display:flex;
  gap:28px;
  font-size:14px;
  letter-spacing:0.3px;
}
nav.primary-nav a{
  color:var(--vert);
  opacity:0.75;
  transition:opacity .2s;
}
nav.primary-nav a:hover, nav.primary-nav a.active{opacity:1;}
.header-actions{
  display:flex;
  align-items:center;
  gap:20px;
  font-size:14px;
}
.nav-toggle-checkbox{display:none;}
.nav-toggle-label{
  display:none;
  cursor:pointer;
  font-size:22px;
  line-height:1;
  color:var(--chocolat);
  padding:4px;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 28px;
  border-radius:2px;
  font-size:14px;
  letter-spacing:0.3px;
  cursor:pointer;
  border:1px solid transparent;
  transition:all .25s ease;
  white-space:nowrap;
}
.btn-primary{
  background:var(--vert);
  color:var(--or-light);
}
.btn-primary:hover{background:var(--bordeaux);}
.btn-outline{
  background:transparent;
  border:1px solid var(--chocolat);
  color:var(--chocolat);
}
.btn-outline:hover{background:var(--chocolat);color:var(--creme);}
.link-connexion{opacity:0.75;}
.link-connexion:hover{opacity:1;}

/* ---------- Devise strip ---------- */
.devise{
  text-align:center;
  padding:26px 20px;
  background:var(--chocolat);
  color:var(--or);
  font-family:'Cormorant Garamond', serif;
  font-size:20px;
  letter-spacing:2px;
}

/* ---------- Generic sections ---------- */
.section{padding:110px 32px;}
.section-narrow{max-width:760px;margin:0 auto;text-align:center;}
.section-soft{background:var(--creme-soft);}

/* ---------- Page hero (sub-pages) ---------- */
.page-hero{
  padding:90px 32px 70px;
  text-align:center;
}
.hero-eyebrow{
  font-size:13px;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--or-dark);
  margin-bottom:24px;
  display:block;
}
.page-hero h1{
  font-size:46px;
  max-width:760px;
  margin:0 auto 24px;
}
.page-hero p.lead{
  max-width:600px;
  margin:0 auto;
  font-size:18px;
  opacity:0.85;
}

/* ---------- Footer ---------- */
footer{
  background:var(--creme-soft);
  border-top:1px solid rgba(44,4,17,0.1);
  padding:80px 32px 34px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:48px;
  max-width:1180px;
  margin:0 auto;
  padding-bottom:56px;
}
.footer-brand .logo-mark{margin-bottom:16px;}
.footer-brand p{
  font-size:14px;
  opacity:0.75;
  max-width:260px;
}
.footer-col h4{
  font-family:'DM Sans', sans-serif;
  font-weight:500;
  font-size:14px;
  letter-spacing:0.5px;
  margin-bottom:20px;
  color:var(--chocolat);
}
.footer-col a{
  display:block;
  font-size:14px;
  opacity:0.7;
  margin-bottom:14px;
}
.footer-col a:hover{opacity:1;color:var(--bordeaux);}
.footer-bottom{
  max-width:1180px;
  margin:0 auto;
  padding-top:28px;
  border-top:1px solid rgba(44,4,17,0.1);
  text-align:center;
  font-size:13px;
  opacity:0.6;
  letter-spacing:0.5px;
}

/* ---------- Popup ---------- */
.overlay{
  position:fixed;
  inset:0;
  background:rgba(44,4,17,0.55);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2000;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease;
}
.overlay.show{opacity:1;pointer-events:auto;}
.popup{
  background:var(--creme);
  max-width:460px;
  width:90%;
  padding:56px 44px;
  text-align:center;
  position:relative;
  border:1px solid rgba(44,4,17,0.1);
}
.popup-close{
  position:absolute;
  top:18px;right:20px;
  font-size:20px;
  cursor:pointer;
  opacity:0.5;
  background:none;border:none;color:var(--chocolat);
}
.popup-close:hover{opacity:1;}
.popup h3{font-size:30px;margin-bottom:20px;}
.popup p{font-size:15px;opacity:0.85;margin-bottom:30px;}

@media (max-width:900px){
  .header-inner{padding:16px 20px;position:relative;}
  .nav-toggle-label{display:block;}
  nav.primary-nav{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    flex-direction:column;
    gap:0;
    background:var(--creme);
    border-bottom:1px solid rgba(44,4,17,0.08);
    box-shadow:0 10px 20px rgba(44,4,17,0.1);
    padding:6px 20px 14px;
  }
  nav.primary-nav a{
    padding:13px 0;
    border-bottom:1px solid rgba(44,4,17,0.08);
    opacity:0.85;
  }
  nav.primary-nav a:last-child{border-bottom:none;}
  .nav-toggle-checkbox:checked ~ nav.primary-nav{display:flex;}
  .section{padding:80px 20px;}
  .page-hero{padding:70px 20px 50px;}
  .page-hero h1{font-size:34px;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}