/* =========================================================
   BASE.CSS — commun à toutes les pages du site Kenter Prod
   Variables, reset, typographie, header/nav, footer, boutons
   ========================================================= */

:root{
  --ink:#131110;
  --ink-2:#1e1a16;
  --ink-3:#2a241d;
  --gold:#c89b2e;
  --gold-2:#e8c15b;
  --teal:#12746a;
  --cream:#f3ecdc;
  --white:#fbf8f2;
  --line: rgba(243,236,220,0.14);
  --max: 1160px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font-family:'Inter',sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:'Bricolage Grotesque',sans-serif;
  margin:0;
  color:var(--white);
  letter-spacing:-0.01em;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;}

.eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--gold-2);
  display:flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:"";
  width:18px;height:1px;background:var(--gold-2);display:inline-block;
}
.wrap{max-width:var(--max); margin:0 auto; padding:0 28px;}
section{padding:96px 0;}
@media (max-width:720px){ section{padding:64px 0;} }
@media (max-width:480px){
  .wrap{padding:0 18px;}
  section{padding:44px 0;}
}

/* ===== NAV ===== */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(19,17,16,0.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
nav.wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:14px; padding-bottom:14px;
  position:relative;
}
.brand{display:flex; align-items:center; gap:10px;}
.brand img{height:30px; width:auto; display:block;}
.brand span{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px; letter-spacing:0.12em; color:var(--cream); opacity:0.75;
}
.navlinks{display:flex; gap:30px; font-size:14px; font-weight:500;}
.navlinks a{opacity:0.82; transition:opacity .2s, color .2s;}
.navlinks a:hover, .navlinks a.active{opacity:1; color:var(--gold-2);}
.nav-cta{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px; letter-spacing:0.06em;
  border:1px solid var(--gold); color:var(--gold-2);
  padding:9px 16px; border-radius:99px;
  transition:background .2s, color .2s;
}
.nav-cta:hover{background:var(--gold); color:var(--ink);}
.nav-toggle{display:none; background:none; border:none; color:var(--cream); font-size:22px; cursor:pointer; padding:4px 6px; line-height:1;}
@media (max-width:860px){
  .navlinks{
    display:none; position:absolute; top:100%; left:0; right:0;
    background:var(--ink-2); border-bottom:1px solid var(--line);
    flex-direction:column; gap:0; padding:8px 0;
    max-height:calc(100vh - 60px); overflow-y:auto;
  }
  .navlinks.open{display:flex;}
  .navlinks a{padding:14px 28px; border-top:1px solid var(--line);}
  .nav-toggle{display:block;}
}
@media (max-width:420px){
  .brand span{display:none;}
  nav.wrap{padding-top:12px; padding-bottom:12px;}
}

/* ===== BUTTONS / CTA ===== */
.cta-row{display:flex; gap:14px; margin-top:32px; flex-wrap:wrap;}
.btn{
  font-family:'IBM Plex Mono',monospace;
  font-size:13px; letter-spacing:0.04em;
  padding:14px 24px; border-radius:99px;
  display:inline-flex; align-items:center; gap:8px;
  transition:transform .18s ease, background .18s ease, color .18s ease;
}
.btn-primary{background:var(--gold); color:var(--ink); font-weight:600;}
.btn-primary:hover{background:var(--gold-2); transform:translateY(-2px);}
.btn-ghost{border:1px solid var(--line); color:var(--cream);}
.btn-ghost:hover{border-color:var(--gold-2); color:var(--gold-2); transform:translateY(-2px);}
@media (max-width:480px){
  .cta-row{flex-direction:column; align-items:stretch;}
  .btn{justify-content:center;}
}

/* ===== PAGE HEADER (bandeau de titre pour pages secondaires) ===== */
.page-head{padding:56px 0 40px; border-bottom:1px solid var(--line);}
.page-head h1{font-size:clamp(30px,4.4vw,52px); margin-top:14px;}
.page-head p{opacity:0.75; margin-top:14px; max-width:56ch; font-size:15.5px;}
@media (max-width:480px){ .page-head{padding:40px 0 28px;} }

/* ===== FOOTER ===== */
footer{border-top:1px solid var(--line); padding:34px 0; margin-top:0;}
footer .wrap{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;}
footer .fbrand{display:flex; align-items:center; gap:10px; opacity:0.7; font-size:13px;}
footer .flinks{display:flex; gap:22px; font-size:13px; opacity:0.6; flex-wrap:wrap;}
footer .flinks a:hover{opacity:1; color:var(--gold-2);}
@media (max-width:600px){
  footer .wrap{flex-direction:column; text-align:center; justify-content:center;}
  footer .flinks{justify-content:center;}
}