:root{
  --noir:#0B0B0B; --blanc:#FFFFFF; --sol:#F4F4F2; --plaque:#EFEFEC;
  --filet:#E2E2DE; --filet-noir:#2A2A28;
  --gris:#6B6B66; --gris-clair:#9A9A94;
  --fluo:#C2FF1F; --fluo-fonce:#A8E600; --vert-texte:#3B7A00;
  --font:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
img{max-width:100%;display:block}
/* `display:flex` sur .alerte-form ecrasait l'attribut hidden : le formulaire
   email s'affichait d'emblee au lieu d'attendre le clic sur Alerte prix. */
[hidden]{display:none!important}
body{font-family:var(--font);background:var(--blanc);color:var(--noir);
  font-variant-numeric:tabular-nums lining-nums;-webkit-font-smoothing:antialiased;
  line-height:1.5;font-size:15px}
a{color:inherit;text-decoration:none}
.wrap{max-width:1280px;margin:0 auto;padding:0 32px}

/* bandeau noir, geste Salomon.
   DEFILANT DEPUIS LE 12/09/2026, et plus statique : la fiche portait une barre
   figee (« Releve du X . N references . Prix a confirmer ») pendant que le
   reste du site faisait defiler des modeles cliquables. Deux barres
   differentes sur un meme site, c'est deux sites.
   Meme allure que partout ailleurs : 56 s, sinon le visiteur voit deux
   bandeaux qui ne defilent pas ensemble en passant d'une page a l'autre. */
.ruban-defile{background:var(--noir);color:var(--blanc);overflow:hidden;
  white-space:nowrap;padding:7px 0;font-size:11.5px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase}
/* VITESSE : 49 s, chiffre mesure et non choisi (12/09/2026). Le marquee
   translate d'une copie du fil en `duree` : la vitesse APPARENTE depend donc
   de la longueur du fil autant que de la duree. 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. Meme chiffre dans styles.css : les deux bandeaux
   du site ne peuvent pas defiler a deux allures. */
.ruban-piste{display:inline-block;animation:defile 49s linear infinite;
  will-change:transform}
.ruban-defile:hover .ruban-piste{animation-play-state:paused}
.ruban-item{display:inline-flex;align-items:center;gap:12px;padding:0 26px}
.ruban-item b{color:var(--fluo);font-weight:800}
.ruban-item::before{content:'';width:5px;height:5px;background:var(--fluo);
  flex:none;display:inline-block}
@keyframes defile{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .ruban-piste{animation:none}
  .ruban-defile{white-space:normal;text-align:center}
}

header{border-bottom:1px solid var(--filet);position:sticky;top:0;z-index:40;
  background:rgba(255,255,255,.94);backdrop-filter:blur(8px)}
header .wrap{display:flex;align-items:center;gap:32px;height:62px}
/* Le logotype vient de site_footer.CSS_LOGO, commun a tout le site. */
nav{margin-left:auto;display:flex;gap:26px;font-size:13px;font-weight:600;
  text-transform:uppercase;letter-spacing:.06em}
nav a:hover{color:var(--vert-texte)}

/* fil d'ariane */
.ariane{font-size:12px;color:var(--gris);padding:18px 0 0}
.ariane a:hover{color:var(--noir)}

/* ---------- haut de fiche ---------- */
.fiche{display:grid;grid-template-columns:1fr 1fr;gap:56px;padding:24px 0 80px;
  align-items:start}

/* galerie */
.galerie{display:grid;grid-template-columns:76px 1fr;gap:16px;position:sticky;top:86px}
.vignettes{display:flex;flex-direction:column;gap:10px}
.vignette{width:76px;height:76px;background:var(--plaque);border:1px solid transparent;
  display:grid;place-items:center;padding:7px;cursor:pointer}
.vignette.on{border-color:var(--noir)}
/* `darken` et non `multiply` depuis le 03/10/2026 : les photos adidas FR, en
   tete de galerie depuis ce jour, ont un fond gris incruste (234, 238, 239).
   En multiply il ressortait a 219-223 sur la plaque (239, 239, 236), un carre
   bien visible ; en darken a (234, 238, 236), 5 niveaux d'ecart au plus. Les
   photos detourees ou sur blanc rendent pareil dans les deux modes. */
.vignette img{max-height:100%;object-fit:contain;mix-blend-mode:darken}
.principale{background:var(--plaque);aspect-ratio:1;display:grid;place-items:center;
  padding:44px;position:relative}
.principale img{max-height:100%;object-fit:contain;mix-blend-mode:darken}
/* Le pourcentage de remise, gros et pose dans l'angle de la photo. Il porte
   un chiffre, pas un adjectif : c'est ce qui se lit de plus loin. */
.etiquette{position:absolute;top:0;left:0;background:var(--fluo);color:var(--noir);
  font-size:23px;font-weight:900;font-style:italic;padding:9px 19px 8px;
  letter-spacing:-.03em;line-height:1;z-index:2}
/* La ligne « vs prix conseille » sous le pourcentage a ete retiree le
   09/09/2026 : Jeremy ne la voulait pas sur la photo. Le point de comparaison
   vit desormais dans l'infobulle de l'etiquette. */

/* colonne droite */
.marque{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gris)}
h1{font-size:38px;font-weight:800;letter-spacing:-1.2px;line-height:1.05;margin:6px 0 12px;
  text-transform:uppercase}
/* Lien vers la page modele, sous le H1. */
.lien-modele{display:inline-flex;align-items:center;gap:9px;margin:-4px 0 16px;
  font-size:14px;font-weight:700;color:var(--vert-texte);
  border-bottom:1.5px solid transparent;transition:border-color .15s,gap .15s}
.lien-modele:hover{border-bottom-color:var(--vert-texte);gap:13px}
.lien-modele em{font-style:normal;font-weight:500;color:var(--gris);font-size:13px}
.lien-modele svg{width:15px;height:15px}
.meta{display:flex;gap:8px;flex-wrap:wrap;font-size:12px;margin-bottom:22px}
.tag{border:1px solid var(--filet);padding:4px 10px;text-transform:uppercase;
  letter-spacing:.06em;font-weight:600;color:var(--gris)}
/* Etiquettes techniques : fond noir, elles se distinguent des etiquettes de
   catalogue parce qu'elles viennent d'une source verifiee, pas du flux. */
.tag-tech{background:var(--noir);color:var(--blanc);border-color:var(--noir)}


/* profondeur du releve : deux chiffres et le visiteur sait si la comparaison
   vaut quelque chose, sous le H1. */
.profondeur{font-size:13px;color:var(--gris);margin:-8px 0 20px}
.profondeur b{color:var(--noir);font-weight:700}

/* le prix, aplat noir */
.bloc-prix{background:var(--noir);color:var(--blanc);padding:24px;display:grid;
  grid-template-columns:1fr auto;gap:20px;align-items:center}
.bp-lbl{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gris-clair)}
.bp-prix{font-size:42px;font-weight:800;letter-spacing:-1.6px;line-height:1;margin-top:6px}
/* Portée du prix affiché. Vide et masquée quand le prix vaut pour toutes les
   pointures, remplie quand il ne vaut que pour certaines : un prix d'appel
   annoncé comme « le moins cher » sans dire qu'il ne couvre pas toutes les
   tailles envoie le coureur sur une page plus chère que ce qu'il a lu. */
.bp-note{display:block;font-size:12.5px;color:var(--gris-clair);margin-top:7px;
  letter-spacing:0;font-weight:500}
.bp-note:empty{display:none}
.bp-chez{font-size:13px;color:var(--gris-clair);margin-top:8px}
.bp-chez b{color:var(--blanc);font-weight:600}
/* CTA anime EN PERMANENCE, pas seulement au survol. Trois mouvements qui se
   superposent sans jamais clignoter :
     1. un balayage lumineux traverse le bouton toutes les 4,5 s (::before)
     2. la fleche avance et revient, decalee d'une demi-seconde (::after tempo)
     3. au survol, l'aplat s'eclaircit et le bouton se souleve
   Le balayage est la piece maitresse : il attire l'oeil par le MOUVEMENT
   plutot que par la couleur, donc il fonctionne sur un aplat deja fluo, la ou
   une pulsation d'ombre se voyait a peine. Coupe par prefers-reduced-motion :
   une animation permanente sans echappatoire est un defaut d'accessibilite. */
.bp-cta{background:var(--fluo);color:var(--noir);font-weight:800;font-size:17px;
  padding:20px 32px;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;
  display:inline-flex;align-items:center;gap:12px;position:relative;overflow:hidden;
  z-index:1;
  transition:color .2s ease, box-shadow .18s ease;
  animation:halo 2.6s ease-in-out infinite}
/* 1. Le halo : l'ombre fluo enfle et retombe. C'est le mouvement qu'on percoit
      du coin de l'oeil, meme sans regarder le bouton. */
@keyframes halo{
  0%,100%{box-shadow:0 0 0 0 rgba(194,255,31,.65), 0 6px 18px -8px rgba(174,230,0,.5)}
  50%{box-shadow:0 0 0 12px rgba(194,255,31,0), 0 10px 26px -8px rgba(174,230,0,.75)}
}
/* 2. La fleche avance sur le meme tempo. */
.bp-cta svg{transition:transform .18s ease;animation:pousse 2.6s ease-in-out infinite}
@keyframes pousse{
  0%,55%,100%{transform:translateX(0)}
  72%{transform:translateX(6px)}
  86%{transform:translateX(0)}
}
/* Au survol : DEUX VAGUES balayent le bouton de gauche a droite, la seconde
   avec 175 ms de retard sur la premiere (17/09/2026).

   Le `z-index:-1` des deux pseudo-elements les place devant le fond du bouton
   mais DERRIERE son texte, parce que `.bp-cta` porte `z-index:1` et cree donc
   son propre contexte d'empilement. Aucun calque supplementaire n'est
   necessaire, et le texte n'a pas besoin d'etre remonte.

   `inset:-5px` deborde volontairement : sans cette marge, un arrondi de
   sous-pixel laisse un lisere de fond visible sur les bords pendant le
   passage de la vague. */
/* LES VAGUES, a l'interieur du cadre. `inset:5px` les aligne sur le bord
   exterieur du cadre blanc, qui se pose au meme endroit : l'aplat remplit
   donc tout l'interieur, sans lisere vert residuel entre les deux. Le fluo ne
   reste visible que sur les cinq pixels qui entourent le cadre. */
.bp-cta::before,.bp-cta::after{content:'';position:absolute;inset:5px;
  z-index:-1;transform:translateX(-115%);pointer-events:none;
  transition:transform .3s cubic-bezier(.75,0,.125,1)}
/* Vague 1, vert fonce. Deux blancs successifs n'auraient rien montre : cette
   nuance intermediaire est ce qui rend le double balayage perceptible. */
.bp-cta::before{background:var(--fluo-fonce)}
/* Vague 2, blanche, en retard de 175 ms : c'est elle qui fixe l'etat final. */
.bp-cta::after{background:var(--blanc);transition-delay:.175s}
.bp-cta:hover::before,.bp-cta:hover::after,
.bp-cta:focus-visible::before,.bp-cta:focus-visible::after{transform:translateX(0)}

/* LE CADRE BLANC, conserve. Il se developpe depuis le centre comme avant,
   mais il vit desormais sur le `::after` du span : les deux pseudo-elements
   du bouton sont pris par les vagues, et le span n'etant pas positionne, son
   pseudo se cale sur `.bp-cta`. Etant dans le flux du span, il passe
   au-dessus des vagues et reste visible pendant leur balayage. */
.bp-cta>span{position:static}
.bp-cta>span::after{content:'';position:absolute;inset:50%;
  border:2px solid var(--blanc);opacity:0;pointer-events:none;
  transition:inset .28s cubic-bezier(.3,1.2,.4,1), opacity .18s ease}
.bp-cta:hover>span::after,.bp-cta:focus-visible>span::after{inset:5px;opacity:1}

/* Le texte reste noir : il est lisible sur le fluo comme sur le blanc. */
.bp-cta:hover,.bp-cta:focus-visible{animation:none;
  box-shadow:0 12px 28px -12px rgba(174,230,0,.9)}
.bp-cta:hover svg{transform:translateX(6px);animation:none}
.bp-cta:active{transform:translateY(1px)}
@media (prefers-reduced-motion:reduce){
  .bp-cta,.bp-cta svg{animation:none}
  /* Les vagues ne glissent plus, elles apparaissent : l'etat final reste
     atteint, sans mouvement lateral. */
  .bp-cta,.bp-cta::before,.bp-cta::after,.bp-cta>span::after,
  .bp-cta svg{transition:none}
}

/* Alerte prix et Partager : angles droits, demande de Jeremy le 09/09/2026. */
.actions{display:flex;gap:10px;margin-top:14px}
.act{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid var(--noir);background:var(--blanc);color:var(--noir);
  font-family:var(--font);font-size:13px;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;padding:13px 12px;cursor:pointer;border-radius:0;
  transition:background .15s,color .15s}
.act:hover{background:var(--noir);color:var(--blanc)}
.act.on{background:var(--noir);color:var(--blanc)}
.act-plein{background:var(--fluo);border-color:var(--fluo);flex:0 0 auto;padding:13px 22px}
.act-plein:hover{background:var(--fluo-fonce);color:var(--noir)}
.alerte-form{display:flex;gap:10px;margin-top:10px}
.alerte-form input{flex:1;border:1px solid var(--filet);padding:13px 14px;
  font-family:var(--font);font-size:14px;border-radius:0;outline:none}
.alerte-form input:focus{border-color:var(--noir)}
.toast{margin-top:10px;background:var(--noir);color:var(--blanc);padding:11px 14px;
  font-size:13px;font-weight:600}

/* selecteur de pointure : le coeur de la fiche */
.pointures{margin-top:28px}
.pt-tete{display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:12px;flex-wrap:wrap;gap:8px}
.pt-tete h2{font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.pt-tete span{font-size:12.5px;color:var(--gris)}
.pt-grille{display:flex;flex-wrap:wrap;gap:8px}
.pt{min-width:58px;padding:11px 8px;border:1px solid var(--filet);text-align:center;
  font-size:14px;font-weight:600;cursor:pointer;background:var(--blanc);
  transition:border-color .12s}
.pt:hover{border-color:var(--noir)}
.pt.on{background:var(--fluo);border-color:var(--fluo);font-weight:800}
.pt.off{color:var(--gris-clair);border-style:dashed;cursor:not-allowed;
  text-decoration:line-through}
.pt em{display:block;font-style:normal;font-size:11px;font-weight:500;color:var(--gris);
  margin-top:2px}
.pt.on em{color:var(--noir)}
.pt-note{font-size:12.5px;color:var(--gris);margin-top:12px}
.pt-note b{color:var(--noir)}

/* ---------- offres ---------- */
.offres{padding:80px 0;border-top:1px solid var(--filet)}
.of-tete{display:flex;justify-content:space-between;align-items:flex-end;
  flex-wrap:wrap;gap:20px;margin-bottom:22px}
h2.sec{font-size:26px;font-weight:800;letter-spacing:-.6px;text-transform:uppercase}
.bascule{display:inline-flex;border:1px solid var(--noir);font-size:13px;font-weight:700}
.bascule span{padding:9px 16px;cursor:pointer;text-transform:uppercase;letter-spacing:.04em}
.bascule .on{background:var(--noir);color:var(--blanc)}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-size:10.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gris);padding:0 14px 10px;
  border-bottom:2px solid var(--noir);white-space:nowrap}
td{padding:15px 14px;border-bottom:1px solid var(--filet);vertical-align:middle}
tr.mini td{background:#FCFFEF}
.num{text-align:right;white-space:nowrap}
.march{font-weight:700}
.rang{width:34px;font-weight:800;color:var(--gris-clair)}
.rang.un{color:var(--noir)}
.prix-cell{font-size:17px;font-weight:800}
.puce-mini{background:var(--fluo);padding:3px 8px;font-weight:800;font-size:12px;
  text-transform:uppercase;letter-spacing:.04em;margin-left:8px}
/* Offre non comparable en prix rendu : mention grise, jamais fluo. Le fluo dit
   « c'est la bonne affaire », il ne doit pas dire « attention ». */
.puce-flou{background:var(--plaque);color:var(--gris);padding:3px 8px;
  font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;
  margin-left:8px}
.aller{border:1px solid var(--noir);padding:9px 16px;font-size:12.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;display:inline-block}
.aller:hover{background:var(--noir);color:var(--blanc)}
.dim{color:var(--gris);font-size:13px}

/* mono-offre */
.seule{border:2px solid var(--noir);padding:26px;margin-top:8px}
.seule h3{font-size:19px;font-weight:800;text-transform:uppercase;letter-spacing:-.3px}
.seule p{color:var(--gris);margin-top:8px;font-size:14.5px;max-width:70ch}

/* bande noire : la regle des prix de cette reference */
/* Hauteur reduite le 09/09/2026 a la demande de Jeremy. Les 80 px qu'il avait
   fixes restent la respiration ENTRE les sections ; ici c'est le rembourrage
   INTERIEUR de la bande, qui n'a pas a etre aussi large puisque son contenu
   tient en trois lignes depuis le retrait de la statistique de port. */
/* overflow:hidden A TOUTES LES LARGEURS depuis le 04/10/2026. Chaque libelle
   de la regle est un bloc de 190 px centre sur sa bille ; aux extremites seul
   le TEXTE rentre vers l'interieur, le bloc invisible depasse encore de sa
   demi-largeur. A l'ordinateur la marge de la page l'absorbait, au telephone
   la regle de 560 px le rognait ; entre les deux (tablette, petit portable) la
   page defilait de cote : 18 px de trop a 1 036 px, mesure en ligne. Le texte
   visible reste a 16 px du bord au pire : rien de lisible n'est coupe. */
.bande{background:var(--noir);color:var(--blanc);padding:52px 0;margin-top:0;
  overflow:hidden}
.regle-tete{display:flex;justify-content:space-between;align-items:flex-end;gap:36px;
  flex-wrap:wrap;margin-bottom:38px}
.regle-sur{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fluo);margin-bottom:8px}
.regle-titre{font-size:27px;font-weight:700;letter-spacing:-.7px;line-height:1.2;
  max-width:24ch}
.regle-gain{text-align:right}
.regle-gain b{display:block;font-size:40px;font-weight:800;letter-spacing:-1.4px;
  color:var(--fluo);line-height:1}
.regle-gain span{font-size:12px;color:var(--gris-clair);text-transform:uppercase;
  letter-spacing:.07em}
.regle-piste{position:relative;height:112px;margin:0 30px}
/* Echelle inversee : le degrade part du gris a gauche, prix le plus haut,
   vers le fluo a droite, prix le plus bas. */
.regle-barre{position:absolute;top:40px;left:0;right:0;height:2px;
  background:linear-gradient(90deg,#33332F 0%,#4A4A46 45%,var(--fluo) 100%)}
/* Le coureur avance vers la bonne affaire, marque une pause devant elle, puis
   revient. SVG BLANC et non emoji : l'emoji etait rendu en couleurs sombres
   par le systeme, disparaissait sur le fond noir, et sa silhouette regardait
   du mauvais cote selon la police. Ici il court vers la droite, dans le sens
   de lecture et vers le prix le plus bas, et il rebondit en courant. */
/* Pose SUR la ligne, pas sur le prix : a top:8px le « Go » chevauchait le
   106,29 EUR du point le plus bas. Vu a l'ecran le 09/09/2026. */
.coureur{position:absolute;top:28px;display:flex;align-items:center;gap:7px;
  animation:court 6s cubic-bezier(.45,0,.35,1) infinite;z-index:3}
/* 21 px -> 29 px le 11/09/2026 : a l'ancienne taille le mot se perdait entre
   les billes et les libelles de la regle, alors que c'est lui qui donne le
   sens de lecture, du plus cher vers la meilleure offre. */
.coureur .go{font-size:29px;font-weight:900;font-style:italic;color:#fff;
  letter-spacing:-.03em;line-height:1;text-shadow:0 2px 8px rgba(0,0,0,.85);
  animation:pousseGo .34s ease-in-out infinite}
@keyframes pousseGo{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(1.5px)}
}
/* Les traits de vitesse filent vers l'arriere et s'effacent : c'est eux qui
   donnent la sensation de course. */
.coureur .filets{display:flex;flex-direction:column;gap:3px;align-items:flex-end}
.coureur .filets i{display:block;height:2.6px;border-radius:1.3px;
  background:var(--fluo);animation:file .5s linear infinite}
.coureur .filets i:nth-child(1){width:17px}
.coureur .filets i:nth-child(2){width:12px;animation-delay:-.17s}
.coureur .filets i:nth-child(3){width:8px;animation-delay:-.33s}
@keyframes file{
  0%{transform:translateX(9px);opacity:0}
  35%{opacity:.95}
  100%{transform:translateX(-11px);opacity:0}
}
/* Il reste VISIBLE tout du long : la premiere version le faisait disparaitre
   30 % du cycle, et une capture prise au mauvais moment ne le montrait pas du
   tout. Il court, marque une pause devant le meilleur prix, puis revient. */
/* Il s'arrete plus pres du dernier tarif : 91 % au lieu de 84 %. */
@keyframes court{
  0%{left:1%}
  46%{left:91%}
  64%{left:91%}
  96%,100%{left:1%}
}
@media (prefers-reduced-motion:reduce){
  .coureur,.coureur .go,.coureur .filets i{animation:none}
  .coureur{left:91%}
  .coureur .filets i{opacity:.8}
}
.pt-reg{position:absolute;top:0;transform:translateX(-50%);text-align:center;width:130px}
.pt-prix{display:block;font-size:14px;font-weight:700;margin-bottom:9px;white-space:nowrap}
.pt-bille{display:block;width:11px;height:11px;border-radius:50%;background:#6B6B66;
  margin:0 auto;border:2px solid var(--noir);position:relative;top:1px}
.pt-march{display:block;font-size:11px;color:var(--gris-clair);margin-top:11px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt-reg.mini .pt-prix{color:var(--fluo);font-size:19px;font-weight:800}
.pt-reg.mini .pt-bille{background:var(--fluo);width:15px;height:15px;
  box-shadow:0 0 0 5px rgba(194,255,31,.22)}
.pt-reg.mini .pt-march{color:var(--blanc);font-weight:600}
/* Le point de la meilleure offre porte maintenant une invitation a cliquer :
   il lui faut la place de « Acheter au meilleur prix sur » sans le couper. */
.pt-reg.mini{width:190px}
.pt-reg.mini .pt-march{white-space:normal;overflow:visible}
/* Un point sans place pour son libelle : la bille seule, a sa position exacte.
   Le nom et le prix restent lisibles au survol (attribut title). Remplace le
   decalage en hauteur, qui ne tenait qu'a deux libelles et s'effondrait des
   qu'il y en avait trois serres. */
.pt-reg.muet{width:16px}
.pt-reg.muet .pt-bille{background:#57574F;width:9px;height:9px;
  transform:translateY(23px)}
.pt-reg.muet:hover .pt-bille{background:var(--gris-clair)}
/* Le marchand le moins cher est un lien : on le montre. Souligne au survol,
   jamais en permanence — la regle doit rester une regle, pas une liste. */
.pt-lien{display:block;color:inherit;text-decoration:none;
  border-bottom:1px solid transparent;transition:border-color .15s;width:fit-content;
  margin:0 auto}
.pt-lien:hover,.pt-lien:focus-visible{border-bottom-color:var(--fluo)}
/* L'invitation a cliquer, au-dessus du nom du marchand. Souligne en fluo :
   c'est la seule promesse d'action de tout le bandeau, elle doit se voir sans
   crier. Le fluo n'est ici qu'un TRAIT, jamais de l'encre sur fond clair — sur
   blanc il tombe a 1,4:1 et devient illisible. */
.pt-cta{display:block;font-size:10.5px;font-weight:700;letter-spacing:.02em;
  text-transform:uppercase;color:var(--blanc);white-space:nowrap;
  text-decoration:underline;text-decoration-color:var(--fluo);
  text-underline-offset:3px;text-decoration-thickness:2px;margin-bottom:2px}
/* Les chevrons avancent vers le marchand. Ils disent la direction que la
   regle raconte deja : du plus cher vers la meilleure offre. */
.pt-fleches{display:block;color:var(--fluo);font-size:15px;font-weight:900;
  line-height:1;letter-spacing:1px;margin-bottom:4px;
  animation:filePt 1.1s ease-in-out infinite}
@keyframes filePt{
  0%,100%{transform:translateX(-3px);opacity:.55}
  50%    {transform:translateX(4px); opacity:1}
}
/* Une animation qui boucle sans fin doit pouvoir s'arreter : certains
   utilisateurs la demandent au systeme, et ce reglage se respecte. */
@media (prefers-reduced-motion:reduce){
  .pt-fleches{animation:none;transform:none;opacity:1}
}
.pt-autres{display:block;font-size:10px;color:var(--gris-clair);margin-top:2px}
/* Bords de piste : le texte rentre, la bille ne bouge pas. Le decalage vaut
   la demi-largeur du bloc, diminuee de la marge que la piste laisse deja. */
.pt-reg.bord-d .pt-prix,.pt-reg.bord-d .pt-march{transform:translateX(-38%)}
.pt-reg.bord-g .pt-prix,.pt-reg.bord-g .pt-march{transform:translateX(38%)}
.pt-reg.mini.bord-d .pt-prix,.pt-reg.mini.bord-d .pt-march{transform:translateX(-26%)}
.pt-reg.mini.bord-g .pt-prix,.pt-reg.mini.bord-g .pt-march{transform:translateX(26%)}
.regle-pied{margin-top:14px;font-size:12.5px;color:#8A8A84;max-width:80ch}
.regle-seule{display:flex;justify-content:space-between;align-items:center;gap:40px;
  flex-wrap:wrap}
.regle-txt{margin-top:12px;font-size:14px;color:#8A8A84;max-width:62ch;line-height:1.6}

/* Les regles .technique / .tech-vide / .jauge et une PREMIERE definition de
   .specs en grille grise ont ete supprimees le 09/09/2026 avec le bloc « fiche
   technique » qu'elles habillaient. Cette premiere `.specs{background:
   var(--filet)}` est la cause reelle du tableau de caracteristiques teinte en
   gris que Jeremy avait signale : deux regles de meme nom, la seconde ne
   gagnait que sur les proprietes qu'elle redeclarait. Un selecteur mort n'est
   jamais inoffensif. */

/* voisins */
/* Respiration avant « Tu aimeras aussi ». Le bandeau noir est un aplat pleine
   largeur : coller la section suivante donnait l'impression qu'elle lui
   appartenait. Demande de Jeremy deux fois le 09/09/2026 — la premiere
   correction avait ete posee plus haut dans la feuille et cette regle-ci
   l'ecrasait a 0. Mesure : padding-top calcule a 0px avant correction. */
.voisins{padding:80px 0 40px}

/* « Les autres modeles <marque> » : pilules a angles droits, coherentes avec
   le reste de la fiche. Le nombre de coloris en second niveau : c'est lui qui
   dit la profondeur du modele. */
.autres-modeles{padding:0 0 80px}
.pilules{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.pilule{display:inline-flex;align-items:baseline;gap:9px;border:1px solid var(--filet);
  padding:11px 16px;font-size:14px;font-weight:700;transition:border-color .15s,
  background .15s}
.pilule:hover{border-color:var(--noir);background:var(--plaque)}
.pilule em{font-style:normal;font-size:12px;font-weight:500;color:var(--gris)}
/* Vignette du modele (03/10/2026) : angles droits sur la plaque, comme les
   cartes. En paysage et non en carre : une chaussure de profil ne remplissait
   qu'une bande du carre de 46 px, a peine reconnaissable a l'ecran. Le texte
   garde son alignement sur la ligne de base. */
.pilule.a-img{align-items:center;gap:12px;padding:6px 16px 6px 6px}
.pil-img{width:64px;height:46px;flex:none;background:var(--plaque);
  display:grid;place-items:center;padding:3px 4px}
.pil-img img{max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:darken}
/* Chaussures : la photo carree remplit la vignette, ce qui ne rogne que le
   vide au-dessus et au-dessous du profil. Pas pour les accessoires, souvent
   verticaux (gourdes, gels), qui seraient coupes. */
.pilules.recadre .pil-img img{width:100%;height:100%;object-fit:cover}
.pil-txt{display:inline-flex;align-items:baseline;gap:9px}
.grille{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:22px}
.carte .c-img{background:var(--plaque);aspect-ratio:1;display:grid;place-items:center;
  padding:20px;position:relative}
/* Etiquette fluo posee en haut a gauche de la vignette, angles droits comme
   le reste de la fiche. Une seule par carte : deux badges sur une meme image
   et le lecteur n'en lit aucun. */
/* Toujours fluo sur texte noir, sur les quatre cartes. */
.etiq{position:absolute;top:0;left:0;background:var(--fluo);color:var(--noir);
  font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:6px 11px;z-index:2}
.carte .c-img img{max-height:100%;object-fit:contain;mix-blend-mode:multiply}
.carte b{display:block;font-size:11px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gris);margin-top:12px}
.carte .n{font-size:15px;font-weight:600;margin:2px 0 6px}
.carte .p{font-size:16px;font-weight:800}
/* « Tu aimeras aussi » en carrousel (03/10/2026) : huit cartes, quatre
   visibles, la piste defile au doigt et toute seule. Fleches a angles droits,
   comme le reste de la fiche. */
.voisins-tete{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.fleches{display:flex;gap:8px;flex:none}
.fl{width:42px;height:42px;padding:0;border:1px solid var(--noir);background:var(--blanc);
  color:var(--noir);display:grid;place-items:center;cursor:pointer}
.fl:hover,.fl:focus-visible{background:var(--noir);color:var(--blanc)}
.fl svg{width:18px;height:18px}
.defile{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 66px) / 4);
  gap:22px;margin-top:22px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;overscroll-behavior-x:contain;scrollbar-width:none}
.defile::-webkit-scrollbar{display:none}
.defile .carte{scroll-snap-align:start;min-width:0}
@media (prefers-reduced-motion:reduce){.defile{scroll-behavior:auto}}
/* bandeau noir de caracteristiques, sous les onglets */
.bandeau-specs{background:var(--noir);color:var(--blanc);padding:52px 0;
  margin-top:0}
/* Recentre le 09/09/2026 : la grille en `1fr` etalait quatre tuiles sur toute
   la largeur du gabarit, chacune calee a gauche de sa colonne, ce qui les
   faisait flotter loin les unes des autres. En flex centre, le groupe se tient
   au milieu quel que soit le nombre de caracteristiques connues, de une a
   huit, sans qu'une fiche mieux documentee change de mise en page. */
.bs-grille{display:flex;flex-wrap:wrap;justify-content:center;gap:30px 60px}
/* `flex:0 0 auto` et non une base fixe : avec une base de 232 px, les BOITES
   etaient bien centrees mais le texte restait cale a gauche dans chacune, et
   la derniere trainait 80 px de vide a sa droite. Le groupe penchait a gauche
   alors que le calcul le disait centre. Dimensionnees au contenu, ce sont les
   mots eux-memes qui se centrent. Le min-width evite qu'une case a valeur
   courte, « Drop 8 mm », ne se recroqueville a cote d'une case longue. */
.bs-case{display:flex;align-items:center;gap:16px;flex:0 0 auto;min-width:168px}
.bs-case svg{width:36px;height:36px;flex:none;color:var(--fluo);opacity:.92}
.bs-case span{display:block;font-size:11px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:#8A8A84;margin-bottom:3px}
.bs-case b{display:block;font-size:15px;font-weight:800;text-transform:uppercase;
  letter-spacing:.02em}
/* Champ non renseigne : un tiret sourd, jamais une case vide. La case vide se
   lit comme un bug d'affichage, le tiret se lit comme « on ne sait pas ». */
.bs-case b.vide{color:#55554F;font-weight:600}
/* Note de l'onglet Caracteristiques : la source des valeurs. */
.v-note a{color:var(--vert-texte);font-weight:700;text-decoration:underline}
.bs-atouts{margin-top:40px;padding-top:32px;border-top:1px solid #2A2A28}
.bs-atouts h3{font-size:21px;font-weight:800;letter-spacing:-.4px;margin-bottom:22px}
.bs-atouts ul{list-style:none;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:18px 44px}
.bs-atouts li{display:flex;align-items:center;gap:15px;font-size:14.5px;
  font-weight:600;line-height:1.4}
.bs-atouts svg{width:24px;height:24px;flex:none;color:var(--fluo)}

/* Logos marchands dans le tableau d'offres.
   PIEGE CORRIGE le 09/09/2026, signale par Jeremy sur capture : `display:flex`
   etait pose sur le `<td>` lui-meme. Une cellule de tableau passee en flex
   sort du modele de rendu `table-cell` : sa bordure basse se dessine sur la
   largeur du CONTENU et non de la colonne, d'ou des filets courts et decales
   sous chaque marchand. Le flex vit maintenant dans un div interne, la cellule
   reste une cellule. */
.march{font-weight:700}
.march-int{display:flex;align-items:center;gap:11px}
.mlogo{width:32px;height:32px;flex:none;background:var(--blanc);
  border:1px solid var(--filet);display:grid;place-items:center;overflow:hidden}
.mlogo img{max-width:26px;max-height:22px;object-fit:contain}
.mlogo-txt{font-size:11px;font-weight:800;color:var(--gris);background:var(--plaque);
  border-color:transparent}

/* ---- vignette cashback ----
   Quatrieme et dernier usage du fluo sur la fiche. Aplat plein, texte noir,
   angles droits comme tout le reste depuis le passage au noir et blanc. Le
   fluo sur fond blanc ne se lit pas en texte : il ne sert qu'en aplat. */
.cb{position:relative;display:inline-flex;align-items:center;gap:5px;
  background:var(--fluo);color:var(--noir);padding:3px 8px;font-size:10.5px;
  font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  white-space:nowrap;cursor:help;vertical-align:middle;line-height:1.5}
.cb svg{width:12px;height:12px;flex:none;stroke-width:2.4}
.cb-bulle{position:absolute;bottom:calc(100% + 9px);left:50%;
  transform:translateX(-50%);background:var(--noir);color:var(--blanc);
  padding:10px 14px;font-size:12.5px;font-weight:500;letter-spacing:0;
  text-transform:none;line-height:1.45;white-space:nowrap;display:none;z-index:30;
  box-shadow:0 6px 22px rgba(0,0,0,.22)}
.cb-bulle b{color:var(--fluo);font-weight:800}
.cb-bulle i{display:block;font-style:normal;color:var(--gris-clair);
  font-size:11px;margin-top:4px}
.cb-bulle::after{content:'';position:absolute;top:100%;left:50%;
  transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--noir)}
.cb:hover .cb-bulle,.cb:focus-visible .cb-bulle{display:block}
/* Variante du bloc de tete : plus grande, et la bulle s'ouvre vers le bas
   parce qu'au-dessus il y a le prix, qu'on ne masque jamais. */
.cb-tete{margin-top:11px}
.cb-tete .cb{font-size:11.5px;padding:5px 11px;gap:7px}
.cb-tete .cb svg{width:14px;height:14px}
.cb-tete .cb-bulle{bottom:auto;top:calc(100% + 9px);white-space:normal;width:270px}
.cb-tete .cb-bulle::after{top:auto;bottom:100%;border-top-color:transparent;
  border-bottom-color:var(--noir)}

/* onglets Description / Caracteristiques / Livraison */
.onglets-zone{padding:80px 0;border-top:1px solid var(--filet)}
.onglets{display:flex;gap:0;border-bottom:2px solid var(--noir);margin-bottom:28px}
.onglet{background:none;border:none;font-family:var(--font);font-size:13px;
  font-weight:800;text-transform:uppercase;letter-spacing:.08em;padding:13px 22px;
  cursor:pointer;color:var(--gris);border-radius:0}
.onglet:hover{color:var(--noir)}
.onglet.on{background:var(--noir);color:var(--blanc)}
.volet{display:none}
.volet.on{display:block}
.v-texte{font-size:15px;line-height:1.7;max-width:78ch;color:var(--noir)}
.v-texte p+p{margin-top:12px}
.v-vide{color:var(--gris);font-style:italic}
.v-note{margin-top:18px;display:flex;align-items:center;gap:8px;font-size:12.5px;
  color:var(--gris)}
/* Fond transparent force partout : sans `background:transparent` sur la table
   ET sur ses cellules, le `th{background:...}` du tableau d'offres teintait
   toute la table de caracteristiques en gris. Vu a l'ecran le 09/09/2026,
   apres une premiere correction qui ne visait que `.tech-vide`. */
.specs{width:100%;border-collapse:collapse;max-width:720px;font-size:14px;
  background:transparent;border:none;min-width:0}
.specs tr{background:transparent}
.specs th{text-align:left;font-size:11px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--gris);padding:14px 24px 14px 0;
  border-bottom:1px solid var(--filet);width:32%;background:transparent;
  white-space:nowrap;vertical-align:middle}
.specs td{padding:14px 0;border-bottom:1px solid var(--filet);font-weight:600;
  background:transparent;white-space:nowrap}
/* Champ sans valeur : un tiret gris plutot qu'une cellule vide. La ligne
   reste, elle dit que le champ existe et qu'il n'est pas encore renseigne. */
.specs .vide{color:var(--gris-clair);font-weight:400}
.specs a{color:var(--vert-texte);font-weight:700}
/* Pointure de pesage du poids : une precision, pas une caracteristique. */
.specs .specs-note{font-weight:400;font-size:12.5px;color:var(--gris);
  white-space:normal}

/* Le pied de page vient de site_footer.CSS_PIED, commun a tout le site. */

@media (max-width:1000px){
  .fiche{grid-template-columns:1fr;gap:36px}
  .galerie{position:static}
  .specs,.grille{grid-template-columns:repeat(2,1fr)}
  .defile{grid-auto-columns:calc((100% - 22px) / 2)}
  .bande .wrap,.tech-vide{grid-template-columns:1fr;gap:26px}
  h1{font-size:30px}
}

/* ---------------------------------------------------------------------------
   MOBILE. La fiche n'avait qu'un seul palier, a 1000 px, et rien en dessous :
   mesure du 12/09/2026 en 375 px de large, le document sortait a 495 px.

   Deux causes, et la premiere est instructive : la barre d'onglets
   « Description / Caracteristiques / Livraison » est un `display:flex` sans
   retour a la ligne. Trois onglets a 22 px de padding tiennent a 1000 px et
   ne tiennent plus a 375 ; comme rien ne leur disait de se replier, ils
   sortaient de l'ecran en emportant la page avec eux. Ils defilent desormais
   horizontalement DANS leur barre, ce qui est le comportement attendu d'une
   serie d'onglets trop longue, plutot que de deborder du document.
--------------------------------------------------------------------------- */
/* LE TABLEAU DES OFFRES SORTAIT A 805 PX SUR UN ECRAN DE 390 (01/10/2026).
   Cinq colonnes, dont trois en `nowrap` (vignette cashback, prix suivi de
   « le moins cher », bouton) : le prix, le port et « Voir l'offre » de chaque
   marchand etaient hors de l'ecran, sur les 5 101 fiches, et la page entiere
   defilait de cote. Une barre de defilement dans le tableau aurait cache les
   memes colonnes. Chaque ligne devient donc une carte sur trois rangs, sans
   rien retirer : marchand et cashback, puis prix et bouton, puis le port.
   PALIER RELEVE DE 560 A 900 PX LE 04/10/2026 : avec les vignettes cashback
   (Foot Store, Direct Running, Endurance Store) le tableau mesure 845 px, et
   une tablette de 768 px defilait de 92 px, mesure en ligne sur
   /products/nike-rival-distance-all-rouge/hq3493-600/. */
@media (max-width:900px){
  .offres table,.offres tbody{display:block;width:100%}
  .offres thead{display:none}
  .offres tr{display:grid;grid-template-columns:24px minmax(0,1fr) auto;
    grid-template-areas:"rang march march" "rang prix aller" "rang port aller";
    column-gap:10px;row-gap:6px;padding:14px 0;border-bottom:1px solid var(--filet)}
  .offres td{display:block;padding:0;border:0}
  .offres tr.mini{background:#FCFFEF}
  .offres tr.mini td{background:none}
  .offres td.rang{grid-area:rang;width:auto}
  .offres td.march{grid-area:march}
  .offres .march-int{flex-wrap:wrap;gap:6px 10px}
  .offres td.prix-cell{grid-area:prix;text-align:left;white-space:normal}
  .offres td.dim{grid-area:port;font-size:12px}
  .offres td.dim::before{content:"Port : "}
  .offres td.num:last-child{grid-area:aller;align-self:center}
  /* « le moins cher » se coupait en deux lignes a cote du prix : il passe
     dessous, entier. */
  .offres .puce-mini,.offres .puce-flou{display:block;width:fit-content;
    margin:5px 0 0;white-space:nowrap}
}

@media (max-width:560px){
  .wrap{padding:0 16px}
  /* CINQ VIGNETTES NE TIENNENT PAS EN COLONNE SUR UN TELEPHONE (03/10/2026).
     En colonne de 76 px, elles faisaient 420 px de haut a cote d'une photo de
     250 : la galerie poussait tout le reste vers le bas. Sous 560 px, la
     photo passe en premier et les vignettes forment une rangee dessous. */
  .galerie{grid-template-columns:1fr;gap:10px}
  .principale{order:-1;padding:24px}
  .vignettes{flex-direction:row;gap:8px;overflow-x:auto;scrollbar-width:none}
  .vignettes::-webkit-scrollbar{display:none}
  .vignette{width:56px;height:56px;flex:none;padding:5px}
  .onglets{overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none}
  .onglets::-webkit-scrollbar{display:none}
  .onglet{padding:12px 14px;font-size:12px;flex:none}
  /* « Voir l'offre » ne se coupe pas : c'est le lien qui rapporte. On lui
     retire ses marges internes plutot que son texte. */
  .aller{padding:8px 10px;font-size:11.5px}

  /* CE QUI PRECEDE NE SUFFISAIT PAS POUR LE BOUTON DE TETE (13/09/2026).
     `.bloc-prix` est une grille `1fr auto` : a 375 px, la colonne du bouton
     tombait a 111 px, et « Voir l'offre » y etait rogne par `overflow:hidden`
     — sur le seul lien qui rapporte de l'argent au site. Reduire ses marges
     ne pouvait pas suffire, c'est la colonne qui etait trop etroite, pas le
     bouton trop large. Sous 560 px, le prix et le bouton s'empilent donc, et
     le bouton prend toute la largeur : il redevient lisible, et sa cible
     tactile passe de 111 a 328 px. */
  .bloc-prix{grid-template-columns:1fr;gap:16px;padding:20px}
  .bp-cta{width:100%;justify-content:center}
  .specs,.grille{grid-template-columns:1fr}
  /* Une carte et demie : la moitie qui depasse dit qu'on peut faire glisser. */
  .defile{grid-auto-columns:66%;gap:14px}
  .fleches{display:none}
  /* Une pastille par ligne au telephone : pleine largeur, sinon le bord droit
     de la liste suit la longueur de chaque nom de modele. */
  .pilule{width:100%}
  h1{font-size:26px}
  .tableau{font-size:13px}

  /* Le tableau des offres passe en cartes des 900 px : voir le palier
     au-dessus. */

  /* LA REGLE DES PRIX DEBORDAIT AUSSI (424 px pour 390). Chaque libelle est
     un bloc centre sur sa bille : au bout de la piste, la moitie du bloc de
     la meilleure offre (190 px) sortait de l'ecran. A l'ordinateur, la marge
     de la page l'absorbe ; ici non. Le texte des extremites rentre donc de
     toute sa demi-largeur, la bille ne bouge pas, et la bande rogne le bloc
     invisible qui depasse encore (overflow:hidden, pose sur .bande a toutes
     les largeurs depuis le 04/10/2026). */
  .pt-reg.bord-d .pt-prix,.pt-reg.bord-d .pt-march,
  .pt-reg.mini.bord-d .pt-prix,.pt-reg.mini.bord-d .pt-march{transform:translateX(-50%)}
  .pt-reg.bord-g .pt-prix,.pt-reg.bord-g .pt-march,
  .pt-reg.mini.bord-g .pt-prix,.pt-reg.mini.bord-g .pt-march{transform:translateX(50%)}
}

/* ---------------------------------------------------------------------------
   LOGOTYPE : RUNNING en noir, DEALS en noir sur aplat fluo.
   Version retenue 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}

/* ---------------------------------------------------------------------------
   BANDEAU DU HAUT : des modeles, pas des chiffres (12/09/2026).

   Jusqu'au 12/09/2026, ce bandeau portait « 6 429 references suivies »,
   « 10 marchands compares », « comparateur independant ». Des faits justes,
   mais qui ne donnent envie de cliquer sur rien, et qui ne menent nulle part.
   Un bandeau de comparateur doit montrer ce qu'il compare.

   Trois regles de forme :
     1. chaque element est un LIEN, pas un texte
     2. la marque recule (gris), le modele tient la ligne, le prix ressort
     3. la remise est le seul element fluo, et seulement quand elle existe

   Le fluo porte, il n'ecrit pas : la remise est de l'encre noire sur aplat
   fluo, comme le logotype et le surligneur de l'accueil. En texte fluo sur
   fond noir le contraste passerait, mais on aurait trois valeurs de vert a
   l'ecran pour une seule idee.
--------------------------------------------------------------------------- */
/* Le bandeau est en capitales depuis toujours : c'etait juste pour « 10
   MARCHANDS COMPARES », ca ne l'est plus pour des noms propres. « adidas »
   s'ecrit en minuscules, et la table MARQUES_CASSE existe precisement pour
   tenir ces graphies ; les forcer en capitales annulerait ce travail et
   donnerait ADIDAS, ainsi que des modeles deformes. Les capitales restent sur
   les notes de contexte, qui ne sont pas des noms. */
a.ruban-item,a.ticker-item{color:inherit;text-decoration:none;
  text-transform:none;letter-spacing:0;font-size:12.5px}
a.ruban-item:hover .r-modele,a.ticker-item:hover .r-modele{
  text-decoration:underline;text-underline-offset:3px}
.r-marque{color:#8A8A84;font-weight:600}
.r-modele{font-weight:700;letter-spacing:0}
.r-prix{font-weight:800;font-variant-numeric:tabular-nums}
.r-remise{background:#C2FF1F;color:#0B0B0B;font-weight:900;
  padding:2px 6px 1px;letter-spacing:0}
/* Les elements de contexte (releve du jour, nombre de marchands) restent en
   retrait : ils informent, ils n'appellent pas au clic. */
.ruban-note{color:#8A8A84;font-weight:600}
.ruban-note b{color:#C2FF1F;font-weight:800}

/* LE CONTENEUR DU BANDEAU VIT ICI DEPUIS LE 13/09/2026.
   Il n'etait defini que dans home_template, alors que le HTML du bandeau est
   produit ici, par ruban_html(). Consequence : toute page qui appelait
   ruban_html() sans emporter la feuille de la page d'accueil affichait le fil
   en texte brut, deroule sur deux lignes. Constate en creant /tailles/.
   Les couleurs sont en clair, comme dans le reste de ce module : les quatre
   feuilles du site ne nomment pas leurs variables pareil. */
.ruban-defile{background:#0B0B0B;color:#FFFFFF;overflow:hidden;
  white-space:nowrap;padding:7px 0;font-size:11.5px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase}
.ruban-piste{display:inline-block;animation:defile 49s linear infinite;
  will-change:transform}
.ruban-item{display:inline-flex;align-items:center;gap:12px;padding:0 26px}
.ruban-item b{color:#C2FF1F;font-weight:800}
.ruban-item::before{content:'';width:5px;height:5px;background:#C2FF1F;
  flex:none;display:inline-block}
.ruban-defile:hover .ruban-piste{animation-play-state:paused}
@keyframes defile{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .ruban-piste{animation:none}
}

/* ---------- 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 (10/09/2026) : un liseré
   grisé au-dessus du premier menu, comme en dessous. */
.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,.foot-modeles .foot-col-titre{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}

/* ---------------------------------------------------------------------------
   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}
}