/* ==========================================================================
   PRIMEX — Catalogue Swiss Made
   Identité premium : Primex (émeraude & or) / Primex Militaire (thème tactique)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&family=Oswald:wght@500;600;700&display=swap');

:root{
  --ink:#0f1210;
  --cream:#faf6ec;
  --white:#ffffff;
  --gold:#c9a227;
  --gold-deep:#a9821c;
  --emerald:#173d31;
  --emerald-light:#20544484;
  --line:#e7e0cf;
  --line-dark:#ffffff22;
  --ink-soft:#57534a;

  /* thème militaire */
  --olive:#3d4327;
  --olive-2:#4b5320;
  --khaki:#c4b790;
  --blaze:#d9662b;
  --blaze-light:#f0985a;

  --shadow:0 4px 28px rgba(15,18,16,0.10);
  --shadow-hover:0 16px 42px rgba(15,18,16,0.16);
  --shadow-mil:0 6px 0 rgba(0,0,0,0.35);

  --serif:'Fraunces', serif;
  --sans:'Inter', sans-serif;
  --mono:'IBM Plex Mono', monospace;
  --tactical:'Oswald', sans-serif;

  --maxw:1220px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; font-family:var(--sans); background:var(--cream); color:var(--ink); -webkit-font-smoothing:antialiased;}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;}
a:focus-visible, button:focus-visible{outline:2px solid var(--gold); outline-offset:3px;}
@media (prefers-reduced-motion: reduce){*{animation:none !important; transition:none !important;}}

/* ---------------- Top bar ---------------- */
.top-bar{background:var(--ink); color:var(--khaki); text-align:center; font-family:var(--mono); font-size:11.5px; letter-spacing:0.05em; padding:9px 16px;}

/* ---------------- Header ---------------- */
.site-header{position:sticky; top:0; z-index:50; background:var(--cream); border-bottom:1px solid var(--line);}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; height:84px;}
.brand{font-family:var(--serif); font-size:25px; font-weight:600; display:flex; align-items:center;}
.brand-logo{height:52px; width:auto; display:block;}
.brand-logo-mil{height:44px;}
.brand small{display:block; font-family:var(--mono); font-weight:400; font-size:9.5px; letter-spacing:0.2em; color:var(--gold-deep); margin-top:3px;}
.nav-links{display:flex; gap:36px; align-items:center;}
.nav-links a{font-size:13.5px; font-weight:500; padding:8px 0; border-bottom:2px solid transparent;}
.nav-links a:hover{border-bottom-color:var(--gold);}
.nav-links a.active{color:var(--gold-deep); border-bottom-color:var(--gold);}

/* ---------------- Footer ---------------- */
.site-footer{background:var(--ink); color:#cfc9ba; padding:60px 0 28px; margin-top:0;}
.site-footer .wrap{display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap;}
.site-footer h4{font-family:var(--mono); font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--gold); margin:0 0 14px;}
.site-footer p, .site-footer a{font-size:13.5px; line-height:1.7; opacity:0.85;}
.site-footer .col{min-width:180px;}
.footer-bottom{max-width:var(--maxw); margin:36px auto 0; padding:20px 32px 0; border-top:1px solid var(--line-dark); font-family:var(--mono); font-size:11px; opacity:0.6;}

/* ==========================================================================
   HOME — cinématique, storytelling de marque
   ========================================================================== */
.hero{
  position:relative; overflow:hidden; background:var(--ink); color:var(--cream);
  padding:130px 0 110px; text-align:center;
}
.hero::before{
  content:''; position:absolute; inset:0; opacity:0.35; pointer-events:none;
  background-image:
    radial-gradient(1px 1px at 20% 30%, var(--gold) 0, transparent 60%),
    radial-gradient(1px 1px at 80% 20%, var(--gold) 0, transparent 60%),
    radial-gradient(1px 1px at 60% 70%, var(--gold) 0, transparent 60%),
    radial-gradient(1px 1px at 30% 85%, var(--gold) 0, transparent 60%),
    radial-gradient(1000px 500px at 50% -20%, var(--emerald) 0%, transparent 60%);
}
.hero-content{position:relative; z-index:2;}
.hero .eyebrow{font-family:var(--mono); font-size:11.5px; letter-spacing:0.28em; text-transform:uppercase; color:var(--gold);}
.hero h1{font-family:var(--serif); font-size:58px; font-weight:500; line-height:1.06; margin:20px auto 20px; max-width:720px;}
.hero p{max-width:540px; margin:0 auto 36px; font-size:16.5px; line-height:1.75; opacity:0.78;}
.hero-ctas{display:flex; gap:16px; justify-content:center; flex-wrap:wrap;}
.btn{display:inline-flex; align-items:center; gap:8px; padding:15px 30px; font-size:12.5px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;}
.btn-primary{background:var(--gold); color:var(--ink);}
.btn-primary:hover{background:var(--cream);}
.btn-outline{border:1px solid var(--khaki); color:var(--cream);}
.btn-outline:hover{background:var(--cream); color:var(--ink); border-color:var(--cream);}

/* Univers : deux mondes distincts */
.universes{display:grid; grid-template-columns:1fr 1fr;}
.universe{
  position:relative; min-height:480px; display:flex; align-items:flex-end; overflow:hidden;
}
.universe img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.universe .u-icon{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;}
.universe .u-icon svg{width:38%;}

.u-primex{background:linear-gradient(160deg, var(--emerald) 0%, #0f2a21 100%);}
.u-militaire{
  background:
    repeating-linear-gradient(115deg, transparent 0 22px, rgba(0,0,0,0.12) 22px 44px),
    linear-gradient(160deg, var(--olive-2) 0%, #262c14 100%);
}
.u-overlay{position:relative; z-index:2; width:100%; padding:44px 44px 40px; background:linear-gradient(0deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 100%);}
.u-eyebrow{font-family:var(--mono); font-size:10.5px; letter-spacing:0.2em; text-transform:uppercase; color:var(--khaki);}
.u-primex .u-eyebrow{color:var(--gold);}
.u-title{font-family:var(--serif); font-size:34px; font-weight:500; color:var(--cream); margin:8px 0 6px;}
.u-militaire .u-title{font-family:var(--tactical); font-weight:600; text-transform:uppercase; letter-spacing:0.01em; font-size:30px;}
.u-desc{font-size:13.5px; color:#e8e3d5; opacity:0.85; max-width:340px; line-height:1.6; margin-bottom:14px;}
.u-cta{
  display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase;
  color:var(--cream); border-bottom:1px solid var(--gold);
}
.u-militaire .u-cta{border-bottom-color:var(--blaze);}
.universe:hover .u-title{text-decoration:none;}
.universe{transition:filter 0.3s;}
.universe:hover{filter:brightness(1.08);}

.trust-row{background:var(--cream); border-bottom:1px solid var(--line); padding:38px 0; display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
.trust-item{text-align:center; font-size:12.5px; color:var(--ink-soft);}
.trust-item strong{display:block; font-family:var(--serif); font-size:16.5px; color:var(--ink); font-weight:500; margin-bottom:5px;}

.brand-story{padding:110px 0; text-align:center; background:var(--cream);}
.brand-story .kicker{font-family:var(--mono); font-size:11px; letter-spacing:0.22em; color:var(--gold-deep); text-transform:uppercase;}
.brand-story h2{font-family:var(--serif); font-size:34px; font-weight:500; max-width:660px; margin:18px auto 20px; line-height:1.22;}
.brand-story p{max-width:600px; margin:0 auto; font-size:15.5px; line-height:1.8; color:var(--ink-soft);}

/* ==========================================================================
   CATEGORY PAGES — Primex (émeraude/or)
   ========================================================================== */
.page-hero{padding:64px 0 38px; text-align:center;}
.page-hero .kicker{font-family:var(--mono); font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold-deep);}
.page-hero h1{font-family:var(--serif); font-size:42px; font-weight:500; margin:14px 0 12px;}
.page-hero p{max-width:560px; margin:0 auto; font-size:15px; line-height:1.75; color:var(--ink-soft);}

.filters{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; padding:26px 0 8px;}
.filter-btn{padding:9px 18px; border:1px solid var(--line); background:var(--white); font-size:12.5px; font-weight:500; color:var(--ink-soft); border-radius:2px;}
.filter-btn.active, .filter-btn:hover{background:var(--emerald); color:var(--cream); border-color:var(--emerald);}

.grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:26px; margin:40px 0 120px;}
.card{background:var(--white); border:1px solid var(--line); overflow:hidden; display:flex; flex-direction:column; transition:box-shadow 0.25s, transform 0.25s;}
.card:hover{box-shadow:var(--shadow-hover); transform:translateY(-3px);}
.card-frame{aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; padding:26px; position:relative; background:linear-gradient(160deg, #fbfaf5 0%, #f1ede1 100%);}
.card-tag{position:absolute; top:14px; left:14px; font-family:var(--mono); font-size:9.5px; letter-spacing:0.07em; text-transform:uppercase; padding:5px 10px; background:var(--emerald); color:var(--gold);}
.card-tag.militaire{background:var(--olive); color:var(--blaze-light); font-family:var(--tactical); font-weight:600;}
.card-frame svg{width:76%; height:76%;}
.card-frame img{width:100%; height:100%; object-fit:contain;}
.card-body{padding:18px 20px 20px; display:flex; flex-direction:column; flex:1; border-top:1px solid var(--line);}
.card-ref{font-family:var(--mono); font-size:10px; letter-spacing:0.08em; color:var(--gold-deep); text-transform:uppercase;}
.card-name{font-family:var(--serif); font-size:17.5px; font-weight:500; margin:7px 0 7px; line-height:1.3;}
.card-desc{font-size:12.5px; line-height:1.55; color:var(--ink-soft); flex:1; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.card-foot{display:flex; justify-content:space-between; align-items:center; margin-top:16px; padding-top:14px; border-top:1px solid var(--line);}
.card-price{font-family:var(--mono); font-size:13.5px; font-weight:500;}
.card-link{font-size:11.5px; font-weight:700; letter-spacing:0.03em; text-transform:uppercase; color:var(--emerald); border-bottom:1px solid var(--gold);}

/* ---------------- Thème militaire pour la page Primex Militaire ---------------- */
body.page-militaire{background:#1b1d13; color:#eae6d6;}
body.page-militaire .site-header{background:#1b1d13; border-bottom:1px solid var(--line-dark);}
body.page-militaire .brand small{color:var(--blaze-light);}
body.page-militaire .nav-links a:hover{border-bottom-color:var(--blaze);}
body.page-militaire .nav-links a.active{color:var(--blaze-light); border-bottom-color:var(--blaze);}
body.page-militaire .page-hero .kicker{color:var(--blaze-light);}
body.page-militaire .page-hero p{color:#c9c4b0;}
body.page-militaire .filter-btn{background:#262917; border-color:#3a3d26; color:#c9c4b0;}
body.page-militaire .filter-btn.active, body.page-militaire .filter-btn:hover{background:var(--blaze); color:#1b1d13; border-color:var(--blaze);}
body.page-militaire .card{background:#22250f; border:1px solid #3a3d26; border-radius:0;}
body.page-militaire .card-frame{background:repeating-linear-gradient(120deg, #262917 0 18px, #2c3018 18px 36px);}
body.page-militaire .card-body{border-top:1px solid #3a3d26;}
body.page-militaire .card-ref{color:var(--blaze-light);}
body.page-militaire .card-name{font-family:var(--tactical); font-weight:600; text-transform:uppercase; font-size:16px; letter-spacing:0.01em;}
body.page-militaire .card-desc{color:#b4af9d;}
body.page-militaire .card-foot{border-top-color:#3a3d26;}
body.page-militaire .card-link{color:var(--blaze-light); border-bottom-color:var(--blaze);}
.card-index{font-family:var(--mono); font-size:11px; opacity:0.55; position:absolute; top:14px; right:14px; letter-spacing:0.05em;}
body.page-militaire .site-footer{background:#14160c;}

/* ==========================================================================
   PRODUCT MODAL
   ========================================================================== */
.modal-backdrop{position:fixed; inset:0; background:#0f1210cc; z-index:100; display:none; align-items:center; justify-content:center; padding:24px;}
.modal-backdrop.open{display:flex;}
.modal{background:var(--white); color:var(--ink); max-width:820px; width:100%; max-height:88vh; overflow:auto; display:grid; grid-template-columns:1fr 1fr;}
.modal.militaire{background:#22250f; color:#eae6d6;}
.modal-media{background:linear-gradient(160deg, #fbfaf5 0%, #f1ede1 100%); display:flex; align-items:center; justify-content:center; padding:44px;}
.modal.militaire .modal-media{background:repeating-linear-gradient(120deg, #262917 0 18px, #2c3018 18px 36px);}
.modal-media svg{width:64%;}
.modal-media img{width:82%; object-fit:contain;}
.modal-body{padding:44px 38px; position:relative;}
.modal-close{position:absolute; top:16px; right:16px; background:none; border:none; font-size:22px; line-height:1; color:inherit; opacity:0.6;}
.modal-close:hover{opacity:1;}
.modal-tag{display:inline-block; font-family:var(--mono); font-size:10px; letter-spacing:0.07em; text-transform:uppercase; padding:5px 11px; background:var(--emerald); color:var(--gold); margin-bottom:12px;}
.modal-tag.militaire{background:var(--olive); color:var(--blaze-light); font-family:var(--tactical); font-weight:600;}
.modal-ref{font-family:var(--mono); font-size:11px; letter-spacing:0.08em; color:var(--gold-deep);}
.modal.militaire .modal-ref{color:var(--blaze-light);}
.modal-title{font-family:var(--serif); font-size:26px; margin:8px 0 14px; line-height:1.25;}
.modal.militaire .modal-title{font-family:var(--tactical); font-weight:600; text-transform:uppercase; font-size:22px;}
.modal-desc{font-size:13.5px; line-height:1.7; opacity:0.78; margin-bottom:22px;}
.spec-table{width:100%; border-collapse:collapse; font-family:var(--mono); font-size:12px;}
.spec-table tr{border-top:1px solid var(--line);}
.modal.militaire .spec-table tr{border-top-color:#3a3d26;}
.spec-table td{padding:9px 0; opacity:0.8;}
.spec-table td:first-child{width:42%; opacity:0.5;}
.modal-cta{display:inline-flex; margin-top:24px; padding:14px 26px; border:1px solid var(--ink); font-size:12.5px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase;}
.modal-cta:hover{background:var(--emerald); border-color:var(--emerald); color:var(--cream);}
.modal.militaire .modal-cta{border-color:var(--khaki);}
.modal.militaire .modal-cta:hover{background:var(--blaze); border-color:var(--blaze); color:#1b1d13;}

/* ==========================================================================
   CONTACT PAGE
   ========================================================================== */
.contact-hero{padding:74px 0 38px; text-align:center;}
.contact-hero h1{font-family:var(--serif); font-size:40px; font-weight:500;}
.contact-hero p{max-width:520px; margin:14px auto 0; font-size:15px; color:var(--ink-soft); line-height:1.75;}
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px; padding:16px 0 120px;}
.contact-card{border:1px solid var(--line); padding:36px; background:var(--white);}
.contact-card h3{font-family:var(--serif); font-size:20px; margin:0 0 10px;}
.contact-card p{font-size:14px; line-height:1.75; color:var(--ink-soft); margin-bottom:16px;}
.contact-card a.contact-btn{display:inline-block; font-size:12.5px; font-weight:700; letter-spacing:0.02em; text-transform:uppercase; color:var(--emerald); border-bottom:1px solid var(--gold);}

/* ---------------- responsive ---------------- */
@media (max-width: 980px){ .grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width: 880px){
  .nav-links{display:none;}
  .universes{grid-template-columns:1fr;}
  .trust-row{grid-template-columns:repeat(2,1fr);}
  .contact-grid{grid-template-columns:1fr;}
  .modal{grid-template-columns:1fr;}
  .hero h1{font-size:38px;}
}
@media (max-width: 560px){ .grid{grid-template-columns:1fr;} }