/* ==========================================================================
   FOOT INSIDE — systeme de design v2
   Typographie : Jost (choix de Jeremy, celle de Minimog)
   Elements visuels : Glozin (encart borde a icones, boutons pilule, meta produit)
   Structure : Rozer (recherche centrale, rayons, densite)
   Tableau comparatif : Bankrate (logo grand, chiffres gros, "meilleur pour", accordeon)
   INTERDIT : toute teinte chaude 15-50 en HSL. Verifie par controle-couleurs.py
   ========================================================================== */
:root{
  --ink:#111111; --ink-2:#565656; --ink-3:#6E6E6E;
  --bg:#FFFFFF; --bg-2:#F5F5F5; --bg-3:#FAFAFA; --bg-4:#F0F1F3;
  --line:#E5E5E5; --line-2:#EFEFEF;

  --accent:#16324F; --accent-600:#0F2438; --accent-soft:#EDF1F6; --accent-900:#0E1F31;

  --deal:#D0473E; --deal-soft:#FBEEED; --deal-600:#B43A32;
  --ok:#14764C; --ok-soft:#EAF5EF;
  --warn:#5B4B8A; --warn-soft:#F1EEF8;

  --r-card:12px; --r-btn:999px; --r-chip:999px; --r-sm:8px;
  --wrap:1340px;
  --f:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif;
}
:root[data-accent="terrain"]{ --accent:#14663F; --accent-600:#0E4C2E; --accent-soft:#EAF3EE; --accent-900:#0B3B24; }
:root[data-accent="cobalt"] { --accent:#2251C4; --accent-600:#1A3F9C; --accent-soft:#ECF1FD; --accent-900:#15295E; }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--f);font-size:16px;line-height:1.6;font-weight:400;
  font-variant-numeric:tabular-nums;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
h1,h2,h3,h4{margin:0;line-height:1.18;font-weight:600;letter-spacing:-0.015em}
h1{font-size:40px}h2{font-size:30px}h3{font-size:20px}
p{margin:0 0 12px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
.muted{color:var(--ink-2)} .small{font-size:14px} .xs{font-size:12.5px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tnum{font-variant-numeric:tabular-nums}

/* ---------- marquee ---------- */
.marquee{background:var(--ink);color:#fff;overflow:hidden;font-size:13px;letter-spacing:.04em}
.marquee ul{display:flex;gap:56px;list-style:none;margin:0;padding:9px 0;white-space:nowrap;
  animation:slide 38s linear infinite;will-change:transform}
.marquee li{display:flex;align-items:center;gap:9px}
.marquee b{font-weight:600}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee:hover ul{animation-play-state:paused}

/* ---------- utilitaire ---------- */
.util{background:var(--bg-3);border-bottom:1px solid var(--line-2);font-size:13.5px;color:var(--ink-2)}
.util .wrap{display:flex;align-items:center;gap:22px;height:40px}
.util .dot{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none;
  box-shadow:0 0 0 3px var(--ok-soft)}
.util .right{margin-left:auto;display:flex;gap:20px}
.util a:hover{color:var(--ink)}

/* ---------- header ---------- */
.head{border-bottom:1px solid var(--line);background:var(--bg);position:sticky;top:0;z-index:120}
.head .wrap{display:flex;align-items:center;gap:26px;height:80px}
.logo{font-size:23px;font-weight:700;letter-spacing:-0.045em;flex:none}
.logo span{color:var(--accent)}
.search{flex:1;max-width:680px;display:flex;border:2px solid var(--ink);border-radius:var(--r-btn);
  overflow:hidden;transition:box-shadow .2s}
.search:focus-within{box-shadow:0 0 0 4px var(--accent-soft)}
.search select{border:0;background:var(--bg-2);padding:0 36px 0 20px;font-family:inherit;font-size:14.5px;
  color:var(--ink-2);border-right:1px solid var(--line);cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23565656' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center}
.search input{flex:1;border:0;padding:13px 18px;font-family:inherit;font-size:15.5px;min-width:0;outline:none;background:transparent}
.search .go{background:var(--ink);color:#fff;padding:0 26px;display:grid;place-items:center;transition:background .2s}
.search .go:hover{background:var(--accent)}
.head-act{margin-left:auto;display:flex;gap:2px;flex:none}
.iconbtn{padding:10px 12px;border-radius:var(--r-sm);display:flex;align-items:center;gap:8px;
  font-size:13.5px;color:var(--ink-2);transition:.18s;position:relative}
.iconbtn:hover{background:var(--bg-2);color:var(--ink)}
.iconbtn .badge{position:absolute;top:4px;left:26px;background:var(--deal);color:#fff;font-size:10px;
  font-weight:600;min-width:17px;height:17px;border-radius:999px;display:grid;place-items:center;padding:0 4px}

/* ---------- nav ---------- */
.nav{border-bottom:1px solid var(--line);background:var(--bg)}
.nav .wrap{display:flex;gap:0;overflow-x:auto;scrollbar-width:none}
.nav .wrap::-webkit-scrollbar{display:none}
.nav a{display:flex;align-items:center;gap:9px;padding:14px 18px;font-size:14.5px;font-weight:500;
  white-space:nowrap;border-bottom:2px solid transparent;transition:.18s}
.nav a:first-child{padding-left:0}
.nav a:hover,.nav a.on{color:var(--accent);border-bottom-color:var(--accent)}
.nav svg{flex:none;opacity:.6}
.nav .tag{font-size:10px;font-weight:700;background:var(--deal);color:#fff;padding:1px 6px;border-radius:4px;letter-spacing:.03em}

/* ---------- boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 26px;
  border-radius:var(--r-btn);border:2px solid transparent;font-family:inherit;font-size:15px;
  font-weight:600;transition:.2s;text-align:center}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover{background:var(--accent)}
.btn-deal{background:var(--deal);color:#fff}
.btn-deal:hover{background:var(--deal-600)}
.btn-accent{background:var(--accent);color:#fff}
.btn-accent:hover{background:var(--accent-600)}
.btn-ghost{border-color:var(--line);background:var(--bg)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-sm{padding:9px 18px;font-size:14px}
.btn-lg{padding:16px 34px;font-size:16px}

/* ---------- visuels de remplacement ---------- */
.ph{position:relative;background:var(--bg-2);overflow:hidden;display:grid;place-items:center}
.ph::after{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 30% 15%,rgba(255,255,255,.85),transparent 60%)}
.ph svg{width:62%;opacity:.22;position:relative;z-index:1;transition:transform .45s ease}
.ph.dark{background:var(--accent)}
.ph.dark svg{opacity:.3;color:#fff}
.ph.tone{background:var(--bg-4)}

/* ---------- hero ---------- */
.hero{padding:28px 0 8px}
.hero-grid{display:grid;grid-template-columns:1.62fr 1fr;gap:16px}
.hero-main{position:relative;border-radius:var(--r-card);overflow:hidden;min-height:470px;
  background:var(--accent);display:flex;align-items:flex-end}
.hero-main .ph{position:absolute;inset:0;background:var(--accent)}
.hero-main .ph::after{background:linear-gradient(105deg,rgba(0,0,0,.55) 12%,rgba(0,0,0,.12) 62%)}
.hero-main .ph svg{width:70%;opacity:.16;color:#fff;transform:translateX(16%)}
.hero-txt{position:relative;z-index:2;padding:40px;color:#fff;max-width:600px}
.kicker{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.16);
  backdrop-filter:blur(6px);padding:6px 14px;border-radius:999px;font-size:12.5px;
  font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-bottom:16px}
.hero-txt h1{font-size:44px;color:#fff;margin-bottom:12px;letter-spacing:-0.03em}
.hero-txt p{font-size:17px;opacity:.9;max-width:44ch;margin-bottom:22px}
.hero-side{display:grid;grid-template-rows:1fr 1fr;gap:16px}
.hero-card{border:1px solid var(--line);border-radius:var(--r-card);padding:22px;display:flex;
  flex-direction:column;justify-content:space-between;transition:.2s;background:var(--bg)}
.hero-card:hover{border-color:var(--ink-3);box-shadow:0 8px 26px rgba(0,0,0,.06)}
.hero-card .lab{font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.hero-card .big{font-size:34px;font-weight:600;letter-spacing:-0.03em;line-height:1.1;margin:8px 0 4px}
.hero-card .big em{font-style:normal;color:var(--deal)}
.hero-card .lnk{font-size:14px;font-weight:600;color:var(--accent);display:inline-flex;align-items:center;gap:7px;transition:gap .2s}
.hero-card:hover .lnk{gap:12px}

/* ---------- bande stats ---------- */
.stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:34px;background:var(--bg-3)}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;padding:26px 22px}
.stat{display:flex;gap:14px;align-items:flex-start}
.stat svg{flex:none;color:var(--accent);margin-top:3px}
.stat b{display:block;font-size:15.5px;font-weight:600;line-height:1.3}
.stat span{font-size:13.5px;color:var(--ink-2);line-height:1.45}

/* ---------- sections ---------- */
.sec{padding:64px 0}
.sec.tight{padding:44px 0}
.sec.grey{background:var(--bg-3);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec-head{display:flex;align-items:flex-end;gap:20px;margin-bottom:26px;flex-wrap:wrap}
.sec-head h2{letter-spacing:-0.025em}
.sec-head p{margin:6px 0 0;color:var(--ink-2);font-size:15px;max-width:62ch}
.sec-head .lnk{margin-left:auto;font-size:14.5px;font-weight:600;color:var(--accent);
  display:inline-flex;align-items:center;gap:8px;transition:gap .2s;flex:none}
.sec-head .lnk:hover{gap:13px}

/* onglets */
.tabs{display:flex;gap:7px;margin-bottom:22px;flex-wrap:wrap}
.tab{padding:9px 20px;border:1.5px solid var(--line);border-radius:999px;font-size:14.5px;
  font-weight:500;transition:.18s;color:var(--ink-2)}
.tab:hover{border-color:var(--ink-3);color:var(--ink)}
.tab[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:600}

/* ---------- carrousel ---------- */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(232px,1fr);gap:16px;
  overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:thin}
.rail>*{scroll-snap-align:start}
.rail::-webkit-scrollbar{height:5px}
.rail::-webkit-scrollbar-thumb{background:var(--line);border-radius:9px}
.grid5{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}

/* ---------- carte modele ---------- */
.card{border:1px solid var(--line);border-radius:var(--r-card);background:var(--bg);overflow:hidden;
  display:flex;flex-direction:column;transition:.22s}
.card:hover{border-color:var(--ink-3);box-shadow:0 10px 30px rgba(0,0,0,.07);transform:translateY(-2px)}
.card-media{position:relative;aspect-ratio:4/3;background:var(--bg-2)}
.card:hover .card-media .ph svg{transform:scale(1.07) rotate(-2deg)}
.flags{position:absolute;top:11px;left:11px;display:flex;flex-direction:column;gap:5px;align-items:flex-start;z-index:2}
.flag{font-size:11px;font-weight:600;letter-spacing:.02em;padding:4px 9px;border-radius:5px;color:#fff;background:var(--ink)}
.flag.deal{background:var(--deal)}.flag.new{background:var(--accent)}.flag.low{background:var(--ok)}
.fav{position:absolute;top:9px;right:9px;width:36px;height:36px;border-radius:50%;z-index:2;
  background:rgba(255,255,255,.94);border:1px solid var(--line);display:grid;place-items:center;
  opacity:0;transform:translateY(-5px);transition:.22s;color:var(--ink-2)}
.card:hover .fav,.fav:focus-visible{opacity:1;transform:none}
.fav:hover{color:var(--deal);border-color:var(--deal)}
.card-body{padding:14px 15px 15px;display:flex;flex-direction:column;flex:1}
.brandline{font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:5px}
.brandline img{display:block;height:14px;max-width:64px;width:auto;object-fit:contain}
.card-title{font-size:15.5px;font-weight:500;line-height:1.32;margin-bottom:3px}
.card-meta{font-size:13px;color:var(--ink-3);margin-bottom:12px}
.price-row{display:flex;align-items:baseline;gap:9px;margin-top:auto;flex-wrap:wrap}
.price-from{font-size:11.5px;color:var(--ink-3);width:100%;margin-bottom:-2px}
.price{font-size:21px;font-weight:600;letter-spacing:-0.025em}
.price.is-deal{color:var(--deal)}
.price-was{font-size:13.5px;color:var(--ink-3);text-decoration:line-through}
.card-offers{margin-top:11px;padding-top:11px;border-top:1px solid var(--line-2);font-size:13px;
  color:var(--ink-2);display:flex;align-items:center;gap:7px}
.card-offers b{color:var(--ink);font-weight:600}

/* ---------- bannieres rayon ---------- */
.banners{display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px}
.ban{position:relative;border-radius:var(--r-card);overflow:hidden;min-height:250px;display:flex;
  align-items:flex-end;transition:.22s}
.ban:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(0,0,0,.09)}
.ban .ph{position:absolute;inset:0}
.ban-txt{position:relative;z-index:2;padding:24px}
.ban-txt b{display:block;font-size:22px;font-weight:600;letter-spacing:-0.02em;margin-bottom:3px}
.ban-txt span{display:block;font-size:14px;color:var(--ink-2)}
.ban.dark .ban-txt{color:#fff}.ban.dark .ban-txt span{color:rgba(255,255,255,.78)}
.ban .arrow{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;margin-top:12px}
.ban .ph svg{width:46%}
.ban.dark .ph svg{width:64%;transform:translateX(12%)}

/* ---------- 3 etapes ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.step{display:flex;gap:16px}
.step .n{font-size:15px;font-weight:600;color:var(--accent);flex:none;width:34px;height:34px;
  border:1.5px solid var(--accent);border-radius:50%;display:grid;place-items:center}
.step b{display:block;font-size:17px;font-weight:600;margin-bottom:5px}
.step p{font-size:14.5px;color:var(--ink-2);margin:0}

/* ======================================================
   TABLEAU COMPARATIF — modele Bankrate
   ====================================================== */
.cmp{border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;background:var(--bg)}
.cmp-head{display:flex;align-items:center;gap:14px;padding:16px 20px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.cmp-head b{font-size:16px;font-weight:600}
.cmp-sorts{margin-left:auto;display:flex;gap:6px}
.sortbtn{border:1.5px solid var(--line);padding:7px 15px;border-radius:999px;font-family:inherit;
  font-size:13.5px;color:var(--ink-2);transition:.18s}
.sortbtn:hover{border-color:var(--ink-3);color:var(--ink)}
.sortbtn[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:600}
.cmp-cols{display:grid;grid-template-columns:2.1fr 1fr 1fr 1.15fr 1.5fr 200px;gap:18px;
  padding:11px 20px;border-bottom:1px solid var(--line-2);background:var(--bg-3)}
.cmp-cols span{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.row{display:grid;grid-template-columns:2.1fr 1fr 1fr 1.15fr 1.5fr 200px;gap:18px;padding:24px 20px;
  border-bottom:1px solid var(--line-2);align-items:center;transition:background .18s}
.row:last-of-type{border-bottom:0}
.row:hover{background:var(--bg-3)}
.row.best{background:var(--accent-soft)}
.row.best:hover{background:var(--accent-soft)}
.m-name{font-size:13px;color:var(--ink-2);margin-bottom:7px}
.m-logo{height:30px;display:flex;align-items:center;font-size:20px;font-weight:700;letter-spacing:-0.045em}
.m-verif{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-2);margin-top:8px}
.m-verif svg{color:var(--accent);flex:none}
.big-num{font-size:25px;font-weight:600;letter-spacing:-0.035em;line-height:1.1;white-space:nowrap}
.big-num.deal{color:var(--deal)}
.sub-num{font-size:12.5px;color:var(--ink-3);margin-top:3px}
.bestfor{font-size:13.5px;color:var(--ink-2);line-height:1.4}
.bestfor b{display:block;color:var(--ink);font-weight:600;font-size:14px;margin-bottom:2px}
.row .act{display:flex;flex-direction:column;gap:9px;align-items:stretch}
.detail-t{font-size:13.5px;color:var(--accent);font-weight:500;display:inline-flex;
  align-items:center;justify-content:center;gap:6px}
.detail-t svg{transition:transform .22s}
.detail-t[aria-expanded="true"] svg{transform:rotate(180deg)}
.detail-p{display:none;padding:0 20px 22px;border-bottom:1px solid var(--line-2);background:var(--bg-3)}
.detail-p.open{display:block}
.detail-in{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;padding:18px 20px;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r-sm)}
.detail-in div b{display:block;font-size:11px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:5px}
.detail-in div span{font-size:14px}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;padding:4px 11px;border-radius:999px}
.pill.ok{background:var(--ok-soft);color:var(--ok)}
.pill.no{background:var(--bg-2);color:var(--ink-3)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.cmp-foot{padding:14px 20px;background:var(--bg-3);font-size:13px;color:var(--ink-3);
  display:flex;gap:18px;flex-wrap:wrap}
.cmp-cards{display:none}

/* ---------- fiche ---------- */
.crumb{font-size:13.5px;color:var(--ink-3);padding:16px 0 6px}
.crumb a:hover{color:var(--ink)}.crumb i{font-style:normal;margin:0 8px;opacity:.5}
/* Le fil d'Ariane + le padding-top de .sec/.sec.tight cumulaient jusqu'a
   62px de vide avant le H1, "completement deconnant" (Jeremy, 24/09/2026).
   Scope a la PREMIERE section apres le fil d'Ariane seulement (jamais
   .sec plus bas dans la page, qui garde son espacement normal entre deux
   blocs).
   Deuxieme selecteur (30/09/2026) : depuis l'audit SEO du 29/09, le fil est
   suivi de son <script type="application/ld+json"> (gabarits.fil_ariane), et
   ".crumb + .wrap" ne trouvait plus sa cible : 50px de vide etaient revenus. */
.crumb + .wrap > .sec:first-child,
.crumb + script + .wrap > .sec:first-child{padding-top:18px}
.fiche{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:44px;align-items:start;padding-bottom:44px}
.gal{position:sticky;top:104px}
.gal-main{aspect-ratio:1/1;border-radius:var(--r-card);position:relative;overflow:hidden}
.gal-thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:10px}
.gal-thumbs .ph{aspect-ratio:1/1;border-radius:var(--r-sm);border:2px solid transparent;cursor:pointer;transition:.18s}
.gal-thumbs .ph:first-child{border-color:var(--ink)}
.gal-thumbs .ph:hover{border-color:var(--ink-3)}
.fiche h1{font-size:31px;margin-bottom:10px;letter-spacing:-0.025em}
.rating{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--ink-2);margin-bottom:22px;flex-wrap:wrap}
.stars{display:flex;gap:1px;color:var(--ink)}

.best-box{border:2px solid var(--ink);border-radius:var(--r-card);padding:22px;margin-bottom:20px;position:relative}
.best-tag{position:absolute;top:-11px;left:18px;background:var(--ink);color:#fff;font-size:11px;
  font-weight:600;letter-spacing:.06em;padding:4px 12px;border-radius:5px}
.best-top{display:flex;align-items:flex-end;gap:15px;flex-wrap:wrap;margin-bottom:16px}
.best-price{font-size:40px;font-weight:600;letter-spacing:-0.04em;line-height:1}
.best-drop{background:var(--deal-soft);color:var(--deal-600);font-size:13px;font-weight:600;padding:5px 11px;border-radius:6px}
.best-merch{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.best-merch .btn{flex:1;min-width:230px}
.best-note{display:flex;gap:9px;align-items:flex-start;margin-top:16px;padding-top:14px;
  border-top:1px solid var(--line-2);font-size:13.5px;color:var(--ink-2);line-height:1.5}
.best-note svg{flex:none;margin-top:3px;color:var(--ink-3)}

/* encart 3 lignes — repris de Glozin */
.infobox{border:1px solid var(--line);border-radius:var(--r-card);margin-bottom:22px}
.infobox div{display:flex;align-items:center;gap:14px;padding:15px 18px;border-bottom:1px dashed var(--line);font-size:14.5px}
.infobox div:last-child{border-bottom:0}
.infobox svg{flex:none;color:var(--ink);opacity:.8}
.infobox b{font-weight:600}

/* meta produit — repris de Glozin */
.meta{margin-bottom:22px}
.meta div{display:flex;gap:16px;padding:7px 0;font-size:14.5px}
.meta dt{color:var(--ink-2);min-width:128px;flex:none}
.meta dd{margin:0;font-weight:500}

.block{margin-bottom:24px}
.block-h{display:flex;align-items:baseline;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.block-h b{font-size:15.5px;font-weight:600}
.block-h .lnk{margin-left:auto;font-size:13.5px;color:var(--accent);font-weight:500}
.sizes{display:flex;flex-wrap:wrap;gap:8px}
.size{min-width:58px;padding:9px 12px;border:1.5px solid var(--line);border-radius:999px;
  font-family:inherit;font-size:14px;font-weight:500;text-align:center;transition:.16s;line-height:1.25}
.size:hover:not(:disabled){border-color:var(--ink)}
.size[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:#fff}
.size.few{border-style:dashed}
.size:disabled{opacity:.36;cursor:not-allowed;text-decoration:line-through}
.size em{display:block;font-size:10.5px;font-style:normal;color:var(--ink-3);font-weight:400}
.size[aria-pressed="true"] em{color:rgba(255,255,255,.75)}

.histo{border:1px solid var(--line);border-radius:var(--r-card);padding:22px;margin-bottom:28px}
.histo-head{display:flex;align-items:baseline;gap:14px;margin-bottom:10px;flex-wrap:wrap}
.histo-head b{font-size:16px;font-weight:600}
.histo-head .rng{margin-left:auto;display:flex;gap:6px}
.histo-legend{display:flex;gap:22px;font-size:13px;color:var(--ink-2);margin-top:14px;flex-wrap:wrap}
.histo-legend i{width:20px;height:2px;display:inline-block;vertical-align:middle;margin-right:7px}

.specs{display:grid;grid-template-columns:repeat(2,1fr);gap:0 30px;border-top:1px solid var(--line);padding-top:4px}
.specs div{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--line-2);font-size:14.5px}
.specs dt{color:var(--ink-2)}.specs dd{margin:0;font-weight:500;text-align:right}

.alert-band{background:var(--accent);color:#fff;border-radius:var(--r-card);padding:34px;
  display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center}
.alert-band h3{color:#fff;font-size:25px;margin-bottom:7px;letter-spacing:-0.02em}
.alert-band p{opacity:.85;margin:0;max-width:56ch;font-size:15px}
.alert-form{display:flex;gap:9px;flex-wrap:wrap}
.alert-form input{border:0;border-radius:999px;padding:13px 20px;font-family:inherit;font-size:15px;min-width:230px}
.disclosure{background:var(--bg-3);border:1px solid var(--line);border-radius:var(--r-card);
  padding:16px 18px;font-size:13.5px;color:var(--ink-2);margin-top:20px;line-height:1.55}

/* marques */
.brands{display:grid;grid-template-columns:repeat(8,1fr);gap:14px}
.brand{border:1px solid var(--line);border-radius:var(--r-sm);height:74px;display:grid;place-items:center;
  font-size:14.5px;font-weight:600;color:var(--ink-2);transition:.18s;letter-spacing:-0.02em}
.brand:hover{border-color:var(--ink);color:var(--ink)}

/* blog */
.post{border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;transition:.22s;display:flex;flex-direction:column}
.post:hover{border-color:var(--ink-3);box-shadow:0 10px 28px rgba(0,0,0,.06)}
.post .ph{aspect-ratio:16/9}
.post-body{padding:18px}
.post .cat{font-size:11.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.post b{display:block;font-size:17px;font-weight:600;line-height:1.3;margin-bottom:7px;letter-spacing:-0.015em}
.post p{font-size:14px;color:var(--ink-2);margin:0 0 12px}
.post .date{font-size:12.5px;color:var(--ink-3)}

/* footer */
.foot{background:var(--bg-3);border-top:1px solid var(--line);padding:52px 0 28px;font-size:14.5px;margin-top:8px}
.foot-grid{display:grid;grid-template-columns:1.7fr repeat(3,1fr);gap:38px}
.foot h4{font-size:13px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px;font-weight:600}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot a{color:var(--ink-2)}.foot a:hover{color:var(--ink)}
.foot-bottom{border-top:1px solid var(--line);margin-top:34px;padding-top:20px;display:flex;
  gap:20px;flex-wrap:wrap;font-size:13px;color:var(--ink-3)}



/* ---------- responsive ---------- */
@media (max-width:1180px){
  .hero-grid{grid-template-columns:1fr}
  .hero-side{grid-template-rows:none;grid-template-columns:1fr 1fr}
  .grid5{grid-template-columns:repeat(3,1fr)}
  .brands{grid-template-columns:repeat(4,1fr)}
  .banners{grid-template-columns:1fr 1fr}
  .fiche{grid-template-columns:1fr;gap:30px}
  .gal{position:static}
  .cmp-cols{display:none}
  .row{grid-template-columns:1.6fr 1fr 1fr 180px;gap:14px}
  .row .bestfor{grid-column:1/-1;order:5}
  .row .col-delai{display:none}
  .detail-in{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  h1{font-size:30px}h2{font-size:24px}
  .sec{padding:42px 0}
  .hero-txt{padding:26px}.hero-txt h1{font-size:30px}
  .hero-main{min-height:380px}
  .hero-side{grid-template-columns:1fr}
  .stats .wrap{grid-template-columns:1fr 1fr;gap:20px}
  .steps{grid-template-columns:1fr;gap:20px}
  .grid5{grid-template-columns:repeat(2,1fr);gap:12px}
  .grid3{grid-template-columns:1fr}
  .banners{grid-template-columns:1fr}
  .brands{grid-template-columns:repeat(3,1fr)}
  .head .wrap{height:auto;padding-top:14px;padding-bottom:14px;flex-wrap:wrap;gap:12px}
  .search{order:3;flex-basis:100%;max-width:none}
  .iconbtn span{display:none}
  .util .right{display:none}
  .specs{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .alert-band{grid-template-columns:1fr;padding:26px}
  .best-price{font-size:33px}
  /* comparatif en cartes */
  .cmp-t{display:none}
  .cmp-cards{display:block}
  .ocard{padding:18px;border-bottom:1px solid var(--line-2)}
  .ocard.best{background:var(--accent-soft)}
  .ocard-top{display:flex;align-items:center;gap:12px;margin-bottom:12px}
  .ocard-top .big-num{margin-left:auto;font-size:22px}
  .ocard .bestfor{margin-bottom:12px}
  .ocard-meta{display:flex;gap:10px;flex-wrap:wrap;font-size:13px;color:var(--ink-2);margin-bottom:13px}
  .ocard .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .marquee ul{animation:none}
}

/* ============ BLOCS v3, inspires de footdealz ============ */
/* hero centre */
.hero2{padding:72px 0 62px;text-align:center;background:var(--bg-3);border-bottom:1px solid var(--line);
  background-image:radial-gradient(circle at 1px 1px,var(--line) 1px,transparent 0);background-size:26px 26px}
.hero2 .wrap{max-width:860px}
.pill-badge{display:inline-flex;align-items:center;gap:9px;background:var(--bg);border:1px solid var(--line);
  padding:7px 17px;border-radius:999px;font-size:13.5px;font-weight:500;color:var(--ink-2);margin-bottom:22px}
.pill-badge i{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px var(--ok-soft)}
.hero2 h1{font-size:52px;letter-spacing:-0.035em;margin-bottom:16px;line-height:1.08}
.hero2 h1 em{font-style:normal;color:var(--deal)}
.hero2-sub{font-size:18px;color:var(--ink-2);max-width:60ch;margin:0 auto 30px}
.bigsearch{display:flex;align-items:center;gap:12px;background:var(--bg);border:2px solid var(--ink);
  border-radius:999px;padding:7px 7px 7px 22px;max-width:660px;margin:0 auto;transition:box-shadow .2s}
.bigsearch:focus-within{box-shadow:0 0 0 5px var(--accent-soft)}
.bigsearch svg{flex:none;color:var(--ink-3)}
.bigsearch input{flex:1;border:0;outline:none;font-family:inherit;font-size:16.5px;padding:11px 0;min-width:0;background:transparent}
.bigsearch .btn{flex:none;padding:13px 30px}
.pop{margin-top:18px;font-size:14px;color:var(--ink-2)}
.pop a{margin-left:12px;color:var(--ink);font-weight:500;border-bottom:1px solid var(--line);padding-bottom:1px}
.pop a:hover{border-color:var(--ink)}

/* titres de section centres */
.sec-head.centre{flex-direction:column;align-items:center;text-align:center;margin-bottom:34px}
.sec-head.centre p{max-width:56ch}
.surtitre{font-size:12.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);margin-bottom:10px}
.sec-head.bar>div:first-child{position:relative;padding-left:16px}
.sec-head.bar>div:first-child::before{content:"";position:absolute;left:0;top:3px;bottom:3px;
  width:4px;border-radius:3px;background:var(--deal)}
.centre-btn{display:flex;justify-content:center;margin-top:34px}

/* fleches de carrousel */
.rail-nav{margin-left:auto;display:flex;align-items:center;gap:9px;flex:none}
.rnav{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--line);display:grid;
  place-items:center;color:var(--ink-2);transition:.18s}
.rnav:hover{border-color:var(--ink);color:var(--ink)}

/* fond a motif */
.sec.motif{background:var(--bg-3);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background-image:radial-gradient(circle at 1px 1px,var(--line) 1px,transparent 0);background-size:30px 30px}
/* section foncee : accent, jamais de noir */
.sec.sombre{background:var(--accent-900,#0E1F31);color:#fff;border-top:1px solid var(--line)}
.sec.sombre h2{color:#fff}
.sec.sombre p{color:rgba(255,255,255,.72)}
.sec.sombre .surtitre{color:#fff;opacity:.62}
.sec.sombre .card{background:var(--bg);border-color:transparent;color:var(--ink)}
.sec.sombre .card .card-meta,.sec.sombre .card .card-offers{color:var(--ink-2)}
.sec.sombre .card .brandline{color:var(--ink-3)}

/* segmented control */
.segbar{display:inline-flex;gap:4px;background:rgba(255,255,255,.08);padding:5px;border-radius:999px;
  margin:0 auto 30px;flex-wrap:wrap;justify-content:center}
.sec.sombre .segbar{display:flex;width:fit-content;margin-left:auto;margin-right:auto}
.seg{padding:9px 20px;border-radius:999px;font-family:inherit;font-size:14.5px;font-weight:500;
  color:rgba(255,255,255,.72);transition:.18s;white-space:nowrap}
.seg:hover{color:#fff}
.seg[aria-selected="true"]{background:#fff;color:var(--accent);font-weight:600}

/* mosaique bento des clubs */
.bento{display:grid;grid-template-columns:1.25fr 1fr 1fr;grid-template-rows:200px 200px;gap:16px}
.club{position:relative;border-radius:var(--r-card);overflow:hidden;display:flex;align-items:flex-end;
  padding:20px;color:#fff;transition:.22s;isolation:isolate}
.club::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--c1)}
.club::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(160deg,transparent 38%,rgba(0,0,0,.62))}
/* Vraie photo produit (maillot du club) a la place du calque de couleur
   plate + montage joueur decoupe de la maquette : ce montage vient d'assets
   sources par club, introuvables dans le catalogue -- demande de Jeremy
   le 22/09/2026, honore par une vraie photo plutot que rien. */
.club img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:center 22%;transition:transform .4s}
.club:hover img{transform:scale(1.05)}
.club:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,.16)}
.club.grand{grid-row:span 2}
.club .sur{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;opacity:.85;display:block;margin-bottom:3px}
.club b{display:block;font-size:21px;font-weight:600;letter-spacing:-0.02em;line-height:1.15}
.club.grand b{font-size:30px}
.club span.sous{font-size:13.5px;opacity:.82}
.club .bande{position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--c2,var(--fluo));z-index:1}
.club .fl{position:absolute;right:18px;bottom:20px;opacity:.85}

/* barre de prix en bas de carte, facon footdealz */
.buybar{display:flex;align-items:stretch;border-top:1px solid var(--line-2);margin:12px -15px -15px}
.buybar .pz{flex:1;padding:11px 15px;min-width:0}
.buybar .lab{display:block;font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.buybar .val{font-size:19px;font-weight:600;letter-spacing:-0.025em;color:var(--deal)}
.buybar .cta{display:flex;align-items:center;gap:7px;padding:0 17px;background:var(--ink);color:#fff;
  font-size:13.5px;font-weight:600;transition:background .2s;white-space:nowrap}
.buybar .cta:hover{background:var(--accent)}
.card-media img{width:100%;height:100%;object-fit:contain;padding:5%;transition:transform .4s ease;position:relative;z-index:1}
.card:hover .card-media img{transform:scale(1.06)}
.tagline{position:absolute;left:11px;bottom:11px;z-index:2;background:rgba(255,255,255,.94);
  border:1px solid var(--line);font-size:11.5px;font-weight:500;padding:3px 9px;border-radius:999px}

/* ---------- rayons/surfaces (v7-mix.html), porte le 22/09/2026 : image
   plein cadre + numero + tag surface + nom, remplace le .card texte-seul.
   Photo = un vrai produit de la surface (le moins cher suivi), pas un stock
   Pexels comme la maquette. */
.rayons{display:grid;grid-template-columns:repeat(5,1fr);gap:15px}
.rayon{position:relative;aspect-ratio:3/4;border-radius:var(--r-card);overflow:hidden;background:var(--nuit);
  display:flex;align-items:flex-end;padding:18px;transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.rayon img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff;padding:12%;transition:transform .55s}
.rayon::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(6,16,22,.88) 6%,rgba(6,16,22,.05) 56%)}
.rayon:hover{transform:translateY(-4px)}
.rayon:hover img{transform:scale(1.06)}
.rayon .num{position:absolute;top:15px;left:17px;z-index:2;color:#fff;font-size:11.5px;font-weight:600;letter-spacing:.06em;display:flex;align-items:center;gap:6px}
.rayon .num i{width:5px;height:5px;border-radius:50%;background:var(--fluo)}
.rayon .tag{position:absolute;top:13px;right:13px;z-index:2;background:var(--fluo);color:var(--nuit);font-size:11.5px;font-weight:700;padding:5px 9px;border-radius:var(--r-sm)}
.rayon .nom{position:relative;z-index:2;font-family:var(--ft2);font-style:italic;font-weight:800;font-stretch:78%;font-size:22px;color:#fff;line-height:1;display:block}
.rayon .sous{position:relative;z-index:2;font-size:12.5px;color:rgba(255,255,255,.72);display:block;margin-top:4px}
@media (max-width:1150px){ .rayons{grid-template-columns:repeat(3,1fr)} }
@media (max-width:820px){ .rayons{grid-template-columns:repeat(2,1fr);gap:10px} }

@media (max-width:1180px){ .bento{grid-template-columns:1fr 1fr} .club.grand{grid-row:span 1} }
@media (max-width:820px){
  .hero2{padding:44px 0 40px}
  .hero2 h1{font-size:31px}
  .hero2-sub{font-size:16px}
  .bigsearch{flex-wrap:wrap;border-radius:22px;padding:12px}
  .bigsearch input{flex-basis:calc(100% - 40px)}
  .bigsearch .btn{width:100%}
  .bento{grid-template-columns:1fr;grid-template-rows:none}
  .club{min-height:150px}
  .segbar{width:100%;overflow-x:auto;justify-content:flex-start}
}


/* ---------------------------------------------------------------------------
   Bloc redactionnel des pages equipe et modele (19/09/2026)
   ---------------------------------------------------------------------------
   Trois zones, trois roles distincts, et la distinction est visuelle :

   .geo-rep   la reponse frontale, posee HAUT et en HTML brut. C'est le passage
              qu'un moteur generatif cite. Encadre pour qu'un lecteur la
              reconnaisse comme une reponse et non comme une accroche.
   .seo-intro l'identite de l'entite : le club, sa ville, ses couleurs, ou bien
              l'usage de la ligne de chaussures. C'est ce qui distingue cette
              page des 291 autres.
   .seo-desc  les sections en question, sous le tableau, ou l'acheteur descend
              apres avoir vu les prix.
   .seo-faq   la FAQ, doublee d'un schema FAQPage pose seulement si elle existe.

   Largeur de lecture bridee a 72ch pour .seo-intro/.seo-desc/.seo-faq : une prose
   qui court sur 1200 px ne se lit pas. .geo-rep fait exception (20/09/2026,
   Jeremy) : c'est un encart repere, pas un paragraphe de lecture suivie, il
   s'etend sur toute la largeur du bloc pour se voir immediatement.
--------------------------------------------------------------------------- */
.geo-rep{margin:18px 0 0;padding:16px 20px;background:var(--accent-soft);
  border-left:3px solid var(--accent);border-radius:0 10px 10px 0;width:100%}
.geo-rep p{margin:0;font-size:17px;line-height:1.6;color:var(--ink);text-align:justify;max-width:none}
.geo-rep strong{color:var(--accent-900)}

.wrap-seo{max-width:none}
.seo-bloc{padding-top:8px;border-top:1px solid var(--line)}
.seo-bloc h2{font-size:24px;letter-spacing:-0.02em;margin:34px 0 14px}
.seo-bloc h3{font-size:19px;letter-spacing:-0.015em;margin:28px 0 10px;color:var(--ink)}
.seo-bloc h4{font-size:16.5px;margin:22px 0 7px;color:var(--ink)}
.seo-bloc p{margin:0 0 12px;font-size:15.5px;line-height:1.72;color:var(--ink-2);text-align:justify}

.pager{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:32px;flex-wrap:wrap}
.pager .pg{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;
  padding:0 8px;border-radius:8px;border:1px solid var(--line);font-size:14.5px;font-weight:600;color:var(--ink)}
.pager .pg:hover{border-color:var(--ink);background:var(--bg-2)}
.pager .pg.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.pager .pg-nav{padding:0 14px;height:38px;border-radius:8px;border:1px solid var(--line);
  display:inline-flex;align-items:center;font-size:14.5px;font-weight:600;color:var(--ink)}
/* Pager des hubs /maillot//crampons/ : des <button> (pagination JS sur le
   catalogue complet, voir hub-filtres.js), pas des <a>, donc il faut
   reposer le fond/le curseur/la police que .pager tenait pour acquis d'un
   lien. Aussi tronque (1 … 8 9 10 … 106) : la liste complete des pages
   etait le probleme signale par Jeremy le 24/09/2026. */
.pager button.pg,.pager button.pg-nav{background:#fff;font-family:inherit;cursor:pointer}
.pg-ellipsis{color:var(--ink-3);padding:0 4px;user-select:none}
.pager .pg-nav:hover{border-color:var(--ink);background:var(--bg-2)}
.pager.bp-filtre{justify-content:flex-start;margin:0 0 22px}
.pager.bp-filtre .pg-nav.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.pager.bp-filtre .cpt{opacity:.6;margin-left:6px;font-weight:500}
.pager.bp-filtre .pg-nav.on .cpt{opacity:.8}
.seo-bloc strong{color:var(--ink);font-weight:600}
/* Liens dans le texte (maillage interne, 27/09/2026) : meme habillage que les
   articles du blog (.art-corps a, blog.css). Sans ces regles, a{color:inherit;
   text-decoration:none} les rend identiques au texte. */
.seo-bloc a,.geo-rep a,.hub-sec-head p a,.lien-mere a{color:var(--nuit-2);text-decoration:underline;text-underline-offset:2px;font-weight:500}
.seo-bloc a:hover,.geo-rep a:hover,.hub-sec-head p a:hover,.lien-mere a:hover{color:var(--ink)}
.sec-bleu .intro a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.seo-intro{padding:22px 0 6px}
.seo-intro h3{margin-top:0}
.seo-faq{margin-top:10px;padding-top:6px;border-top:1px solid var(--line-2)}
.seo-faq h4{font-weight:600}
.seo-faq p{margin-bottom:16px}

@media (max-width:820px){
  .geo-rep{padding:14px 16px}
  .seo-bloc h2{font-size:21px}
  .seo-bloc h3{font-size:17.5px}
}

/* Hierarchie des titres (audit SEO du 29/09/2026) : gabarits.hierarchie_titres()
   remonte d'un niveau un titre qui en sautait un (H3 sous un H1, H4 sous un H2)
   et lui laisse la classe hnN de son niveau d'origine. Ces regles lui rendent
   exactement l'allure qu'il avait. */
h2.hn3{font-size:20px}
h2.hn4,h3.hn4{font-size:1em}
h2.hn5,h3.hn5,h4.hn5{font-size:.83em}
h2.hn6,h3.hn6,h4.hn6,h5.hn6{font-size:.67em}
.seo-bloc h2.hn3{font-size:19px;letter-spacing:-0.015em;margin:28px 0 10px;color:var(--ink)}
.seo-bloc h3.hn4{font-size:16.5px;margin:22px 0 7px;color:var(--ink)}
.seo-intro h2.hn3{margin-top:0}
.seo-faq h3.hn4{font-weight:600}
@media (max-width:820px){
  .seo-bloc h2.hn3{font-size:17.5px}
}

/* Indice Foot Inside (29/09/2026) : info-bulle au survol (souris) et au clic
   (telephone, fiche-produit.js). Accrochee a .meta-h, jamais plus large que
   lui, et en display:none fermee : une bulle invisible mais dans la mise en
   page elargissait deja la fiche a 440 px (audit mobile du 27/09/2026). */
.meta-h{position:relative}
.indice{display:inline-flex;align-items:center;gap:6px}
.indice-i{width:18px;height:18px;padding:0;border-radius:50%;border:1.5px solid currentColor;background:none;
  color:inherit;font:700 11px/1 var(--f);font-style:normal;display:inline-flex;align-items:center;
  justify-content:center;cursor:pointer}
.indice-i:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.indice-bulle{display:none;position:absolute;left:0;top:calc(100% + 6px);z-index:30;max-width:min(320px,100%);
  padding:9px 12px;border-radius:8px;background:var(--ink);color:#fff;font-size:13px;line-height:1.45;
  box-shadow:0 8px 24px rgba(0,0,0,.18)}
.indice.ouvert .indice-bulle,.indice-i:focus-visible+.indice-bulle{display:block}
@media (hover:hover){.indice:hover .indice-bulle{display:block}}

/* H1 des hubs (29/09/2026) : le separateur de la regle « Chaussures Nike
   Phantom - Comparez les prix… » (REGLES-REDACTION-SEO.md) est lu par les
   moteurs mais pas affiche, la seconde ligne restant sous la premiere. Sans
   lui, le texte du H1 se lisait « …NikeComparez les prix ». */
.hub-h1-sep{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Maillage lateral des hubs (19/09/2026) : sans lui, une page equipe ou
   modele n'a aucun lien sortant vers une page soeur. */
.voisins{padding:34px 0 0;border-top:1px solid var(--line-2);margin-top:30px}
.voisins h2{font-size:18px;letter-spacing:-0.015em;margin:0 0 14px}
.voisins-liste{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:9px}
.voisins-liste a{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border:1px solid var(--line);
  border-radius:999px;font-size:14px;color:var(--ink-2);background:var(--bg);transition:.15s}
.voisins-liste a:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.voisins-liste a img{flex:none;width:20px;height:20px;object-fit:contain;margin-left:-4px}
.cdm26 .lien-mere{margin:14px 0 0}

/* Bandeau d'identite des pages selection (generer_pages._bandeau_selection,
   30/09/2026) : confederation, federation, classement FIFA date. */
.ident-sel{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0}
.ident-case{display:flex;flex-direction:column;gap:2px;padding:9px 14px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--bg-3);min-width:0}
.ident-case dt{font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.ident-case dd{margin:0;font-size:14px;font-weight:600;color:var(--ink)}
/* Page joueur (13/10/2026) : « Pays » avec drapeau, « Club » avec ecusson. */
.ident-joueur .ident-case dd,.ident-joueur .ident-case dd a{display:inline-flex;align-items:center;gap:8px}
.ident-joueur .ident-case dd a{color:inherit;text-decoration:none}
.ident-joueur .ident-case dd a:hover span{text-decoration:underline}
.ident-drapeau{width:24px;height:16px;object-fit:cover;border-radius:2px;box-shadow:0 0 0 1px var(--line);flex:none}
.ident-logo{width:20px;height:20px;object-fit:contain;flex:none}
/* Cartes de /joueurs/ (13/10/2026) : nom, puis pays et club avec drapeau et ecusson. */
.carte-joueur{display:flex;flex-direction:column;gap:7px;padding:16px;min-width:0}
.carte-joueur b{font-size:15px;font-weight:600;color:var(--ink)}
.cj-ligne{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-3);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Sous-menu « Maillots Coupe du Monde 2026 » du rayon maillots, avant la
   pagination (generer_pages._bloc_mondial_2026, 30/09/2026). Onglets par
   continent en CSS seul : un bouton radio par continent, cache mais
   focusable ; l'onglet coche allume son panneau. Les cles (europe, amsud,
   afrique, amnord, asie) sont celles de generer_pages.MONDIAL_2026. */
/* contain:inline-size : sur mobile, les onglets sur une ligne imposaient
   leur largeur (800px) a toute la colonne .hub-main, grille comprise. */
.cdm26{position:relative;contain:inline-size;margin-top:34px;padding:22px 24px 20px;border:1px solid var(--line);
  border-radius:var(--r-card);background:var(--bg-3)}
.cdm26-tete{margin-bottom:14px}
.cdm26-tete h2{font-size:19px;letter-spacing:-0.015em;margin:0}
.cdm26-tete p{margin:4px 0 0;font-size:14px;color:var(--ink-2)}
.cdm26-r{position:absolute;top:0;left:0;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.cdm26-onglets{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.cdm26-onglets label{display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border:1px solid var(--line);
  border-radius:999px;background:var(--bg);font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;
  white-space:nowrap;user-select:none;transition:.15s}
.cdm26-onglets label span{font-size:12px;font-weight:600;color:var(--ink-3)}
.cdm26-onglets label:hover{border-color:var(--ink)}
.cdm26-p{display:none;list-style:none;margin:0;padding:0;flex-wrap:wrap;gap:8px}
.cdm26-p a{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 8px;border:1px solid var(--line);
  border-radius:999px;background:var(--bg);font-size:14px;color:var(--ink);transition:.15s}
.cdm26-p a:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.cdm26-p img{flex:none;object-fit:contain}
.cdm26-nologo{flex:none;width:22px;height:22px}
/* Onglet actif et panneau affiche, lus sur la VALEUR du radio (01/10/2026) :
   deux menus par continent peuvent partager une page. */
.cdm26-r[value=europe]:checked~.cdm26-onglets [data-c=europe],
.cdm26-r[value=amsud]:checked~.cdm26-onglets [data-c=amsud],
.cdm26-r[value=afrique]:checked~.cdm26-onglets [data-c=afrique],
.cdm26-r[value=amnord]:checked~.cdm26-onglets [data-c=amnord],
.cdm26-r[value=asie]:checked~.cdm26-onglets [data-c=asie]{background:var(--nuit-2);border-color:var(--nuit-2);color:#fff}
.cdm26-r[value=europe]:checked~.cdm26-onglets [data-c=europe] span,
.cdm26-r[value=amsud]:checked~.cdm26-onglets [data-c=amsud] span,
.cdm26-r[value=afrique]:checked~.cdm26-onglets [data-c=afrique] span,
.cdm26-r[value=amnord]:checked~.cdm26-onglets [data-c=amnord] span,
.cdm26-r[value=asie]:checked~.cdm26-onglets [data-c=asie] span{color:rgba(255,255,255,.72)}
.cdm26-r[value=europe]:focus-visible~.cdm26-onglets [data-c=europe],
.cdm26-r[value=amsud]:focus-visible~.cdm26-onglets [data-c=amsud],
.cdm26-r[value=afrique]:focus-visible~.cdm26-onglets [data-c=afrique],
.cdm26-r[value=amnord]:focus-visible~.cdm26-onglets [data-c=amnord],
.cdm26-r[value=asie]:focus-visible~.cdm26-onglets [data-c=asie]{outline:2px solid var(--accent);outline-offset:2px}
.cdm26-r[value=europe]:checked~.cdm26-panneaux [data-c=europe],
.cdm26-r[value=amsud]:checked~.cdm26-panneaux [data-c=amsud],
.cdm26-r[value=afrique]:checked~.cdm26-panneaux [data-c=afrique],
.cdm26-r[value=amnord]:checked~.cdm26-panneaux [data-c=amnord],
.cdm26-r[value=asie]:checked~.cdm26-panneaux [data-c=asie]{display:flex}
@media (max-width:640px){
  .cdm26{padding:18px 16px 16px}
  .cdm26-onglets{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px 14px;padding:0 16px 2px}
  .cdm26-onglets::-webkit-scrollbar{display:none}
}

/* ==========================================================================
   CHROME v3 — porte depuis la maquette (v7-mix.html / assets/legal.css) le
   21/09/2026, premiere etape du recablage sur le nouveau design. Palette
   fluo/nuit + police Archivo/Inter, en plus de l'ancien systeme (pas a la
   place) : le reste des pages (cartes, hero, tableaux) n'est pas encore
   porte, donc les deux polices coexistent le temps du chantier.
   Classes distinctes de l'ancien chrome (.nav/.foot/.search/.iconbtn) pour
   ne rien casser ailleurs ; .util/.head/.logo sont reutilisees (roles
   identiques), les regles ci-dessous les surchargent completement car elles
   arrivent en dernier dans la feuille.
   ========================================================================== */
:root{
  --fluo:#C3F53C; --fluo-f:#A6D42C; --sur-fluo:#16324F;
  --nuit:#0E1F31; --nuit-2:#16324F; --nuit-3:#0A1826;
  --bleu-cta:#2E6DA6; --bleu-cta-f:#25577F; /* CTA "Voir l'offre chez X" : bleu, plus clair que --nuit-2 (menu) */
  --ft2:"Archivo",var(--f); --fc2:"Inter",var(--f);
}
.wrap-c{max-width:1340px;margin:0 auto;padding:0 24px}

.util{background:var(--nuit-3);border-bottom:0;color:rgba(255,255,255,.86);font-size:12.5px;
  font-family:var(--fc2);overflow:hidden;white-space:nowrap;padding:8px 0}
.util-piste{display:inline-block;animation:util-defile 95s linear infinite;will-change:transform}
.util:hover .util-piste{animation-play-state:paused}
.util-item{display:inline-flex;align-items:center;gap:9px;padding:0 24px;position:relative;
  color:inherit;text-decoration:none;transition:color .15s}
.util-item:hover{color:var(--fluo)}
.util-item .pt{width:7px;height:7px;border-radius:50%;background:var(--fluo);flex:none}
.util-item .remise{background:var(--fluo);color:var(--sur-fluo);font-weight:800;font-size:11.5px;
  padding:2px 8px;border-radius:999px;line-height:1.4}
@keyframes util-defile{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){ .util-piste{animation:none} }

.head{border-bottom:0;background:var(--nuit);color:#fff;position:sticky;top:0;z-index:120;
  font-family:var(--fc2)}
.head .wrap-c{display:flex;align-items:center;gap:26px;height:64px}
.logo{font-family:var(--ft2);font-style:italic;font-weight:900;font-stretch:80%;font-size:26px;
  color:var(--fluo);letter-spacing:-0.02em;flex:none}
.logo span{color:var(--fluo)}
/* Ancien logo Foot Inside en blanc (27/09/2026, demande de Jeremy) : l'en-tete
   ne doit pas grandir. Ordinateur : 48 px dans une barre de hauteur fixe
   (64 px). Mobile (<= 820 px, barre en hauteur automatique) : 40 px, sous les
   41,6 px du logo texte qu'il remplace. Fichier en 120 px de haut (net en 2x). */
.head .logo{display:flex;align-items:center}
.head .logo img{display:block;height:48px;width:auto}
@media (max-width:820px){ .head .logo img{height:40px} }
.rech{flex:1;max-width:640px;display:flex;background:#fff;border-radius:999px;overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,.2);transition:box-shadow .2s}
.rech:focus-within{box-shadow:0 0 0 3px var(--fluo)}
.rech select{border:0;background:var(--bg-2);padding:0 34px 0 20px;font-family:inherit;font-size:14px;
  color:var(--ink-2);cursor:pointer;appearance:none;border-right:1px solid var(--line);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%233E4040' stroke-width='2.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center}
.rech input{flex:1;border:0;outline:none;padding:12px 16px;font-family:inherit;font-size:15px;
  min-width:0;color:var(--nuit)}
.rech .go{background:var(--fluo);color:var(--sur-fluo);padding:0 22px;display:flex;align-items:center;
  gap:8px;font-weight:700;font-size:14px;transition:.18s}
.rech .go:hover{background:var(--fluo-f)}
.head-r{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none}
.hbtn{display:flex;align-items:center;gap:8px;padding:9px 13px;border-radius:8px;
  font-size:14px;color:rgba(255,255,255,.88);transition:.18s;position:relative}
.hbtn:hover{background:rgba(255,255,255,.1);color:#fff}
.hbtn .bul{position:absolute;top:3px;left:24px;background:var(--fluo);color:var(--nuit);font-size:10px;
  font-weight:700;min-width:16px;height:16px;border-radius:999px;display:grid;place-items:center;padding:0 4px}

.rayonsnav{background:var(--nuit-2);color:#fff;font-family:var(--fc2);position:relative}
.rayonsnav .wrap-c{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.rayonsnav .wrap-c::-webkit-scrollbar{display:none}
.rayonsnav a{display:flex;align-items:center;gap:8px;padding:13px 17px;font-size:14.5px;font-weight:500;
  white-space:nowrap;border-bottom:3px solid transparent;opacity:.85;transition:.18s;color:inherit}
.rayonsnav a svg{flex:none;opacity:.9}
.rayonsnav a:first-child{padding-left:0}
.rayonsnav a:hover{opacity:1}
.rayonsnav a.on{opacity:1;border-bottom-color:var(--fluo)}
.rayonsnav .lv{background:var(--fluo);color:var(--nuit);font-size:10px;font-weight:700;padding:1px 6px;border-radius:3px}
.rnav-drop{position:relative;display:flex;align-items:center}
.rnav-chev{display:flex;align-items:center;padding:13px 12px 13px 2px;color:inherit;opacity:.85;cursor:pointer}
.rnav-chev:hover{opacity:1}
.rnav-chev .chev{transition:transform .18s;pointer-events:none}
.rnav-drop.open .rnav-chev .chev{transform:rotate(180deg)}
.rnav-panel{position:absolute;top:100%;left:0;z-index:200;min-width:220px;background:#fff;color:var(--ink);
  border-radius:0 0 10px 10px;box-shadow:0 14px 30px rgba(0,0,0,.18);padding:8px;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:.16s}
.rnav-panel.open{opacity:1;visibility:visible;transform:translateY(0)}
.rnav-panel a{display:block;padding:10px 14px;border-radius:7px;font-size:14.5px;font-weight:500;
  color:var(--ink);opacity:1;border-bottom:0;white-space:nowrap}
.rnav-panel a:hover{background:var(--bg-2)}

.rnav-panel.mega{display:flex;gap:4px;min-width:0;padding:18px;border-radius:0 0 14px 14px}
/* Meme ferme, le panneau garde sa largeur (~1 390 px) : sur un ecran plus etroit il
   elargissait toute la page (barre de defilement horizontale, 25/09/2026). Il ne
   depasse plus l'ecran : ses colonnes passent a la ligne, et le script le recale. */
.rnav-panel.mega{max-width:calc(100vw - 32px);flex-wrap:wrap}
.mega-col{min-width:168px}
.mega-col .mega-tit{display:block;padding:4px 10px 10px;font-size:13px;font-weight:700;
  text-transform:uppercase;letter-spacing:.03em;color:#111;border-bottom:1px solid var(--line-2);
  margin-bottom:6px;border-radius:0;font-family:inherit;font-style:normal}
.mega-col .mega-tit:hover{color:var(--accent);background:none}
.mega-col ul{list-style:none;margin:0;padding:0}
.mega-col li a{padding:7px 10px;font-size:14px;font-weight:400;white-space:normal;
  display:flex;align-items:center;gap:9px}
.mega-col li a img{flex:none;object-fit:contain}
.mega-col li a .mega-nologo{flex:none;width:22px;height:22px}
.mega-col .mega-tit.mq-logo{display:flex;align-items:center;gap:8px;color:#111}
.mega-col .mega-tit.mq-logo img{flex:none;object-fit:contain;filter:none}

.pied-liens{background:var(--nuit-2);font-family:var(--fc2)}
.pied-liens .wrap-c{display:flex;justify-content:center;gap:34px;flex-wrap:wrap;padding:16px 24px}
.pied-liens a{color:rgba(255,255,255,.85);font-size:14px;font-weight:600;transition:.18s}
.pied-liens a:hover{color:var(--fluo)}

.pied{background:var(--nuit);color:#fff;padding:56px 0 26px;font-family:var(--fc2)}
.pied-sitemap{display:grid;grid-template-columns:repeat(3,1fr);gap:38px;padding-bottom:38px;
  border-bottom:1px solid rgba(255,255,255,.12)}
.pied-sitemap .pied-col+.pied-col{margin-top:30px}
.pied h4,.pied .pied-t{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--fluo);margin:0 0 14px;font-weight:700;line-height:1.18}
.pied ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:14.5px}
.pied a{color:rgba(255,255,255,.76)}
.pied a:hover{color:var(--fluo)}
.pied-brand{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:26px 0}
.pied-brand p{color:rgba(255,255,255,.66);font-size:14.5px;max-width:56ch;margin:0}
/* Meme logo blanc que l'en-tete (27/09/2026), en 64 px : le pied de page n'a
   pas de contrainte de hauteur, le logo y est la signature du site. */
.pied-brand .logo img{display:block;height:64px;width:auto}
.pied-b{padding-top:22px;border-top:1px solid rgba(255,255,255,.12);display:flex;align-items:center;
  gap:10px 22px;flex-wrap:wrap;font-size:13px;color:rgba(255,255,255,.5)}
.pied-b a{color:rgba(255,255,255,.6)}
.pied-b a:hover{color:var(--fluo)}

@media (max-width:820px){
  .head .wrap-c{height:auto;padding-top:14px;padding-bottom:14px;flex-wrap:wrap;gap:12px}
  .rech{order:3;flex-basis:100%;max-width:none}
  .hbtn span{display:none}
  .util .right{display:none}
  .pied-sitemap{grid-template-columns:1fr}
  .pied-sitemap .pied-col+.pied-col{margin-top:22px}
  .pied-sitemap>div+div{margin-top:26px}
}
@media (max-width:1150px){
  .pied-sitemap{grid-template-columns:1fr 1fr}
}

/* ==========================================================================
   FICHE PRODUIT v3 — porte depuis v8-fiche-produit.html le 21/09/2026.
   Classes nouvelles (.best/.bloc/.taille/.offres/.orow/...), l'ancien
   tableau .cmp/.row reste utilise par les pages modele/maillot (pas encore
   portees) : rien ne collisionne. Tailles/pointures filtrantes et bloc
   "meilleure offre" pilotes par /assets/fiche-produit.js, sur les vraies
   donnees d'offres de chaque fiche (aucune note/avis : le catalogue n'en a
   pas, donc la colonne Avis de la maquette n'est pas reprise ici). */
.best{border:2px solid var(--ink);border-radius:var(--r-card);padding:22px;margin-bottom:18px;position:relative;font-family:var(--fc2)}
.best-tag{position:absolute;top:-11px;left:18px;background:var(--ink);color:#fff;font-size:11px;
  font-weight:700;letter-spacing:.06em;padding:4px 12px;border-radius:6px}
.best-top{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.best-p{font-family:var(--ft2);font-style:italic;font-weight:800;font-stretch:80%;font-size:44px;line-height:1}
.best-av{font-size:15px;color:var(--ink-3);text-decoration:line-through}
.best-rem{background:var(--fluo);color:var(--sur-fluo);font-size:13px;font-weight:700;
  padding:4px 10px;border-radius:6px}
.best-m{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.best-m .btn-cta{flex:1;min-width:230px}
.best-mlogo{width:52px;height:52px;border:1px solid var(--line);border-radius:6px;
  display:grid;place-items:center;font-size:11px;font-weight:700;color:var(--ink-2);flex:none;overflow:hidden}
.best-mlogo img{max-width:74%;max-height:62%;object-fit:contain}
.best-note{display:flex;gap:9px;align-items:flex-start;margin-top:16px;padding-top:14px;
  border-top:1px solid var(--bg-2);font-size:13.5px;color:var(--ink-2);line-height:1.5}
.best-note svg{flex:none;margin-top:3px;color:var(--ink-3)}

.bloc{margin-bottom:22px;font-family:var(--fc2)}
.bloc-h{display:flex;align-items:baseline;gap:12px;margin-bottom:11px;flex-wrap:wrap}
.bloc-h b{font-size:15.5px;font-weight:600}
.tailles{display:flex;flex-wrap:wrap;gap:8px}
.taille{min-width:68px;padding:12px 16px;border:1.5px solid var(--line);border-radius:8px;
  font-family:inherit;font-size:14.5px;font-weight:600;text-align:center;transition:.16s;line-height:1.3;background:#fff}
.taille:hover:not(:disabled){border-color:var(--ink)}
.taille[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:#fff}
.taille em{display:block;font-size:11px;font-style:normal;color:var(--ink-3);font-weight:400;margin-top:6px}
.taille[aria-pressed="true"] em{color:rgba(255,255,255,.72)}
.taille:disabled{opacity:.36;cursor:not-allowed;text-decoration:line-through}

/* overflow:hidden retire le 22/09/2026 (Jeremy : "l'info dans l'info bulle
   n'est pas lisible") : il coupait la bulle de l'info-bulle cashback, qui
   s'ouvre vers le haut au-dessus de la 1re ligne et depassait donc le cadre
   de .offres. Les angles arrondis du haut/bas sont repris a la main sur la
   1re ligne et sur .ofoot plutot que de compter sur le clip du conteneur. */
.offres{border:1px solid var(--line);border-radius:var(--r-card);font-family:var(--fc2)}
.orow:first-child{border-radius:var(--r-card) var(--r-card) 0 0}
.ocols{display:grid;grid-template-columns:2.1fr .8fr 1.1fr 1.5fr 1.2fr 158px;gap:14px;
  padding:13px 20px;border-bottom:1px solid var(--line);background:#fff}
.ocols span{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.orow{display:grid;grid-template-columns:2.1fr .8fr 1.1fr 1.5fr 1.2fr 158px;gap:14px;
  padding:18px 20px;border-bottom:1px solid var(--bg-2);align-items:center;transition:background .16s}
.orow:last-child{border-bottom:0}
.orow:hover{background:var(--bg-3)}
.orow.best-row{background:var(--nuit);color:#fff;border-left:5px solid var(--fluo);
  padding-left:15px;border-bottom:0}
.orow.best-row:hover{background:var(--nuit)}
.orow.best-row .o-sous,.orow.best-row .o-port span{color:rgba(255,255,255,.62)}
.orow.best-row .best-mlogo{background:#fff;border-color:transparent}
.o-march{display:flex;align-items:center;gap:13px;min-width:0}
.o-march b{display:block;font-size:15.5px;font-weight:700}
.o-deal{display:inline-flex;align-items:center;vertical-align:middle;background:var(--fluo);color:var(--sur-fluo);font-size:10.5px;
  font-weight:700;letter-spacing:.04em;padding:3px 8px;border-radius:4px;margin-top:3px;line-height:1.3}
.orow.best-row .m-verif{color:rgba(255,255,255,.7)}
.orow.best-row .m-verif svg{color:var(--fluo)}
.o-port{font-size:14px;display:flex;align-items:center;gap:7px}
.o-port span{display:block;font-size:12px;color:var(--ink-3);margin-top:2px}
.o-tailles{font-size:13.5px}
.o-prix{text-align:right}
.v-ligne{display:flex;align-items:baseline;justify-content:flex-end;gap:14px}
.o-prix .v{font-family:var(--ft2);font-style:italic;font-weight:800;font-stretch:80%;font-size:24px;line-height:1}
/* % de remise reelle vs prix conseille, a cote du prix de chaque ligne
   (Jeremy, 22/09/2026, a la place de l'ecart "X € de moins que la 2e
   offre" juge peu convaincant). Vert = code couleur remise deja utilise
   partout ailleurs sur le site (best-rem, carte_deal). */
.o-remise{font-size:13px;font-weight:800;color:var(--ok);background:var(--ok-soft);
  border-radius:6px;padding:2px 7px;line-height:1.5}
.orow.best-row .o-remise{color:var(--fluo);background:rgba(163,209,25,.16)}
.o-sous{font-size:12px;color:var(--ink-3);margin-top:3px}
/* La 1re ligne (meilleure offre) se detache du reste du tableau plutot que
   d'etre une ligne coloree parmi d'autres (Jeremy, 22/09/2026 : "le tableau
   doit s'agencer en fonction de la meilleure offre") : prix plus grand. */
.orow.best-row .o-prix .v{font-size:30px}
.ofoot{padding:13px 20px;background:var(--bg-3);font-size:13px;color:var(--ink-3);display:flex;gap:18px;flex-wrap:wrap;
  border-radius:0 0 var(--r-card) var(--r-card)}

/* Badge cashback sur une offre, en bleu (Jeremy, 22/09/2026 : "en bleu avec
   le meme texte que sur runningdeals") -- distinct du fluo "MEILLEUR PRIX"
   pour ne pas les confondre, et de --bleu-cta pour rester dans la charte
   Foot Inside plutot que reprendre le fluo de RunningDeals tel quel. Bulle
   et contenu (montant cumule + mention "credite apres validation") copies
   du meme composant sur RunningDeals (fiche-produit.html::cashbackDe). */
.o-cashback{position:relative;display:inline-flex;align-items:center;vertical-align:middle;gap:5px;
  background:var(--bleu-cta);color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.03em;
  padding:3px 9px;border-radius:4px;margin-top:3px;margin-left:5px;cursor:help;line-height:1.3}
.o-cashback svg{width:12px;height:12px;flex:none}
.o-cashback-bulle{position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%);
  background:var(--nuit);color:#fff;font-size:12.5px;font-weight:500;letter-spacing:0;line-height:1.45;
  padding:10px 14px;border-radius:8px;width:230px;text-align:left;opacity:0;pointer-events:none;
  transition:opacity .15s ease;z-index:5}
.o-cashback-bulle b{color:var(--fluo);font-weight:800}
.o-cashback-bulle i{display:block;font-style:normal;color:rgba(255,255,255,.6);font-size:11px;margin-top:4px}
.o-cashback-bulle::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:6px solid transparent;border-top-color:var(--nuit)}
.o-cashback:hover .o-cashback-bulle,.o-cashback:focus-visible .o-cashback-bulle{opacity:1}
.orow.best-row .o-cashback{background:#fff;color:var(--bleu-cta)}

/* CTA "Voir l'offre chez X" : bleu au repos, fluo au survol/clic (choix de
   Jeremy le 21/09/2026, teste sur la maquette avant ce portage). */
.btn-cta{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 24px;
  background:var(--bleu-cta);color:#fff;border-radius:999px;font-weight:700;font-family:var(--fc2);
  font-size:15px;position:relative;z-index:1;
  transition:background .2s ease,color .2s ease,box-shadow .18s ease;
  animation:cta-halo 2.6s ease-in-out infinite}
@keyframes cta-halo{
  0%,100%{box-shadow:0 0 0 0 rgba(46,109,166,.55),0 6px 18px -8px rgba(46,109,166,.5)}
  50%{box-shadow:0 0 0 10px rgba(46,109,166,0),0 10px 26px -8px rgba(46,109,166,.7)}
}
.btn-cta svg{transition:transform .18s ease;animation:cart-bump 2s ease-in-out infinite;flex:none;transform-origin:70% 85%}
.btn-cta:hover,.btn-cta:focus-visible{background:var(--fluo);color:var(--bleu-cta);animation:none;
  box-shadow:0 12px 28px -12px rgba(163,209,25,.6)}
.btn-cta:hover svg{animation:none}
.btn-cta:active{transform:translateY(1px)}
@keyframes cart-bump{
  0%,78%,100%{transform:translateY(0) rotate(0)}
  84%{transform:translateY(-3px) rotate(-10deg)}
  90%{transform:translateY(0) rotate(6deg)}
  95%{transform:translateY(0) rotate(0)}
}
/* CTA de chaque ligne du comparateur : plate et invisible avant ce
   correctif (fond blanc, simple contour), corrigee le 22/09/2026 (Jeremy :
   "un putain de CTA attractif") sur le meme langage visuel que .btn-cta
   (bleu plein, bascule fluo au survol) plutot qu'un bouton fantome --
   seule la ligne MEILLEUR PRIX garde en plus le halo pulse de .btn-cta,
   pour ne pas faire clignoter les 5-6 lignes du tableau a la fois. */
.btn-sm.o-cta{padding:11px 19px;font-size:14.5px;background:var(--bleu-cta);color:#fff;border:1.5px solid transparent;
  animation:none;box-shadow:0 6px 16px -8px rgba(46,109,166,.65);border-radius:999px;display:inline-flex;
  align-items:center;gap:8px;font-family:var(--fc2);font-weight:700;transition:.18s;white-space:nowrap;
  position:relative;overflow:hidden}
.btn-sm.o-cta:hover,.btn-sm.o-cta:focus-visible{background:var(--fluo);color:var(--bleu-cta);
  box-shadow:0 8px 20px -8px rgba(163,209,25,.65);transform:translateY(-1px)}
.btn-sm.o-cta:active{transform:translateY(1px)}
/* 3e essai (Jeremy, 22/09/2026) : ni chevrons, ni pastille qui fidgete
   convaincaient. Reflet lumineux qui traverse le bouton en boucle (le
   "shine" des CTA premium, Stripe/Apple) -- le bouton entier respire au
   lieu d'un icone isole qui s'agite, plus proche de ce qu'on voit sur de
   vrais boutons d'achat qui convertissent. La fleche reste immobile au
   repos et ne bouge qu'au survol, net, pas de tremblement permanent. */
.btn-sm.o-cta::after{content:"";position:absolute;top:0;left:-30%;width:22%;height:100%;
  background:linear-gradient(115deg,transparent,rgba(255,255,255,.65),transparent);
  transform:skewX(-18deg);animation:cta-reflet 3.2s ease-in-out infinite}
@keyframes cta-reflet{
  0%,18%{left:-30%}
  55%,100%{left:130%}
}
.orow.best-row .btn-sm.o-cta::after{background:linear-gradient(115deg,transparent,rgba(255,255,255,.85),transparent)}
.cta-arr{display:inline-flex;flex:none;transition:transform .2s ease}
.btn-sm.o-cta:hover .cta-arr,.btn-sm.o-cta:focus-visible .cta-arr{transform:translateX(3px)}
.orow.best-row .btn-sm.o-cta{background:var(--fluo);color:var(--sur-fluo);border-color:var(--fluo);
  box-shadow:0 6px 16px -8px rgba(163,209,25,.55);animation:cta-halo-fluo 2.6s ease-in-out infinite}
.orow.best-row .btn-sm.o-cta:hover{background:var(--fluo-f);color:var(--sur-fluo);animation:none}
@keyframes cta-halo-fluo{
  0%,100%{box-shadow:0 0 0 0 rgba(163,209,25,.55),0 6px 16px -8px rgba(163,209,25,.55)}
  50%{box-shadow:0 0 0 8px rgba(163,209,25,0),0 10px 22px -8px rgba(163,209,25,.7)}
}
@media (prefers-reduced-motion:reduce){ .orow.best-row .btn-sm.o-cta{animation:none} }
@media (prefers-reduced-motion:reduce){ .btn-sm.o-cta::after{animation:none;display:none} }

@media (prefers-reduced-motion:reduce){ .btn-cta,.btn-cta svg{animation:none} }

/* ---------- reste de la fiche produit v8, porte trait pour trait le
   21/09/2026 (demande explicite de Jeremy) : galerie, meta, encart 3 lignes,
   alerte de prix, caracteristiques, guide des pointures, produits
   similaires. N4 vaut #A8A8A8, sans equivalent dans les tokens existants. */
.fiche{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:44px;
  align-items:start;padding-bottom:40px}
.gal{position:sticky;top:100px}
.gmain{aspect-ratio:1/1;border-radius:var(--r-card);overflow:hidden;position:relative;
  background:var(--bg-2);display:grid;place-items:center}
.gmain img{width:100%;height:100%;object-fit:contain;padding:6%}
.gflag{position:absolute;top:14px;left:14px;background:var(--fluo);color:var(--sur-fluo);
  font-size:11.5px;font-weight:700;padding:5px 11px;border-radius:var(--r-sm)}
.gfav{position:absolute;top:12px;right:12px;width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.94);display:grid;place-items:center;color:var(--ink-3);transition:.18s}
.gfav:hover{color:var(--deal)}
.gfav svg{width:18px;height:18px;flex:none}
/* Vignettes = vraies vues du produit (30/09/2026), jusqu'a 5, en boutons :
   la vue affichee porte .on (fiche-produit.js), plus :first-child. */
.gthumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:10px}
.gthumbs>*{aspect-ratio:1/1;border-radius:var(--r-sm);border:2px solid transparent;cursor:pointer;
  display:grid;place-items:center;transition:.18s;background:var(--bg-2);padding:0;font:inherit;min-width:0}
.gthumbs img{width:100%;height:100%;object-fit:contain;padding:9%}
.gthumbs>.on{border-color:var(--ink)}
.gthumbs>*:hover{border-color:#A8A8A8}
.gthumbs>.on:hover{border-color:var(--ink)}
.gthumbs>*:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.marque{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.ecusson{width:26px;height:26px;object-fit:contain;flex:none}
.fiche h1{font-family:var(--ft2);font-style:italic;font-weight:800;font-stretch:78%;
  font-size:clamp(26px,3.1vw,38px);line-height:1.02;letter-spacing:-0.015em;margin:0 0 10px;
  font-weight:800}
.meta-h{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink-3);
  margin-bottom:20px;flex-wrap:wrap;font-family:var(--fc2)}
.pastille{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;
  padding:3px 10px;border-radius:999px}
.pastille.ok{background:var(--ok-soft);color:var(--ok)}
.pastille.warn{background:var(--warn-soft);color:var(--warn)}

.infobox{border:1px solid var(--line);border-radius:var(--r-card);margin-bottom:22px;font-family:var(--fc2)}
.infobox div{display:flex;align-items:center;gap:13px;padding:14px 17px;
  border-bottom:1px dashed var(--line);font-size:14.5px}
.infobox div:last-child{border-bottom:0}
.infobox svg{flex:none;color:var(--ink);opacity:.75}

.alerte{border:1px solid var(--line);border-radius:var(--r-card);padding:18px;background:var(--bg-3);
  display:flex;gap:15px;align-items:center;flex-wrap:wrap;font-family:var(--fc2)}
.alerte svg{color:var(--nuit);flex:none}
.alerte .t{flex:1;min-width:210px}
.alerte b{display:block;font-size:15px}
.alerte span{font-size:13.5px;color:var(--ink-3)}
.alerte input{border:1.5px solid var(--line);border-radius:var(--r-sm);padding:10px 14px;
  font-family:inherit;font-size:14.5px;min-width:180px}

.sec-h{display:flex;align-items:center;gap:14px;margin-bottom:8px;flex-wrap:wrap;font-family:var(--fc2)}
.sec-h h2{font-family:var(--ft2);font-style:italic;font-weight:800;font-stretch:78%;
  font-size:clamp(22px,2.6vw,32px);letter-spacing:-0.012em;margin:0}
.sec-h .ico{width:34px;height:34px;border-radius:var(--r-sm);background:var(--fluo);
  color:var(--sur-fluo);display:grid;place-items:center;flex:none}
.verif{display:inline-flex;align-items:center;gap:7px;background:var(--ok-soft);color:var(--ok);
  font-size:12.5px;font-weight:600;padding:5px 12px;border-radius:999px}
.sec-sous{font-size:15px;color:var(--ink-3);margin-bottom:24px;font-family:var(--fc2)}
.o-cert{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--ink-3);margin-top:4px}
.orow.best-row .o-cert{color:rgba(255,255,255,.7)}
.o-cert svg{color:var(--ok);flex:none}
.orow.best-row .o-cert svg{color:var(--fluo)}

/* ---------- caracteristiques, cartes a icone ---------- */
.caracs{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;font-family:var(--fc2)}
.carac{display:flex;align-items:center;gap:14px;background:var(--bg-3);
  border:1px solid var(--bg-2);border-radius:var(--r-card);padding:14px 17px}
.carac .ci{width:34px;height:34px;border-radius:50%;background:#fff;border:1px solid var(--line);
  display:grid;place-items:center;flex:none;color:var(--ink-3)}
.carac .cl{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.carac .cv{font-size:15.5px;font-weight:600;margin-top:1px}
.carac .cv.mono{font-family:ui-monospace,"SFMono-Regular",Menlo,monospace;font-size:14.5px;letter-spacing:-0.01em}

/* ---------- guide des pointures (chaussures uniquement : conversion
   EU/UK/US standard, pas de donnee propre a une marque) ---------- */
.gt-sous{border-left:3px solid var(--fluo);padding:2px 0 2px 13px;font-size:14.5px;
  color:var(--ink-2);margin-bottom:20px;font-family:var(--fc2)}
.gt-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-card)}
table.gt{width:100%;border-collapse:collapse;min-width:520px;font-family:var(--fc2)}
.gt thead th{background:var(--nuit);color:#fff;font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:13px 14px;text-align:center;white-space:nowrap}
.gt thead th:first-child{text-align:left}
.gt td{padding:13px 14px;text-align:center;font-size:14.5px;border-bottom:1px solid var(--bg-2);color:var(--ink-2)}
.gt tbody tr:last-child td{border-bottom:0}
.gt tbody tr:nth-child(even){background:var(--bg-3)}
.gt td:first-child{text-align:left;font-weight:700;color:var(--sur-fluo)}
.gt tbody tr:hover{background:#F6FCE8}
.descr{max-width:78ch;font-size:16px;color:var(--ink-2);line-height:1.68;font-family:var(--fc2)}
.descr p+p{margin-top:14px}
.descr b{color:var(--ink)}
.points{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:22px}
.point{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:var(--ink-2);font-family:var(--fc2)}
.point svg{flex:none;margin-top:3px;color:var(--fluo-f)}
@media (max-width:760px){.points{grid-template-columns:1fr}}

.mesures{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:22px}
.mesure{font-size:14px;color:var(--ink-2);font-family:var(--fc2)}
.mesure b{display:block;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:5px}
@media (max-width:760px){.mesures{grid-template-columns:1fr 1fr}}

/* Guide des pointures depliable (demande de Jeremy le 21/09/2026, absent de
   la maquette qui l'affiche toujours ouvert) : <details> natif, summary
   reprend exactement le visuel .sec-h existant. */
.gt-detail summary{cursor:pointer;list-style:none}
.gt-detail summary::-webkit-details-marker{display:none}
.gt-detail summary .gt-chevron{margin-left:auto;transition:transform .18s ease;color:var(--ink-3)}
.gt-detail[open] summary .gt-chevron{transform:rotate(180deg)}

/* ---------- produits similaires ---------- */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,250px);gap:15px;
  overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;justify-content:start}
.rail>*{scroll-snap-align:start}
.rail::-webkit-scrollbar{height:5px}
.rail::-webkit-scrollbar-thumb{background:var(--line);border-radius:9px}
/* Carte .deal : calque sur le bloc "Les chaussures de football par marque"
   de v7-mix.html (demande de Jeremy le 22/09/2026), sans la section bleue
   qui l'entoure dans la maquette -- ici juste la carte, posee sur .rail. */
.deal{position:relative;display:block;border:1px solid var(--line);border-radius:var(--r-card);
  overflow:hidden;background:#fff;transition:transform .2s,box-shadow .2s;font-family:var(--fc2)}
.deal:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(0,0,0,.09)}
.deal-img{position:relative;aspect-ratio:1/1;display:grid;place-items:center;background:var(--bg-2)}
.deal-img img{width:100%;height:100%;object-fit:contain;padding:7%}
.deal .fav{position:absolute;top:9px;right:9px;z-index:2;width:30px;height:30px;border-radius:50%;
  background:#fff;display:grid;place-items:center;color:var(--ink-3);box-shadow:0 2px 6px rgba(0,0,0,.15);transition:.18s}
.deal .fav:hover{color:var(--deal)}
.deal .cat{position:absolute;left:10px;bottom:10px;z-index:2;display:inline-flex;align-items:center;gap:6px;
  background:rgba(14,31,49,.82);color:#fff;font-size:11px;font-weight:600;padding:4px 9px 4px 7px;border-radius:999px}
.deal .cat i{width:5px;height:5px;border-radius:50%;background:var(--fluo);flex:none}
.deal-b{padding:12px 13px 13px}
.deal .ligne-m{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.deal .marq{font-family:var(--ft2);font-style:italic;font-weight:800;font-stretch:80%;font-size:13px;color:var(--ink-2)}
.deal .marq img{display:block;height:16px;max-width:70px;width:auto;object-fit:contain}
/* Vert dedie (pas le --ok du reste du site, trop sombre/mat cote a cote) :
   demande de Jeremy le 24/09/2026, "en stock + picto doit etre exactement
   pareil que sur FootDealz" -- leur pastille est plus grande et d'un vert
   plus vif. Scope a .deal .stock seul pour ne rien changer ailleurs.
   27/09/2026 (controle de contraste) : le TEXTE passe a #15803D, #16A34A
   sur blanc donnait 3,3 pour un minimum de 4,5 ; la pastille garde le vert
   vif demande. */
.deal .stock{display:flex;align-items:center;gap:6px;font-size:12.5px;color:#15803D;font-weight:600}
.deal .stock i{width:7px;height:7px;border-radius:50%;background:#16A34A;flex:none}
.deal .nom{display:-webkit-box;font-size:13.5px;font-weight:600;line-height:1.32;margin:0 0 12px;color:var(--ink);
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.deal .bas{display:flex;align-items:center;justify-content:space-between;gap:8px}
.deal .prow{line-height:1.1}
.deal .dep{display:block;font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.deal .pv2{font-family:var(--ft2);font-style:italic;font-weight:800;font-stretch:80%;font-size:18px;color:var(--ink)}
.deal .cta-mini{display:inline-flex;align-items:center;gap:5px;background:var(--ink);color:#fff;
  font-size:12px;font-weight:700;padding:8px 12px;border-radius:999px;transition:.18s;flex:none}
.deal:hover .cta-mini{background:var(--fluo);color:var(--sur-fluo)}

.cta-f{display:inline-flex;align-items:center;gap:10px;background:var(--fluo);color:var(--sur-fluo);
  border-radius:999px;padding:13px 26px;font-size:15px;font-weight:700;transition:.2s;
  border:2px solid var(--fluo);font-family:var(--fc2)}
.cta-f:hover{background:var(--fluo-f);border-color:var(--fluo-f)}
.cta-f svg{flex:none}

@media (max-width:1150px){
  .ocols{display:none}
  .orow{grid-template-columns:1.8fr 1.3fr 150px;gap:12px}
  .orow .o-tailles{display:none}
  .fiche{grid-template-columns:1fr;gap:30px}
  .gal{position:static;max-width:520px}
  .caracs{grid-template-columns:1fr}
}

/* ==========================================================================
   HOME PAGE v7 — porte de v7-mix.html le 22/09/2026 (demande explicite et
   repetee de Jeremy : "completement degueulasse et pas du tout comme la
   maquette"). Classes et valeurs reprises mot pour mot depuis la maquette,
   tokens (--n50/--n100/--n300/--n500/--n700/--rouge/--vert...) traduits vers
   ceux deja en usage sur le reste du site (--line/--ink-3/--ink-2/--deal/
   --ok/--nuit) plutot que dupliques. Voir accueil.py pour ce qui est reellement
   different de la maquette et pourquoi (donnees 100% fictives dans la
   maquette : photos stock, tableau JS de "deals", 1015 articles de blog
   inexistant). */
.tit{font-family:var(--ft2);font-style:italic;font-weight:800;font-stretch:78%;
  letter-spacing:-0.012em;line-height:.98;margin:0}
h1.tit{font-size:clamp(32px,4.8vw,62px)}
.h-grand{font-size:clamp(28px,3.6vw,48px)}
h2.tit{font-size:clamp(25px,3.1vw,40px)}
h3.tit{font-size:clamp(19px,1.9vw,25px)}

.hero{position:relative;min-height:min(72vh,600px);overflow:hidden;background:var(--nuit);display:flex;align-items:center}
.hero .slide{position:absolute;inset:0;opacity:0;transition:opacity .9s ease}
.hero .slide.on{opacity:1}
.hero .slide img{width:100%;height:100%;object-fit:cover}
.hero .voile{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(6,16,22,.82) 0%,rgba(6,16,22,.64) 42%,rgba(6,16,22,.24) 100%)}
.hero .wrap-c{position:relative;z-index:2;width:100%;display:grid;grid-template-columns:1.15fr .95fr;
  gap:40px;align-items:center;padding-top:52px;padding-bottom:52px}
.hero .h-grand{color:#fff;max-width:30ch;margin-bottom:16px}
.hero .chap{color:rgba(255,255,255,.88);font-size:18px;max-width:46ch;margin-bottom:24px}
.hero .cta{display:flex;gap:11px;flex-wrap:wrap}
.etiq{display:inline-flex;align-items:center;gap:8px;background:var(--fluo);color:var(--nuit);
  font-size:12.5px;font-weight:700;padding:5px 12px;border-radius:var(--r-sm);margin-bottom:16px}
/* Fleches + puces du slider : la regle de base manquait (seul le masquage
   mobile existait plus bas), ce qui les rendait invisibles -- trouve le
   22/09/2026 en verifiant le DOM, pas juste a l'oeil. */
.hero-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:44px;height:44px;
  border-radius:50%;background:rgba(255,255,255,.14);backdrop-filter:blur(4px);display:grid;
  place-items:center;color:#fff;border:1px solid rgba(255,255,255,.28);transition:.18s}
.hero-nav:hover{background:var(--fluo);color:var(--nuit);border-color:var(--fluo)}
.hero-nav.prev{left:22px}
.hero-nav.next{right:22px}
.hero-dots{display:flex;gap:8px;margin-top:28px}
.hero-dots button{width:26px;height:4px;border-radius:999px;background:rgba(255,255,255,.32);transition:.2s;border:0;padding:0}
.hero-dots button:hover{background:rgba(255,255,255,.6)}
.hero-dots button.on{background:var(--fluo);width:36px}
@media (max-width:900px){ .hero .wrap-c{grid-template-columns:1fr} .hero-nav{display:none} }
/* .bigsearch/.pop viennent du hero2 clair (systeme v2) : sur le fond sombre
   du nouveau .hero photo, le texte gris de .pop serait illisible. */
.hero .pop{color:rgba(255,255,255,.72)}
.hero .pop a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.hero .pop a:hover{color:var(--fluo)}
.hero .bigsearch{max-width:520px}

.encart{background:#fff;border-radius:var(--r-card);padding:22px;box-shadow:0 18px 42px rgba(0,0,0,.32);max-width:480px}
.encart .enc-top{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap}
.encart .enc-tit{font-size:29px;color:var(--nuit)}
.encart .enc-sub{font-size:14.5px;font-weight:600;color:var(--ink-2)}
.enc-prix{display:flex;align-items:center;gap:18px;margin-top:16px}
.enc-vign{width:100px;height:100px;border-radius:12px;object-fit:contain;flex:none;background:var(--bg-2)}
.enc-prix-t{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.encart .pv{font-family:var(--ft2);font-style:italic;font-weight:800;font-stretch:80%;font-size:36px;line-height:1;margin:0}
.encart .av{font-size:13.5px;color:var(--ink-3);text-decoration:line-through}
.encart .enc-remise{background:var(--fluo);color:var(--sur-fluo);font-size:13.5px;font-weight:800;padding:4px 10px;border-radius:999px}
.encart .li{display:flex;align-items:center;gap:9px;padding:9px 0;border-top:1px solid var(--bg-2);font-size:13.5px}
.encart .li:first-of-type{margin-top:14px}
.encart .li b{font-weight:600}
.cta-offre{width:100%;margin-top:16px;display:flex;align-items:center;gap:12px;
  background:linear-gradient(135deg,var(--fluo),var(--fluo-f));color:var(--sur-fluo);
  font-weight:800;font-size:15px;letter-spacing:.01em;padding:14px 18px 14px 14px;
  border-radius:999px;position:relative;overflow:hidden;isolation:isolate;
  box-shadow:0 10px 22px -8px rgba(163,209,25,.6);animation:cta-respire 2.8s ease-in-out infinite}
.cta-offre .ico{width:32px;height:32px;border-radius:50%;background:rgba(22,50,79,.15);display:grid;place-items:center;flex:none}
.cta-offre .txt{flex:1;text-align:left}
.cta-offre svg.fl{transition:transform .18s ease;animation:ci-pousse 2.4s ease-in-out infinite;flex:none}
@keyframes ci-pousse{0%,55%,100%{transform:translateX(0)}72%{transform:translateX(5px)}86%{transform:translateX(0)}}
@keyframes cta-respire{
  0%,100%{box-shadow:0 10px 22px -8px rgba(163,209,25,.6),0 0 0 0 rgba(195,245,60,.55)}
  50%{box-shadow:0 10px 22px -8px rgba(163,209,25,.7),0 0 0 9px rgba(195,245,60,0)}
}
.cta-offre::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.6) 50%,transparent 58%);transform:translateX(-130%)}
.cta-offre:hover::after{transition:transform .55s ease;transform:translateX(130%)}
@media (prefers-reduced-motion:reduce){ .cta-offre svg.fl{animation:none} .cta-offre{animation:none} }

.btn-v7{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 26px;
  font-family:var(--fc2);font-size:15.5px;font-weight:600;border-radius:var(--r-sm);transition:.2s;border:2px solid transparent}
.btn-v7-j{background:var(--fluo);color:var(--sur-fluo)}
.btn-v7-j:hover{background:var(--fluo-f)}
.btn-v7-b{color:#fff;border-color:rgba(255,255,255,.45)}
.btn-v7-b:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.btn-v7-sm{padding:9px 14px;font-size:13.5px}

.marques-ticker{border-bottom:1px solid var(--bg-2);overflow:hidden;background:#fff}
.marques-ticker ul{display:flex;list-style:none;margin:0;padding:0;gap:44px;white-space:nowrap;
  animation:mq-defile 55s linear infinite;align-items:center}
.marques-ticker:hover ul{animation-play-state:paused}
@keyframes mq-defile{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marques-ticker li{padding:18px 0}
.marques-ticker li a{display:flex;align-items:center;gap:11px;font-weight:700;font-size:15px;color:var(--ink-2);transition:color .2s}
.marques-ticker li img{height:30px;width:30px;object-fit:contain;flex:none}
.marques-ticker li a:hover{color:var(--nuit)}

.secv7{padding:68px 0}
.secv7.gris{background:var(--bg-3)}
.secv7-h{display:flex;align-items:flex-end;gap:20px;margin-bottom:10px;flex-wrap:wrap}
.introv7{font-size:16.5px;color:var(--ink-3);margin-bottom:28px;max-width:72ch}
.lnkv7{margin-left:auto;font-size:15px;font-weight:600;display:inline-flex;align-items:center;gap:8px;
  border-bottom:2px solid var(--fluo);padding-bottom:2px;transition:gap .2s;flex:none}
.lnkv7:hover{gap:13px}

.deals-sec{padding-top:30px;padding-bottom:56px}
.deals-h{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.deals-h h2{display:flex;align-items:center;gap:14px}
.deals-h .barre{width:5px;height:26px;background:var(--fluo);border-radius:3px;flex:none}
.deals-nav{display:flex;align-items:center;gap:10px}
.deals-nav .rond{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--nuit);transition:.18s;flex:none}
.deals-nav .rond:hover{background:var(--nuit);color:#fff;border-color:var(--nuit)}
.deals-nav .lnk-tout{display:inline-flex;align-items:center;gap:7px;font-size:14.5px;font-weight:600;margin-left:6px;border-bottom:2px solid var(--fluo);padding-bottom:2px}
.deal .rem{position:absolute;top:10px;left:10px;z-index:2;background:var(--fluo);color:var(--sur-fluo);
  font-size:17px;font-weight:900;padding:5px 11px;border-radius:999px;box-shadow:0 4px 10px rgba(163,209,25,.5);letter-spacing:-.01em}

.sec-bleu{background:linear-gradient(150deg,var(--nuit) 0%,var(--nuit-2) 55%,var(--nuit-3) 100%);color:#fff}
.sec-bleu .introv7{color:rgba(255,255,255,.72)}
.methode-sec{padding:40px 0}
.grid-sec{padding:52px 0}
.ligue-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:18px}
@media (max-width:1150px){ .ligue-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:820px){ .ligue-grid{grid-template-columns:repeat(2,1fr)} }
.ligue-grid.grid4{grid-template-columns:repeat(4,1fr);margin-top:0}
@media (max-width:980px){ .ligue-grid.grid4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .ligue-grid.grid4{grid-template-columns:1fr} }

/* Hubs /maillot/ et /crampons/ : sidebar filtres + grille 4 colonnes, sur
   le modele footdealz.com/comparateur (Jeremy, 23/09/2026). */
/* H1 en deux lignes (titre + sous-titre plus petit) et texte d'intro qui
   utilise toute la largeur de la page, pas les 62ch par defaut de
   .sec-head p -- Jeremy, 23/09/2026, uniquement sur les hubs filtrables. */
.hub-h1-sub{display:block;font-size:.46em;font-weight:600;color:var(--ink-2);margin-top:4px;
  letter-spacing:-0.01em}
.hub-sec-head p{max-width:none}
.hub-layout{display:grid;grid-template-columns:260px 1fr;gap:28px;align-items:start;margin-top:20px}
@media (max-width:900px){ .hub-layout{grid-template-columns:1fr} }
/* Collee en HAUT, sous l'en-tete : demande de Jeremy le 26/09/2026, qui
   remplace celle du 24/09 (collee en bas). Plus haute que l'ecran (880 px
   pour 820 disponibles en 1440x900), elle defile avec la page jusqu'a
   montrer son bas puis se recolle en haut des qu'on remonte : c'est
   hub-filtres.js qui ajuste `top`. Pas d'ascenseur interne (rejete le
   24/09, "pas UX 2026"). 80px = en-tete colle de 64px + 16px d'air, valeur
   de depart avant le script. */
.hub-side{position:sticky;top:80px}
@media (max-width:900px){ .hub-side{position:static} }
.hub-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px;
  flex-wrap:wrap}
.hub-toolbar #hub-compte{font-size:14.5px;font-weight:700;color:var(--ink)}
.hub-tri-lab{font-size:13px;color:var(--ink-2);display:flex;align-items:center;gap:8px}
.hub-tri-lab select{border:1.5px solid var(--line);border-radius:var(--r-sm);padding:7px 10px;
  font-size:13.5px;color:var(--ink);background:#fff}
.hub-vide{padding:40px 0;text-align:center;color:var(--ink-2);font-size:14.5px}
.hub-note{margin-top:22px;font-size:12.5px;color:var(--ink-3);text-align:center}
.deal.hf-hide{display:none}

/* Bouton "Filtres" du toolbar : la seule facon d'ouvrir la sidebar sous
   900px (tiroir), invisible sur desktop ou la sidebar est deja affichee. */
.hub-filtres-btn{display:none;align-items:center;gap:8px;padding:9px 14px;border:1.5px solid var(--ink);
  border-radius:var(--r-sm);background:#fff;color:var(--ink);font-size:13.5px;font-weight:700;cursor:pointer}
@media (max-width:900px){ .hub-filtres-btn{display:inline-flex} }
.hf-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;
  padding:0 5px;border-radius:999px;background:var(--fluo);color:var(--sur-fluo);font-size:11px;
  font-weight:800;font-style:normal;margin-left:6px}
/* [hidden] doit gagner sur les display:flex/inline-flex ci-dessus, sinon
   les badges/chips restent visibles a 0 malgre l'attribut (bug constate le
   23/09/2026 : meme specificite CSS, l'auteur l'emportait sur l'UA). */
.hf-badge[hidden],.hub-chips[hidden]{display:none!important}

/* Chips des filtres actifs, au-dessus de la grille -- demande de Jeremy le
   23/09/2026 ("ameliore l'ux") : voir/retirer un filtre sans rouvrir la
   sidebar. */
.hub-chips{display:flex;flex-wrap:wrap;gap:8px;margin:-6px 0 16px}
.hub-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px 6px 12px;border-radius:999px;
  background:var(--bg-3);border:1px solid var(--line);color:var(--ink);font-size:12.5px;font-weight:600;
  cursor:pointer}
.hub-chip:hover{border-color:var(--ink-3)}
.hub-chip span{color:var(--ink-3);font-size:14px;line-height:1}

.hf{border:1px solid var(--line);border-radius:var(--r-card);padding:18px;background:#fff}
.hf-head-row{display:flex;align-items:center;justify-content:space-between}
.hf-head{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:700;color:var(--ink);
  margin-bottom:14px}
.hf-close{display:none}
/* Promo uniquement : sur la meme ligne que les autres en-tetes de groupe
   (icone/libelle/compteur), plus l'encadre gris qui la detachait
   visuellement du reste de la sidebar -- redispose le 24/09/2026 (Jeremy,
   "revoit la disposition de Promotion en haut"). */
.hf-promo{border-top:none;padding-top:0;padding-bottom:16px}
.hf-promo-row{display:flex;align-items:center;gap:9px;cursor:pointer;color:var(--ink)}
.hf-promo-row span{flex:1;font-size:12.5px;font-weight:700}
.hf-promo-row .hf-n{flex:none;font-weight:700;color:var(--ink-3);font-style:normal;font-size:12px;
  margin-right:2px}
.hf-promo-row input{position:absolute;opacity:0;width:0;height:0}
.hf-switch{position:relative;width:36px;height:20px;border-radius:999px;background:var(--line);flex:none;
  transition:.18s}
.hf-switch::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
  background:#fff;transition:.18s}
.hf-promo-row input:checked + .hf-switch{background:var(--fluo)}
.hf-promo-row input:checked + .hf-switch::after{transform:translateX(16px)}
.hf-group{border-top:1px solid var(--line-2);padding:14px 0}
.hf-group:first-of-type{border-top:none;padding-top:0}
.hf-gh{font-size:12.5px;font-weight:700;color:var(--ink);margin-bottom:10px}
/* Groupes en <details>/<summary> : accordeon natif, ouvrable/fermable au
   clic, replies par defaut (sauf Budget/Pour qui) pour que la sidebar
   tienne dans l'ecran sans scroller toute la page -- Jeremy, 23/09/2026,
   pictos calques sur footdealz.com/comparateur. */
summary.hf-gh{cursor:pointer;list-style:none;display:flex;align-items:center;gap:9px;margin-bottom:0;
  color:var(--ink)}
summary.hf-gh::-webkit-details-marker{display:none}
summary.hf-gh svg{flex:none;color:var(--ink-3)}
summary.hf-gh span{flex:1}
summary.hf-gh::after{content:"+";font-size:16px;font-weight:400;color:var(--ink-3);transition:transform .2s;
  margin-left:4px}
.hf-group[open] summary.hf-gh{margin-bottom:10px}
.hf-group[open] summary.hf-gh::after{transform:rotate(45deg)}
.hf-pills{display:flex;flex-wrap:wrap;gap:7px}
.hf-pill{padding:6px 12px;border:1.5px solid var(--line);border-radius:999px;font-size:12.5px;
  font-weight:600;color:var(--ink-2);background:#fff;cursor:pointer;transition:.15s}
.hf-pill:hover{border-color:var(--ink-3)}
.hf-pill.on{background:var(--ink);border-color:var(--ink);color:#fff}
.hf-chk{display:flex;align-items:center;gap:9px;padding:6px 2px;font-size:13.5px;color:var(--ink-2);
  cursor:pointer}
.hf-chk input{width:16px;height:16px;accent-color:var(--fluo);flex:none}
.hf-chk span{flex:1}
.hf-chk i{font-style:normal;font-size:11.5px;color:var(--ink-3)}
/* Pointure / Taille (01/10/2026) : une grille de boutons, comme les pastilles
   Budget, mais a choix multiple (une case par bouton, cachee, focusable). */
.hf-tailles{display:grid;grid-template-columns:repeat(auto-fill,minmax(36px,1fr));gap:5px;padding:4px 0 2px}
.hf-t{position:relative;display:block;cursor:pointer}
.hf-t.hf-t2{grid-column:span 2}
.hf-t input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.hf-t span{display:flex;align-items:center;justify-content:center;min-height:34px;padding:0 4px;
  border:1.5px solid var(--line);border-radius:8px;background:var(--bg);font-size:12.5px;font-weight:600;
  color:var(--ink-2);text-align:center;line-height:1.15;transition:.15s}
.hf-t:hover span{border-color:var(--ink-3)}
.hf-t input:checked+span{background:var(--ink);border-color:var(--ink);color:#fff}
.hf-t input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.hf-reset{display:block;width:100%;margin-top:14px;padding:10px;border:1.5px solid var(--line);
  border-radius:var(--r-sm);background:#fff;color:var(--ink-2);font-size:13px;font-weight:600;
  cursor:pointer;text-align:center;transition:.15s}
.hf-reset:hover{border-color:var(--ink);color:var(--ink)}

/* Groupe "Age" : pas un accordeon (toujours visible), juste apres Budget --
   ordre revu le 24/09/2026 pour suivre le squelette footdealz (Promo,
   Budget, puis les filtres de public). Garde le filet du haut comme les
   autres .hf-group, seul le bas est particulier (pas d'accordeon donc pas
   de fermeture nette, un filet en plus separe du groupe suivant). */
.hf-age{padding-bottom:16px;border-bottom:1px solid var(--line-2);margin-bottom:2px}
.hf-age .hf-gh{display:flex;align-items:center;gap:9px;color:var(--ink);margin-bottom:10px}

/* Logo marque en miniature devant chaque case (demande de Jeremy le
   23/09/2026, "ajoute les logos des tops marques en miniature"). */
.hf-logo{width:15px;height:15px;object-fit:contain;flex:none}

/* Logos legerement reduits sur les hubs /maillot/ et /crampons/ uniquement
   (Jeremy, 24/09/2026) : .grid4 n'existe que la, jamais sur la home ou les
   autres grilles carte_deal. !important necessaire pour passer devant le
   style en ligne de carte_deal (hauteur fixee au cas par cas, voir
   gabarits.py::carte_deal). */
.grid4 .deal .marq img{height:24px!important}

/* Pastille de couleur devant chaque case Couleur, utile pour assortir une
   chaussure aux couleurs d'un club amateur. */
.hf-dot{width:14px;height:14px;border-radius:50%;flex:none;border:1px solid rgba(0,0,0,.12)}
.hf-dot-noir{background:#111}
.hf-dot-blanc{background:#fff}
.hf-dot-gris{background:#9a9a9a}
.hf-dot-bleu{background:#2251c4}
.hf-dot-rouge{background:#d61f28}
.hf-dot-vert{background:#1f9d55}
.hf-dot-jaune{background:#f4c430}
.hf-dot-orange{background:#f07f13}
.hf-dot-rose{background:#ec6fad}
.hf-dot-violet{background:#7c4dcc}
.hf-dot-marron{background:#7a4b2a}
.hf-dot-beige{background:#d8c3a0}
.hf-dot-turquoise{background:#1abc9c}
.hf-dot-multicolore{background:conic-gradient(#d61f28,#f4c430,#1f9d55,#2251c4,#7c4dcc,#d61f28)}

/* Tiroir mobile : sidebar hors ecran par defaut sous 900px, ouverte via le
   bouton "Filtres" du toolbar (hub-filtres.js) -- avant ca, il fallait
   scroller toute la liste de filtres avant d'atteindre le premier produit
   sur mobile. */
.hub-side-backdrop{display:none}
@media (max-width:900px){
  .hub-side{position:fixed;top:0;left:0;bottom:0;width:min(340px,86vw);z-index:300;padding:16px;
    background:var(--bg);transform:translateX(-105%);transition:transform .25s;overflow-y:auto}
  .hub-side.hf-open{transform:translateX(0)}
  .hub-side .hf{border:none;padding:0}
  .hf-close{display:block;width:32px;height:32px;border-radius:50%;border:1.5px solid var(--line);
    background:#fff;font-size:18px;line-height:1;color:var(--ink-2);cursor:pointer}
  .hub-side-backdrop{display:block;position:fixed;inset:0;z-index:290;background:rgba(17,17,17,.45);
    opacity:0;pointer-events:none;transition:opacity .25s}
  /* Le backdrop precede .hub-side dans le HTML (voir generer_pages.py) :
     :has() regarde en avant, jamais en arriere. */
  .hub-side-backdrop:has(~ .hub-side.hf-open){opacity:1;pointer-events:auto}
  body.hf-lock{overflow:hidden}
}

.etapes{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.etape{display:flex;gap:16px}
.etape .n{font-family:var(--ft2);font-style:italic;font-weight:800;font-stretch:80%;font-size:30px;color:var(--fluo);flex:none;line-height:1}
.etape b{display:block;font-size:17px;font-weight:600;margin-bottom:6px}
.etape p{font-size:14.5px;color:rgba(255,255,255,.72);margin:0}
@media (max-width:900px){ .etapes{grid-template-columns:1fr} }

.seofaq{display:grid;grid-template-columns:1.2fr .9fr;gap:56px;align-items:start}
.seofaq-txt .sur{display:block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--nuit-2);margin-bottom:10px}
.seofaq-txt h2{max-width:20ch;margin-bottom:20px}
.seofaq-txt p{font-size:15.5px;line-height:1.65;color:var(--ink-2);margin-bottom:16px;max-width:68ch}
.seofaq-txt p b{color:var(--nuit);font-weight:700}
.seofaq-txt p a{text-decoration:underline;text-underline-offset:2px;font-weight:600}
.seofaq-txt h3{font-size:15px;font-weight:700;margin:26px 0 12px;color:var(--nuit)}
.taglist{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px;padding:0;list-style:none}
.taglist li a{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:6px 14px;
  font-size:13.5px;font-weight:600;color:var(--ink-2);text-decoration:none;transition:.18s}
.taglist li a:hover{border-color:var(--nuit);color:var(--nuit);background:var(--bg-3)}
.usages{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.usages li{font-size:14.5px;color:var(--ink-2);line-height:1.5;padding-left:20px;position:relative}
.usages li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:50%;background:var(--fluo)}
.usages li a{text-decoration:underline;text-underline-offset:2px;font-weight:600}
.seofaq-disclaimer{font-size:12.5px;color:var(--ink-3);margin-top:26px;padding-top:18px;border-top:1px solid var(--bg-2);max-width:70ch}
.seofaq-faq{position:sticky;top:90px}
.seofaq-faq .sur{display:block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--nuit-2);margin-bottom:10px}
.seofaq-faq h3{margin-bottom:6px}
.faq{margin-top:18px}
.faq details{border-bottom:1px solid var(--line);padding:17px 0}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;font-size:16px;font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;font-size:23px;color:var(--ink-3);transition:transform .2s;line-height:1}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin-top:11px;color:var(--ink-3);font-size:14.5px;max-width:64ch;margin-bottom:0}
@media (max-width:980px){ .seofaq{grid-template-columns:1fr} .seofaq-faq{position:static} }

.banmarque{position:relative;display:block;border-radius:var(--r-card);overflow:hidden;min-height:170px;background:var(--nuit);transition:opacity .2s}
.banmarque:hover{opacity:.92}
.banmarque img{display:block;width:100%;height:100%;object-fit:cover}

/* ---------- tableau comparatif .cmp (facon Bankrate), porte le 22/09/2026
   depuis v7-mix.html mot pour mot : vignette produit, colonne "pourquoi
   c'est une affaire", ligne du meilleur prix en sombre+filet fluo, detail
   depliable. Remplace tableau_offres() sur la home (gabarits.bloc_comparatif). */
.cmp{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 10px 24px rgba(0,0,0,.05)}
.cmp-h{display:flex;align-items:center;gap:14px;padding:16px 20px;border-bottom:1px solid var(--line);flex-wrap:wrap;font-family:var(--fc2)}
.cmp-h b{font-size:16px;font-weight:600}
.tris{margin-left:auto;display:flex;gap:6px}
.tri{border:1px solid var(--line);padding:7px 15px;border-radius:999px;font-family:inherit;font-size:13.5px;color:var(--ink-3);transition:.18s}
.tri[aria-pressed="true"]{background:var(--nuit);border-color:var(--nuit);color:#fff;font-weight:600}
.cols{display:grid;grid-template-columns:2.4fr 1fr 1.3fr 1.6fr 155px;gap:9px;padding:13px 20px;border-bottom:1px solid var(--line);background:#fff}
.cols span{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.cmp .row{display:grid;grid-template-columns:2.4fr 1fr 1.3fr 1.6fr 155px;gap:9px;padding:18px 20px;
  border-bottom:1px solid var(--bg-2);align-items:center;transition:background .16s;font-family:var(--fc2)}
.cmp .row:last-child{border-bottom:0}
.cmp .row:hover{background:var(--bg-3)}
.cmp .row.best{background:var(--nuit);color:#fff;border-left:5px solid var(--fluo);padding-left:15px;border-bottom:0}
.cmp .row.best:hover{background:var(--nuit)}
.cmp .row.best .mnom{color:rgba(255,255,255,.62)}
.cmp .row.best .mlogo.has-img{color:#fff}
.cmp .row.best .mver{color:rgba(255,255,255,.7)}
.cmp .row.best .mver svg{color:var(--fluo)}
.cmp .row.best .sous{color:rgba(255,255,255,.62)}
.cmp .row.best .pour b{color:#fff}
.cmp .row.best .pour{color:rgba(255,255,255,.62)}
.cmp .row.best .det{color:rgba(255,255,255,.75)}
.cmp .row.best .det:hover{color:#fff}
.mnom{font-size:12.5px;color:var(--ink-3);margin-bottom:5px}
.row-prod{display:flex;align-items:center;gap:14px}
.row-vign{width:64px;height:64px;border-radius:8px;object-fit:contain;background:var(--bg-3);border:1px solid var(--line);flex:none;padding:5px}
.cmp .row.best .row-vign{background:#fff;border-color:transparent}
.oc .row-prod{margin-bottom:4px}
.mlogo{font-family:var(--ft2);font-style:italic;font-weight:800;font-stretch:80%;font-size:21px;letter-spacing:-0.02em}
.mlogo.has-img{display:flex;align-items:center;gap:8px;font-size:14px;font-style:normal;font-weight:700;letter-spacing:0;color:var(--ink-2)}
.mlogo.has-img img{height:22px;width:auto;max-width:64px;object-fit:contain;flex:none}
.mver{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-3);margin-top:7px}
.mver svg{color:var(--ok);flex:none}
.gros{font-family:var(--ft2);font-style:italic;font-weight:800;font-stretch:80%;font-size:25px;line-height:1;white-space:nowrap}
.gros.j{color:var(--ink)}
.cmp .row.best .gros.j{color:#fff}
.sous{font-size:12.5px;color:var(--ink-3);margin-top:4px}
.pour{font-size:13.5px;color:var(--ink-3);line-height:1.4}
.pour b{display:block;color:var(--nuit);font-weight:600;font-size:14.5px;margin-bottom:2px}
.cmp .pill{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;padding:3px 10px;border-radius:999px}
.cmp .pill.ok{background:var(--ok-soft);color:var(--ok)}
.act{display:flex;flex-direction:column;gap:8px}
.det{font-size:13.5px;color:var(--ink-3);display:inline-flex;align-items:center;justify-content:center;gap:6px;background:none;border:0;cursor:pointer;font-family:inherit}
.det:hover{color:var(--nuit)}
.det svg{transition:transform .22s}
.det[aria-expanded="true"] svg{transform:rotate(180deg)}
.detp{display:none;padding:0 20px 20px;background:var(--bg-3);border-bottom:1px solid var(--bg-2)}
.detp.open{display:block}
.detin{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:16px 18px}
.detin b{display:block;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:4px}
.detin span{font-size:14px}
.cmp-f{padding:13px 20px;background:var(--bg-3);font-size:13px;color:var(--ink-3);display:flex;gap:18px;flex-wrap:wrap}
.cmp-cards{display:none}
@media (max-width:1150px){
  .cols{display:none}
  .cmp .row{grid-template-columns:1.6fr 1fr 1fr 180px}
  .cmp .row .col-p{display:none}
  .cmp .row .pour{grid-column:1/-1;order:5}
  .detin{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .cmp-t{display:none}
  .cmp-cards{display:block}
  .oc{padding:18px;border-bottom:1px solid var(--bg-2)}
  .oc.best{background:var(--nuit);color:#fff;border-left:5px solid var(--fluo)}
  .oc.best .mnom,.oc.best .mver,.oc.best .oc-m{color:rgba(255,255,255,.65)}
  .oc.best .mlogo.has-img{color:#fff}
  .oc.best .pour b{color:#fff}
  .oc.best .row-vign{background:#fff;border-color:transparent}
  .oc-h{display:flex;align-items:center;gap:12px;margin-bottom:11px}
  .oc-h .gros{margin-left:auto;font-size:23px}
  .oc-m{display:flex;gap:9px;flex-wrap:wrap;font-size:13px;color:var(--ink-3);margin-bottom:12px}
}

/* Index des marques /marques/ (25/09/2026). */
.mq-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px;margin-top:22px}
.mq-tuile{display:flex;flex-direction:column;align-items:center;gap:8px;padding:22px 16px;border:1px solid var(--line);
  border-radius:var(--r-card);background:#fff;text-align:center;text-decoration:none;color:var(--ink);transition:.18s}
.mq-tuile:hover{border-color:var(--ink);transform:translateY(-2px)}
.mq-tuile img{height:34px;width:auto;max-width:120px;object-fit:contain}
.mq-tuile .mq-nom{font-weight:800;font-size:18px;height:34px;display:flex;align-items:center}
.mq-tuile b{font-size:15px}
.mq-tuile span{font-size:13px;color:var(--ink-3)}

/* Bandeau cookies : une seule ligne, plus petit (Jeremy, 26/09/2026). Sorti
   du <style> de deploiement/bloc-mesure-audience.html ; « body #fi-cookies »
   l'emporte aussi sur le style encore ecrit dans les pages pas regenerees.
   Texte court sous 640px (.fi-court), pour tenir sur une ligne sur mobile. */
body #fi-cookies{position:fixed;left:50%;right:auto;bottom:14px;transform:translateX(-50%);z-index:9999;
  width:max-content;max-width:calc(100vw - 20px);margin:0;background:#0E1F31;color:#fff;border-radius:999px;
  padding:5px 5px 5px 16px;display:flex;align-items:center;gap:8px;flex-wrap:nowrap;font-family:inherit;
  font-size:12.5px;line-height:1.3;box-shadow:0 6px 20px rgba(0,0,0,.22)}
body #fi-cookies p{margin:0;flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff}
body #fi-cookies a{color:#fff;text-decoration:underline}
body #fi-cookies button{flex:none;border:0;border-radius:999px;padding:6px 14px;font-family:inherit;font-size:12.5px;
  font-weight:700;cursor:pointer;line-height:1.2}
body #fi-cookies .fi-ok{background:#C3F53C;color:#0E1F31}
body #fi-cookies .fi-non{background:transparent;color:#fff;text-decoration:underline;padding:6px 10px 6px 4px;font-weight:500}
body #fi-cookies .fi-court{display:none}
@media (max-width:640px){
  body #fi-cookies{font-size:12px;padding-left:12px;gap:4px}
  body #fi-cookies .fi-long{display:none}
  body #fi-cookies .fi-court{display:inline}
}

/* Visuel promotionnel des rayons /chaussures-de-football/ et /maillots-de-foot/
   (Jeremy, 26/09/2026) : une case de la grille, place et contenu choisis dans
   /admin/. « large » = deux cases. */
.promo-carte{position:relative;display:flex;align-items:flex-end;min-height:340px;border-radius:16px;overflow:hidden;
  background:#0E1F31;color:#fff;text-decoration:none;isolation:isolate}
.promo-carte img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .4s ease}
.promo-carte:hover img{transform:scale(1.03)}
.promo-voile{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(14,31,49,0) 25%,rgba(14,31,49,.88) 100%)}
.promo-txt{display:flex;flex-direction:column;gap:6px;padding:18px}
.promo-txt b{font-size:22px;line-height:1.15;font-weight:700}
.promo-txt > span{font-size:14px;line-height:1.4;opacity:.92}
.promo-txt .promo-cta{align-self:flex-start;margin-top:6px;background:#C3F53C;color:#0E1F31;opacity:1;font-weight:700;
  padding:9px 16px;border-radius:999px;font-size:14px}
.ligue-grid .promo-large{grid-column:span 2}
@media (max-width:520px){ .ligue-grid .promo-large{grid-column:auto} }
@media (prefers-reduced-motion:reduce){ .promo-carte img{transition:none} }

/* Slide « fond degrade » du hero, sans visuel (Jeremy, 26/09/2026) : le meme
   degrade que la section « On compare pour toi, tu joues moins cher »
   (.sec-bleu de home-v7.css). Aussi le fond par defaut quand aucune photo. */
.pg-accueil .hero .slide-degrade{background:linear-gradient(150deg,var(--nuit) 0%,var(--nuit-2) 55%,var(--nuit-3) 100%)}
.pg-accueil .hero .slide-degrade .voile{display:none}