:root{
  --ink:#060F1E;
  --bg:#0A1830;
  --bg2:#0C1E3B;
  --panel:#102547;
  --panel2:#16305C;
  --line:rgba(140,180,235,.16);
  --line-strong:rgba(140,180,235,.30);
  --text:#EDF3FB;
  --muted:#8FA5C6;
  --blue:#2E7DE0;
  --blue-soft:rgba(46,125,224,.15);
  --orange:#F26522;
  --orange-soft:rgba(242,101,34,.14);
  --maxw:1180px;
  --r:14px;
  /* le tracé d'un terrain de handball : sert au motif de fond et aux filets */
  --chalk:rgba(190,214,246,.07);
  --chalk-strong:rgba(190,214,246,.16);
  --halo:0 0 0 3px rgba(46,125,224,.45);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-height,112px) + 16px)}
body{
  padding-top:var(--nav-height,112px);
  background:var(--ink);
  color:var(--text);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px}
section{position:relative}
::selection{background:var(--orange);color:#fff}
:focus-visible{outline:none;box-shadow:var(--halo);border-radius:6px}

/* ---------- Typo helpers ---------- */
.display{
  font-family:'Anton',Impact,sans-serif;font-weight:400;
  letter-spacing:.5px;line-height:.93;text-transform:uppercase;
  text-wrap:balance;
}
.num-t{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.kicker{
  font-family:'Oswald',sans-serif;font-weight:600;
  text-transform:uppercase;letter-spacing:.3em;font-size:.74rem;
  color:var(--blue);display:flex;align-items:center;gap:12px;
}
.kicker::before{content:"";width:26px;height:2px;background:var(--orange);flex:none}
.kicker.o{color:var(--orange)}
.kicker.o::before{background:var(--blue)}
.h-sec{font-size:clamp(2.1rem,5.2vw,3.5rem);margin:14px 0 18px}
.lead{color:var(--muted);font-size:1.06rem;max-width:60ch}
.head-o{font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.05em}

/* ================= NAV ================= */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:80;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 20px;
  padding:10px 26px;
  background:rgba(6,15,30,.97);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);
  transition:background .3s,border-color .3s,padding .3s;
}
.nav.scrolled{background:rgba(6,15,30,.92);backdrop-filter:blur(14px);border-bottom-color:var(--line);padding:10px 26px}
/* progression de lecture */
.nav::after{
  content:"";position:absolute;left:0;bottom:-1px;height:2px;
  width:100%;transform:scaleX(var(--progress,0));transform-origin:left;
  background:linear-gradient(90deg,var(--blue),var(--orange));
  opacity:0;transition:opacity .3s;
}
.nav.scrolled::after{opacity:1}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:42px;height:42px;border-radius:50%;background:#fff;padding:2px;flex:none;transition:transform .4s var(--ease-out)}
.brand:hover img{transform:rotate(-8deg) scale(1.06)}
.brand b{font-family:'Oswald',sans-serif;font-weight:600;letter-spacing:.16em;text-transform:uppercase;font-size:.95rem;color:#fff;line-height:1.15}
.brand span{display:block;font-family:'Inter',sans-serif;font-weight:500;font-size:.62rem;letter-spacing:.22em;color:var(--blue);text-transform:uppercase}
.nav-links{display:flex;order:2;flex:0 0 100%;min-width:0;gap:24px;align-items:center;
  overflow-x:auto;overflow-y:hidden;padding:5px 2px 9px;border-top:1px solid var(--line);
  overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:var(--orange) transparent}
.nav-links::-webkit-scrollbar{height:3px}
.nav-links::-webkit-scrollbar-thumb{background:var(--orange);border-radius:3px}
.nav-links a{flex:none}
.nav-links a:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:2px}
.nav-links a{
  font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.1em;
  font-size:.92rem;color:#DCE7F7;transition:color .2s;position:relative;padding:4px 0;
  white-space:nowrap;
}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--orange);transition:right .25s}
.nav-links a:hover::after,.nav-links a.active::after{right:0}
.nav-links a.active{color:#fff}
.nav-cta{
  font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.1em;font-size:.9rem;
  padding:10px 22px;background:var(--orange);border-radius:100px;color:#fff;
  transition:transform .2s,box-shadow .2s;white-space:nowrap;
}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(242,101,34,.35)}
/* Rubriques visibles en permanence ; défilement horizontal sur petit écran. */
.nav-links > .nav-cta{display:none}
@media(min-width:1181px){.nav-links{justify-content:center}}
@media(max-width:600px){
  .nav,.nav.scrolled{padding:8px 12px;gap:4px 10px}
  .brand{gap:8px}
  .brand img{width:34px;height:34px}
  .brand b{font-size:.78rem;letter-spacing:.1em}
  .brand span{font-size:.5rem;letter-spacing:.12em}
  .nav>.nav-cta{font-size:.73rem;padding:8px 12px;letter-spacing:.05em}
  .nav-links{gap:20px;padding-top:7px}
  .nav-links a{font-size:.85rem;padding:6px 0}
}

/* ================= BOUTIQUE ================= */
.boutique{background:var(--bg);padding:104px 0}
.shop-filters{display:flex;flex-wrap:wrap;gap:10px;margin-top:40px}
.sf{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.1em;font-size:.82rem;padding:9px 18px;border-radius:100px;background:transparent;border:1px solid var(--line-strong);color:#DCE7F7;cursor:pointer;transition:background .25s,border-color .25s,color .25s}
.sf:hover{border-color:#fff}
.sf.is-on{background:var(--orange);border-color:var(--orange);color:#fff}
.shop{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin-top:8px}
.fiche{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform .4s var(--ease-out),border-color .3s,box-shadow .4s var(--ease-out)}
.fiche:hover{transform:translateY(-5px);border-color:var(--line-strong);box-shadow:0 20px 44px rgba(0,0,0,.34)}
.fiche-img{all:unset;display:block;cursor:pointer;background:var(--ink);border-bottom:1px solid var(--line)}
.fiche-img img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:contain}
.fiche-img:focus-visible{box-shadow:var(--halo)}
.fiche-body{padding:20px 20px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.fiche-body h3{font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:1.04rem;line-height:1.3;text-wrap:pretty}
.fiche-body p{color:var(--muted);font-size:.9rem;flex:1;text-wrap:pretty}
.fiche-meta{font-size:.74rem;color:#8FC0FF;letter-spacing:.08em;text-transform:uppercase;font-family:'Oswald',sans-serif}
.fiche-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;flex-wrap:wrap}
.fiche-foot .soon{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.08em;font-size:.82rem;color:#DCE7F7}
.fiche-foot .btn{padding:10px 16px;font-size:.8rem}
.price{font-family:'Anton',sans-serif;font-size:1.6rem;color:#fff;font-variant-numeric:tabular-nums}
.cl-search{display:block;max-width:560px;margin-top:44px}
.cl-search span{display:block;font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.1em;font-size:.8rem;color:#DCE7F7;margin-bottom:8px}
.cl-search input{width:100%;padding:14px 18px;background:var(--panel);border:1px solid var(--line-strong);border-radius:10px;color:#fff;font:inherit;font-size:1rem}
.cl-search input::placeholder{color:var(--muted)}
.cl-search input:focus{outline:none;border-color:var(--orange)}
#shopFilters{margin-top:20px}
.cl-count{margin:18px 0 18px;font-size:.86rem;color:var(--muted)}
.cl-empty{color:var(--muted);padding:30px 0}
.cl-more-wrap{display:flex;justify-content:center;margin-top:34px}
.cl-dialog{width:min(1040px,calc(100% - 28px));max-height:calc(100dvh - 28px);padding:0;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--bg2);color:var(--text);overflow:auto}
.cl-dialog::backdrop{background:rgba(3,8,18,.82);backdrop-filter:blur(4px)}
.cl-dhead{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 22px;background:rgba(12,30,59,.96);border-bottom:1px solid var(--line);font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.1em;font-size:.82rem;color:#DCE7F7}
.cl-close{background:none;border:1px solid var(--line-strong);border-radius:100px;color:#fff;font:inherit;padding:7px 14px;cursor:pointer}
.cl-close:hover{border-color:var(--orange)}
.cl-dbody{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:32px;padding:26px}
.cl-dbody img{width:100%;height:auto;border-radius:10px;display:block}
.cl-dbody h3{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.08;margin:10px 0 12px}
.cl-dsub{color:#fff;font-size:1.05rem;margin-bottom:12px}
.cl-ddesc{color:#CBD9EE;margin-bottom:22px}
.cl-dbody h4{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.1em;font-size:.86rem;color:var(--orange);margin-bottom:10px}
.cl-dbody ul{list-style:none;padding:0;margin:0 0 24px;display:flex;flex-direction:column;gap:8px}
.cl-dbody li{position:relative;padding-left:20px;color:#CBD9EE;font-size:.95rem}
.cl-dbody li::before{content:"";position:absolute;left:0;top:.7em;width:10px;height:2px;background:var(--orange)}
.cl-dbody .price{display:block;margin-bottom:14px;font-size:1.4rem}
.cl-disabled{background:rgba(255,255,255,.05);border-color:var(--line);color:var(--muted);cursor:not-allowed}
@media(max-width:1100px){.shop{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:820px){.shop{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.cl-dbody{grid-template-columns:1fr;padding:18px;gap:20px}.cl-dbody img{max-width:440px;margin:0 auto}}
@media(max-width:480px){.shop{grid-template-columns:1fr}}
.shop-note{margin-top:22px;font-size:.84rem;color:var(--muted)}


[hidden]{display:none!important}
button,input{font:inherit}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 22px;border:1px solid transparent;border-radius:100px;font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.08em;font-size:.9rem;cursor:pointer;text-align:center}
.btn-primary{background:var(--orange);color:#fff}
.btn-ghost{background:rgba(255,255,255,.05);border-color:var(--line-strong);color:#fff}
.btn:hover{border-color:#fff}
.catalogue-page{background:var(--bg);padding:40px 0 72px;min-height:75vh}
.catalogue-back{display:inline-block;color:#A7CFFF;font-size:.9rem;margin-bottom:28px}
.catalogue-back:hover{color:#fff;text-decoration:underline}
.category-links{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0 0}
.category-links a{padding:9px 15px;border:1px solid var(--line-strong);border-radius:100px;font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.06em;font-size:.84rem}
.category-links a[aria-current="page"]{background:var(--orange);border-color:var(--orange);color:#fff}
.catalogue-page .cl-search{margin-top:26px}
.cl-pagination{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:9px;margin-top:32px}
.cl-pagination button{min-width:42px;min-height:42px;padding:9px 14px;color:var(--text);background:var(--panel);border:1px solid var(--line-strong);border-radius:8px;cursor:pointer}
.cl-pagination button[aria-current="page"]{background:var(--orange);border-color:var(--orange)}
.cl-pagination button:disabled{opacity:.4;cursor:default}
.cl-pages{display:flex;gap:7px}
.catalogue-footer{padding:30px 26px;text-align:center;color:var(--muted);font-size:.82rem}
.catalogue-footer a{display:inline-block;margin-bottom:10px;color:#A7CFFF}
@media(max-width:540px){.wrap{padding:0 18px}.catalogue-page{padding-top:28px}.cl-pagination{gap:6px}.cl-pagination button{padding:8px 11px}.h-sec{font-size:2.2rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}