/* =========================================================
   LA TANIÈRE — Système de design
   Direction : tactique / héritage, sombre & premium
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@400;500;600;700&family=Hanken+Grotesk:wght@400;500;600;700&family=Spline+Sans+Mono:wght@400;500&display=swap');

:root{
  /* Couleurs — fond gunmetal légèrement chaud */
  --bg:        #0d0f0e;
  --bg-2:      #131614;
  --bg-3:      #1b1f1c;
  --bg-4:      #242a26;

  --line:        rgba(231,226,210,0.10);
  --line-strong: rgba(231,226,210,0.20);

  --text:      #ECE7DA;
  --text-dim:  #9d9b8f;
  --text-mute: #6d6c62;

  /* Accent laiton/cuivre */
  --brass:        #c69a4e;
  --brass-bright: #ddb96e;
  --brass-deep:   #8a6a31;
  --brass-soft:   rgba(198,154,78,0.14);

  /* Secondaires */
  --olive:  #5b6b4c;
  --blaze:  #d4602a;   /* orange chasse — usage rare (réglementation / promo) */
  --green:  #6fae6a;   /* dispo / succès */
  --red:    #d2553f;

  --r:    3px;
  --r-md: 6px;
  --r-lg: 10px;

  --shadow:    0 18px 40px -20px rgba(0,0,0,0.8);
  --shadow-lg: 0 40px 80px -30px rgba(0,0,0,0.9);

  --maxw: 1280px;
  --gut: clamp(20px, 5vw, 64px);

  /* Polices (surchargées par les Tweaks) */
  --font-display: 'Saira Condensed', sans-serif;
  --font-body:    'Hanken Grotesk', sans-serif;
  --font-mono:    'Spline Sans Mono', monospace;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }

/* ---------- Typographie ---------- */
.display{
  font-family:var(--font-display);
  font-weight:600;
  line-height:0.94;
  letter-spacing:-0.01em;
  text-transform:uppercase;
  margin:0;
}
.h1{ font-size:clamp(44px, 7vw, 104px); }
.h2{ font-size:clamp(32px, 4.4vw, 60px); }
.h3{ font-size:clamp(24px, 2.6vw, 36px); }

/* étiquette technique */
.kicker{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--brass);
  font-weight:500;
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.kicker::before{
  content:"";
  width:26px;height:1px;background:var(--brass);
  display:inline-block;
}
.kicker.no-rule::before{ display:none; }

.mono{ font-family:var(--font-mono); }
.lead{ font-size:clamp(16px,1.3vw,19px); color:var(--text-dim); line-height:1.7; }
.muted{ color:var(--text-mute); }

/* ---------- Layout ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut); }
.section{ padding-block:clamp(64px,9vw,140px); }
.eyebrow-row{ display:flex; align-items:baseline; justify-content:space-between; gap:24px; flex-wrap:wrap; }

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-display);
  text-transform:uppercase;
  letter-spacing:0.06em;
  font-weight:600;
  font-size:15px;
  padding:15px 26px;
  border:1px solid transparent;
  border-radius:var(--r);
  transition:transform .25s cubic-bezier(.2,.7,.2,1), background .2s, color .2s, border-color .2s;
  white-space:nowrap;
}
.btn svg{ width:17px; height:17px; }
.btn-primary{ background:var(--brass); color:#1a140a; }
.btn-primary:hover{ background:var(--brass-bright); transform:translateY(-2px); }
.btn-ghost{ border-color:var(--line-strong); color:var(--text); background:transparent; }
.btn-ghost:hover{ border-color:var(--brass); color:var(--brass-bright); }
.btn-dark{ background:var(--bg-3); color:var(--text); border-color:var(--line); }
.btn-dark:hover{ background:var(--bg-4); }
.btn-sm{ padding:10px 16px; font-size:13px; }
.btn-block{ width:100%; }

/* ---------- Liens fléchés ---------- */
.arrow-link{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:13px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--text); transition:gap .25s, color .2s;
}
.arrow-link:hover{ gap:16px; color:var(--brass-bright); }
.arrow-link svg{ width:16px; height:16px; }

/* ---------- Badges / tags ---------- */
.tag{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
  padding:5px 9px; border-radius:var(--r); border:1px solid var(--line-strong);
  color:var(--text-dim); background:rgba(0,0,0,0.25);
}
.tag-cat{ color:var(--brass-bright); border-color:rgba(198,154,78,0.4); }
.tag-blaze{ color:var(--blaze); border-color:rgba(212,96,42,0.5); background:rgba(212,96,42,0.08); }
.tag-green{ color:var(--green); border-color:rgba(111,174,106,0.4); }
.tag-solid{ background:var(--brass); color:#1a140a; border-color:transparent; font-weight:500; }

/* divider */
.rule{ height:1px; background:var(--line); border:0; margin:0; }

/* ---------- Cartes produit ---------- */
.card{
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  overflow:hidden;
  transition:border-color .25s, transform .25s, background .25s;
  position:relative;
  display:flex; flex-direction:column;
}
.card:hover{ border-color:var(--line-strong); transform:translateY(-4px); }
.card-media{ position:relative; aspect-ratio:4/3; background:var(--bg-3); overflow:hidden; }
.card-media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.card:hover .card-media img{ transform:scale(1.05); }
.card-media .scrim{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,0.45)); }
.card-tags{ position:absolute; top:12px; left:12px; display:flex; gap:6px; flex-wrap:wrap; }
.card-body{ padding:18px 18px 20px; display:flex; flex-direction:column; gap:6px; flex:1; }
.card-brand{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-mute); }
.card-name{ font-family:var(--font-display); text-transform:uppercase; font-weight:600; font-size:20px; line-height:1.05; letter-spacing:0.005em; }
.card-foot{ margin-top:auto; padding-top:14px; display:flex; align-items:center; justify-content:space-between; }
.price{ font-family:var(--font-mono); font-size:18px; color:var(--text); font-weight:500; }
.price small{ color:var(--text-mute); font-size:12px; }

.iconbtn{
  width:42px;height:42px; display:grid; place-items:center;
  border:1px solid var(--line-strong); border-radius:var(--r); background:transparent; color:var(--text);
  transition:background .2s, color .2s, border-color .2s;
}
.iconbtn:hover{ background:var(--brass); color:#1a140a; border-color:transparent; }
.iconbtn svg{ width:18px; height:18px; }

/* ---------- Grilles ---------- */
.grid{ display:grid; gap:22px; }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
@media(max-width:1024px){ .grid-4{ grid-template-columns:repeat(2,1fr); } .grid-3{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:640px){ .grid-4,.grid-3,.grid-2{ grid-template-columns:1fr; } }

/* ---------- Utilitaires ---------- */
.stack{ display:flex; flex-direction:column; }
.row{ display:flex; align-items:center; }
.gap-8{ gap:8px; } .gap-12{ gap:12px; } .gap-16{ gap:16px; } .gap-24{ gap:24px; }
.hidden{ display:none !important; }
.fade-in{ animation:fadeUp .6s cubic-bezier(.2,.7,.2,1) both; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }

::selection{ background:var(--brass); color:#1a140a; }

/* scrollbar */
*::-webkit-scrollbar{ width:11px; height:11px; }
*::-webkit-scrollbar-track{ background:var(--bg); }
*::-webkit-scrollbar-thumb{ background:var(--bg-4); border-radius:10px; border:3px solid var(--bg); }
*::-webkit-scrollbar-thumb:hover{ background:var(--brass-deep); }