/* =========================================================================
   Primal — gabarit commun (direction « contrasté & sportif »)
   Aucune couleur de marque ici : tout passe par les variables définies
   dans assets/brand-<marque>.css. Un correctif ici profite aux 4 sites.
   ========================================================================= */

/* Couleurs de la famille : servent aux pastilles et à la section « family ».
   Elles sont identiques sur les 4 sites, c'est ce qui fait le lien visuel. */
:root{
  --c-archery:#00C6E2;
  --c-xbow:#FF7A1A;
  --c-shot:#6FD44A;
  --c-life:#D9A05B;
  --max:1340px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font-family:Inter,system-ui,sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 36px}
h1,h2,h3,h4{font-family:Archivo,Impact,sans-serif;font-weight:900;letter-spacing:-.03em;line-height:.94;text-transform:uppercase}
.eyebrow{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--acc);font-weight:800;font-family:Archivo,sans-serif}

/* ---------- barre de famille (le lien entre les 4 sites) ---------- */
.fambar{background:#08090b;border-bottom:1px solid var(--line);font-size:12px}
.fambar .wrap{display:flex;align-items:center;gap:26px;height:40px}
.fam-label{font-family:Archivo,sans-serif;font-weight:900;font-size:11px;letter-spacing:.3em;color:#7d8894}
.famnav{display:flex;gap:4px;list-style:none}
.famnav a{display:flex;align-items:center;gap:7px;padding:5px 12px;color:#8d97a1;font-weight:600;font-size:12.5px;border-radius:3px;transition:.18s}
.famnav a:hover{color:#eef1f4;background:rgba(255,255,255,.06)}
.famnav a i{width:7px;height:7px;border-radius:50%;background:var(--dot);flex:none}
.famnav a[aria-current="page"]{color:#eef1f4;background:rgba(255,255,255,.09)}
.famnav li:nth-child(1) a{--dot:var(--c-archery)}
.famnav li:nth-child(2) a{--dot:var(--c-xbow)}
.famnav li:nth-child(3) a{--dot:var(--c-shot)}
.famnav li:nth-child(4) a{--dot:var(--c-life)}
.fam-note{margin-left:auto;color:#818c98;letter-spacing:.05em}

/* ---------- en-tête ---------- */
header{position:sticky;top:0;z-index:60;background:color-mix(in srgb, var(--bg) 86%, transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;height:74px;gap:40px}
.brand{font-family:Archivo,sans-serif;font-weight:900;font-size:21px;letter-spacing:-.03em;text-transform:uppercase}
.brand span{color:var(--acc)}
.nav ul{display:flex;gap:28px;list-style:none;margin-left:auto;font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.nav ul a{color:var(--fg-dim)}
.nav ul a:hover{color:var(--acc)}

.btn{display:inline-block;padding:14px 28px;font-family:Archivo,sans-serif;font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;transition:.2s;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.btn-acc{background:var(--acc);color:var(--on-acc)}
.btn-acc:hover{background:var(--acc-d)}
.btn-out{border:2px solid var(--line);color:var(--fg)}
.btn-out:hover{border-color:var(--acc);color:var(--acc)}
.btn-dark{background:var(--bg);color:var(--acc)}
.btn-dark:hover{background:#000}

/* ---------- hero ---------- */
.hero{position:relative;min-height:88vh;display:flex;align-items:center;overflow:hidden;background:var(--bg-2)}
.hero-img{position:absolute;inset:0;clip-path:polygon(38% 0,100% 0,100% 100%,20% 100%)}
.hero-img img{width:100%;height:100%;object-fit:cover;object-position:var(--hero-pos,55% 55%);filter:saturate(.95) contrast(1.06) brightness(.78)}
.hero-img::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,var(--bg) 0%,color-mix(in srgb, var(--bg) 75%, transparent) 34%,transparent 72%)}
.hero-in{position:relative;z-index:2;padding:80px 0}
.hero h1{font-size:clamp(52px,8.8vw,132px);margin:16px 0 0}
.hero h1 span{display:block;color:var(--acc)}
.hero-in>p{max-width:440px;margin:26px 0 34px;color:var(--fg-soft);font-size:17.5px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.ticker{position:absolute;bottom:0;left:0;right:0;z-index:3;background:var(--acc);color:var(--on-acc);padding:11px 0;overflow:hidden;white-space:nowrap}
.ticker span{font-family:Archivo,sans-serif;font-weight:800;font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;padding:0 26px}

section{padding:100px 0}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:44px;margin-bottom:48px}
.sec-head h2{font-size:clamp(38px,5.6vw,76px)}
.sec-head p{max-width:38ch;color:var(--fg-dim)}

/* ---------- chiffres ---------- */
.stats{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.stat{background:var(--bg-2);padding:36px 30px}
.stat strong{display:block;font-family:Archivo,sans-serif;font-size:44px;font-weight:900;line-height:1;color:var(--acc);letter-spacing:-.04em}
.stat span{font-size:12px;color:var(--fg-dim);letter-spacing:.14em;text-transform:uppercase;font-weight:600}

/* ---------- gammes ---------- */
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.col{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--bg-3);clip-path:polygon(0 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%)}
.col img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) brightness(.62);transition:transform .65s cubic-bezier(.2,.7,.3,1),filter .4s}
.col:hover img{transform:scale(1.07);filter:saturate(1) brightness(.78)}
.col-txt{position:absolute;inset:auto 0 0 0;padding:28px}
.col-txt h3{font-size:30px}
.col-txt span{display:inline-block;font-family:Archivo,sans-serif;font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--on-acc);background:var(--acc);padding:4px 10px;margin-bottom:12px}

/* ---------- produit vedette ---------- */
.feat{display:grid;grid-template-columns:1fr 1fr;gap:0;background:var(--bg-2);border:1px solid var(--line)}
.feat-img{position:relative;min-height:560px}
.feat-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.9) brightness(.72)}
.feat-txt{padding:58px 54px}
.feat-txt h3{font-size:clamp(34px,4.4vw,58px);margin:14px 0 18px}
.feat-txt>p{color:var(--fg-dim);margin-bottom:32px;max-width:42ch}
.specs{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:34px}
.specs div{background:var(--bg-2);padding:18px 20px}
.specs dt{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-dim);font-weight:600;margin-bottom:5px}
.specs dd{font-family:Archivo,sans-serif;font-size:19px;font-weight:800;letter-spacing:-.02em}

/* ---------- revendeurs ---------- */
.dealers{background:var(--bg-2);border-top:1px solid var(--line)}
.dealer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.dealer{background:var(--bg);border:1px solid var(--line);padding:32px 26px;display:flex;flex-direction:column;min-height:212px;transition:.22s;clip-path:polygon(0 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%)}
.dealer:hover{border-color:var(--acc);background:var(--bg-3)}
.dealer h4{font-size:23px;margin-bottom:9px}
.dealer p{font-size:13.5px;color:var(--fg-dim);margin-bottom:auto;line-height:1.5}
.badge{display:inline-block;font-family:Archivo,sans-serif;font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--acc);border:1px solid var(--line);padding:4px 9px;margin-bottom:14px;align-self:flex-start}
.dealer .go{margin-top:20px;font-family:Archivo,sans-serif;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}

/* ---------- la famille Primal ---------- */
.family{background:var(--bg);border-top:1px solid var(--line);padding:100px 0}
.family .sec-head{margin-bottom:40px}
.fam-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.fam-card{position:relative;background:var(--bg-2);border:1px solid var(--line);padding:30px 26px 28px;display:flex;flex-direction:column;min-height:230px;transition:.24s;overflow:hidden}
.fam-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--dot)}
.fam-card:hover{border-color:var(--dot);transform:translateY(-3px)}
.fam-card[aria-current="page"]{background:var(--bg-3)}
.fam-card .universe{font-family:Archivo,sans-serif;font-size:10.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--dot);margin-bottom:14px}
.fam-card h3{font-size:24px;margin-bottom:10px}
.fam-card p{font-size:13.5px;color:var(--fg-dim);margin-bottom:auto;line-height:1.55}
.fam-card .go{margin-top:20px;font-family:Archivo,sans-serif;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--dot)}
.fam-card .here{margin-top:20px;font-family:Archivo,sans-serif;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-dim)}
.fam-grid>*:nth-child(1){--dot:var(--c-archery)}
.fam-grid>*:nth-child(2){--dot:var(--c-xbow)}
.fam-grid>*:nth-child(3){--dot:var(--c-shot)}
.fam-grid>*:nth-child(4){--dot:var(--c-life)}

/* ---------- appel revendeurs ---------- */
.cta{background:var(--acc);color:var(--on-acc)}
.cta-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:56px;align-items:center;padding:88px 0}
.cta h2{font-size:clamp(34px,5vw,68px)}
.cta p{max-width:46ch;margin-top:14px;color:var(--on-acc-soft);font-weight:400}
.cta .eyebrow{color:var(--on-acc-soft)}

/* ---------- pied ---------- */
footer{padding:62px 0 40px;font-size:14px;color:var(--fg-dim)}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:36px;border-bottom:1px solid var(--line)}
.foot-grid h5{color:var(--fg);font-family:Archivo,sans-serif;font-size:11px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:15px;font-weight:800}
.foot-grid ul{list-style:none}
.foot-grid li{margin-bottom:9px}
.foot-bot{padding-top:24px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13px}

@media(max-width:1100px){
  .fam-grid,.dealer-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:960px){
  .nav ul{display:none}
  .fambar .wrap{height:auto;padding-top:8px;padding-bottom:8px;flex-wrap:wrap;gap:10px}
  .fam-note{display:none}
  .hero-img{clip-path:none;opacity:.5}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .cols,.feat{grid-template-columns:1fr}
  .feat-img{min-height:320px}
  .feat-txt{padding:36px 26px}
  .cta-grid{grid-template-columns:1fr;gap:26px;padding:64px 0}
  .cta-act{text-align:left!important}
  .foot-grid{grid-template-columns:1fr 1fr}
  .wrap{padding:0 20px}
}
@media(max-width:620px){
  .fam-grid,.dealer-grid{grid-template-columns:1fr}
}

/* =========================================================================
   Catalogue naissant : presenter ce qui existe sans meubler.
   ========================================================================= */

/* Bandeau d'engagements — remplace les compteurs de references, qui
   n'ont pas de sens avec quatre produits. */
.engagements{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.eng-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.eng{background:var(--bg-2);padding:30px}
.eng strong{display:block;font-family:Archivo,sans-serif;font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:.02em;color:var(--acc);margin-bottom:7px}
.eng span{font-size:13.5px;color:var(--fg-dim);line-height:1.5}

/* Fiches de reference sans photo : la plupart des produits n'en ont pas
   encore, une carte texte vaut mieux qu'une image d'illustration. */
.refs{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.ref{background:var(--bg-2);border:1px solid var(--line);padding:30px 28px;display:flex;flex-direction:column;clip-path:polygon(0 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%)}
.ref .sku{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;color:var(--fg-dim);letter-spacing:.04em;margin-bottom:12px}
.ref h3{font-size:22px;margin-bottom:10px}
.ref p{font-size:14px;color:var(--fg-dim);line-height:1.55;margin-bottom:auto}
.ref dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin-top:18px;font-size:13.5px}
.ref dt{color:var(--fg-dim)}
.ref dd{font-weight:600;text-align:right}

/* Ce qui arrive : annonce assumee, visuellement en retrait pour qu'on ne
   confonde jamais avec le catalogue disponible. */
.soon{border:1px dashed var(--line);background:transparent;padding:28px 26px;display:flex;flex-direction:column;min-height:150px}
.soon .tag{display:inline-block;align-self:flex-start;font-family:Archivo,sans-serif;font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-dim);border:1px solid var(--line);padding:4px 9px;margin-bottom:14px}
.soon h3{font-size:20px;margin-bottom:8px;color:var(--fg-soft)}
.soon p{font-size:13.5px;color:var(--fg-dim);line-height:1.55}
.soon-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

/* Encart d'attente pour une marque dont le catalogue n'est pas encore ouvert */
.waiting{border:1px solid var(--line);background:var(--bg-2);padding:56px 48px;text-align:center}
.waiting h2{font-size:clamp(28px,3.6vw,44px);margin:14px 0 16px}
.waiting p{max-width:56ch;margin:0 auto 28px;color:var(--fg-dim)}

@media(max-width:960px){
  .eng-grid{grid-template-columns:repeat(2,1fr)}
  .refs,.soon-grid{grid-template-columns:1fr}
  .waiting{padding:40px 24px}
}

/* Chevron des liens « aller voir ». Dessiné en bordures plutôt qu'avec le
   caractère → : ni Archivo ni Inter ne le possèdent, il aurait été pris
   dans une police de repli et détonné à côté du texte. */
.go{display:inline-flex;align-items:center;gap:9px}
.go::after{
  content:"";
  width:6px;height:6px;
  border-top:2px solid currentColor;
  border-right:2px solid currentColor;
  transform:rotate(45deg);
  transition:transform .18s ease;
}
.dealer:hover .go::after,.fam-card:hover .go::after{transform:rotate(45deg) translate(2px,-2px)}