@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,400..900&family=Instrument+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');
:root{--carbon:#171B1F;--carbon2:#1F252A;--chrome:rgba(195,201,207,.58);--chrome-f:rgba(195,201,207,.15);
--paper:#F3F1ED;--paper2:#E8E5DF;--paper3:#DCD8D0;--ink:#171B1F;--ink70:rgba(23,27,31,.70);--ink45:rgba(23,27,31,.45);
--ink14:rgba(23,27,31,.14);--ink07:rgba(23,27,31,.07);--gold:#8A6D22;--gold-lo:#EFE4C4;--jade:#136B5D;--jade-lo:#CFE3DE;--flag:#B23A22}
*{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:clip}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:"Instrument Sans",system-ui,sans-serif;font-size:16px;line-height:1.55}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
a{color:inherit}
.mono{font-family:"JetBrains Mono",monospace;font-variant-numeric:tabular-nums}
.eyebrow{font-family:"JetBrains Mono",monospace;font-size:10px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--ink45)}
nav{background:var(--carbon);border-bottom:1px solid var(--chrome-f);position:sticky;top:0;z-index:20}
.nav-in{max-width:1080px;margin:0 auto;padding:0 24px;height:54px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 110,"wght" 820;font-size:15px;letter-spacing:.01em;text-transform:uppercase;color:var(--paper);text-decoration:none;white-space:nowrap}
.logo em{font-style:normal;color:#6FD3BF}
.nav-l{display:flex;gap:22px}
.nav-l a{font-size:13.5px;color:var(--chrome);text-decoration:none;font-weight:500}
.navsel{position:relative;display:inline-flex;align-items:center;cursor:pointer}
.navsel .lab{font-size:13.5px;font-weight:500;color:var(--chrome);padding-right:13px}
.navsel:hover .lab{color:var(--paper)}
.navsel::after{content:"";position:absolute;right:0;top:50%;margin-top:-2px;width:0;height:0;
 border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;color:var(--chrome);pointer-events:none}
.navsel:hover::after{color:var(--paper)}
.navsel select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:16px}
.navsel option{background:var(--carbon);color:var(--paper)}
.nav-l a:hover{color:var(--paper)}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
/* ---- bande d'accueil ---- */
.hero{position:relative;background:var(--carbon);color:var(--paper);overflow:hidden;padding:58px 0 54px}
.heroc{position:absolute;left:0;right:0;bottom:0;width:100%;height:40%;pointer-events:none;opacity:.55}
.hero-in{position:relative;z-index:1}
.hero h1{color:var(--paper)}
.hero h1 .cat-suf{opacity:.72;font-weight:600}
.brand{color:#6FD3BF;font-variation-settings:"wdth" 118,"wght" 500;font-size:.3em;letter-spacing:.09em}
.hlede{margin-top:22px;font-size:17px;line-height:1.55;color:var(--chrome)}
.hduo{display:grid;grid-template-columns:minmax(0,300px) minmax(0,300px);gap:0 48px;margin-top:30px}
.hduo>div{padding:0}
.hduo>div+div{padding-left:0}
.hduo b{display:block;font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#6FD3BF;font-weight:700}
.hduo span{display:block;margin-top:8px;font-size:14.5px;line-height:1.5;color:var(--chrome)}
@media(max-width:640px){.hduo{grid-template-columns:1fr}.hduo>div+div{margin-top:22px}}
.hstats{display:flex;flex-wrap:wrap;gap:14px 40px;margin-top:40px;padding-top:26px;border-top:1px solid rgba(195,201,207,.2)}
.hstats div{display:flex;flex-direction:column;gap:3px}
.hstats b{font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 106,"wght" 780;font-size:21px;letter-spacing:-.015em;color:#6FD3BF}
.hstats span{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(195,201,207,.65)}
/* ---- classement ---- */
.rank{list-style:none;margin:22px 0 0;padding:0;border-top:1px solid var(--ink14)}
.rank a{display:grid;grid-template-columns:34px 1fr auto auto;gap:16px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--ink07);text-decoration:none}
.rank a:hover{background:var(--paper2)}
.rank .r{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--ink45)}
.rank .nm{font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 106,"wght" 720;font-size:16px;line-height:1.2}
.rank .nm em{display:block;font-style:normal;font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink45);font-weight:400;margin-top:3px}
.rank .pz{font-weight:700;color:var(--jade);font-size:15px}
.rank .sl{font-size:11px;color:var(--ink45);min-width:66px;text-align:right}
@media(max-width:560px){.rank a{grid-template-columns:28px 1fr auto;gap:11px}.rank .sl{display:none}}
/* ---- valeur du sac ---- */
.sac-hero h1{font-size:clamp(30px,6vw,54px)}
.sac-tot{position:sticky;top:54px;z-index:15;background:var(--carbon);color:var(--paper);
 /* meme gouttiere que .wrap, sinon le total se decale de quelques pixels
    par rapport au texte du bandeau juste au-dessus */
 width:100vw;margin-left:calc(50% - 50vw);padding:22px calc(50vw - 50% + 24px);
 border-bottom:1px solid rgba(195,201,207,.2)}
.tot-in{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}
.sac-tot .who{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(195,201,207,.7)}
.tot-big{font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 106,"wght" 820;font-size:clamp(30px,5.4vw,48px);letter-spacing:-.035em;line-height:1;margin-top:8px;color:#6FD3BF}
.tot-big em{font-style:normal;font-size:.42em;color:rgba(195,201,207,.7);font-variation-settings:"wdth" 106,"wght" 400;padding:0 4px}
.sac-tot .src{font-family:"JetBrains Mono",monospace;font-size:11px;color:rgba(195,201,207,.65);margin-top:9px}
.btn-share{background:#6FD3BF;color:var(--carbon);border:0;font-family:"JetBrains Mono",monospace;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:13px 20px;cursor:pointer;white-space:nowrap}
.btn-share:hover{background:var(--paper)}
.btn-share.alt{background:none;color:#6FD3BF;border:1px solid rgba(111,211,191,.45);margin-left:8px}
.btn-share.alt:hover{background:rgba(111,211,191,.12);color:#6FD3BF}
.tot-note{font-size:11.5px;color:rgba(195,201,207,.55);margin-top:9px;max-width:30ch;text-align:right}
/* ---- le sac ---- */
.grp{margin-bottom:30px}
.grp:last-child{margin-bottom:0}
.grp-h{display:flex;align-items:baseline;gap:12px;padding-bottom:10px;border-bottom:2px solid var(--ink)}
.grp-h b{font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 106,"wght" 780;font-size:17px;letter-spacing:-.015em}
.grp-h span{margin-left:auto;display:flex;align-items:baseline;gap:14px}

/* ---------- page By price ---------- */
.hcta{display:flex;flex-wrap:wrap;align-items:baseline;gap:16px;margin-top:18px;padding:20px 24px;
 background:var(--jade);color:var(--paper);text-decoration:none;transition:background .12s}
.hcta:hover{background:var(--paper);color:var(--carbon)}
.hcta b{font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 106,"wght" 800;font-size:22px;letter-spacing:-.02em}
.hcta span{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.06em;opacity:.72}
.hcta:hover span{opacity:.6}
/* La phrase citable : petite et grise, mais bien visible. Du texte cache
   serait du cloaking, et un moteur qui la lit doit pouvoir la reprendre telle
   quelle avec l'objet, le chiffre, la source et la fenetre. */
/* Le bouton de partage. Sur telephone il ouvre la feuille de partage du
   systeme, sinon il copie l'adresse. Discret : c'est un service, pas un appel
   a l'action. */
.btn-lien{margin-left:14px;font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.09em;
 text-transform:uppercase;font-weight:700;color:#6FD3BF;background:none;
 border:1px solid rgba(111,211,191,.55);border-radius:2px;padding:5px 11px;cursor:pointer;
 vertical-align:1px;white-space:nowrap}
.btn-lien:hover{background:#6FD3BF;color:var(--carbon);border-color:#6FD3BF}
.btn-lien.ok{border-color:#6FD3BF;color:#6FD3BF}
@media print{.btn-lien{display:none}}
/* L'avertissement se lit AVANT le chiffre : apres, il arrive trop tard pour
   changer la lecture. Ocre, pas rouge : c'est une nuance, pas une erreur. */
.approx{margin-top:16px;padding:12px 15px;background:var(--gold-lo);border-left:3px solid var(--gold);
 font-size:14px;line-height:1.6;color:var(--ink70)}
.approx b{color:var(--ink)}
.approx .m{font-family:"JetBrains Mono",monospace;font-variant-numeric:tabular-nums;color:var(--ink)}
[hidden]{display:none!important}
/* « TaylorMade » est plus long que sa colonne dans une grille a quatre :
   sans cette regle le mot est coupe net au milieu. */
.cell .n,.cell,.rank .nm{overflow-wrap:anywhere;word-break:normal;hyphens:auto}
@media(max-width:700px){
 .grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
/* Le bandeau des pages de modele. Le prix est DEDANS, pas repousse dessous :
   c'est ce qui distingue cette entete de celle des pages d'atterrissage. */
.hero-model .hero-in{padding-top:22px;padding-bottom:34px}
.hero-model .crumb,.hero-model .crumb a{color:rgba(195,201,207,.62)}
.hero-model h1{color:var(--paper)}
.hero-model .cred{color:var(--chrome)}
.hero-model .cred b{color:var(--paper)}
.hero-model .who{color:rgba(195,201,207,.62)}
.hero-model .big{color:#6FD3BF}
.hero-model .sec .big{color:var(--paper)}
.hero-model .src{color:rgba(195,201,207,.5)}
.hero-model .claim{color:rgba(195,201,207,.62)}
.hero-model .sec.empty p,.hero-model .empty p,.hero-model p{color:rgba(195,201,207,.62)}
.hero-model .claim .m{color:var(--paper)}
.hero-model .duo{border-top-color:rgba(195,201,207,.22)}
.hero-model .sec{border-left-color:rgba(195,201,207,.16)}
.hero-model .why{color:var(--chrome);border-top-color:rgba(195,201,207,.18)}
.hero-model .approx{background:rgba(212,168,74,.20);border-left:3px solid #D4A84A;
 color:rgba(243,241,237,.86)}
.hero-model .approx b{color:#F0C878}
.hero-model .approx .m{color:var(--paper)}
.hero-model .scale .sc-lab,.hero-model .scale .sc-v{color:var(--chrome)}

/* Le bandeau des pages d'atterrissage : meme famille que celui de l'accueil,
   mais plus bas. Il nomme la page, il ne la remplace pas. */
.hero-sec .hero-in{padding-top:26px;padding-bottom:30px}
.hero-sec h1{font-size:clamp(34px,5.4vw,60px);line-height:.98}
.hero-sec .hlede{margin-top:16px;font-size:16px}
.hero-sec .hcred{margin-top:16px;font-family:"JetBrains Mono",monospace;font-size:11px;
 letter-spacing:.04em;color:var(--chrome)}
.hero-sec .hcred b{color:var(--paper)}
.hero-sec .hcred .chip{display:inline-block;margin-right:8px;padding:5px 10px;
 border:1px solid rgba(195,201,207,.28);border-radius:2px;color:var(--chrome)}
.hero-sec .crumb a{color:var(--chrome)}
.hero-sec .crumb{color:rgba(195,201,207,.5);margin-bottom:16px}
@media(max-width:700px){.hero-sec .hero-in{padding-top:18px;padding-bottom:22px}
 .hero-sec .hlede{font-size:15px;margin-top:12px}}
/* Le partage vit sous les cases, pas dans le bloc du total : celui-ci est
   masque tant que le sac est vide, et le bouton disparaissait avec lui. */
.sac-partage{margin-top:26px;padding-top:22px;border-top:1px solid var(--ink14)}
.sac-partage .btn-share:disabled{background:none;color:var(--ink45);
 border:1px solid var(--ink14);cursor:default}
.sac-partage .tot-note{margin-top:10px;text-align:left;max-width:none;color:var(--ink45)}
@media(max-width:700px){.sac-partage .btn-share{width:100%;text-align:center}}
/* Le lien pour signaler quelque chose. Discret : c'est une porte, pas une
   invitation. Rien ne promet de reponse, et rien ne s'affiche si aucune
   adresse de formulaire n'est fournie au generateur. */
.ret{color:var(--chrome);border-bottom:1px solid rgba(195,201,207,.28)}
.ret:hover{color:#6FD3BF;border-bottom-color:#6FD3BF}
.claim{margin-top:14px;font-size:13px;line-height:1.6;color:var(--ink45)}
.claim .m{color:var(--ink70);font-family:"JetBrains Mono",monospace;font-variant-numeric:tabular-nums}
@media(max-width:640px){.claim{font-size:12.5px}}
.bud-hero{padding-bottom:8px}
.bud-ctl{display:flex;flex-wrap:wrap;align-items:flex-end;gap:28px;margin:26px 0 22px}
.bud-in{display:flex;gap:14px}
.bud-in label{display:flex;align-items:center;gap:6px;font-family:"JetBrains Mono",monospace;font-size:10px;
 letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--ink45)}
.bud-cur{color:var(--ink45);font-size:15px;margin-left:6px}
.bud-in input{width:104px;font-family:"JetBrains Mono",monospace;font-variant-numeric:tabular-nums;font-size:26px;
 font-weight:700;color:var(--ink);background:none;border:0;border-bottom:2px solid var(--ink);padding:0 0 3px;
 -moz-appearance:textfield}
.bud-in input::-webkit-outer-spin-button,.bud-in input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.bud-in input:focus{outline:none;border-bottom-color:var(--jade);color:var(--jade)}
.bud-chips{display:flex;flex-wrap:wrap;gap:8px}
.bud-chips button{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;
 font-weight:700;color:var(--ink70);background:var(--ink07);border:0;border-radius:2px;padding:8px 12px;cursor:pointer}
.bud-chips button:hover{background:var(--jade-lo);color:var(--jade)}

/* l'histogramme est la piece maitresse : la forme du marche, et le selecteur */
.bud-histo{display:flex;align-items:flex-end;gap:2px;height:132px;position:relative;padding-bottom:22px;
 border-bottom:2px solid var(--ink)}
.bud-bar{flex:1;height:100%;display:flex;align-items:flex-end;background:none;border:0;padding:0;cursor:pointer}
.bud-bar i{display:block;width:100%;background:var(--ink14);transition:background .12s}
.bud-bar.on i{background:var(--jade)}
.bud-bar:hover i{background:var(--gold)}
.bud-ax{position:absolute;left:0;right:0;bottom:2px;display:flex;justify-content:space-between;
 font-family:"JetBrains Mono",monospace;font-size:10px;color:var(--ink45);font-variant-numeric:tabular-nums}
.bud-note{font-size:13px;color:var(--ink45);margin-top:10px}

/* Les trois filtres, dans l'ordre ou on s'en sert : la categorie reduit le
   marche, la marque le reduit encore, l'ordre ne fait que trier ce qui reste. */
.bud-filtres{display:flex;flex-wrap:wrap;gap:26px;margin-bottom:22px}
.bud-filtres label{display:flex;flex-direction:column;gap:6px;font-family:"JetBrains Mono",monospace;
 font-size:10px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--ink45)}
.bud-filtres select{font-family:"Instrument Sans",sans-serif;font-size:15px;color:var(--ink);background:none;
 border:0;border-bottom:2px solid var(--ink);padding:3px 22px 4px 0;cursor:pointer;min-width:168px;max-width:250px}
.bud-filtres select:focus{outline:none;border-bottom-color:var(--jade)}
@media(max-width:640px){.bud-filtres{gap:16px}.bud-filtres select{min-width:140px;font-size:14px}}
.bud-cnt{font-size:13px;color:var(--ink45);margin-bottom:14px}
.bud-cnt b{color:var(--ink);font-family:"JetBrains Mono",monospace}
.bud-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(226px,1fr));gap:1px;background:var(--ink14);
 border:1px solid var(--ink14)}
.bud-card{display:grid;grid-template-rows:auto 1fr auto;gap:5px;background:var(--paper);padding:15px 16px 13px;
 text-decoration:none;transition:background .12s}
.bud-card:hover{background:var(--gold-lo)}
.bud-cat{font-family:"JetBrains Mono",monospace;font-size:9px;letter-spacing:.11em;text-transform:uppercase;
 color:var(--ink45);font-weight:700}
.bud-nom{font-size:15px;line-height:1.3;color:var(--ink)}
.bud-nom b{font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 100,"wght" 720}
.bud-px{font-size:21px;font-weight:700;color:var(--jade);line-height:1.1}
.bud-n{font-family:"JetBrains Mono",monospace;font-size:10px;color:var(--ink45)}
.bud-vide{font-size:15px;color:var(--ink70);padding:26px 0}
@media(max-width:640px){
 .bud-ctl{gap:18px}
 .bud-in input{width:88px;font-size:22px}
 .bud-histo{height:104px}
 .bud-grid{grid-template-columns:repeat(auto-fill,minmax(158px,1fr))}
}
@media print{.bud-ctl,.bud-tabs,.bud-sort,.bud-histo{display:none}}
.grp-add{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;
 color:var(--jade);background:none;border:0;border-bottom:1px dashed var(--jade);padding:0 0 1px;cursor:pointer;white-space:nowrap}
.grp-add:hover{color:var(--ink);border-bottom-color:var(--ink)}
.slot.plus{background:var(--ink07)}
.slot.plus .slot-n select{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;
 font-weight:700;color:var(--ink70);background:none;border:0;border-bottom:1px solid var(--ink14);padding:0 14px 2px 0;cursor:pointer;max-width:100%}
.grp-h span{font-family:"JetBrains Mono",monospace;font-size:12px;font-weight:700;color:var(--jade);margin-left:auto;font-variant-numeric:tabular-nums}
.grp-h span.vide{color:var(--ink45);font-weight:400}
.slot{display:grid;grid-template-columns:104px minmax(0,1fr) 116px 28px;gap:14px;align-items:center;
 padding:12px 14px;border-bottom:1px solid var(--ink07);transition:background .12s}
.slot:last-child{border-bottom:0}
.slot.on{background:#fff;border-bottom-color:var(--ink14)}
.slot-n{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink45);font-weight:700;line-height:1.3}
.slot.on .slot-n{color:var(--jade)}
.slot-pick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;min-width:0}
.slot-pick select{appearance:none;-webkit-appearance:none;width:100%;min-width:0;
 background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6'%3E%3Cpath d='M0 0l4.5 6L9 0z' fill='%23171B1F'/%3E%3C/svg%3E") no-repeat right 9px center;
 border:1px solid var(--ink14);color:var(--ink);font-family:"Instrument Sans",sans-serif;font-size:13.5px;
 padding:9px 24px 9px 10px;cursor:pointer;border-radius:0;text-overflow:ellipsis}
.slot-pick select:disabled{color:var(--ink45);background-color:var(--paper2);cursor:default}
.slot-pick select:focus{outline:none;border-color:var(--jade)}
.slot-v{font-family:"JetBrains Mono",monospace;font-variant-numeric:tabular-nums;font-weight:700;font-size:15px;text-align:right;color:var(--jade);line-height:1.25}
.slot-v em{display:block;font-style:normal;font-size:9.5px;color:var(--ink45);font-weight:400;margin-top:3px}
.slot-x{background:none;border:0;color:var(--ink45);font-size:17px;line-height:1;cursor:pointer;padding:4px;justify-self:end}
.slot-x:hover{color:var(--flag)}
.slot-lab{display:none}
@media(max-width:820px){
 .slot{grid-template-columns:1fr auto;gap:9px;padding:15px 10px}
 .slot-pick{grid-column:1/-1;grid-template-columns:1fr 1fr}
 .slot-v{text-align:left}
 .tot-in{grid-template-columns:1fr}.tot-note{text-align:left;max-width:none}
}

/* ---- la feuille imprimee ---- */
.pr-head,.pr-foot{display:none}
@media print{
 @page{margin:14mm 15mm}
 nav,footer,.hero,.btn-share,.tot-note,.slot-pick,.slot-x,.method,.lede,.shead,#vide{display:none!important}
 body{background:#fff;color:#111}
 .wrap{max-width:none;padding:0}
 section{padding:0;border:0;margin:0}
 .band,.dark{background:none;margin:0;padding:0}

 .pr-head{display:flex!important;align-items:baseline;justify-content:space-between;
  padding-bottom:9px;border-bottom:2.5px solid #111;margin-bottom:16px}
 .pr-head b{font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 118,"wght" 850;font-size:19px;letter-spacing:-.02em}
 .pr-head b em{font-style:normal;color:#136B5D}
 .pr-head span{font-family:"JetBrains Mono",monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:#666}

 .sac-tot{position:static;background:none;color:#111;margin:0 0 22px;padding:0;border:0;display:block}
 .tot-in{display:block}
 .sac-tot .who{font-size:9.5px;letter-spacing:.14em;color:#666}
 .tot-big{color:#111;font-size:40px;margin-top:4px;line-height:1}
 .tot-big em{color:#888;font-size:.38em}
 .sac-tot .src{font-size:10px;color:#666;margin-top:7px}
 .tot-r{display:none}

 .grp{margin:0 0 4px;break-inside:avoid;page-break-inside:avoid}
 .grp-h{border-bottom:1px solid #111;padding-bottom:5px;margin-bottom:0}
 .grp-h b{font-size:12.5px}
 .grp-h span{font-size:11px;color:#136B5D}
 .grp-h span.vide{display:none}
 .grp:not(:has(.slot.on)){display:none}

 .slot{display:grid!important;grid-template-columns:88px 1fr auto;gap:12px;align-items:baseline;
  padding:6px 0;background:none!important;border-bottom:1px dotted #ccc;break-inside:avoid;page-break-inside:avoid}
 .slot:not(.on){display:none!important}
 .slot-n{font-size:8.5px;letter-spacing:.08em;color:#888}
 .slot-lab{display:block!important;font-family:"Instrument Sans",sans-serif;font-size:12.5px;color:#111;font-weight:600;line-height:1.3}
 .slot-v{font-size:12.5px;color:#111;text-align:right;white-space:nowrap}
 .slot-v em{display:inline;margin:0 0 0 8px;font-size:9px;color:#888}

 .pr-foot{display:block!important;margin-top:18px;padding-top:8px;border-top:1px solid #ccc;
  font-size:8.5px;line-height:1.5;color:#777}
}
/* ---- fil d'ariane + titre ---- */
.head{padding-top:36px}
.crumb{display:flex;flex-wrap:wrap;gap:7px 11px;align-items:baseline}
.crumb a{text-decoration:none}
.crumb a:hover{text-decoration:underline}
.crumb span:not(:last-child)::after{content:"›";margin-left:11px;opacity:.45}
h1{font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 122,"wght" 840;text-transform:uppercase;letter-spacing:-.026em;line-height:.94;font-size:clamp(30px,6.4vw,58px);margin-top:16px}
h1 .brand{display:block;font-variation-settings:"wdth" 122,"wght" 400;font-size:.34em;letter-spacing:.045em;color:var(--ink45);margin-bottom:.4em}
.chips{margin-top:18px;display:flex;flex-wrap:wrap;gap:7px}
.chip{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.04em;border:1px solid var(--ink14);padding:4px 9px;color:var(--ink70)}
/* ---- ligne de credibilite ---- */
.qual{margin-top:16px;font-size:14.5px;color:var(--ink70)}
.cred{margin-top:14px;padding-top:13px;border-top:1px solid var(--ink14);font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.04em;color:var(--ink45)}
.cred b{color:var(--ink);font-weight:700}
/* ---- SIGNATURE : prix du marche a gauche, enchere a droite ---- */
.scale{margin:32px 0 0;padding:0;border-top:2px solid var(--ink)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:0}
.pri{padding:28px 30px 26px 0}
.pri .big,.sec .big{font-size:clamp(40px,7.4vw,64px)}
.sec{padding:28px 0 26px 30px;border-left:1px solid var(--ink14)}
.who{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink45)}
.big{font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 108,"wght" 830;letter-spacing:-.038em;line-height:.9;margin-top:10px}
.pri .big{font-size:clamp(44px,8.6vw,72px);color:var(--jade)}
.sec .big{font-size:clamp(44px,8.6vw,72px)}
.pri.sm .big,.sec.sm .big{font-size:clamp(32px,5.6vw,46px)}
.src{font-family:"JetBrains Mono",monospace;font-size:11.5px;color:var(--ink45);margin-top:11px}
.sec.empty p{font-size:14px;color:var(--ink45);line-height:1.55;max-width:38ch;margin-top:22px}
.why{margin-top:0;padding:18px 0 0;border-top:1px solid var(--ink14);font-size:16.5px;line-height:1.65;color:var(--ink70)}
.pts{margin:18px 0 0;padding:0;list-style:none}
.pts li{position:relative;padding-left:20px;margin-bottom:9px;font-size:16.5px;line-height:1.6;color:var(--ink70)}
.pts li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:2px;background:var(--ink45)}
.pts b{color:var(--ink);font-weight:700}
.panel .sub{font-family:"JetBrains Mono",monospace;font-size:10.5px;color:var(--ink45);margin-top:3px}
.pts li+li{margin-top:0}
.trend{font-weight:700}
.trend.up{color:var(--jade)}
.trend.dn{color:var(--flag)}
.trend.fl{color:var(--ink45)}
.leg2{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:14px;padding-top:13px;border-top:1px solid var(--ink07)}
.leg2 span{display:inline-flex;align-items:center;gap:8px;font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.05em;color:var(--ink45)}
/* ---- apercu produit ---- */
/* L'apercu prolonge la section « Find your club » : meme fond creme, pas de
   filet entre les deux, pour qu'ils se lisent comme un seul bloc. */
.demo{background:var(--paper2);margin:0 -100vw;padding:8px 100vw 46px}
.demo .shead{border-top:0;padding-top:0}
.tag{display:inline-block;font-family:"JetBrains Mono",monospace;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
 background:var(--carbon);color:var(--gold-lo);padding:5px 10px}
.demo-in{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:16px;border:1px solid var(--ink14)}
.demo-l{padding:26px 28px 28px}
.demo-r{border-left:1px solid var(--ink14);padding:18px 20px;display:flex;align-items:center;background:#fff}
.demo-l h3{font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 112,"wght" 800;text-transform:uppercase;font-size:clamp(22px,3.4vw,32px);letter-spacing:-.022em;line-height:1;margin-top:6px}
.demo-px{display:flex;flex-wrap:wrap;gap:26px;margin-top:22px}
.demo-px .who{display:block;font-family:"JetBrains Mono",monospace;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink45)}
.demo-px b{display:block;font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 106,"wght" 800;font-size:32px;letter-spacing:-.03em;color:var(--jade);margin-top:5px}
.demo-px b.alt{color:var(--ink)}
.demo-px em{display:block;font-style:normal;font-family:"JetBrains Mono",monospace;font-size:10.5px;color:var(--ink45);margin-top:5px}
.demo-go{display:inline-block;margin-top:22px;font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;text-decoration:none;border-bottom:2px solid var(--jade);padding-bottom:3px}
svg.mini{width:100%;height:auto;overflow:visible}
.mini .mv{fill:var(--ink);font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 104,"wght" 760;font-size:13px}
.mini .mx{fill:var(--ink45);font-family:"JetBrains Mono",monospace;font-size:10px}
/* ---- bandeau de faits ---- */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;padding:26px 0 0!important}
.fact{background:#fff;border:1px solid var(--ink14);border-top:3px solid var(--jade);padding:18px 18px 20px}
.fact>span{display:block;font-family:"Instrument Sans",sans-serif;font-size:12.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink45)}
.fact b{display:block;font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 106,"wght" 820;font-size:30px;letter-spacing:-.03em;color:var(--ink);margin-top:9px;line-height:1}
.fact em{display:block;font-style:normal;font-size:13px;margin-top:9px;color:var(--ink70)}
.fact em a{text-decoration:none;border-bottom:1px solid var(--ink14)}
.hm{color:var(--ink)}
.hn{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.08em;text-transform:none;color:var(--ink45);font-weight:400}
/* ---- sections ---- */
section{padding:44px 0;position:relative}
.band{background:var(--paper2);margin:0 -100vw;padding:44px 100vw 34px}
.dark{background:var(--carbon);color:var(--chrome);margin:0 -100vw;padding:44px 100vw}
.dark+section,.band+section{padding-top:44px}
.dark h2{color:var(--paper)}
.dark .shead{border-bottom-color:rgba(195,201,207,.3)}
.dark .snum{color:#6FD3BF}
.dark .lede{color:var(--chrome)}
.dark .rank{border-top-color:rgba(195,201,207,.18)}
.dark .rank a{border-bottom-color:rgba(195,201,207,.12);color:var(--paper)}
.dark .rank a:hover{background:rgba(255,255,255,.05)}
.dark .rank .r,.dark .rank .sl,.dark .rank .nm em{color:rgba(195,201,207,.6)}
.dark .rank .pz{color:#6FD3BF}
.dark .sale{border-bottom-color:rgba(195,201,207,.12)}
.dark .sale .d,.dark .sale .t{color:rgba(195,201,207,.72)}
.dark .sale .p{color:#6FD3BF}

mark{background:var(--jade);color:var(--paper);padding:0 8px}
.panel{background:#fff;border:1px solid var(--ink14);padding:4px 20px 8px;margin-top:20px}
.panel table{margin-top:8px}
.panel td{border-bottom-color:var(--ink07)}
.shead{display:flex;align-items:baseline;gap:14px;padding-bottom:13px;border-bottom:2px solid var(--ink);margin-bottom:18px}
.snum{font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 108,"wght" 800;font-size:clamp(17px,2.4vw,22px);letter-spacing:-.01em;color:var(--jade);flex:none;line-height:1}
.shead h2{margin:0}
h2{font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 112,"wght" 760;text-transform:uppercase;font-size:clamp(17px,2.4vw,22px);letter-spacing:-.005em}
.rank li:nth-child(-n+3) .pz{font-size:16px}
.lede{color:var(--ink70);margin-top:10px;font-size:16.5px;line-height:1.6}
table{width:100%;border-collapse:collapse;font-size:14.5px;margin-top:22px}
th{font-family:"JetBrains Mono",monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink45);text-align:left;font-weight:700;padding:0 16px 9px 0;border-bottom:1.5px solid var(--ink);white-space:nowrap}
th.r,td.r{text-align:right;padding-right:0}
td{padding:11px 16px 11px 0;border-bottom:1px solid var(--ink07);vertical-align:top}
td.r{font-family:"JetBrains Mono",monospace;font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
td.dim{color:var(--ink45);font-weight:400}
tr.self td{background:rgba(19,107,93,.06)}
td a{text-decoration:none;border-bottom:1px solid var(--ink14)}
td a:hover{border-color:var(--ink)}
.sales{margin-top:22px}
.sale{display:grid;grid-template-columns:92px 1fr auto;gap:16px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--ink07)}
.sale .d{font-family:"JetBrains Mono",monospace;font-size:10.5px;color:var(--ink45)}
.sale .t{font-size:13.5px;line-height:1.4;color:var(--ink70)}
.sale .p{font-family:"JetBrains Mono",monospace;font-weight:700;font-size:14px;font-variant-numeric:tabular-nums}
.method{margin-top:20px;padding:26px 30px;background:var(--paper2);font-size:16px;line-height:1.75;color:var(--ink70);border-left:3px solid var(--jade)}
.method b{color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:0;margin-top:20px;margin-bottom:0;border-top:1px solid var(--ink14);border-left:1px solid var(--ink14)}
.cell{background:var(--paper);padding:16px 17px 18px;text-decoration:none;display:block;border-right:1px solid var(--ink14);border-bottom:1px solid var(--ink14)}
.cell:hover{background:#fff}
.cell .n{font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 106,"wght" 720;font-size:15px;line-height:1.2}
.cell .v{font-family:"JetBrains Mono",monospace;font-size:13px;color:var(--jade);font-weight:700;margin-top:7px}
.cell .s{font-family:"JetBrains Mono",monospace;font-size:10px;color:var(--ink45);margin-top:2px}
tr.grp td{background:var(--paper2);font-family:"JetBrains Mono",monospace;font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink45);font-weight:700;padding:9px 0 8px 0;border-bottom:1px solid var(--ink14)}
svg.spark{width:100%;height:auto;display:block;overflow:visible}
.chart{background:#fff;border:1px solid var(--ink14);padding:22px 24px 16px;margin-top:20px}
.spark .gl{stroke:var(--ink14);stroke-width:1}
.spark .ax{fill:var(--ink45);font-family:"JetBrains Mono",monospace;font-size:11px}
.spark .sp-area{fill:url(#g)}
.spark .sp-line{fill:none;stroke:var(--jade);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.spark .sp-dot{fill:var(--jade);stroke:var(--paper);stroke-width:2.5}
.spark .sp-dot.thin{fill:var(--paper);stroke:var(--jade);stroke-width:2.5}
.spark .sp-v{fill:var(--ink);font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 104,"wght" 760;font-size:14px}
/* ---- devise et recherche ---- */
.nav-r{display:flex;align-items:center;gap:14px}
.srch{position:relative}
.srch input{background:rgba(255,255,255,.07);border:1px solid var(--chrome-f);color:var(--paper);font-family:"Instrument Sans",sans-serif;font-size:13px;height:34px;padding:0 11px;width:158px;border-radius:0;line-height:34px}
.srch input::placeholder{color:rgba(195,201,207,.45)}
.srch input:focus{outline:none;border-color:var(--gold-lo);width:210px}
.res{position:absolute;top:38px;right:0;width:300px;background:var(--paper);border:1px solid var(--ink14);max-height:330px;overflow:auto;z-index:40;box-shadow:0 14px 34px rgba(0,0,0,.22)}
.res a{display:block;padding:10px 13px;text-decoration:none;border-bottom:1px solid var(--ink07);font-size:13.5px}
.res a:last-child{border-bottom:0}
.res a:hover,.res a:focus{background:var(--paper2)}
.res .s{font-family:"JetBrains Mono",monospace;font-size:10.5px;color:var(--ink45);margin-top:2px}
.res .none{padding:13px;font-size:13px;color:var(--ink45)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cur{position:relative;display:inline-flex;align-items:center}
.cur::after{content:"";position:absolute;right:10px;top:50%;margin-top:-2px;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--chrome);pointer-events:none}
.cur select{appearance:none;-webkit-appearance:none;background:rgba(255,255,255,.07);border:1px solid var(--chrome-f);color:var(--paper);
 font-family:"JetBrains Mono",monospace;font-size:11px;font-weight:700;letter-spacing:.06em;height:34px;padding:0 26px 0 10px;cursor:pointer;border-radius:0}
.cur select:focus{outline:none;border-color:var(--gold-lo)}
.cur option{background:var(--carbon);color:var(--paper)}
.fxnote{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--chrome);margin-bottom:10px}
/* ---- explorateur ---- */
.brw{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start;margin-top:20px}
.brw.t4{grid-template-columns:repeat(4,1fr)}
.pick{display:flex;flex-direction:column;gap:7px}
.pick>span{font-family:"JetBrains Mono",monospace;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink45);font-weight:700}
.pick select{appearance:none;-webkit-appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23171B1F'/%3E%3C/svg%3E") no-repeat right 14px center;
 border:1px solid var(--ink14);color:var(--ink);font-family:"Instrument Sans",sans-serif;font-size:15px;padding:13px 38px 13px 14px;cursor:pointer;border-radius:0;width:100%}
.pick select:disabled{color:var(--ink45);background-color:var(--paper2);cursor:default;opacity:1}
.pick select:focus{outline:none;border-color:var(--jade)}
.col{background:var(--paper2);border:1px solid var(--ink14);min-height:47px}
.col.on{background:#fff}
.col .opts{max-height:280px;overflow:auto}
.ch{font-family:"JetBrains Mono",monospace;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink45);padding:13px 16px 10px;border-bottom:1px solid var(--ink07);font-weight:700}
.opts{overflow:auto;max-height:290px;flex:1}
.opts a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 16px;border-bottom:1px solid var(--ink07);font-size:15px;color:var(--ink);text-decoration:none}
.opts a:last-child{border-bottom:0}
.opts a:hover{background:var(--paper2)}

.opts a .v{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--jade);font-weight:700;margin-top:2px}
.opts .ph{padding:16px;font-size:13px;color:var(--ink45)}
.opts .cnt{font-family:"JetBrains Mono",monospace;font-size:10.5px;color:var(--ink45)}

/* ---- graphique a deux courbes ---- */
.leg{display:none}
.leg span{display:inline-flex;align-items:center;gap:8px;font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink45)}
.leg i{width:16px;height:3px;background:var(--jade);display:inline-block}
.leg i.alt{background:var(--gold)}
.spark .sp-line.alt{stroke:var(--gold);stroke-dasharray:6 5}
.spark .sp-dot.alt{fill:var(--gold)}
.spark .sp-v.alt{fill:var(--gold)}
.spark .ax.sm{font-size:9.5px;opacity:.72}
footer{background:var(--carbon);color:var(--chrome);padding:38px 0;font-size:13px;line-height:1.7;margin-top:48px}
footer a{color:var(--chrome)}
footer .wrap{display:flex;flex-wrap:wrap;gap:22px;justify-content:space-between}
footer p{max-width:none}
@media(max-width:600px){.duo{grid-template-columns:1fr}.pri{padding:24px 0 20px}.sec{padding:20px 0 24px;border-left:0;border-top:1px solid var(--ink14)}.sec.empty p{margin-top:12px}}
@media(max-width:640px){.demo-in{grid-template-columns:1fr}.demo-r{border-left:0;border-top:1px solid var(--ink14)}.fact{border-right:0;border-bottom:1px solid var(--ink14);padding-right:0}}
@media(max-width:700px){.brw{grid-template-columns:1fr}.col{min-height:0}.opts{max-height:210px}}

@media(max-width:700px){
 body{font-size:15.5px}.wrap{padding:0 17px}.nav-l{gap:14px}
 /* La barre passait sur deux rangees mais gardait la vieille regle qui cachait
    les liens au-dela du troisieme : « By price » et « Method » disparaissaient
    alors qu'il y avait de la place. */
 .nav-in{height:auto;flex-wrap:wrap;padding:9px 17px;gap:9px 14px}
 .nav-l{flex-wrap:wrap;row-gap:2px}
 .nav-r{order:2;width:100%;gap:10px}
 .srch{flex:1 1 auto;min-width:0}
 .srch input{width:100%}
 .cur{flex:0 0 auto}
 .cur select,.navsel select,.pick select,.slot select,.bud-filtres select,.slot-n select{font-size:16px}

 /* Le total faisait 353 px collants sur un ecran de 852. Le rendre statique
    l'a fait remonter au-dessus des cases : on le perdait de vue des qu'on
    commencait a remplir. Il reste donc colle, mais reduit a l'essentiel : le
    chiffre et les deux boutons, sans les trois lignes d'explication. */
 .sac-tot{padding:12px calc(50vw - 50% + 17px)}
 .sac-tot .src{display:none}
 .tot-note{display:none}
 .tot-big{font-size:34px}
 /* Les deux boutons s'empilaient avec 8 px de decalage : le second commencait
    plus a droite que le premier. */
 /* Deux boutons cote a cote dans un bandeau etroit : ils partagent la largeur
    plutot que de s'empiler, sinon le bandeau colle mange l'ecran. */
 .tot-in{grid-template-columns:1fr;gap:10px}
 .tot-r{margin-top:0;display:flex;gap:8px}
 .btn-share{flex:1;display:block;text-align:center;padding:12px 8px;font-size:10px}
 .btn-share.alt{margin-left:0;margin-top:0}
 .cur select{width:74px}
 /* des cibles qu'on peut viser au pouce : 15 px de haut ne se touche pas */
 .grp-add{padding:10px 12px}
 .btn-lien{padding:9px 13px}
 .bud-chips button{padding:11px 14px}
 .slot-x{min-width:34px;min-height:34px}
 .nav-l a,.nav-r a{padding:6px 0}

 /* Le selecteur « Find your club » gardait quatre colonnes : quatre menus de
    78 px de large, inutilisables. Il s'empile. */
 .brw,.brw.t4{grid-template-columns:1fr!important;gap:14px}
 .pick{min-width:0}
 .pick select{width:100%}

 /* Les tableaux : plutot que de forcer 560 px et un defilement lateral, on
    retire sur telephone les colonnes secondaires. Le mois precedent se deduit
    de la variation, le compte de ventes est un detail. */
 .scrollx table{min-width:0}
 .tb-mov th:nth-child(2),.tb-mov td:nth-child(2),
 .tb-mov th:nth-child(5),.tb-mov td:nth-child(5){display:none}
 .tb-conf th:nth-child(3),.tb-conf td:nth-child(3){display:none}
 .tb-vers th:nth-child(4),.tb-vers td:nth-child(4){display:none}
 /* La boite gardait 40 px de marge horizontale et les en-tetes refusaient de
    passer a la ligne : « Market price » a lui seul reclamait 138 px. */
 .scrollx.panel{padding-left:12px;padding-right:12px}
 .scrollx table th{white-space:normal;line-height:1.25}
 .scrollx table th,.scrollx table td{padding:11px 6px;font-size:15px}
 .scrollx table th:first-child,.scrollx table td:first-child{padding-left:0}
 .scrollx table th:last-child,.scrollx table td:last-child{padding-right:0}
 .scrollx table .sub{font-size:12px}

 /* Le haut d'une page de modele empilait 250 px de prose grise entre les prix
    et la premiere section. On la garde, elle sert au referencement et au
    lecteur, mais elle prend moins de place. */
 .claim{font-size:12.5px;line-height:1.55;margin-top:12px}
 .why{font-size:15px;line-height:1.55;padding-top:14px}
 .cred{line-height:1.7}
 .approx{font-size:13px;padding:10px 12px}
 .sale{grid-template-columns:1fr auto;gap:3px 12px}.sale .d{grid-column:1/-1}
 .scrollx{overflow-x:auto}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important}}