:root{color-scheme:light;--ink:#102243;--blue:#1559ae;--muted:#607087;--line:#dce5ef;--soft:#f2f6fb;--orange:#e9a665}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#f8fafc;color:var(--ink);font:16px/1.6 'DM Sans',Arial,sans-serif}
a{color:var(--blue)}a:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.topbar{background:#071d3d;color:#fff;padding:13px max(20px,calc((100vw - 1160px)/2));display:flex;align-items:center;justify-content:space-between;gap:14px}
.topbar a{color:#fff;text-decoration:none}.brand{flex-shrink:0}.brand img{display:block;width:auto;height:28px}.topbar a:last-child{font-size:.9rem;font-weight:700}
main{max-width:1160px;margin:auto;padding:24px 22px 80px}.crumbs{font-size:.85rem;color:#66768d;margin:0 0 22px}.crumbs a{color:inherit;text-decoration:none}.crumbs a:hover{text-decoration:underline}
.hero{position:relative;overflow:hidden;background:#09254c;color:white;border-radius:22px;padding:clamp(30px,5vw,60px);margin-bottom:24px;box-shadow:0 20px 45px #09254c18}
.hero:after{content:"";position:absolute;width:380px;height:380px;right:-120px;top:-140px;border:1px solid #ffffff30;border-radius:50%;box-shadow:0 0 0 65px #ffffff08,0 0 0 130px #ffffff05;pointer-events:none}
.hero>*{position:relative;z-index:1}.eyebrow{color:#b5d4f5;font-size:.75rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
h1,h2,h3{font-family:Manrope,'DM Sans',sans-serif;letter-spacing:-.035em}h1{font-size:clamp(2.05rem,4.7vw,3.7rem);line-height:1.12;margin:14px 0 14px;max-width:750px}h2{font-size:1.4rem;line-height:1.3;margin:0 0 17px}h3{font-size:1rem;margin:18px 0 7px}
.hero p{font-size:1.06rem;max-width:660px;color:#dfebfa;margin:0}.hero .cta{display:inline-flex;width:auto;margin:25px 0 0;background:#fff;color:#0a315e;box-shadow:none}
.hero-meta{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}.hero-meta span{border:1px solid #ffffff44;border-radius:100px;padding:6px 13px;color:#f4f8ff;font-size:.83rem;font-weight:700}
.layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(285px,.9fr);gap:23px;align-items:start}.card{background:#fff;border:1px solid var(--line);border-radius:17px;padding:clamp(22px,3vw,34px);margin-bottom:22px;box-shadow:0 8px 25px #10224308}
p{margin:0 0 15px}p:last-child{margin-bottom:0}.lede{font-size:1.08rem;line-height:1.75;color:#334760}.note{background:#f3f7fb;padding:15px 18px;border-radius:10px;color:#49617c;font-size:.9rem}.note strong{color:var(--ink)}
.verdict{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin:20px 0}.verdict div{border:1px solid var(--line);border-radius:12px;padding:17px;background:#fcfdff}.verdict span{display:block;color:var(--muted);font-size:.75rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;margin-bottom:6px}.verdict strong{line-height:1.35}
.scores{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px 20px;margin:22px 0}.score{display:grid;grid-template-columns:1fr auto;gap:7px 12px;align-items:baseline;font-size:.9rem;font-weight:700}.score strong{color:var(--blue);font-size:.88rem}.score:after{content:"";grid-column:1/-1;display:block;height:7px;border-radius:10px;background:linear-gradient(to right,#246fca var(--score),#e9eef4 var(--score));}
.specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;margin:0}.specs div{border-bottom:1px solid var(--line);padding:12px 0}.specs dt{font-size:.77rem;color:var(--muted)}.specs dd{margin:2px 0 0;font-weight:800;font-size:.94rem}
ul{padding-left:21px;margin:8px 0}li{margin:7px 0}.cta{display:flex;justify-content:center;align-items:center;text-align:center;background:#1559ae;color:#fff;text-decoration:none;font-weight:800;border-radius:10px;padding:14px 18px;margin:18px 0 12px;transition:background .2s,transform .2s}.cta:hover{background:#0a4086;transform:translateY(-1px)}small,.muted{color:var(--muted);font-size:.8rem}
.catalogue-toolbar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:22px}.catalogue-toolbar p{color:var(--muted);margin:0}.catalogue-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.model-tile{display:block;background:#fff;border:1px solid var(--line);border-radius:14px;padding:19px;text-decoration:none;color:var(--ink);transition:border .2s,transform .2s,box-shadow .2s}.model-tile:hover{border-color:#83ade0;transform:translateY(-2px);box-shadow:0 9px 20px #10224312}.model-tile .tile-brand{display:block;color:#687b92;text-transform:uppercase;font-size:.72rem;letter-spacing:.09em;font-weight:800}.model-tile strong{display:block;font:800 1.08rem Manrope,sans-serif;line-height:1.3;margin:7px 0 15px}.model-tile .tile-meta{display:block;color:#5e7088;font-size:.8rem}.model-tile .tile-link{display:block;color:var(--blue);font-size:.8rem;font-weight:800;margin-top:15px}
.product-photo{margin:0 0 22px;padding:14px;background:#fff;border:1px solid var(--line);border-radius:17px;text-align:center}.product-photo img{display:block;width:100%;height:250px;object-fit:contain}.product-photo figcaption{font-size:.76rem;color:var(--muted);margin:8px 0 2px}.tile-photo{display:flex;align-items:center;justify-content:center;background:#f8fafc;border-radius:10px;height:150px;margin:-5px -5px 17px}.tile-photo img{max-width:100%;width:100%;height:140px;object-fit:contain;mix-blend-mode:multiply}.tile-photo{position:relative}.tile-credit{position:absolute;right:6px;bottom:6px;font-size:.66rem;font-weight:600;color:var(--muted);background:rgba(255,255,255,.85);padding:1px 6px;border-radius:6px}
footer{border-top:1px solid var(--line);padding:27px 20px;text-align:center;color:var(--muted);font-size:.85rem}
@media(max-width:850px){.layout{grid-template-columns:1fr}.catalogue-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:570px){main{padding:18px 15px 55px}.topbar{padding:13px 16px}.hero{border-radius:15px;padding:30px 23px}.card{padding:22px}.catalogue-grid,.verdict{grid-template-columns:1fr}.scores{gap:13px}.hero:after{right:-260px}}
/* Fiches détaillées Rugby / Foot (scripts/fiches_detaillees.json) */
.proscons{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.proscons>div{border-radius:13px;padding:17px 19px}
.pros{background:#eef8f1;border:1px solid #cde8d5}
.cons{background:#fff6ec;border:1px solid #f2dcc1}
.proscons h3{margin:0 0 8px;font-size:.98rem}
.proscons ul{list-style:none;padding:0;margin:0}
.proscons li{position:relative;padding-left:22px;margin:9px 0;font-size:.94rem;line-height:1.45}
.proscons li:before{position:absolute;left:0;top:0;font-weight:800}
.pros li:before{content:"+";color:#1f8a4c}
.cons li:before{content:"–";color:#c46a12}
.profile{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:20px 0 0}
.profile div{background:var(--soft);border-radius:11px;padding:12px 15px}
.profile dt{color:var(--muted);font-size:.72rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase}
.profile dd{margin:3px 0 0;font-weight:800;font-size:.93rem;line-height:1.35}
.tech{width:100%;border-collapse:collapse;font-size:.93rem}
.tech th,.tech td{text-align:left;vertical-align:top;padding:12px 0;border-bottom:1px solid var(--line);line-height:1.5}
.tech th{width:30%;padding-right:16px;color:var(--muted);font-weight:700}
.faq details{border-bottom:1px solid var(--line);padding:14px 0}
.faq details:first-of-type{border-top:1px solid var(--line)}
.faq summary{cursor:pointer;font-weight:800;line-height:1.4}
.faq details p{margin:10px 0 0;color:#334760}
@media(max-width:570px){.proscons{grid-template-columns:1fr}.tech th{width:36%}}
.hero-split{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.95fr);gap:30px;align-items:center}
.hero-fig{margin:0;background:#fff;border-radius:16px;padding:10px;text-align:center}
.hero-fig img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px}
.hero-fig figcaption{font-size:.72rem;color:var(--muted);margin:7px 0 1px}
@media(max-width:850px){.hero-split{grid-template-columns:1fr;gap:22px}}
/* ===== Fiches et catalogues façon boutique.mybestpair.fr =====
   Grands titres en majuscules étroites, sections numérotées séparées par des filets (sans cadres),
   monogramme en filigrane et en tampon, notes dont les barres se remplissent (classe ajoutée par ambiance.js),
   catalogue en grille de grandes vignettes. */
.crumbs{font:700 11px Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase}
.eyebrow{font:700 11px Arial,sans-serif;letter-spacing:.2em}
.hero{border-radius:24px}
.hero:after{width:min(72%,560px);height:auto;aspect-ratio:343/160;right:-50px;top:auto;bottom:-24px;border:0;border-radius:0;box-shadow:none;background:#fff;opacity:.07;transform:rotate(-8deg);-webkit-mask:url(images/horloge/monogramme.webp) center/contain no-repeat;mask:url(images/horloge/monogramme.webp) center/contain no-repeat}
.hero h1{font-size:clamp(2.9rem,8vw,5.6rem);line-height:.88;max-width:13ch}
.hero .cta{border-radius:999px}
.hero-meta span{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase}
.hero-fig{position:relative;border-radius:20px;overflow:hidden}
.hero-fig img{transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.hero-fig:hover img{transform:scale(1.05)}
.hero-fig:after{content:"";position:absolute;right:18px;top:18px;width:70px;aspect-ratio:343/160;background:#09254c;opacity:0;transform:translateY(10px) rotate(-10deg);-webkit-mask:url(images/horloge/monogramme.webp) center/contain no-repeat;mask:url(images/horloge/monogramme.webp) center/contain no-repeat;animation:fiche-stamp .9s cubic-bezier(.16,1,.3,1) 1s forwards}
@keyframes fiche-stamp{to{opacity:.85;transform:rotate(-6deg)}}
/* Sections de la fiche : filets fins et numéros, plus de cadres */
.layout>div{counter-reset:fiche}
.layout>div>.card{counter-increment:fiche;background:none;border:0;border-top:1px solid #c6d2e2;border-radius:0;box-shadow:none;padding:30px 0 36px;margin:0}
.layout>div>.card>h2{font-family:"Archivo","Arial Narrow",Arial,sans-serif;font-weight:900;font-variation-settings:"wdth" 64;font-stretch:64%;text-transform:uppercase;letter-spacing:0;font-size:clamp(2.2rem,5vw,3.3rem);line-height:.9;margin:0 0 22px}
.layout>div>.card>h2:before{content:counter(fiche,decimal-leading-zero);display:block;margin-bottom:10px;font:700 11px Arial,sans-serif;letter-spacing:.2em;color:var(--blue)}
aside .card>h2{font-family:"Archivo","Arial Narrow",Arial,sans-serif;font-weight:900;font-variation-settings:"wdth" 64;font-stretch:64%;text-transform:uppercase;letter-spacing:0;font-size:2rem;line-height:.92}
aside .card:has(.cta){background:#09254c;border-color:#09254c;color:#fff}
aside .card:has(.cta) small{color:#b9cbe4}
aside .card:has(.cta) .cta{background:#fff;color:#0a315e;border-radius:999px}
/* Notes : chiffres en gros, barres qui se remplissent quand elles arrivent à l'écran */
.score strong{font-family:"Archivo","Arial Narrow",Arial,sans-serif;font-weight:900;font-variation-settings:"wdth" 64;font-stretch:64%;font-size:1.3rem;color:#09254c}
.score:after{height:8px;border-radius:0;background:linear-gradient(#1559ae,#1559ae) 0 0/var(--score) 100% no-repeat,#e3e9f1;transition:background-size 1.4s cubic-bezier(.16,1,.3,1)}
html.amb-on .scores:not(.amb-fill) .score:after{background-size:0 100%,auto}
.scores .score:nth-child(2):after{transition-delay:.07s}.scores .score:nth-child(3):after{transition-delay:.14s}.scores .score:nth-child(4):after{transition-delay:.21s}.scores .score:nth-child(5):after{transition-delay:.28s}.scores .score:nth-child(6):after{transition-delay:.35s}.scores .score:nth-child(7):after{transition-delay:.42s}.scores .score:nth-child(8):after{transition-delay:.49s}
/* Catalogue : grandes vignettes, la chaussure bouge et le tampon MBP apparaît au survol */
.catalogue-toolbar h2{font-family:"Archivo","Arial Narrow",Arial,sans-serif;font-weight:900;font-variation-settings:"wdth" 64;font-stretch:64%;text-transform:uppercase;letter-spacing:0;font-size:clamp(2.2rem,5vw,3.5rem);line-height:.9;margin:0}
.catalogue-grid{gap:36px 18px}
.model-tile{background:none;border:0;border-radius:0;padding:0;box-shadow:none}
.model-tile:hover{border:0;transform:none;box-shadow:none}
.tile-photo{height:auto;aspect-ratio:1/1;margin:0 0 14px;border-radius:16px;background:#eaeff6;overflow:hidden}
.tile-photo img{width:86%;height:78%;transition:transform 1s cubic-bezier(.16,1,.3,1)}
.model-tile:hover .tile-photo img{transform:scale(1.08) rotate(-4deg)}
.tile-photo:after{content:"";position:absolute;right:12px;top:12px;width:52px;aspect-ratio:343/160;background:#09254c;opacity:0;transform:translateY(8px) rotate(-10deg);transition:opacity .4s,transform .5s cubic-bezier(.16,1,.3,1);-webkit-mask:url(images/horloge/monogramme.webp) center/contain no-repeat;mask:url(images/horloge/monogramme.webp) center/contain no-repeat}
.model-tile:hover .tile-photo:after{opacity:.9;transform:rotate(-6deg)}
.model-tile .tile-brand{font:700 11px Arial,sans-serif;letter-spacing:.18em}
.model-tile strong{font-family:"Archivo","Arial Narrow",Arial,sans-serif;font-weight:900;font-variation-settings:"wdth" 64;font-stretch:64%;text-transform:uppercase;letter-spacing:0;font-size:1.75rem;line-height:.92;margin:6px 0 8px}
.model-tile .tile-link{margin-top:10px}
@media(max-width:570px){.hero:after{right:-70px;bottom:-14px}.catalogue-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 12px}.model-tile strong{font-size:1.3rem}.tile-photo{border-radius:12px}}
@media(prefers-reduced-motion:reduce){.hero-fig:after{animation:none;opacity:.85;transform:rotate(-6deg)}.score:after,.tile-photo img,.tile-photo:after,.hero-fig img{transition:none}}
/* Fiches : bloc « Où l'acheter » (27 oct. 2026) */
.card.buy{margin:0 0 26px}
.card.buy h2{font-family:"Archivo","Arial Narrow",Arial,sans-serif;font-weight:900;font-variation-settings:"wdth" 64;font-stretch:64%;text-transform:uppercase;font-size:2rem;line-height:.92;margin:0 0 16px}
.buy-list{list-style:none;padding:0;margin:0 0 12px}
.buy-list li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:14px;padding:12px 0;border-top:1px solid var(--line);margin:0}
.buy-list li:first-child{border-top:0}
.buy-shop{font-weight:800}
.buy-price{font-weight:700;color:#0a315e;white-space:nowrap}
.buy-btn{display:inline-flex;align-items:center;justify-content:center;background:#1559ae;color:#fff;text-decoration:none;font-weight:800;border-radius:999px;padding:10px 18px;white-space:nowrap}
.buy-btn:hover{background:#0a4086}
.buy-bf{margin:6px 0 0;font-weight:800}
@media(max-width:570px){.buy-list li{grid-template-columns:minmax(0,1fr) auto;gap:8px 12px}.buy-btn{grid-column:1/-1}}