/* ============================================================
   RUNNINGDEALS — Design System
   Comparateur running, trail et montres GPS
   Light / clean / editorial — accent volt
   ============================================================ */

/* Pourquoi DEUX tokens d'accent et pas un seul :
   l'orange #C2FF1F tenait les deux roles a la fois, fond de bouton ET couleur
   de texte, parce qu'il garde un contraste correct sur blanc. Un vert fluo,
   non : #C2FF1F sur blanc donne un rapport de contraste d'environ 1,3 pour 1,
   soit un texte illisible. D'ou la separation :
     --accent       le volt, uniquement en APLAT (fond de bouton, badge, surlignage)
     --accent-ink   ce qu'on ecrit PAR-DESSUS le volt : du noir, jamais du blanc
     --accent-text  le vert profond, pour ecrire EN accent sur fond clair
   Toute nouvelle regle qui met du volt en `color:` sur fond clair est un bug. */

/* Google Fonts chargé de façon asynchrone depuis le HTML */

/* ---------- TOKENS ---------- */
:root{
  /* surfaces */
  --bg:#F7F7F5;
  --surface:#FFFFFF;
  --surface-2:#F2F2F0;
  --surface-3:#E8E8E6;
  --border:rgba(0,0,0,0.08);
  --border-strong:rgba(0,0,0,0.15);

  /* ink */
  --text:#111110;
  --text-dim:#6B6B67;
  --text-faint:#ABABAB;

  /* accent */
  --accent:#C2FF1F;
  --accent-hover:#AEEB00;
  --accent-ink:#0B1400;
  --accent-text:#3B7A00;
  --accent-glow:rgba(194,255,31,0.28);

  /* semantic */
  --ok:#16E07A;
  --ok-dim:rgba(22,224,122,0.14);
  --warn:#E8A317;
  --down:#E5484D;

  /* type */
  --font-display:'Roboto',sans-serif;
  --font:'Roboto',system-ui,sans-serif;
  --mono:'Roboto Mono',ui-monospace,monospace;

  /* radius */
  --r-sm:5px;
  --r:9px;
  --r-lg:14px;
  --r-pill:100px;

  /* layout */
  --maxw:1320px;
  --nav-h:70px;
}

/* ---------- RESET ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{overflow-x:clip}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select{font-family:inherit;color:inherit}
ul{list-style:none}
::selection{background:var(--accent);color:var(--accent-ink)}

/* ---------- TYPOGRAPHY HELPERS ---------- */
.display{font-family:var(--font-display);font-weight:800;line-height:0.96;letter-spacing:-0.01em;text-transform:uppercase}
.mono{font-family:var(--mono)}
*{font-feature-settings:"zero" 1}
.eyebrow{
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--text-dim);
}
.eyebrow.accent{color:var(--accent-text)}

/* ---------- LAYOUT ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.section{padding:72px 0}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:sticky;top:0;z-index:60;
  height:var(--nav-h);
  background:rgba(247,247,245,0.90);
  backdrop-filter:blur(18px) saturate(1.3);
  border-bottom:1px solid var(--border);
}
.nav-inner{
  max-width:var(--maxw);margin:0 auto;height:100%;
  padding:0 28px;
  display:flex;align-items:center;gap:28px;
}
.logo{
  font-family:var(--font-display);font-weight:900;
  font-size:21px;letter-spacing:-0.02em;text-transform:uppercase;
  display:flex;align-items:center;gap:2px;white-space:nowrap;
}
.logo .dot{color:var(--accent-text)}
.nav-search{
  flex:1;max-width:520px;
  display:flex;align-items:center;gap:10px;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  padding:9px 16px;
  transition:border-color .15s,box-shadow .15s;
}
.nav-search:focus-within{border-color:var(--border-strong);box-shadow:0 0 0 3px rgba(255,255,255,0.04)}
.nav-search svg{flex:none;color:var(--text-faint)}
.nav-search input{
  flex:1;border:none;background:none;outline:none;
  font-size:14px;color:var(--text);
}
.nav-search input::placeholder{color:var(--text-faint)}
.nav-search kbd{
  font-family:var(--mono);font-size:11px;color:var(--text-faint);
  border:1px solid var(--border);border-radius:4px;padding:2px 6px;
}
.nav-links{display:flex;align-items:center;gap:22px;margin-left:auto}
.nav-link{
  font-size:14px;font-weight:500;color:var(--text-dim);
  transition:color .15s,border-color .15s;white-space:nowrap;
  border-bottom:2px solid transparent;padding-bottom:2px;
}
.nav-link:hover{color:var(--accent-text);border-bottom-color:var(--accent-text)}
.nav-link.active{color:var(--text)}
.nav-spacer{flex:1}
.icon-btn{
  width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;color:var(--text-dim);
  transition:background .15s,color .15s;
}
.icon-btn:hover{background:var(--surface-2);color:var(--text)}
.nav-toggle{display:none}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-weight:700;font-size:14px;
  padding:13px 22px;border-radius:var(--r);
  transition:transform .12s,background .15s,border-color .15s,color .15s;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{background:var(--accent-hover)}
.btn-ghost{background:var(--surface-2);color:var(--text);border:1px solid var(--border)}
.btn-ghost:hover{border-color:var(--border-strong);background:var(--surface-3)}
.btn-outline{border:1px solid var(--border-strong);color:var(--text)}
.btn-outline:hover{background:var(--surface-2)}
.btn-lg{padding:17px 30px;font-size:15px}
.btn-sm{padding:9px 16px;font-size:13px}
.btn-block{display:flex;width:100%}

/* ============================================================
   BADGES / CHIPS
   ============================================================ */
.badge{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:0.05em;text-transform:uppercase;
  padding:4px 10px;border-radius:var(--r-pill);
  border:1px solid var(--border);color:var(--text-dim);
}
.badge.hot{color:var(--accent-text);border-color:rgba(194,255,31,0.4);background:rgba(194,255,31,0.08)}
.badge.ok{color:var(--ok);border-color:rgba(22,224,122,0.35);background:var(--ok-dim)}
.badge.solid{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.badge.ltd{color:#E7C9FF;border-color:rgba(190,140,255,0.4);background:rgba(160,100,255,0.1)}
/* Encre NOIRE sur le fluo, pas blanche. Le blanc sur #C2FF1F donne un contraste
   d'environ 1,4:1, sous le minimum lisible : le pourcentage de remise, qui est
   l'information la plus regardee d'une vignette, s'effacait dans son propre
   fond. Corrige le 09/09/2026, sur 157 pages modele d'un coup. Meme encre que
   l'etiquette de la fiche produit, --accent-ink, ratio 15,8:1. */
/* L'EPINGLE DE REMISE, UNE SEULE POUR TOUT LE SITE.
   Jeremy le 11/09/2026, deux captures a l'appui : « je veux la meme chose
   epingle -34% design que sur le visuel Nike, pas adidas ». Les deux venaient
   du meme site : la page d'accueil posait un aplat fluo carre en italique, la
   page modele une pastille arrondie cernee de vert. Celle de l'accueil est
   retenue, et ces regles la reproduisent a l'identique (cf. `.c-badge` dans
   home_template.py) : aplat fluo, encre noire, italique, angles droits.
   Le cadre vert fonce, demande la veille, est retire avec la pastille : c'est
   lui qui donnait au badge son air « adidas ». */
.badge.promo{color:var(--accent-ink);border:0;border-radius:0;
  background:var(--accent);font-weight:900;font-style:italic;font-size:13px;
  font-family:inherit;letter-spacing:0;text-transform:none;padding:6px 12px}
.badge.new{color:#0ea5e9;border-color:rgba(14,165,233,0.4);background:rgba(14,165,233,0.08);font-weight:700}
.card-price .old{font-family:var(--mono);font-size:11px;color:var(--text-faint);text-decoration:line-through;margin-left:7px}

/* ── Toast notification ── */
.km-toast{position:fixed;bottom:88px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--text);color:var(--bg);font-size:14px;font-weight:600;padding:11px 22px;border-radius:var(--r-pill);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:9999;white-space:nowrap}
.km-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── Newsletter section ── */
.nl-section{background:var(--surface-2);border-top:1px solid var(--border);padding:52px 0}
.nl-inner{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.nl-copy .eyebrow{margin-bottom:10px}
.nl-copy h2{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:clamp(22px,2.6vw,32px);letter-spacing:-0.01em;margin-bottom:12px}
.nl-copy p{color:var(--text-dim);font-size:15px;line-height:1.6;max-width:40ch}
.nl-form{display:flex;gap:10px;flex-wrap:wrap}
.nl-form input{flex:1;min-width:220px;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-pill);padding:13px 20px;font-size:15px;color:var(--text);outline:none;transition:border-color .15s}
.nl-form input:focus{border-color:var(--accent-text)}
.nl-form input::placeholder{color:var(--text-faint)}
.nl-form button{background:var(--accent);color:var(--accent-ink);border:none;border-radius:var(--r-pill);padding:13px 28px;font-weight:700;font-size:15px;cursor:pointer;white-space:nowrap;transition:opacity .15s}
.nl-form button:hover{opacity:.9}
.nl-note{font-family:var(--mono);font-size:11px;color:var(--text-faint);margin-top:12px}
@media(max-width:768px){.nl-inner{grid-template-columns:1fr;gap:28px}}

/* ── Favoris page ── */
.favs-empty{text-align:center;padding:80px 24px}
.favs-empty-icon{width:56px;height:56px;color:var(--border-strong);margin:0 auto 20px;display:block}
.favs-empty h2{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:24px;margin-bottom:10px}
.favs-empty p{color:var(--text-dim);font-size:15px;margin-bottom:28px}

/* ── Vu récemment ── */
.recent-section{padding-top:0}

.chip{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:500;
  padding:8px 14px;border-radius:var(--r-pill);
  background:var(--surface-2);border:1px solid var(--border);
  color:var(--text-dim);transition:all .15s;cursor:pointer;
}
.chip:hover{border-color:var(--border-strong);color:var(--text)}
.chip.on{background:var(--text);color:#fff;border-color:var(--text);font-weight:600}
.chip .x{opacity:.5}

/* trust score */
.trust{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:13px}
.trust .bars{display:flex;gap:2px;align-items:flex-end;height:14px}
.trust .bars i{width:3px;background:var(--text-faint);border-radius:1px;display:block}
.trust.high .bars i{background:var(--ok)}
.trust.mid .bars i{background:var(--warn)}

/* ============================================================
   IMAGE PLACEHOLDER (user replaces)
   ============================================================ */
.ph{
  position:relative;overflow:hidden;
  background:
    repeating-linear-gradient(135deg,#EBEBEB 0 12px,#E4E4E2 12px 24px);
  display:grid;place-items:center;
}
.ph::after{
  content:attr(data-label);
  font-family:var(--mono);font-size:11px;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--text-faint);
  border:1px dashed var(--border-strong);border-radius:var(--r-pill);
  padding:5px 12px;background:rgba(255,255,255,0.6);
}
.ph.glow{
  background:
    radial-gradient(120% 90% at 50% 12%,rgba(194,255,31,0.07),transparent 60%),
    repeating-linear-gradient(135deg,#EBEBEB 0 12px,#E4E4E2 12px 24px);
}

/* ============================================================
   PRODUCT CARD
   ============================================================ */
.grid{display:grid;gap:18px}
.cards-6{grid-template-columns:repeat(6,1fr)}
.cards-4{grid-template-columns:repeat(4,1fr)}
.cards-3{grid-template-columns:repeat(3,1fr)}

.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  overflow:hidden;
  transition:transform .18s,border-color .18s,box-shadow .18s;
  position:relative;
  display:flex;
  flex-direction:column;
}
.card:hover{
  transform:translateY(-4px);
  border-color:var(--border-strong);
  box-shadow:0 12px 32px -10px rgba(0,0,0,0.12);
}
.card-media{
  position:relative;aspect-ratio:1/1;
  width:100%;flex:none;
  background:#F4F4F2;
  display:grid;place-items:center;
  overflow:hidden;
}
.card-media .ph-cap{
  font-family:var(--mono);font-size:10px;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--text-faint);
  border:1px dashed var(--border);border-radius:var(--r-pill);padding:4px 10px;
}
.card-media img{width:100%;height:100%;object-fit:contain;padding:16px;transition:transform .38s ease;}
.card:hover .card-media img{transform:scale(1.06);}
.card-tags{position:absolute;top:12px;left:12px;display:flex;gap:6px;z-index:2}
.card-fav{
  position:absolute;top:11px;right:11px;z-index:2;
  width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,0.82);backdrop-filter:blur(6px);
  display:grid;place-items:center;color:var(--text-dim);
  border:1px solid var(--border);transition:all .15s;
}
.card-fav:hover{color:var(--accent-text);border-color:rgba(194,255,31,0.4)}
.card-fav.on{color:var(--accent-text);border-color:var(--accent-text)}
.card-fav.on svg{fill:var(--accent)}
.card-body{padding:15px 16px 17px;flex:1;display:flex;flex-direction:column}
.card-foot{margin-top:auto}
.card-brand{font-family:var(--mono);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-dim);margin-bottom:5px}
.card-name{font-family:var(--font-display);font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:-0.01em;line-height:1.2;margin-bottom:12px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:36px}
.card-foot{display:flex;align-items:flex-end;justify-content:space-between}
.card-price .lbl{font-family:var(--mono);font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-faint);display:block;margin-bottom:2px}
.card-price .val{font-family:var(--mono);font-size:19px;font-weight:700}
.card-offers{font-family:var(--mono);font-size:11px;color:var(--text-dim);text-align:right}
.card-offers b{color:var(--accent-text);font-weight:700}
.card-cta{
  position:absolute;bottom:0;left:0;right:0;z-index:3;overflow:hidden;
  background:var(--accent);color:#000;
  font-family:var(--font-display);font-size:11px;font-weight:800;letter-spacing:0.05em;text-transform:uppercase;
  text-align:center;padding:10px 14px;white-space:nowrap;text-overflow:ellipsis;
  box-shadow:0 -6px 20px rgba(0,0,0,0.08);
  transform:translateY(100%);transition:transform .22s cubic-bezier(.4,0,.2,1);
}
.card:hover .card-cta{transform:translateY(0);}
.card-cta::after{
  content:'';position:absolute;top:0;bottom:0;left:-80%;width:50%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.22),transparent);
  transition:left .55s ease .05s;pointer-events:none;
}
.card:hover .card-cta::after{left:140%;}
.card-cta.cta-new{background:#111;color:#fff;}
.card-cta.cta-rare{background:#A064FF;color:#fff;}

/* footer */
.foot{border-top:1px solid var(--border);padding:32px 0 40px;margin-top:0}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:40px}
.foot h4{font-family:var(--mono);font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:var(--text-faint);margin-bottom:16px}
.foot a{display:block;font-size:12px;color:var(--text-dim);padding:5px 0;transition:color .15s}
.foot a:hover{color:var(--text)}
.foot-newsletter{display:flex;justify-content:space-between;align-items:center;gap:48px;padding:48px 0 40px;border-bottom:1px solid var(--border);margin-bottom:0}
.foot-nl-left{flex:1}
.foot-nl-left h3{font-size:clamp(18px,2.4vw,26px);font-weight:800;text-transform:uppercase;line-height:1.2;margin-bottom:10px;letter-spacing:-0.01em}
.foot-nl-left p{color:var(--text-dim);font-size:14px;line-height:1.55;max-width:32ch}
.foot-nl-right{flex-shrink:0;width:min(420px,100%)}
.foot-nl-form{display:flex;gap:10px;margin-bottom:10px}
.foot-nl-form input[type=email]{flex:1;padding:11px 16px;border:1.5px solid var(--border);border-radius:8px;background:var(--bg);font-size:14px;font-family:var(--sans);color:var(--text);outline:none;transition:border-color .15s}
.foot-nl-form input[type=email]:focus{border-color:var(--accent-text)}
.foot-nl-form button{padding:11px 22px;background:var(--accent);color:var(--accent-ink);border:none;border-radius:8px;font-weight:700;font-size:14px;cursor:pointer;white-space:nowrap;font-family:var(--sans);transition:opacity .15s}
.foot-nl-form button:hover{opacity:.88}
.foot-nl-legal{font-size:11px;color:var(--text-dim);line-height:1.5}
.foot-nl-legal a{color:var(--text-dim);text-decoration:underline}
.foot-nav{display:flex;justify-content:center;gap:40px;flex-wrap:wrap;padding:32px 0}
.foot-nav a{font-family:var(--mono);font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-dim);transition:color .15s;text-decoration:none}
.foot-nav a:hover{color:var(--text)}
.foot-models{border-top:1px solid var(--border);padding:40px 0}
.foot-models-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:40px}
.foot-models-grid h4{font-family:var(--mono);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--text-dim);margin-bottom:20px}
.foot-models-grid a{display:block;font-size:14px;color:var(--text);text-decoration:none;padding:3px 0;transition:color .15s;line-height:1.6}
.foot-models-grid a:hover{color:var(--accent-text)}
.foot-bottom{display:flex;justify-content:center;align-items:center;gap:40px;flex-wrap:wrap;padding:20px 0;border-top:1px solid var(--border);font-family:var(--mono);font-size:12px;color:var(--text-faint);text-align:center}
.foot-bottom a{color:var(--text-faint);text-decoration:none;transition:color .15s;letter-spacing:0.08em;text-transform:uppercase}
.foot-bottom a:hover{color:var(--text)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1024px){
  .cards-6{grid-template-columns:repeat(4,1fr)}
  .cards-4{grid-template-columns:repeat(3,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr 1fr}
  .foot-models-grid{grid-template-columns:repeat(3,1fr)}
  .blog-grid-hero{grid-template-columns:1fr}
  .blog-grid-split{grid-template-columns:1fr}
  .blog-grid{grid-template-columns:repeat(2,1fr)}
}
/* ── Mobile Drawer ─────────────────────────────────────── */
.km-drawer{position:fixed;inset:0;z-index:200;visibility:hidden;pointer-events:none}
.km-drawer.open{visibility:visible;pointer-events:auto}
.km-drawer-backdrop{
  position:absolute;inset:0;
  background:rgba(0,0,0,0);
  transition:background .28s ease;
}
.km-drawer.open .km-drawer-backdrop{background:rgba(0,0,0,0.52);backdrop-filter:blur(3px)}
.km-drawer-panel{
  position:absolute;right:0;top:0;bottom:0;
  width:min(340px,88vw);
  background:var(--surface);
  border-left:1px solid var(--border);
  display:flex;flex-direction:column;
  overflow-y:auto;overflow-x:hidden;
  transform:translateX(100%);
  transition:transform .28s cubic-bezier(0.4,0,0.2,1);
  box-shadow:-12px 0 48px -8px rgba(0,0,0,0.18);
}
.km-drawer.open .km-drawer-panel{transform:translateX(0)}
.km-drawer-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 20px;height:70px;flex-shrink:0;
  border-bottom:1px solid var(--border);
}
.km-drawer-logo{
  font-family:var(--font-display);font-weight:900;font-size:20px;
  letter-spacing:-0.02em;text-transform:uppercase;
  color:var(--text);text-decoration:none;
}
.km-drawer-logo .dot{color:var(--accent-text)}
.km-drawer-close{
  width:38px;height:38px;border-radius:50%;border:none;
  background:var(--surface-2);cursor:pointer;
  display:grid;place-items:center;color:var(--text-dim);
  transition:background .15s,color .15s;flex-shrink:0;
}
.km-drawer-close:hover{background:var(--surface-3);color:var(--text)}
.km-drawer-search{padding:14px 16px;border-bottom:1px solid var(--border);flex-shrink:0}
.km-drawer-search form{
  display:flex;align-items:center;gap:10px;
  background:var(--surface-2);border:1.5px solid var(--border);
  border-radius:var(--r-pill);padding:10px 16px;
  transition:border-color .15s;
}
.km-drawer-search form:focus-within{border-color:var(--accent-text)}
.km-drawer-search svg{flex:none;color:var(--text-faint)}
.km-drawer-search input{
  flex:1;border:none;background:none;outline:none;
  font-size:15px;color:var(--text);
}
.km-drawer-search input::placeholder{color:var(--text-faint)}
.km-drawer-nav{padding:6px 0;border-bottom:1px solid var(--border);flex-shrink:0}
.km-dl{
  display:flex;align-items:center;gap:13px;
  padding:13px 18px;font-size:15px;font-weight:500;
  color:var(--text);text-decoration:none;
  transition:background .12s;
}
.km-dl:hover,.km-dl:active{background:var(--surface-2)}
.km-dl.active{color:var(--accent-text)}
.km-dl-icon{
  width:36px;height:36px;border-radius:10px;flex-shrink:0;
  background:var(--surface-2);border:1px solid var(--border);
  display:grid;place-items:center;color:var(--text-dim);
  transition:background .15s,border-color .15s,color .15s;
}
.km-dl.active .km-dl-icon{
  background:rgba(194,255,31,0.09);border-color:rgba(194,255,31,0.22);color:var(--accent-text);
}
.km-dl-chev{margin-left:auto;color:var(--text-faint);flex-shrink:0}
.km-dl-badge{
  font-size:10px;font-weight:700;letter-spacing:0.06em;
  background:var(--accent);color:var(--accent-ink);
  border-radius:4px;padding:2px 6px;flex-shrink:0;
}
.km-drawer-brands{padding:18px 16px;flex-shrink:0}
.km-drawer-brands-title{
  font-size:11px;font-weight:700;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--text-faint);margin-bottom:12px;
}
.km-drawer-pills{display:flex;flex-wrap:wrap;gap:7px}
.km-drawer-pills a{
  font-size:13px;font-weight:500;padding:7px 14px;
  border-radius:var(--r-pill);
  background:var(--surface-2);border:1px solid var(--border);
  color:var(--text-dim);text-decoration:none;
  transition:border-color .12s,color .12s,background .12s;
}
.km-drawer-pills a:hover{
  border-color:var(--accent-text);color:var(--accent-text);
  background:rgba(194,255,31,0.05);
}
.km-drawer-foot{
  margin-top:auto;padding:16px 18px;
  font-size:11.5px;color:var(--text-faint);
  border-top:1px solid var(--border);
  display:flex;flex-direction:column;gap:8px;
}
.km-drawer-foot a{color:var(--text-faint);text-decoration:none}
.km-drawer-foot a:hover{color:var(--text-dim)}
.km-drawer-foot-links{display:flex;gap:14px;flex-wrap:wrap}
body.km-drawer-open{overflow:hidden}

@media(max-width:768px){
  /* Layout nav mobile : burger | logo | [search flex] */
  .nav-inner{gap:10px;padding:0 14px}
  .nav-toggle{display:grid;order:-1;flex-shrink:0}
  .logo{font-size:17px;flex-shrink:0}
  /* Barre de recherche compacte inline */
  .nav-search{display:flex;flex:1;max-width:none;min-width:0;padding:7px 12px}
  .nav-search kbd{display:none}
  /* Masquer nav links et CTA Connexion */
  .nav-links{display:none}
  .nav-inner > .btn-ghost{display:none}
  /* Masquer CTA hero sur mobile */
  .btn-find{display:none}
  .hero-search{padding:6px 6px 6px 14px}
  .cards-6,.cards-4,.cards-3{grid-template-columns:repeat(2,1fr)}
  .section{padding:48px 0}
  .wrap{padding:0 18px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-newsletter{flex-direction:column;gap:28px}
  .foot-nl-right{width:100%}
  .foot-models-grid{grid-template-columns:repeat(2,1fr)}
  .blog-grid,.blog-grid-3,.blog-grid-2{grid-template-columns:1fr}
  .art-layout{grid-template-columns:1fr}
  .art-sidebar{position:static}
}
@media(max-width:480px){
  .cards-6,.cards-4,.cards-3{grid-template-columns:repeat(2,1fr);gap:12px}
}

/* ============================================================
   BLOG — listing (Foxiz-style)
   ============================================================ */

/* Category color tokens */
.cat-icones,.blog-cat-badge.icones{background:#C2FF1F;color:#fff}
.cat-comparatif,.blog-cat-badge.comparatif{background:#3B82F6;color:#fff}
.cat-running,.blog-cat-badge.running{background:#10B981;color:#fff}
.cat-guide,.blog-cat-badge.guide{background:#8B5CF6;color:#fff}

.blog-cat-badge{
  display:inline-block;
  font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:0.1em;text-transform:uppercase;
  padding:4px 11px;border-radius:var(--r-pill);
  white-space:nowrap;
}

/* Card wrapper */
.blog-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  overflow:hidden;
  transition:box-shadow .2s,transform .2s;
  display:flex;flex-direction:column;
  position:relative;
}
.blog-card:hover{
  box-shadow:0 20px 48px -14px rgba(0,0,0,0.15);
  transform:translateY(-3px);
}

/* Cover */
.blog-card-cover{
  position:relative;overflow:hidden;
}
.blog-card-cover::after{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(0,0,0,0.72) 0%,rgba(0,0,0,0.12) 55%,transparent 100%);
  pointer-events:none;
}
.blog-card-cover .blog-cat-overlay{
  position:absolute;top:14px;left:14px;z-index:3;
}
.blog-card-cover-inner{
  position:absolute;inset:0;
  transition:transform .45s cubic-bezier(.25,.46,.45,.94);
}
.blog-card:hover .blog-card-cover-inner{transform:scale(1.05)}

/* Cover ratios */
.blog-card-cover.r-hero{aspect-ratio:21/9}
.blog-card-cover.r-wide{aspect-ratio:16/8}
.blog-card-cover.r-std{aspect-ratio:3/2}
.blog-card-cover.r-sq{aspect-ratio:1/1}

/* Text overlaid on cover (hero card) */
.blog-overlay-body{
  position:absolute;bottom:0;left:0;right:0;z-index:2;
  padding:28px 28px 26px;
}
.blog-overlay-body h2{
  font-family:var(--font-display);font-weight:900;text-transform:uppercase;
  font-size:clamp(20px,2.8vw,34px);line-height:1.05;letter-spacing:-0.02em;
  color:#fff;margin:10px 0 12px;
  text-shadow:0 1px 6px rgba(0,0,0,0.5);
}
.blog-overlay-body p{
  font-size:14px;color:rgba(255,255,255,0.82);
  line-height:1.5;margin-bottom:14px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* Card body (below image) */
.blog-card-body{padding:18px 20px 22px;flex:1;display:flex;flex-direction:column}
.blog-card-body h3{
  font-size:16px;font-weight:700;line-height:1.3;
  margin-bottom:10px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  flex:1;
}
.blog-card-body h3.lg{font-size:19px}
.blog-cat{font-family:var(--mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent-text);margin-bottom:8px;display:block}
.blog-meta{
  font-family:var(--mono);font-size:11px;color:var(--text-faint);
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
}
.blog-meta.light{color:rgba(255,255,255,0.6)}
.blog-meta .dot{opacity:.4}
.blog-read-more{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;font-weight:600;color:var(--accent-text);
  margin-top:12px;transition:gap .15s;
}
.blog-card:hover .blog-read-more{gap:9px}

/* Trending numbered list */
.blog-trending-list{display:flex;flex-direction:column}
.blog-trending-item{
  display:flex;gap:18px;align-items:flex-start;
  padding:18px 0;border-bottom:1px solid var(--border);
}
.blog-trending-item:first-child{padding-top:0}
.blog-trending-item:last-child{border-bottom:none;padding-bottom:0}
.blog-trending-num{
  font-family:var(--font-display);font-weight:900;
  font-size:36px;line-height:1;letter-spacing:-0.04em;
  color:var(--surface-3);flex:none;width:36px;
  -webkit-text-stroke:1px var(--border-strong);
}
.blog-trending-body{flex:1;min-width:0}
.blog-trending-body .blog-cat-badge{margin-bottom:7px}
.blog-trending-body h4{
  font-size:14px;font-weight:700;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  margin-bottom:6px;
}
.blog-trending-body h4 a{color:var(--text)}
.blog-trending-body h4 a:hover{color:var(--accent-text)}

/* Main grid layouts */
.blog-grid-hero{display:grid;grid-template-columns:1.6fr 1fr;gap:20px;margin-bottom:20px}
.blog-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:20px}
.blog-grid-split{display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:start}
.blog-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}

/* legacy compat */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

/* ============================================================
   ARTICLE — page
   ============================================================ */
.art-hero{padding:56px 0 44px;border-bottom:1px solid var(--border)}
.art-crumb{font-family:var(--mono);font-size:11px;color:var(--text-faint);margin-bottom:22px;display:flex;gap:6px;align-items:center}
.art-crumb a{color:var(--text-dim);transition:color .15s}
.art-crumb a:hover{color:var(--accent-text)}
.art-crumb span{opacity:.4}
.art-hero h1{font-size:clamp(26px,3.8vw,46px);font-weight:800;line-height:1.1;letter-spacing:-0.02em;margin-bottom:16px;max-width:22ch}
.art-hero .sub{font-size:19px;color:var(--text-dim);line-height:1.6;max-width:60ch;margin-bottom:24px}
.art-meta-line{font-family:var(--mono);font-size:11px;color:var(--text-faint);display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.art-meta-line .cat{background:rgba(194,255,31,0.1);color:var(--accent-text);padding:3px 10px;border-radius:var(--r-pill);font-weight:700}
.art-featured-img{margin:0 0 32px;text-align:center}
.art-featured-img img{max-width:520px;width:100%;height:auto;display:block;border-radius:var(--r-lg);margin:0 auto}
.art-cover{width:100%;aspect-ratio:21/8;border-radius:var(--r-lg);overflow:hidden;margin:32px 0 0;position:relative}
.art-layout{display:grid;grid-template-columns:1fr 300px;gap:56px;align-items:start;padding:56px 0 80px}
.art-body h2{font-size:21px;font-weight:800;margin:36px 0 13px;line-height:1.2}
.art-body h3{font-size:17px;font-weight:700;margin:26px 0 10px}
.art-body p{font-size:16px;line-height:1.72;margin-bottom:18px}
.art-body ul,.art-body ol{margin:0 0 18px 22px}
.art-body ul{list-style:disc}
.art-body ol{list-style:decimal}
.art-body li{font-size:16px;line-height:1.7;padding:3px 0}
.art-body a{color:var(--accent-text);text-decoration:underline;text-underline-offset:3px}
.art-body a:hover{color:var(--accent-hover)}
.art-body .highlight{background:rgba(194,255,31,0.07);border-left:3px solid var(--accent);padding:16px 20px;border-radius:0 var(--r) var(--r) 0;margin:24px 0}
.art-body .highlight p{margin:0;font-style:italic;color:var(--text-dim)}
.art-body table{width:100%;border-collapse:collapse;margin:20px 0 28px;font-size:15px}
.art-body table th{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:0.1em;color:var(--text-faint);text-align:left;padding:10px 14px;border-bottom:2px solid var(--border)}
.art-body table td{padding:12px 14px;border-bottom:1px solid var(--border)}
.art-body table tr:hover td{background:var(--surface-2)}
.art-body table .val{font-family:var(--mono);font-weight:700;color:var(--accent-text)}
.art-sidebar{position:sticky;top:calc(var(--nav-h) + 20px);display:flex;flex-direction:column;gap:16px}
.art-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:22px}
.art-box h4{font-size:15px;font-weight:700;margin-bottom:8px}
.art-box p{font-size:13px;color:var(--text-dim);margin-bottom:14px;line-height:1.5}
.art-box .btn{width:100%;justify-content:center}
.art-links{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.art-link-item{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);font-size:14px;font-weight:500;transition:border-color .15s,background .15s;color:var(--text)}
.art-link-item:hover{border-color:var(--border-strong);background:var(--surface-3);color:var(--accent-text)}
.art-link-item svg{color:var(--text-faint);flex:none;width:14px;height:14px}

/* Cover themes */
.cover-samba{background:linear-gradient(135deg,#111 0%,#222 100%)}
.cover-nb{background:linear-gradient(135deg,#f0ebe0 0%,#d6ccb8 100%)}
.cover-running{background:linear-gradient(135deg,#0a2344 0%,#163560 60%,#1e4a80 100%)}
.cover-jordan{background:linear-gradient(135deg,#7a0000 0%,#c00 50%,#1a0000 100%)}
.cover-tailles{background:linear-gradient(135deg,#f2f2f0 0%,#e4e4e0 100%)}
.cover-label{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:900;text-transform:uppercase;
  font-size:clamp(28px,5vw,64px);letter-spacing:-0.03em;opacity:0.12;color:#fff;
  pointer-events:none;
}

/* ---------- AUTOCOMPLETE ---------- */
.ac-dropdown{
  position:absolute;top:calc(100% + 6px);left:0;right:0;
  background:var(--surface);border:1px solid var(--border-strong);
  border-radius:var(--r-lg);box-shadow:0 20px 48px -12px rgba(0,0,0,0.18);
  z-index:600;overflow:hidden;display:none;
}
.ac-dropdown.open{display:block}
.ac-item{
  display:flex;align-items:center;gap:12px;
  padding:10px 18px;cursor:pointer;
  border-bottom:1px solid var(--border);transition:background .1s;
}
.ac-item:last-child{border-bottom:none}
.ac-item:hover,.ac-item.ac-active{background:var(--surface-2)}
.ac-brand{
  font-family:var(--mono);font-size:10px;font-weight:700;
  text-transform:uppercase;color:var(--accent-text);
  letter-spacing:0.07em;min-width:74px;flex:none;
}
.ac-model{font-size:14px;color:var(--text);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-model mark{background:none;color:var(--accent-text);font-weight:700}
.ac-brand-link{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 18px;cursor:pointer;border-bottom:1px solid var(--border);
  background:rgba(194,255,31,.05);transition:background .1s;
}
.ac-brand-link:hover,.ac-brand-link.ac-active{background:rgba(194,255,31,.12)}
.ac-brand-link-label{font-size:13px;font-weight:700;color:var(--accent-text)}
.ac-brand-link-arrow{font-family:var(--mono);font-size:11px;color:var(--accent-text);opacity:.7}

/* ---------- TICKER BANNER ---------- */
/* Hauteur et vitesse alignees le 10/09/2026 sur le ruban de la home :
   36px -> 30px, 50 s -> 62 s. Les deux bandeaux sont le meme element aux yeux
   du visiteur, ils ne peuvent pas defiler a deux allures. */
.ticker-wrap{
  background:#111;color:#fff;
  height:30px;overflow:hidden;display:flex;align-items:center;
  border-bottom:1px solid #222;
  position:relative;z-index:200;
}
.ticker-track{
  display:flex;white-space:nowrap;
  /* VITESSE : 49 s, et le chiffre est mesure, pas choisi (12/09/2026).
   Le marquee translate d'une copie du fil en `duree` : la vitesse APPARENTE
   depend donc de la longueur du fil, pas de la duree seule. Retirer les deux
   notes de contexte a raccourci la piste de 5 360 a 4 179 px, ce qui a fait
   tomber la vitesse de 47,9 a 37,3 px/s a duree constante — un cinquieme plus
   lent, la ou Jeremy demandait « tres legerement ». 49 s rend 42,7 px/s, soit
   11 % sous la vitesse d'origine. Les deux bandeaux du site partagent ce
   chiffre : ils ne peuvent pas defiler a deux allures. */
  animation:ticker-scroll 49s linear infinite;
  will-change:transform;
}
.ticker-wrap:hover .ticker-track{animation-play-state:paused}
.ticker-item{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:11.5px;font-weight:600;
  letter-spacing:0.12em;text-transform:uppercase;
  padding:0 14px;
}
.ticker-dot{color:var(--accent-text);font-size:13px;opacity:0.8}

/* Le bandeau porte des MODELES depuis le 12/09/2026, pas des chiffres. Memes
   regles que partout ailleurs (voir site_footer.CSS_RUBAN) : la marque
   recule, le modele tient la ligne, le prix ressort, et la remise est le seul
   element fluo — en encre noire sur aplat, jamais en texte vert.
   `text-transform:none` est indispensable : la bande est en capitales, ce qui
   etait juste pour « 10 MARCHANDS COMPARES » et donnerait ADIDAS. */
a.ticker-item{color:inherit;text-decoration:none;text-transform:none;
  letter-spacing:0;font-size:12.5px}
a.ticker-item:hover .r-modele{text-decoration:underline;
  text-underline-offset:3px}
.ticker-item .r-marque{color:#8A8A84;font-weight:600}
.ticker-item .r-modele{font-weight:700;letter-spacing:0}
.ticker-item .r-prix{font-weight:800;font-variant-numeric:tabular-nums}
.ticker-item .r-remise{background:#C2FF1F;color:#0B0B0B;font-weight:900;
  padding:2px 6px 1px;letter-spacing:0}
.ticker-item.ruban-note{color:#8A8A84;font-weight:600}
.ticker-item.ruban-note b{color:#C2FF1F;font-weight:800}
a.ticker-item.ticker-promo{color:#fff;text-decoration:none}
a.ticker-item.ticker-promo:hover{color:var(--accent-text)}
@keyframes ticker-scroll{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}
@media(max-width:768px){
  /* Le bandeau etait masque sous 768 px quand il ne portait que des chiffres.
     Il porte maintenant des modeles cliquables avec leur prix : le retirer du
     mobile reviendrait a en priver la majorite des visiteurs. Conserve, en
     plus compact. Corrige le 12/09/2026. */
  .ticker-item{padding:0 10px;font-size:11px}
  a.ticker-item{font-size:11px}
}


/* ---- SEO TEXT BLOCK ---- */
.seo-block{padding:56px 0 40px;border-top:1px solid var(--border)}
.seo-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px 56px;align-items:start}
.seo-col h2{font-family:var(--font-display);font-weight:900;text-transform:uppercase;font-size:clamp(16px,1.8vw,22px);line-height:1.15;letter-spacing:-0.01em;margin-bottom:14px;color:var(--text)}
.seo-col h3{font-size:14px;font-weight:700;margin:22px 0 8px;color:var(--text);text-transform:uppercase;letter-spacing:0.04em;font-family:var(--mono)}
.seo-col p{font-size:14px;line-height:1.7;color:var(--text-dim);margin-bottom:14px}
.seo-col p a{color:var(--accent-text);text-decoration:underline;text-underline-offset:3px}
.seo-col p a:hover{color:var(--text)}
.seo-list{margin:0 0 14px 18px;list-style:disc}
.seo-list li{font-size:14px;line-height:1.65;color:var(--text-dim);padding:3px 0}
.seo-list li a{color:var(--accent-text);text-decoration:underline;text-underline-offset:3px}
.seo-list strong{color:var(--text)}
.seo-brands{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.seo-brands a{font-family:var(--mono);font-size:11px;font-weight:700;padding:5px 11px;border-radius:var(--r-pill);border:1px solid var(--border);color:var(--text-dim);text-decoration:none;transition:border-color .12s,color .12s}
.seo-brands a:hover{border-color:var(--accent-text);color:var(--accent-text)}
.seo-label{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--text-faint);padding:5px 0;width:100%}
.seo-note{font-size:11px;color:var(--text-faint);line-height:1.6;margin-top:20px;padding-top:16px;border-top:1px solid var(--border)}
@media(max-width:768px){
  .seo-grid{grid-template-columns:1fr}
  .seo-block{padding:36px 0 28px}
}

/* ============================================================
   MOBILE — global enhancements
   ============================================================ */

/* ── Mobile search bar (injectée par km-banner.js) ── */
.nav-search-btn{display:none}
.nav-mobile-search{
  display:none;
  position:sticky;
  top:var(--nav-h);
  z-index:59;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  padding:10px 16px;
  box-shadow:0 4px 12px -4px rgba(0,0,0,.08);
}
.nav-mobile-search.open{display:block}
.nav-mobile-search form{
  display:flex;align-items:center;gap:10px;
  background:var(--surface-2);
  border:1px solid var(--border-strong);
  border-radius:var(--r-pill);
  padding:10px 16px;
}
.nav-mobile-search svg{flex:none;color:var(--text-faint)}
.nav-mobile-search input{
  flex:1;border:none;background:none;outline:none;
  font-size:16px;color:var(--text);
}
.nav-mobile-search input::placeholder{color:var(--text-faint)}

/* Hero btn : texte long par défaut */
.btn-txt-short{display:none}
.btn-txt-long{display:inline}

@media(max-width:768px){
  /* Loupe visible, connexion cachée */
  .nav-search-btn{display:grid}
  .nav-inner > .btn-ghost{display:none}
}

@media(max-width:480px){
  .foot-models-grid{grid-template-columns:1fr}
  /* Footer 1 colonne */
  .foot-grid{grid-template-columns:1fr;gap:24px}
  .foot-bottom{flex-direction:column;text-align:center;gap:8px}

  /* Cards gap réduit */
  .cards-4,.cards-3{gap:10px}

  /* Hero search : texte court */
  .btn-txt-short{display:inline}
  .btn-txt-long{display:none}

  /* Nav inner gap réduit */
  .nav-inner{gap:10px}

  /* Hero stats : réduit le gap pour éviter le débordement */
  .hero-stats{gap:20px}
  .hstat .n{font-size:22px}

  /* Newsletter input : réduit min-width */
  .nl-form input{min-width:0}
}

/* ---------------------------------------------------------------------------
   PIED DE PAGE PARTAGE, ajoute le 10/09/2026
   Jeremy : « le footer de la page produit doit etre present sur toutes les
   pages du site ». Le HTML vient de site_footer.py, commun a la home, a la
   fiche produit et aux 153 pages modele. Les anciennes classes .foot-models
   et .foot-bottom restent au-dessus : elles habillent encore des pages qui
   n'ont pas ete regenerees, et une feuille de style ne se purge qu'une fois
   qu'aucune page ne s'en sert.
--------------------------------------------------------------------------- */

/* ---------- pied de page, commun a toutes les pages du site ----------
   AUTONOME : il redefinit ses propres jetons sur `.foot`. La home et la fiche
   produit parlent en --noir / --fluo / --gris-clair, styles.css parle en
   --accent / --text / --surface. Un pied de page partage ne peut pas dependre
   du vocabulaire de la feuille qui l'accueille, sans quoi il sort sans style
   sur la moitie du site. Les valeurs sont les memes des deux cotes. */
.foot{--noir:#0B0B0B; --blanc:#FFFFFF; --fluo:#C2FF1F; --gris-clair:#9A9A94;
  background:#0B0B0B;color:#FFFFFF;padding:80px 0 40px;margin-top:0}
/* Premier menu CENTRE, et encadre de deux filets : Jeremy le 10/09/2026,
   « ajouter un liseré grisé au-dessus du premier menu, comme en dessous de ce
   meme menu ». */
.foot-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:26px;
  font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  padding:30px 0;border-top:1px solid #2A2A28;border-bottom:1px solid #2A2A28}
.foot-nav a:hover{color:var(--fluo)}
.foot-modeles{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:28px;padding:32px 0}
.foot-modeles h4{font-size:11px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fluo);margin-bottom:12px}
.foot-modeles a{display:block;font-size:13px;color:#B8B8B2;padding:4px 0}
.foot-modeles a:hover{color:var(--blanc)}
.foot-bas{display:flex;justify-content:space-between;align-items:center;gap:20px;
  flex-wrap:wrap;padding-top:26px;border-top:1px solid #2A2A28;font-size:13px}
.foot-bas b{font-weight:800}
.foot-bas b i{font-style:normal;color:var(--gris-clair)}
.foot-legal{display:flex;gap:20px;flex-wrap:wrap;color:#B8B8B2}
.foot-legal a:hover{color:var(--fluo)}
.foot-mention{margin-top:22px;font-size:12px;line-height:1.6;color:#77776F;
  max-width:92ch}



/* ---------------------------------------------------------------------------
   LOGOTYPE : RUNNING en noir, DEALS en noir sur aplat fluo.
   Version retenue par Jeremy le 10/09/2026, apres quatre autres essais
   (dont D€ALS, chevrons verts, DEALS en texte fluo).

   C'est la seule des cinq qui tienne le contraste des deux cotes. Le fluo
   #C2FF1F ne vaut que 1,4:1 comme couleur de TEXTE sur blanc, mais 15,8:1
   comme APLAT portant de l'encre noire. Le meme geste que le surligneur de
   « Achetez au meilleur prix ! » sur la page d'accueil : le fluo porte, il
   n'ecrit pas.

   Consequence utile : le pave se lit a l'identique sur fond clair et sur
   fond noir, ou seul RUNNING doit passer en blanc.
--------------------------------------------------------------------------- */
.logo{display:inline-flex;align-items:center;gap:6px;text-transform:uppercase;
  font-weight:900;font-size:19px;letter-spacing:-.01em;line-height:1;
  color:#0B0B0B}
.logo-run{color:inherit}
.logo-deals{background:#C2FF1F;color:#0B0B0B;padding:4px 7px 3px}

/* Sur fond noir, seul RUNNING change : l'aplat fluo garde son encre noire. */
.foot .logo,.sombre .logo{color:#FFFFFF}

/* ===== EN-TETE PARTAGE (site_footer.CSS_ENTETE) ===== */
/* ---------------------------------------------------------------------------
   EN-TETE : UNE SEULE DEFINITION POUR TOUT LE SITE (12/09/2026).

   Il en existait QUATRE : home_template, legales_template (dont heritent les
   rubriques et les rayons), fiche_template, et styles.css pour les pages
   modele. Quatre hauteurs, quatre tailles de police, et surtout quatre
   comportements mobiles — dont aucun ne fonctionnait.

   LES PANNES MOBILES, MESUREES AU NAVIGATEUR EN 375 px
   --------------------------------------------------------------
   La barre de navigation faisait 428 px de large et ne se repliait jamais :
   le document sortait a 816 px pour une fenetre de 375, soit 441 px de
   defilement horizontal sur CHAQUE page du site. Le bouton « Comparer »
   depassait a lui seul de 441 px, la nav de 289 px.

   Un menu qui deborde ne se corrige pas en retrecissant la police : il lui
   faut un repli. D'ou le menu deroulant ci-dessous, en CSS pur.

   POURQUOI UNE CASE A COCHER ET PAS DU JAVASCRIPT
   ------------------------------------------------
   Le site est statique et ses pages sont servies a 2 900 exemplaires. Un
   menu qui depend d'un script est un menu qui tombe avec le script ; celui-ci
   tient avec `:checked`, ne peut pas echouer, et ne coute pas un octet de JS.

   AUTONOME, comme CSS_LOGO et CSS_RUBAN : couleurs en clair et pas en
   jetons, parce que les quatre feuilles du site ne nomment pas leurs
   variables pareil. A concatener EN DERNIER pour gagner sur l'ordre source.
--------------------------------------------------------------------------- */
header,header.nav{position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid #E2E2DE}
header .wrap,header .nav-inner{display:flex;align-items:center;gap:20px;
  height:52px;max-width:1280px;margin:0 auto;padding:0 24px}
header .logo{flex:none;font-size:17px}

/* --- la recherche, a droite du logotype -------------------------------- */
/* Rectangulaire : le site n'a aucun angle arrondi, c'est la premiere de ses
   regles de forme. La version des pages modele etait en pilule, seule de son
   espece sur tout le site. */
.rech-tete{flex:1 1 auto;min-width:0;max-width:440px;
  display:flex;align-items:center;gap:9px;
  background:#F4F4F2;border:1px solid #E2E2DE;border-radius:0;
  padding:7px 12px;transition:border-color .15s}
.rech-tete:focus-within{border-color:#0B0B0B}
.rech-tete svg{flex:none;color:#9A9A94}
.rech-tete input{flex:1;min-width:0;border:0;background:none;outline:none;
  font:inherit;font-size:13.5px;color:#0B0B0B}
.rech-tete input::placeholder{color:#9A9A94}
.rech-tete button{flex:none;border:0;background:none;padding:0;cursor:pointer;
  color:#9A9A94;display:none}

/* --- les liens ---------------------------------------------------------- */
header nav,header .nav-links{display:flex;align-items:center;gap:20px;
  margin-left:auto;font-size:12px;font-weight:600;text-transform:uppercase;
  letter-spacing:.05em}
header nav a,header .nav-link{color:#0B0B0B;white-space:nowrap;
  border-bottom:2px solid transparent;padding-bottom:2px;font-size:12px}
header nav a:hover,header .nav-link:hover{border-bottom-color:#C2FF1F}
/* Bons plans sur un pave vert fluo (01/11/2026) : le lien qui doit se voir en
   premier. Repere par son adresse, il tient aussi sur les pages dont le menu
   n est pas ecrit par nav_html (recherche, coquilles). */
header nav a[href="/bons-plans/"],header .nav-link[href="/bons-plans/"]{
  background:#C2FF1F;color:#0B1400;font-weight:800;padding:7px 12px;
  border-bottom:0;border-radius:3px}
header nav a[href="/bons-plans/"]:hover,header .nav-link[href="/bons-plans/"]:hover{
  background:#B2F000}

/* --- le bouton « Trouver ma paire » (01/11/2026) -----------------------
   Pose sur /recherche/ et /modeles/ par cta_paire_html(). Il vit ici parce
   que CSS_ENTETE est la seule feuille chargee par toutes les pages, styles.css
   compris (poser_entete_css). */
.cta-paire{display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;background:#0B0B0B;color:#fff;border-radius:9px;padding:16px 18px;
  margin:18px 0 6px;text-decoration:none;border:2px solid #0B0B0B}
.cta-paire:hover{border-color:#C2FF1F}
.cta-paire-txt{font-size:15px;line-height:1.4;color:#D6D6D0}
.cta-paire-txt b{display:block;color:#fff;font-size:17px;font-weight:900;
  text-transform:uppercase;letter-spacing:.02em}
.cta-paire-btn{flex:none;background:#C2FF1F;color:#0B1400;font-weight:900;
  font-size:14px;letter-spacing:.06em;text-transform:uppercase;padding:14px 22px;
  border-radius:6px}
@media (max-width:600px){.cta-paire-btn{width:100%;text-align:center}}

/* --- le repli mobile ---------------------------------------------------- */
/* DISPOSITION MOBILE, demandee le 13/09/2026 : burger a gauche, logotype
   centre, loupe a droite. C'est la disposition d'a peu pres toutes les
   applications marchandes, donc celle que le pouce connait deja.

   L'ordre du DOM ne bouge pas pour autant : le logotype et son lien vers
   l'accueil restent le premier element de l'en-tete, la recherche ensuite,
   les liens en dernier. Seul `order` change l'ordre a l'ecran. Un lecteur
   d'ecran et un robot continuent de lire l'en-tete dans l'ordre logique.

   Les deux cases a cocher sont placees AVANT leurs cibles dans le DOM :
   `:checked ~ cible` est un selecteur de freres suivants, il ne remonte
   jamais. Les deplacer casserait les deux menus sans rien afficher. */
.bascule-menu,.bascule-rech{position:absolute;opacity:0;width:0;height:0;
  pointer-events:none}
.burger,.loupe-tete{display:none;flex:none;width:38px;height:38px;
  align-items:center;justify-content:center;cursor:pointer;color:#0B0B0B;
  border:1px solid #E2E2DE;background:#fff}
.burger:hover,.loupe-tete:hover{border-color:#0B0B0B}
.burger .croix,.loupe-tete .croix{display:none}
.bascule-menu:checked ~ .burger .barres{display:none}
.bascule-menu:checked ~ .burger .croix{display:block}
.bascule-rech:checked ~ .loupe-tete .oeil{display:none}
.bascule-rech:checked ~ .loupe-tete .croix{display:block}

/* Sept liens depuis le 01/11/2026 (« Trouver ma paire ») : mesure au
   navigateur, la barre debordait de 40 px a 920 px de large et le champ de
   recherche tombait a 25 px. Le repli passe donc de 900 a 1 080 px, et les
   liens se resserrent jusqu'a 1 280 px. */
@media (min-width:1081px) and (max-width:1280px){
  header nav,header .nav-links{gap:14px}
  header nav a,header .nav-link{font-size:11.5px;letter-spacing:.03em}
}

@media (max-width:1080px){
  header .wrap,header .nav-inner{gap:10px;padding:0 12px;height:50px;
    position:relative}
  .burger{display:flex;order:1}
  header .logo{order:2;flex:1 1 auto;min-width:0;
    display:flex;align-items:center;justify-content:center}
  .loupe-tete{display:flex;order:3}

  /* La recherche quitte la barre et devient un tiroir pleine largeur : a
     cette largeur, un champ coince entre deux boutons ne recoit plus assez
     de place pour afficher ce qu'on y tape. */
  .rech-tete{order:4;display:none;position:absolute;left:0;right:0;top:100%;
    max-width:none;background:#fff;border:0;border-bottom:1px solid #E2E2DE;
    padding:12px 14px;box-shadow:0 12px 24px rgba(0,0,0,.08)}
  .bascule-rech:checked ~ .rech-tete{display:flex}
  /* Sur un clavier tactile, la touche entree n'est pas toujours evidente :
     le bouton d'envoi, masque sur grand ecran, reprend du service ici. */
  .bascule-rech:checked ~ .rech-tete button{display:flex}
  .rech-tete input{font-size:16px}   /* sous 16px, iOS zoome au focus */

  header nav,header .nav-links{
    position:absolute;left:0;right:0;top:100%;
    display:none;flex-direction:column;align-items:stretch;gap:0;
    background:#fff;border-bottom:1px solid #E2E2DE;
    box-shadow:0 12px 24px rgba(0,0,0,.08);margin:0}
  .bascule-menu:checked ~ nav,.bascule-menu:checked ~ .nav-links{display:flex}
  /* Les deux tiroirs sortent du meme point : si les deux cases sont cochees,
     la recherche l'emporte, sinon ils se chevauchent. */
  .bascule-rech:checked ~ nav,.bascule-rech:checked ~ .nav-links{display:none}
  header nav a,header .nav-link{padding:14px 16px;border-bottom:1px solid #F0F0EC;
    font-size:13px}
  header nav a:hover,header .nav-link:hover{border-bottom-color:#F0F0EC;
    background:#F4F4F2}
  header nav a[href="/bons-plans/"],header .nav-link[href="/bons-plans/"]{
    padding:14px 16px;border-radius:0;border-bottom:1px solid #F0F0EC}
  header nav a[href="/bons-plans/"]:hover,header .nav-link[href="/bons-plans/"]:hover{
    background:#B2F000}
}
@media (max-width:420px){
  header .wrap,header .nav-inner{gap:8px;padding:0 10px}
  header .logo{font-size:15px}
  .burger,.loupe-tete{width:36px;height:36px}
}