/* Jetons de design. Changer d'univers visuel revient a changer cette declaration et
   rien d'autre : aucun composant plus bas ne porte de couleur en dur.

   La palette est reprise de l'identite footeo.com. Le point important n'est pas le
   cyan, c'est la separation : le cyan est la couleur de MARQUE (liens, titres, etats
   actifs), le vert est la couleur d'ACTION COMMERCIALE et il ne sert qu'au bouton qui
   mene chez le marchand. Sur une fiche qui porte quinze elements cyan, le seul bouton
   vert se repere en moins d'une seconde. Ne jamais reutiliser --cta ailleurs. */
:root{
  /* encre : trois niveaux, pas davantage */
  --encre:#333333; --encre-douce:#585858; --encre-faible:#999999;

  /* surfaces. Le fond de page n'est pas du blanc pur, sinon les cartes ne s'en
     detachent pas. --surface est le blanc des cartes, panneaux et champs. */
  --fond:#f7f9fa; --surface:#ffffff; --fond-doux:#f0f2f4; --surface-3:#e5e8ea;
  /* --media reste clair meme en mode sombre : les visuels marchands sont des produits
     detoures sur blanc, poses en mix-blend-mode multiply. Sur un fond sombre ils
     deviennent des rectangles noirs. */
  --media:#f0f2f4;
  /* traits en rgba noir et non en gris opaque : ils restent corrects sur une image */
  --trait:rgba(0,0,0,.10); --trait-fort:rgba(0,0,0,.18);

  /* accent de marque */
  --accent:#00a8e7; --accent-vif:#0083b4; --accent-sombre:#003744;
  --accent-clair:#e2f4fd;
  /* ce qu'on ecrit SUR l'accent. Du blanc sur #00a8e7 donne 2,5:1, soit illisible. */
  --accent-ink:#00232f;

  /* action commerciale, et elle seule */
  --cta:#62b45f; --cta-hover:#54a351; --cta-ink:#0a1f0a;

  /* semantique */
  --alerte:#ff5050; --ambre:#ffb550;

  --rayon-sm:8px; --rayon:14px; --rayon-lg:18px; --rayon-pill:99px;
  /* Hauteur de l'entete collante. Declaree une fois : la galerie collante s'en sert
     pour se poser juste dessous, et une valeur en dur aux deux endroits finirait par
     diverger d'un ou deux pixels sans que personne ne sache lequel corriger. */
  --nav-h:66px;
  --ombre:0 1px 2px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.06);

  /* Le bandeau du haut garde ses couleurs en mode sombre : c'est deja une bande
     sombre, et l'inverser en clair ferait clignoter le haut de page au changement de
     theme. Ce sont les deux seules couleurs du site a ne pas se redeclarer. */
  --bandeau-fond:#14181c; --bandeau-encre:#eef2f5;

  --police:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  /* chasse fixe systeme : aucune requete reseau, aucune dependance a charger */
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

  /* **La seule police chargee du site**, et elle ne sert qu'aux titres et au logo. Le
     corps de texte reste sur la pile systeme : un webfont sur 8 000 pages de catalogue
     coute un affichage differe a chaque navigation pour un gain que personne ne
     remarque dans un paragraphe.
     Les titres, si. Les deux comparateurs de reference portent le meme parti pris, une
     grotesque tres grasse et tres serree en capitales, et c'est ce qui fait qu'un
     « TOUTES LES SNEAKERS » ne ressemble pas a un titre de tableur. La pile systeme
     reste derriere : si la police ne charge pas, la page garde exactement sa mise en
     page, avec un titre moins typé. */
  --police-titre:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
    Helvetica,Arial,sans-serif;
}

/* Mode sombre. Ecrit maintenant parce qu'il ne coute qu'une redeclaration de jetons
   tant qu'aucun composant ne porte de couleur en dur, et plusieurs jours apres. */
@media (prefers-color-scheme:dark){
  :root{
    --encre:#e8ebee; --encre-douce:#a3abb3; --encre-faible:#6f7780;
    --fond:#12171c; --surface:#1a2027; --fond-doux:#222a32; --surface-3:#2c353e;
    --trait:rgba(255,255,255,.12); --trait-fort:rgba(255,255,255,.22);
    --accent:#3cc3f5; --accent-vif:#6fd4fa; --accent-clair:#0e3547;
    --cta:#6cc169; --cta-hover:#7fd07c;
    --alerte:#ff8a8a;
    --ombre:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  }
}

*{box-sizing:border-box}
/* Le zero barre distingue 0 et O dans les references fabricant, ou les deux coexistent */
*{font-feature-settings:"zero" 1}
[hidden]{display:none !important}

/* Tout nombre comparable est en chasse fixe. La raison est fonctionnelle et non
   decorative : dans une colonne de prix ou de pointures, les chiffres s'alignent
   verticalement, ce qui permet de comparer sans lire. C'est la signature d'un
   comparateur, et c'est la premiere chose qui manque quand elle manque. */
.carte-prix,.fiche-prix,.prix-barre,.tableau-offres .prix,.compteur,.compte,
.tailles li,.page-lien,.badge,.dispo,.carte-marque,.fiche-marque,.puce,
.attributs strong,.tableau-offres th,.rayon em,
.tableau-tailles td,.tableau-tailles th{
  font-family:var(--mono);font-variant-numeric:tabular-nums}

/* Sur-titre en petites capitales. Il structure la page a lui seul. */
.carte-marque,.fiche-marque,.tableau-offres th{
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--encre-douce)}

/* Etats de focus. Sans cette regle, la navigation au clavier est impossible a suivre
   et le site est hors RGAA. Elle coute trois lignes au depart. */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
a:focus-visible,button:focus-visible{outline-offset:3px}

/* Les animations de survol ne s'imposent pas a qui les a desactivees au niveau systeme */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  .carte:hover{transform:none}
}
body{margin:0;background:var(--fond);color:var(--encre);
  font:16px/1.6 var(--police);
  -webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.contenu{max-width:1120px;margin:0 auto;padding:0 20px}

/* Le bandeau defilant, tout en haut. Son contenu est genere : ce sont les plus fortes
   baisses du jour, avec leur lien. Un bandeau qui annoncerait « -50 % » en dur mentirait
   le lendemain ; celui-ci ne peut pas, il est reecrit a chaque build.

   Le defilement est une animation CSS sur une piste qui porte **deux fois** la meme
   liste : quand la premiere sort a gauche, la seconde est exactement a sa place, et la
   boucle ne saute pas. */
.bandeau{background:var(--bandeau-fond);color:var(--bandeau-encre);overflow:hidden;
  font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase}
.bandeau-piste{display:flex;width:max-content;animation:defile 70s linear infinite}
.bandeau-lot{display:flex;flex:none}
.bandeau-item{display:inline-flex;align-items:center;gap:8px;padding:9px 0;
  margin:0 26px;white-space:nowrap;color:inherit;opacity:.82}
.bandeau-item::after{content:"";width:3px;height:3px;border-radius:50%;
  background:currentColor;margin-left:26px;opacity:.5}
a.bandeau-item:hover{opacity:1;color:var(--accent-vif)}
.bandeau-item b{color:var(--accent-vif);font-weight:400}
/* Au survol, la lecture prime sur l'animation : on peut viser un lien. */
.bandeau:hover .bandeau-piste{animation-play-state:paused}
@keyframes defile{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* Qui a desactive les animations recoit une barre immobile, qu'il peut faire defiler
   lui-meme. Une bande qui bouge toute seule est exactement ce que ce reglage vise. */
@media (prefers-reduced-motion:reduce){
  .bandeau{overflow-x:auto;scrollbar-width:none}
  .bandeau::-webkit-scrollbar{display:none}
  .bandeau-piste{animation:none}
  .bandeau-lot:last-child{display:none}
}

/* **L'en-tete est sombre sur tout le site.** Elle etait blanche, prise entre la bande
   defilante sombre au-dessus et le haut de page sombre en dessous : trois zones, deux
   ruptures, et une barre blanche au milieu qui coupait l'ensemble en deux. Sombre, la
   sequence bande + en-tete + haut de page se lit comme un seul bloc, et la barre garde
   la meme allure quand elle suit le defilement au-dessus des pages claires.

   Ses jetons sont ceux de la bande, redeclares ici et non repris de la palette : ce sont
   les deux seules zones sombres du site, elles doivent rester identiques. */
.entete{background:var(--bandeau-fond);color:var(--bandeau-encre);
  border-bottom:1px solid rgba(255,255,255,.08);position:sticky;top:0;z-index:10}
.entete-barre{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:26px;
  align-items:center;height:var(--nav-h)}
/* Le logo de marque, en SVG. Hauteur fixe et largeur libre : le fichier porte son
   rapport dans son viewBox, 300 x 121, et le navigateur s'en sert pour reserver la
   place avant meme d'avoir telecharge l'image. */
.logo{display:flex;align-items:center}
.logo img{height:38px;width:auto;display:block}
.nav{display:flex;gap:22px;font-size:15px;color:rgba(255,255,255,.72)}
.nav a:hover{color:var(--accent)}
/* La recherche de l'en-tete vit desormais sur fond sombre : le champ clair d'origine y
   faisait une dalle blanche au milieu de la barre. */
.entete .recherche{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14)}
.entete .recherche input{color:var(--bandeau-encre)}
.entete .recherche input::placeholder{color:rgba(255,255,255,.5)}
.entete .recherche .icone{color:rgba(255,255,255,.55)}
.entete .recherche-touche{color:rgba(255,255,255,.5);border-color:rgba(255,255,255,.18)}
.entete .recherche:focus-within{background:rgba(255,255,255,.1);
  border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,168,231,.25)}
/* Les suggestions, elles, restent claires : c'est une liste de resultats a lire, pas un
   prolongement de la barre. */
.entete .suggestions{color:var(--encre)}

/* La recherche. Deux tailles, la meme mecanique : celle de l'en-tete sur toutes les
   pages, la grande au milieu de l'accueil. */
.recherche{position:relative;display:flex;align-items:center;gap:10px;
  border:1px solid var(--trait);border-radius:var(--rayon-pill);background:var(--fond);
  padding:0 16px;transition:border-color .15s,box-shadow .15s}
.recherche:focus-within{border-color:var(--accent);background:var(--surface);
  box-shadow:0 0 0 3px var(--accent-clair)}
.recherche .icone{color:var(--encre-faible);flex:none}
.recherche input{flex:1;min-width:0;border:0;background:none;outline:none;padding:11px 0;
  font:15px var(--police);color:var(--encre)}
.recherche input::placeholder{color:var(--encre-faible)}
/* La touche annoncee n'existe qu'a la souris et au clavier : sur un telephone, elle
   promettrait un raccourci qu'aucune touche ne rend. */
.recherche-touche{font-family:var(--mono);font-size:11px;color:var(--encre-faible);
  border:1px solid var(--trait);border-radius:6px;padding:2px 7px;flex:none}
@media (hover:none){.recherche-touche{display:none}}
.recherche-entete{max-width:520px;justify-self:center;width:100%}

.suggestions{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:30;
  background:var(--surface);border:1px solid var(--trait);border-radius:var(--rayon);
  box-shadow:var(--ombre);padding:6px;max-height:min(70vh,440px);overflow-y:auto}
.suggestion-groupe{margin:8px 10px 4px;font-family:var(--mono);font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--encre-faible)}
.suggestion{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  border:0;background:none;font:15px var(--police);color:var(--encre);cursor:pointer;
  padding:9px 10px;border-radius:9px}
.suggestion span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.suggestion em{font-style:normal;font-family:var(--mono);font-size:11px;
  color:var(--encre-faible);font-variant-numeric:tabular-nums}
/* Le nombre d'offres d'un produit : c'est le sujet du site, il se voit avant le prix. */
.suggestion i{font-style:normal;font-family:var(--mono);font-size:10px;flex:none;
  color:var(--accent-sombre);background:var(--accent-clair);border-radius:var(--rayon-pill);
  padding:2px 8px}
.suggestion-produit em{color:var(--encre);font-size:13px;font-weight:700}
/* Le coloris, a la suite du nom : c'est lui qui distingue six lignes identiques. */
.suggestion u{text-decoration:none;color:var(--encre-faible);font-size:13px}
.suggestion:hover,.suggestion[aria-selected="true"]{background:var(--accent-clair);
  color:var(--accent-sombre)}
.suggestion-vide{margin:0;padding:14px 12px;color:var(--encre-douce);font-size:14px}

.compteur{color:var(--encre-douce);font-size:14px;margin:0 0 14px}

.grille{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(215px,1fr))}
/* Le nombre de colonnes est une classe utilitaire, jamais une regle du composant :
   la meme carte sert sur l'accueil, les listings et le bas de fiche. */
.grille-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.carte{border:1px solid var(--trait);border-radius:var(--rayon);padding:14px;
  background:var(--surface);transition:box-shadow .15s,transform .15s;
  display:flex;flex-direction:column}
/* Le prix colle en bas quelle que soit la longueur du nom. Sans cela, deux cartes de
   la meme rangee ont leur prix a deux hauteurs differentes des que l'un des noms tient
   sur une ligne et l'autre sur deux, et la rangee ne se lit plus horizontalement. */
.carte-prix{margin-top:auto}
.carte:hover{box-shadow:var(--ombre);transform:translateY(-2px)}
.carte-image{aspect-ratio:1;background:var(--media);border-radius:10px;overflow:hidden;
  display:grid;place-items:center;margin-bottom:11px;position:relative}
.carte-image img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.carte-marque{margin:0 0 3px;display:flex;align-items:center;gap:6px}
/* Le picto de marque se cale en hauteur, jamais en largeur : un swoosh tres large et un
   logo Mizuno presque carre doivent peser pareil sur une ligne de texte. Noir uni comme
   les vignettes de tete, pour la meme raison : une ligne de marques, pas une ligne de
   publicites. */
.carte-picto{height:11px;width:auto;max-width:42px;object-fit:contain;flex:none;
  filter:brightness(0);opacity:.7}
/* Le blason, lui, garde ses couleurs et monte un peu : un ecusson noirci ne se
   reconnait plus, alors qu'un logo de marque est deja monochrome dans la vraie vie. */
.carte-picto-blason{height:16px;max-width:22px;filter:none;opacity:1}
/* Le nom du club peut etre long, « Borussia Mönchengladbach » par exemple, et la
   saison doit rester lisible a droite : c'est le nom qui cede, pas elle.
   L'interlettrage de la ligne est retire ici : a 2 px par caractere, il coutait 38 px
   sur « PARIS SAINT-GERMAIN » et tronquait un nom qui tient sans lui. */
.carte-titulaire{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
  letter-spacing:.03em}
.carte-marque .carte-saison{margin-left:auto;flex:none;padding-left:8px}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .carte-picto{filter:brightness(0) invert(1)}
}
:root[data-theme="dark"] .carte-picto{filter:brightness(0) invert(1)}
/* La saison, a droite de la marque : c'est ce qui distingue deux maillots d'un meme
   club dont les noms sont identiques. */
.carte-saison{color:var(--encre-faible);letter-spacing:.12em}
.carte-nom{font-size:14px;line-height:1.4;margin:0 0 9px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.carte-prix{font-weight:700;margin:0;display:flex;align-items:baseline;gap:8px;
  padding-top:4px}
.carte-prix span{font-weight:400;font-size:12px;color:var(--accent)}
.bouton-plus{display:block;margin:28px auto;padding:12px 26px;border:1px solid var(--trait);
  border-radius:10px;background:var(--surface);font-size:15px;cursor:pointer;
  color:var(--encre);font-family:inherit}
.bouton-plus:hover{border-color:var(--accent);color:var(--accent)}
.vide{text-align:center;color:var(--encre-douce);padding:40px 0}

.fil{font-size:13px;color:var(--encre-douce);padding:22px 0 18px}
.fil a:hover{color:var(--accent)}
.fil span{margin:0 5px;opacity:.5}

.fiche{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;
  padding-bottom:34px;border-bottom:1px solid var(--trait)}
/* La galerie suit le defilement : la colonne de droite est plus longue qu'elle, et un
   visuel qui disparait pendant qu'on choisit sa taille ne sert plus a rien. */
.fiche-visuel{display:grid;gap:12px;align-content:start;
  position:sticky;top:calc(var(--nav-h) + 14px)}
.visuel-principal{aspect-ratio:1;background:var(--media);border-radius:var(--rayon);
  display:grid;place-items:center;padding:26px;overflow:hidden}
.visuel-vignettes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.visuel-vignette{aspect-ratio:1;background:var(--media);border-radius:var(--rayon-sm);
  display:grid;place-items:center;padding:10px;overflow:hidden}
.fiche-visuel img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.fiche-marque{margin:0 0 8px;color:var(--accent)}
/* Titres : sans-serif lourde, capitales, interlignage serre. C'est ce qui donne a la
   page son air de fiche technique plutot que de page de boutique. */
.fiche h1{font-size:38px;line-height:1;letter-spacing:-.02em;margin:0 0 10px;
  font-weight:800;text-transform:uppercase}
/* La ligne d'identification, juste sous le titre : la reference telle que le marchand
   la publie, et le modele qui mene au hub. Elle etait enterree dans la liste
   d'attributs, alors que c'est ce qu'on lit pour verifier qu'on est sur le bon article. */
.fiche-identite{margin:0 0 18px;font-family:var(--mono);font-size:12px;
  color:var(--encre-douce);font-variant-numeric:tabular-nums}
.fiche-identite a:not(.bouton){color:var(--accent)}
.fiche-identite a:hover{text-decoration:underline}
.fiche-identite .sep{margin:0 7px;opacity:.5}

/* En-tete du selecteur de taille : le libelle a gauche, le guide a droite. */
.selecteur-tete{display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;margin:0 0 10px}
.selecteur-tete p{margin:0;font-weight:700;font-size:15px}
.selecteur-tete span{font-weight:400;color:var(--encre-douce);font-size:13px}
.selecteur-tete a{color:var(--encre-douce);font-size:13px;text-decoration:underline;
  text-underline-offset:3px}
.selecteur-tete a:hover{color:var(--accent)}

/* La rangee d'actions sous le selecteur. Le bouton principal prend la place qui reste,
   les actions secondaires gardent leur largeur. */
.actions-fiche{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0 0}
.bouton-large{flex:1;min-width:230px;text-align:center;padding:14px 22px;font-size:16px}
.bouton-second{display:inline-flex;align-items:center;gap:8px;padding:14px 18px;
  border:1px solid var(--trait);border-radius:10px;background:var(--surface);
  font-size:14px;font-weight:600;color:var(--encre);cursor:pointer;
  font-family:inherit}
.bouton-second:hover{border-color:var(--accent);color:var(--accent)}
/* Les icones suivent la couleur du texte : un seul jeu sert en clair comme en sombre. */
.icone{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}

/* Le bloc d'alerte, en <details> : il s'ouvre sans script, au clavier comme a la
   souris, et son contenu reste dans la page. */
.alerte{margin:12px 0 0;border:1px solid var(--trait);border-radius:var(--rayon);
  background:var(--surface);overflow:hidden}
.alerte summary{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 16px;cursor:pointer;list-style:none}
.alerte summary::-webkit-details-marker{display:none}
.alerte-titre{display:inline-flex;align-items:center;gap:9px;font-weight:600;
  font-size:14px}
.alerte-titre .icone{color:var(--accent)}
.alerte-bascule{font-family:var(--mono);font-size:12px;color:var(--accent)}
.alerte-bascule::after{content:" \25BE"}
.alerte[open] .alerte-bascule::after{content:" \25B4"}
.alerte-corps{padding:0 16px 16px;border-top:1px solid var(--trait);margin-top:-1px;
  padding-top:14px}
.durees{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.puce-duree{cursor:pointer}
.puce-duree input{position:absolute;opacity:0;width:0;height:0}
.puce-duree span{display:inline-block;border:1px solid var(--trait);
  border-radius:var(--rayon-pill);padding:7px 15px;font-family:var(--mono);
  font-size:12px;color:var(--encre-douce)}
.puce-duree input:checked + span{background:var(--accent);border-color:var(--accent);
  color:var(--accent-ink);font-weight:700}
.puce-duree input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}
.puce-duree input:disabled + span{opacity:.5;cursor:not-allowed}
.alerte-champ{display:flex;gap:9px;flex-wrap:wrap}
.alerte-champ input{flex:1;min-width:190px;padding:12px 14px;border:1px solid var(--trait);
  border-radius:10px;background:var(--fond-doux);color:var(--encre);
  /* 16px : en dessous, iOS zoome tout seul au focus et deforme la page. */
  font-size:16px;font-family:var(--police)}
.alerte-champ input:disabled{opacity:.6;cursor:not-allowed}
.alerte-champ .bouton{border:0;cursor:pointer;font-family:inherit;font-size:14px}
.alerte-champ .bouton:disabled{opacity:.55;cursor:not-allowed;box-shadow:none}
.alerte-champ .bouton:disabled:hover{background:var(--cta);transform:none}
.alerte .mention{margin:10px 0 0}

/* Onglets en CSS pur : des radios caches portent l'etat, les trois panneaux restent
   dans le HTML et sont donc servis aux moteurs comme aux visiteurs. */
.onglet-radio{position:absolute;opacity:0;width:0;height:0}
.onglets-barre{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--trait);
  margin:0 0 20px}
.onglet-titre{padding:12px 18px;cursor:pointer;font-family:var(--mono);font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--encre-faible);
  border-bottom:2px solid transparent;margin-bottom:-1px}
.onglet-titre:hover{color:var(--encre-douce)}
.onglet-panneau{display:none}
.onglets .onglet-radio:nth-of-type(1):checked ~ .onglets-barre .onglet-titre:nth-of-type(1),
.onglets .onglet-radio:nth-of-type(2):checked ~ .onglets-barre .onglet-titre:nth-of-type(2),
.onglets .onglet-radio:nth-of-type(3):checked ~ .onglets-barre .onglet-titre:nth-of-type(3){
  color:var(--encre);border-bottom-color:var(--encre);font-weight:700}
.onglets .onglet-radio:nth-of-type(1):checked ~ .onglets-corps .onglet-panneau:nth-of-type(1),
.onglets .onglet-radio:nth-of-type(2):checked ~ .onglets-corps .onglet-panneau:nth-of-type(2),
.onglets .onglet-radio:nth-of-type(3):checked ~ .onglets-corps .onglet-panneau:nth-of-type(3){
  display:block}
.onglet-radio:focus-visible ~ .onglets-barre{outline:2px solid var(--accent);
  outline-offset:3px;border-radius:4px}
.onglet-panneau .description + .description{margin-top:12px}
.onglet-panneau .attributs{max-width:720px}

/* La ligne de reperes a droite du titre de section : ce que le comparateur garantit,
   et le nombre d'offres. */
.offres-tete{display:flex;align-items:baseline;justify-content:space-between;
  gap:20px;flex-wrap:wrap;margin:0 0 16px}
.offres-tete h2{margin:0}
.reperes{display:flex;gap:18px;flex-wrap:wrap;font-family:var(--mono);font-size:12px;
  color:var(--encre-douce);font-variant-numeric:tabular-nums}
.reperes b{color:var(--accent);font-weight:700}
.fiche-prix{font-size:30px;font-weight:700;margin:0 0 4px;color:var(--accent)}
.prix-barre{font-size:17px;font-weight:400;color:var(--encre-douce);
  text-decoration:line-through;margin-left:10px}
.fiche-resume{color:var(--encre-douce);font-size:14px;margin:0 0 22px}
.attributs{list-style:none;padding:0;margin:0;border-top:1px solid var(--trait)}
.attributs li{display:flex;justify-content:space-between;gap:16px;padding:11px 0;
  border-bottom:1px solid var(--trait);font-size:14px}
.attributs span{color:var(--encre-douce)}

/* Le panneau meilleur prix, encadre de deux filets. Le montant principal est le seul
   chiffre de la page a cette taille, et c'est voulu : rien d'autre ne doit pouvoir
   rivaliser avec lui. */
.panneau-prix{display:flex;flex-wrap:wrap;gap:28px;margin:0 0 18px;padding:16px 0;
  border-top:1px solid var(--trait-fort);border-bottom:1px solid var(--trait-fort)}
.panneau-bloc{display:flex;flex-direction:column;gap:2px}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--encre-douce);margin:0}
.panneau-montant{font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:40px;font-weight:800;line-height:1.05;letter-spacing:-.02em;
  color:var(--accent);margin:2px 0 0}
.panneau-repere{font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:22px;font-weight:700;line-height:1.2;color:var(--encre-douce);margin:6px 0 0}
.panneau-note{font-size:12px;color:var(--encre-douce);margin:2px 0 0}

.offres{padding:34px 0}
.offres h2,.bloc h2{font-size:24px;margin:0 0 16px;letter-spacing:-.01em;
  font-weight:800;text-transform:uppercase;line-height:1.05}

/* La ligne d'offre marchand. Le composant le plus dense de la fiche. */
.liste-offres{display:flex;flex-direction:column;gap:10px}
.offre{border:1px solid var(--trait);border-radius:var(--rayon);padding:14px 16px;
  background:var(--surface)}
/* La meilleure offre se distingue par la BORDURE, pas par un fond colore : un fond
   colore sur une liste de dix offres rend la page illisible, et il entre en concurrence
   avec le seul element de la page qui a le droit d'etre colore, le bouton. */
.offre-mieux{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.offre-tete{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
/* Vignette de repli : les flux d'affiliation ne publient pas de logo marchand. Le cadre
   a fond clair homogeneisera aussi de vrais logos, dont les formats et les fonds sont
   incoherents d'un marchand a l'autre. */
.offre-logo{width:44px;height:44px;flex:none;border:1px solid var(--trait);
  border-radius:var(--rayon-sm);background:var(--media);color:var(--encre-douce);
  display:grid;place-items:center;font-family:var(--mono);font-weight:700;font-size:15px}
/* Le logo d'un marchand, quand il a ete importe. Fond blanc et non `--media` : ces
   visuels viennent d'Awin avec leur propre fond, rouge chez Foot Store, cyan chez
   AtmosferaSport, blanc chez Sport is Good. Les poser sur un gris les salit tous.
   `contain` et non `cover` : Foot Store est en 2:1, un recadrage lui couperait son nom. */
.offre-logo-image{background:#fff;overflow:hidden;padding:0}
.offre-logo-image img{width:100%;height:100%;object-fit:contain;display:block}
.offre-ident{flex:1;min-width:150px}
.offre-nom{margin:0;font-weight:700;font-size:15px;display:flex;align-items:center;
  gap:9px;flex-wrap:wrap}
.offre-sous{margin:2px 0 0;font-family:var(--mono);font-size:12px;
  color:var(--encre-douce);font-variant-numeric:tabular-nums}
.offre-rupture{color:var(--alerte)}
.offre-prix{text-align:right;margin-left:auto;padding-right:6px}
.offre-montant{margin:0;font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:21px;font-weight:700;white-space:nowrap}
.offre-barre{margin:0;font-family:var(--mono);font-size:12px;color:var(--encre-faible);
  text-decoration:line-through}
/* La grille du marchand est separee de son en-tete par un filet. */
.grille-offre{margin-top:13px;padding-top:13px;border-top:1px solid var(--trait)}
.note{background:var(--fond-doux);border-radius:10px;padding:13px 16px;font-size:14px;
  color:var(--encre-douce);margin:0 0 16px}
.tableau-offres{width:100%;border-collapse:collapse;font-size:15px}
.tableau-offres th{text-align:left;font-weight:600;
  padding:0 12px 10px 0;border-bottom:1px solid var(--trait)}
.tableau-offres td{padding:15px 12px 15px 0;border-bottom:1px solid var(--trait);
  vertical-align:middle}
.tableau-offres .prix{font-weight:700;white-space:nowrap}
.tableau-offres .tailles-cell{color:var(--encre-douce);font-size:13px;max-width:290px}
.tableau-offres .action{text-align:right}
/* Les pastilles. Toutes la meme geometrie, une teinte par nature d'information : elles
   se combinent sans se contredire parce que seule la couleur change. */
.badge{display:inline-block;margin-left:9px;padding:2px 8px;border-radius:var(--rayon-pill);
  font-size:11px;font-weight:600;letter-spacing:.02em;border:1px solid transparent}
.badge-mieux{background:var(--accent-clair);color:var(--accent);
  border-color:var(--accent)}
.carte-badges{position:absolute;top:8px;left:8px;display:flex;gap:5px;flex-wrap:wrap;
  max-width:calc(100% - 16px)}
.carte-badges .badge{margin:0;backdrop-filter:blur(2px)}
.badge-semelle{background:rgba(255,255,255,.88);color:var(--encre);
  border-color:var(--trait-fort)}
.badge-promo{background:var(--alerte);color:#fff;border-color:transparent}
.dispo{font-size:13px;color:var(--accent);white-space:nowrap}
.dispo-non{color:var(--alerte)}
/* **Un bouton n'est pas un lien de prose.** Les regles `.texte a`, `.note a` et leurs
   soeurs colorent les liens en accent ; elles sont declarees plus loin que `.bouton` et
   a specificite egale, donc elles gagnaient. La page des codes promo enveloppe ses
   cartes dans un `.bloc.texte` : ses boutons sortaient en cyan sur vert, illisibles.
   D'ou le `:not(.bouton)` sur chacune de ces regles, qui traite la cause et non le
   symptome. Signale par Mehdi le 28/09/2026. */

/* Le bouton qui mene chez le marchand. Seul element du site a porter --cta, et c'est
   tout l'interet : il ne se noie pas dans les quinze elements cyan de la page. */
.bouton{display:inline-block;background:var(--cta);color:var(--cta-ink);padding:10px 18px;
  border-radius:10px;font-size:14px;font-weight:700;white-space:nowrap;
  box-shadow:0 1px 2px rgba(0,0,0,.08),0 4px 12px rgba(98,180,95,.28);
  transition:background .15s,transform .15s}
.bouton:hover{background:var(--cta-hover);transform:translateY(-1px)}
.bouton:active{transform:none}
.bouton::after{content:" \2192";opacity:.55}

.bloc{padding:0 0 34px}
.tailles{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.tailles li{border:1px solid var(--trait);border-radius:8px;padding:7px 13px;font-size:14px}

/* La grille de tailles avec prix par taille. Deux lignes par case : la taille, puis
   son prix en dessous, plus petit et attenue. Dix colonnes sur poste fixe. */
.grille-tailles{list-style:none;padding:0;margin:0;display:grid;gap:8px;
  grid-template-columns:repeat(10,1fr)}
.case-taille{border:1px solid var(--trait);border-radius:var(--rayon-sm);
  background:var(--fond-doux);padding:8px 4px;text-align:center;width:100%;
  display:flex;flex-direction:column;gap:2px;min-width:0;color:inherit;
  font:inherit;cursor:default;transition:border-color .12s,background .12s}
.case-valeur{font-family:var(--mono);font-weight:700;font-size:14px;
  font-variant-numeric:tabular-nums}
.case-prix{font-family:var(--mono);font-size:11px;color:var(--encre-douce);
  font-variant-numeric:tabular-nums;white-space:nowrap}
/* Grisee, jamais masquee : « n'existe pas » et « en rupture » sont deux informations
   differentes, et la seconde est celle que le visiteur est venu chercher. */
.case-absente{opacity:.38}
/* La classe est posee par le script : sans lui, rien n'a l'air cliquable, parce que
   rien ne l'est. */
.grille-cliquable .case-taille:not([disabled]){cursor:pointer}
.grille-cliquable .case-taille:not([disabled]):hover{border-color:var(--trait-fort);
  background:var(--surface-3)}
/* Selectionnee : bordure en accent et fond en accent tres dilue. Pas un aplat : la
   case doit rester lisible et ne pas rivaliser avec le bouton d'achat. */
.case-selection,.grille-cliquable .case-selection:hover{border-color:var(--accent);
  background:var(--accent-clair);box-shadow:inset 0 0 0 1px var(--accent)}
.case-selection .case-prix{color:var(--accent);font-weight:700}

/* Un marchand qui n'a pas la taille choisie reste affiche, en retrait : il ne repond
   pas a la question posee, ce n'est pas une raison pour le faire disparaitre. */
.offre-sans-taille{opacity:.62}
.offre-libelle{margin:0 0 2px}
.reperes-taille{margin-top:8px;align-items:center}
.reperes-reinit{border:1px solid var(--trait);border-radius:var(--rayon-pill);
  padding:5px 13px;background:var(--surface);cursor:pointer;font-family:var(--mono);
  font-size:11px;color:var(--encre-douce)}
.reperes-reinit:hover{border-color:var(--accent);color:var(--accent)}
.legende-tailles{font-size:13px;color:var(--encre-douce);margin:0 0 12px}
.description{color:var(--encre-douce);max-width:720px;margin:0}

.tableau-tailles td{white-space:nowrap}
.tableau-tailles tbody tr:hover{background:var(--fond-doux)}
/* Le tableau d'un billet ne porte pas des pointures mais des phrases : il lui faut le
   retour a la ligne, que le tableau de tailles interdit precisement pour garder ses
   colonnes de chiffres alignees. Deux usages, deux regles. Sans celle-ci, les colonnes
   « Pour qui » et « Prix constates » des tableaux de gamme sortaient de l'ecran. */
.tableau-contenu{width:100%;border-collapse:separate;border-spacing:0;
  margin:8px auto 22px;font-size:14px;background:var(--surface);
  border:1px solid var(--trait);border-radius:var(--rayon);overflow:hidden}
.tableau-contenu th{text-align:left;font-family:var(--mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--encre-douce);
  padding:13px 18px;background:var(--fond-doux);vertical-align:bottom;
  border-bottom:1px solid var(--trait)}
.tableau-contenu td{padding:14px 18px;border-bottom:1px solid var(--trait);
  vertical-align:top;line-height:1.55;color:var(--encre-douce)}
.tableau-contenu tbody tr:last-child td{border-bottom:0}
.tableau-contenu tbody tr:hover{background:var(--fond-doux)}
/* La premiere colonne est l'entree de lecture : encre pleine, pas de coupure. */
.tableau-contenu td:first-child{white-space:nowrap;color:var(--encre)}
/* La derniere colonne porte les chiffres **quand le tableau le declare** : chasse fixe,
   alignee a droite, jamais coupee. Une colonne de prix qui ne s'aligne pas ne se compare
   pas d'un coup d'oeil.
   La regle est conditionnee parce qu'appliquee a une colonne de texte, l'insecable lui
   fait prendre toute la largeur et ecrase les colonnes du milieu. */
.tableau-chiffre th:last-child,.tableau-chiffre td:last-child{text-align:right;
  white-space:nowrap}
.tableau-chiffre td:last-child{font-family:var(--mono);
  font-variant-numeric:tabular-nums;color:var(--encre)}
/* Un tableau tout en texte repartit ses colonnes a parts egales, sauf la premiere qui
   ne porte qu'un nom. */
.tableau-contenu:not(.tableau-chiffre){table-layout:fixed}
.tableau-contenu:not(.tableau-chiffre) td:first-child{white-space:normal;width:22%}
@media (max-width:768px){
  /* Sur telephone, un tableau de quatre colonnes de texte ne tient pas : il defile. */
  .texte .tableau-contenu{display:block;overflow-x:auto}
}
.note a:not(.bouton){color:var(--accent)}
.note a:hover{text-decoration:underline}

.substance{background:var(--fond-doux);border-radius:var(--rayon);padding:20px 24px;
  margin:0 0 26px;max-width:860px}
.substance p{margin:0 0 8px;font-size:15px;line-height:1.65}
.substance p:last-child{margin:0}
.substance .mention{font-size:12px;color:var(--encre-douce)}

.rayons{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.rayon{border:1px solid var(--trait);border-radius:var(--rayon);padding:16px 18px;
  display:flex;flex-direction:column;gap:3px;transition:border-color .15s,box-shadow .15s}
.rayon:hover{border-color:var(--accent);box-shadow:var(--ombre)}
.rayon strong{font-size:16px}
.rayon em{font-style:normal;color:var(--encre-douce);font-size:13px}

/* Le paragraphe de maillage contextuel, dans le corps d'une page de catalogue. C'est la
   seule forme de maillage que reconnaisse l'annexe editoriale : un bloc de liens en
   pied de page n'en est pas. Il se lit comme une phrase, pas comme une barre de
   navigation, donc les liens y sont soulignes au survol et non presentes en boutons. */
.contexte{max-width:80ch;margin:0 0 24px;color:var(--encre-douce);font-size:15px;
  line-height:1.7}
.contexte a:not(.bouton){color:var(--accent);text-decoration:underline;
  text-decoration-color:var(--trait-fort);text-underline-offset:3px}
.contexte a:hover{text-decoration-color:var(--accent)}

/* ------------------------------------------------- L'index des modeles.

   **Une liste dense, pas une grille de cartes.** Sur une page dont l'unique role est de
   mener ailleurs, une carte par entree fait defiler dix ecrans pour lire ce qui tient
   en deux. Forme reprise du comparateur sneakers de reference, qui presente ainsi ses
   2 500 modeles : compteurs, barre A-Z, puis un groupe par marque et les modeles en
   colonnes de texte. */
.index-tete{padding:26px 0 22px;border-bottom:1px solid var(--trait);margin-bottom:6px}
.index-tete h1{font-family:var(--police-titre);font-size:clamp(28px,4vw,42px);
  line-height:1.05;letter-spacing:-.03em;margin:8px 0 0;font-weight:800;
  text-transform:uppercase}
.index-chapeau{margin:14px 0 0;max-width:66ch;color:var(--encre-douce);font-size:15px;
  line-height:1.65}
.index-chiffres{display:flex;flex-wrap:wrap;gap:12px 40px;margin:22px 0 0;padding:0;
  list-style:none;color:var(--encre-douce);font-size:13px}
.index-chiffres b{font-family:var(--mono);font-size:22px;font-weight:700;
  color:var(--encre);letter-spacing:-.02em;margin-right:7px}

/* La barre A-Z. Elle suit le defilement : sur une page qui fait quinze ecrans, une
   barre d'index qui reste en haut ne sert qu'une fois. */
.alpha-barre{position:sticky;top:var(--nav-h);z-index:5;display:flex;flex-wrap:wrap;
  gap:4px;padding:12px 0;margin:0 0 10px;background:var(--fond);
  border-bottom:1px solid var(--trait)}
.alpha-lettre{display:grid;place-items:center;width:30px;height:30px;
  border-radius:var(--rayon-sm);font-family:var(--mono);font-size:13px;font-weight:700;
  color:var(--encre-douce);transition:background .12s,color .12s}
.alpha-lettre:hover{background:var(--accent-clair);color:var(--accent-sombre)}
/* Les lettres sans marque restent visibles mais eteintes : une barre d'index amputee
   de ses lettres vides ne se lit plus comme un alphabet. */
.alpha-vide{color:var(--encre-faible);opacity:.35;pointer-events:none}

.lettre-section{padding:18px 0 4px;scroll-margin-top:calc(var(--nav-h) + 62px)}
.lettre-titre{font-family:var(--police-titre);font-size:15px;font-weight:800;
  letter-spacing:.2em;color:var(--accent);margin:0 0 14px;
  padding-bottom:8px;border-bottom:1px solid var(--trait)}
.marques-grille{display:grid;gap:26px}
.groupe-marque-nom{margin:0 0 9px;font-size:16px;font-weight:700}
.groupe-marque-nom a:hover{color:var(--accent)}
/* Les modeles coulent en colonnes de texte : c'est ce qui fait tenir une centaine de
   liens sur un ecran. `break-inside` evite qu'un lien soit coupe en deux colonnes. */
.modeles-marque{columns:4;column-gap:26px}
.lien-modele{display:block;break-inside:avoid;padding:4px 0;font-size:14px;
  line-height:1.45;color:var(--encre-douce)}
.lien-modele:hover{color:var(--accent)}
.lien-modele em{font-style:normal;font-family:var(--mono);font-size:11px;
  color:var(--encre-faible);margin-left:6px}
@media (max-width:1024px){.modeles-marque{columns:3}}
@media (max-width:768px){.modeles-marque{columns:2}
  .alpha-barre{position:static}}
@media (max-width:480px){.modeles-marque{columns:1}}

/* Les codes promo. Le code est selectionnable et copiable, jamais une image : un
   visiteur qui doit le recopier a la main se trompe une fois sur trois. */
.codes-promo{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  margin:0 0 18px}
.code-promo{border:1px solid var(--trait);border-radius:var(--rayon);
  background:var(--surface);padding:16px 18px;display:flex;flex-direction:column;
  gap:9px}
.code-tete{margin:0;display:flex;align-items:center;gap:9px;font-family:var(--mono);
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--encre-douce)}
.code-tete strong{color:var(--encre)}
.code-exclusif{background:var(--accent-clair);color:var(--accent-sombre);
  border-radius:var(--rayon-pill);padding:3px 9px;font-size:10px;font-weight:700}
.code-titre{margin:0;font-size:15px;line-height:1.4;font-weight:600;flex:1}
.code-valeur{display:block;font-family:var(--mono);font-size:19px;font-weight:700;
  letter-spacing:.08em;text-align:center;padding:11px;border-radius:var(--rayon-sm);
  background:var(--fond-doux);border:1px dashed var(--trait-fort);
  user-select:all;-webkit-user-select:all}
.code-sans{display:block;font-size:13px;color:var(--encre-douce);text-align:center;
  padding:11px;border-radius:var(--rayon-sm);background:var(--fond-doux)}
.code-pied{margin:0;display:flex;align-items:center;justify-content:space-between;
  gap:12px}
.code-fin{font-family:var(--mono);font-size:11px;color:var(--encre-faible)}

.compte{font-weight:400;font-size:13px;color:var(--encre-douce);margin-left:8px}
.bloc h2 a:hover{color:var(--accent)}
.attributs a:not(.bouton){color:var(--accent)}
.attributs a:hover{text-decoration:underline}

.puces{display:flex;flex-wrap:wrap;gap:9px}
.puce{border:1px solid var(--trait);border-radius:var(--rayon-pill);padding:9px 17px;
  font-size:14px;background:var(--surface);display:inline-flex;align-items:baseline;gap:8px}
.puce:hover{border-color:var(--accent);color:var(--accent)}
.puce strong{font-family:var(--police);font-weight:700}
.puce em{font-style:normal;font-size:12px;color:var(--encre-faible)}

.pagination{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;padding:34px 0 10px}
.page-lien{border:1px solid var(--trait);border-radius:9px;padding:9px 14px;font-size:14px;
  min-width:42px;text-align:center}
.page-lien:hover{border-color:var(--accent);color:var(--accent)}
.page-active{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);
  font-weight:700}
.page-ellipse{padding:9px 2px;color:var(--encre-douce)}

/* Les pages Equipes et Selections. */
.filtres-championnat{margin:0 0 30px}
.filtres-championnat .eyebrow{margin:0 0 10px}
.puce-filtre{cursor:pointer;font-family:inherit;color:var(--encre);
  transition:border-color .15s,background .15s,color .15s}
.puce-filtre em{font-style:normal;font-family:var(--mono);font-size:11px;
  color:var(--encre-faible);font-variant-numeric:tabular-nums}
.puce-active{background:var(--accent);border-color:var(--accent);
  color:var(--accent-ink);font-weight:700}
.puce-active em{color:var(--accent-ink);opacity:.7}

.championnat-tete{display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin:0 0 16px;padding-bottom:12px;
  border-bottom:1px solid var(--trait)}
.championnat-tete h2{margin:0}
.bloc-championnat{padding-bottom:40px}
.lien-ligue{font-family:var(--mono);font-size:12px;color:var(--encre-douce);
  text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.lien-ligue:hover{color:var(--accent)}

/* Le carrousel, un seul composant pour les deux usages : la rangee de clubs d'un
   championnat, et la ligne des championnats eux-memes. Le defilement est en CSS, la
   piste deborde en horizontal, donc molette, doigt et clavier marchent sans script.
   Le script n'ajoute que les deux fleches.

   Elles se posent **sur les cotes de la piste**, pas dans l'en-tete : c'est la qu'on
   les cherche quand on n'a ni pave tactile ni ecran a glisser, et c'est la qu'elles
   designent ce qu'elles font defiler. Dans l'en-tete, elles etaient hors du conteneur
   que le script interrogeait, et n'apparaissaient donc jamais. */
/* Trois colonnes : la fleche, la piste, la fleche. Les fleches se tiennent **a cote**
   des vignettes et non par-dessus : posees en surimpression, elles masquaient la
   premiere et la derniere carte de chaque rangee, c'est-a-dire justement celle vers
   laquelle on veut aller. */
.carrousel{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center}
/* Chaque element est place a la main. Sans cela, une rangee sans fleches, donc sans
   rien dans les colonnes 1 et 3, voyait la piste glisser dans la premiere colonne,
   dimensionnee sur son contenu : les rangees courtes se retrouvaient avec des vignettes
   plus petites que les longues, alors que la seule difference etait le nombre d'equipes. */
.carrousel > .fleche-precedent{grid-column:1}
.carrousel > .piste{grid-column:2}
.carrousel > .fleche-suivant{grid-column:3}
.piste{display:flex;overflow-x:auto;scrollbar-width:none}
.piste::-webkit-scrollbar{display:none}

/* La rangee de vignettes se decoupe en un nombre **entier** de cartes : leur largeur
   se calcule sur celle de la piste plutot que d'etre fixee en pixels. Avec une largeur
   fixe, la derniere carte visible etait coupee en deux, et c'est justement celle vers
   laquelle on va cliquer. Un pas de defilement vaut alors exactement une page. */
/* La largeur d'une vignette se pose sur la carte, en `flex-basis`, et non en colonne de
   grille : dans un conteneur qui defile, une colonne en pourcentage se resout sur la
   largeur du contenu et non sur celle de la piste, si bien qu'une rangee courte, qui ne
   deborde pas, obtenait des vignettes plus petites qu'une rangee longue. Le `flex-basis`
   se resout, lui, sur la largeur interne du conteneur, la meme pour toutes les rangees. */
/* Quatre vignettes par vue en grand ecran. A six, le blason tombait a 124 px et se
   lisait mal ; a quatre il depasse 200 px et le club se reconnait d'un coup d'oeil,
   ce qui est tout l'interet d'une rangee de blasons. */
.piste-equipes{--par-vue:4;gap:18px;padding:4px 4px 10px;
  scroll-padding-inline:4px;scroll-snap-type:x mandatory}
.piste-equipes .carte-equipe{scroll-snap-align:start;
  flex:0 0 calc((100% - (var(--par-vue) - 1) * 18px) / var(--par-vue))}
@media (max-width:1020px){.piste-equipes{--par-vue:3}}
.piste-puces{gap:9px;padding:3px 4px}
.piste-puces .puce{flex:none}
.championnat-actions{display:flex;align-items:center;gap:10px}

/* Sans cadre ni fond : un simple chevron pose dans la marge, assez grand pour se viser
   du premier coup, assez discret pour ne pas concurrencer les cartes. */
.fleche{width:40px;height:74px;display:grid;place-items:center;cursor:pointer;
  border:0;background:none;padding:0;border-radius:var(--rayon);
  color:var(--encre-faible);transition:color .15s,opacity .2s}
.fleche:hover:not(:disabled){color:var(--accent)}
/* Au bout de la course elle s'estompe sans disparaitre : elle garde sa place, sinon la
   piste s'elargirait d'un cran a chaque extremite atteinte. */
.fleche:disabled{opacity:.14;pointer-events:none}
.fleche .icone{width:30px;height:30px;stroke-width:1.5}
.piste-puces + .fleche,.fleche:has(+ .piste-puces){height:44px}
/* Sur un ecran tactile, le doigt fait le travail : les fleches ne prendraient que de
   la largeur a la piste. */
@media (hover:none){.fleche{display:none}}
@media (max-width:768px){.fleche{display:none}}

/* La carte d'equipe, en colonne : tuile de blason, nom centre, compteur en pastille.
   Composition reprise du site de reference, dans nos couleurs. */
.grille-equipes{display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(158px,1fr))}
.carte-equipe{position:relative;display:flex;flex-direction:column;align-items:center;
  padding:14px;border:1px solid var(--trait);border-radius:var(--rayon-lg);
  background:var(--surface);overflow:hidden;
  transition:transform .25s,border-color .25s,box-shadow .25s}
.carte-equipe:hover{transform:translateY(-4px);border-color:var(--accent);
  box-shadow:0 18px 34px -14px rgba(0,168,231,.35)}
/* Le filet degrade n'apparait qu'au survol : il donne la cible sans peser au repos,
   comme le CTA cache de la carte produit. */
.equipe-filet{position:absolute;top:0;left:0;right:0;height:3px;opacity:0;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  transition:opacity .25s}
.carte-equipe:hover .equipe-filet{opacity:1}
.equipe-tuile{width:100%;aspect-ratio:1;border-radius:var(--rayon);
  background:var(--media);border:1px solid var(--trait);display:grid;
  place-items:center;margin-bottom:11px;overflow:hidden}
.carte-equipe:hover .equipe-tuile{border-color:var(--accent-clair)}
/* Les initiales tiennent la place du blason : les flux n'en publient aucun, et
   reprendre des blasons ailleurs n'est pas une option, ce sont des marques deposees. */
/* Les initiales remplissent la tuile : avec un vrai blason elle serait pleine, sans
   lui une petite mention flotterait au milieu d'un grand carre vide. */
/* Les vignettes de marque en tete du rayon Chaussures. Ce sont des raccourcis vers le
   filtre de gauche, pas des liens : ils cochent une case et se combinent au reste. */
.vignettes-marques{display:grid;gap:14px;margin:0 0 30px;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
.vignette-marque{display:flex;flex-direction:column;align-items:center;gap:9px;
  padding:16px 12px;cursor:pointer;font-family:inherit;font-size:13px;
  border:1px solid var(--trait);border-radius:var(--rayon-lg);background:var(--surface);
  transition:transform .2s,border-color .2s,box-shadow .2s}
.vignette-marque:hover{transform:translateY(-3px);border-color:var(--accent);
  box-shadow:0 16px 30px -16px rgba(0,168,231,.4)}
.marque-tuile{width:100%;aspect-ratio:2.2;display:grid;place-items:center}
/* Les logos arrivent dans leurs couleurs d'origine. En noir uni, la rangee se lit comme
   une rangee et non comme cinq publicites, et l'etat actif se dit par le cadre et le
   fond. Le noir se pose en filtre plutot que dans le fichier : un seul fichier par
   marque, et le mode sombre l'inverse sans en telecharger un autre. */
.vignette-marque img{object-fit:contain;filter:brightness(0);opacity:.82;
  transition:opacity .2s,filter .2s}
.vignette-marque:hover img{opacity:1}
.marque-nom{font-weight:700}
.vignette-marque em{font-style:normal;font-family:var(--mono);font-size:11px;
  color:var(--encre-faible);font-variant-numeric:tabular-nums}
/* La vignette active porte la meme couleur que la case cochee a gauche : c'est le meme
   filtre, vu de deux endroits. */
.vignette-marque[aria-pressed="true"]{border-color:var(--accent);
  background:var(--accent-clair)}
.vignette-marque[aria-pressed="true"] img{opacity:1}
.vignette-marque[aria-pressed="true"] em{color:var(--accent-sombre)}
/* Une marque que les autres filtres ont vidée reste a l'ecran, mais eteinte : la faire
   disparaitre ferait sauter la rangee a chaque clic. */
.vignette-marque:disabled{opacity:.35;cursor:default;transform:none;
  border-color:var(--trait);box-shadow:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .vignette-marque img{filter:brightness(0) invert(1)}
}
:root[data-theme="dark"] .vignette-marque img{filter:brightness(0) invert(1)}

/* Le blason est dimensionne dans la page, en style en ligne : sa taille depend de ses
   proportions, que seul le generateur connait. Il couvre toujours la meme **surface**
   qu'un autre blason, jamais la meme boite : cale sur la meme boite, un ecusson rond
   remplissait le carre quand un bouclier n'en couvrait que la moitie. */
.equipe-logo{object-fit:contain;transition:transform .35s}
.carte-equipe:hover .equipe-logo{transform:scale(1.08)}
.equipe-blason{font-family:var(--mono);font-weight:800;font-size:clamp(28px,7vw,40px);
  letter-spacing:-.02em;color:var(--encre-faible);transition:transform .35s,color .25s}
.carte-equipe:hover .equipe-blason{transform:scale(1.1);color:var(--accent)}
.equipe-nom{font-weight:700;font-size:14px;line-height:1.3;text-align:center;
  margin-bottom:7px;transition:color .25s}
.carte-equipe:hover .equipe-nom{color:var(--accent)}
.equipe-compte{font-family:var(--mono);font-size:11px;color:var(--encre-douce);
  font-variant-numeric:tabular-nums;white-space:nowrap;background:var(--fond-doux);
  border-radius:var(--rayon-sm);padding:3px 9px;margin-top:auto}

/* La page d'un club : les filtres sur le cote, les produits a droite. */
.colonnes-filtre{display:grid;gap:30px;grid-template-columns:230px minmax(0,1fr);
  align-items:start}
/* Une equipe dont tous les produits se ressemblent n'a rien a filtrer : la grille
   reprend alors toute la largeur plutot que de laisser une colonne vide. */
.colonnes-filtre.sans-filtres{grid-template-columns:minmax(0,1fr)}
/* Le panneau est colle en haut, donc plus haut que la fenetre il ne se lit plus : le
   sticky epingle le sommet et le bas reste hors champ sans aucun moyen d'y aller. Sur
   une fenetre courte, tous les groupes ouverts, le dernier filtre devenait
   inatteignable. On plafonne donc la hauteur et on lui donne son propre defilement. */
.panneau-filtres{position:sticky;top:calc(var(--nav-h) + 14px);
  display:flex;flex-direction:column;
  max-height:calc(100vh - var(--nav-h) - 28px);overflow:auto;overscroll-behavior:contain;
  border:1px solid var(--trait);border-radius:var(--rayon);background:var(--surface)}
.filtres-tete{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 16px;border-bottom:1px solid var(--trait)}
.filtres-tete .eyebrow{margin:0}
.reinit-lien{border:0;background:none;cursor:pointer;font-family:var(--mono);
  font-size:11px;color:var(--accent);text-decoration:underline;
  text-underline-offset:3px;padding:0}

/* Les deroulants : ecrits en <details>, ils s'ouvrent sans script, au clavier comme a
   la souris. */
.groupe-filtre{border-bottom:1px solid var(--trait)}
.groupe-filtre summary{display:flex;align-items:center;gap:9px;padding:12px 16px;
  cursor:pointer;list-style:none;font-size:14px;font-weight:600}
.groupe-filtre summary::-webkit-details-marker{display:none}
.groupe-filtre summary::after{content:"";margin-left:auto;width:7px;height:7px;flex:none;
  border-right:2px solid var(--encre-faible);border-bottom:2px solid var(--encre-faible);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s}
.groupe-filtre[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.groupe-filtre summary .icone{color:var(--encre-faible);flex:none}
.groupe-actif summary .icone,.groupe-actif .groupe-nom{color:var(--accent)}
.groupe-nom{flex:none}
/* Le nombre de cases cochees, sur le resume : sans lui, un filtre actif dans un groupe
   replie devient invisible et le visiteur ne comprend plus ses resultats. */
.groupe-compte{min-width:18px;height:18px;padding:0 5px;border-radius:var(--rayon-pill);
  background:var(--accent);color:var(--accent-ink);font-family:var(--mono);
  font-size:10px;font-weight:700;display:grid;place-items:center}
/* Les longues listes defilent dans leur groupe : le catalogue compte 186 modeles de
   chaussure, et les derouler tous repousserait les axes suivants hors de l'ecran. */
.cases{display:flex;flex-direction:column;padding:0 16px 12px;
  max-height:264px;overflow-y:auto;overscroll-behavior:contain}
.case-filtre{display:flex;align-items:center;gap:9px;padding:6px 0;cursor:pointer;
  font-size:13px}
/* `display:flex` bat l'attribut `hidden`, qui ne tient que sur une regle du navigateur.
   Sans ces trois lignes, les options que le filtre retire resteraient a l'ecran, et le
   panneau annoncerait des choix qui ne donnent plus rien. */
.case-filtre[hidden],.interrupteur[hidden],.groupe-filtre[hidden]{display:none}
.case-filtre input{width:15px;height:15px;flex:none;accent-color:var(--accent);
  cursor:pointer}
.case-filtre span{flex:1;min-width:0}
.case-filtre em{font-style:normal;font-family:var(--mono);font-size:11px;
  color:var(--encre-faible);font-variant-numeric:tabular-nums}
.case-filtre:hover span{color:var(--accent)}

/* La promo est un interrupteur et non un groupe : « uniquement au prix plein »
   n'interesse personne. */
.interrupteur{display:flex;align-items:center;gap:9px;padding:13px 16px;cursor:pointer;
  font-size:14px;font-weight:600;border-bottom:1px solid var(--trait)}
/* En tete de panneau, l'interrupteur se detache sur un fond tres dilue : c'est le seul
   filtre qui ne restreint pas une caracteristique mais une bonne affaire. */
.panneau-filtres > .interrupteur:first-of-type{background:rgba(255,80,80,.05)}
.interrupteur:has(input:checked){background:rgba(255,80,80,.1)}
.interrupteur input{width:15px;height:15px;flex:none;accent-color:var(--alerte);
  cursor:pointer;order:-1}
.interrupteur .icone{color:var(--alerte);flex:none}
.interrupteur em{font-style:normal;margin-left:auto;font-family:var(--mono);
  font-size:11px;color:var(--alerte);font-variant-numeric:tabular-nums}

.panneau-filtres .compteur{margin:0;padding:12px 16px;font-family:var(--mono);
  font-size:12px;color:var(--encre-douce)}
.colonne-resultats .vide{padding:60px 0}

.titre-accent{color:var(--accent)}

/* Les titres portent la police d'affiche, partout et uniquement eux. Declare ici en un
   seul endroit : dissemine dans chaque composant, le jour ou la police change il faut
   la retrouver a douze endroits. */
h1,h2,h3,.accueil h1,.hero h1,.bloc h2,.offres h2,.ligue strong,
.joueur strong,.billet strong,.promo-tete strong{
  font-family:var(--police-titre)}

/* **Le haut de page, le meme partout.** Rayons, marques, modeles, championnats, clubs
   et selections : un seul encadre, une seule regle a corriger. Trois variantes ont
   coexiste avant lui, dont deux divergeaient deja d'un padding et d'une taille de
   titre.

   Un panneau arrondi plutot qu'un bandeau pleine largeur : le bandeau demande un
   100vw qui fait apparaitre une barre horizontale des qu'un ascenseur est present, et
   le site n'a aucune autre zone sombre a laquelle il se raccrocherait. */
.hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:30px;
  align-items:center;margin:4px 0 30px;padding:26px 30px;
  border:1px solid var(--trait);border-radius:var(--rayon-lg);
  /* La teinte par defaut est celle du site : une page de rayon ou de marque est une
     page de catalogue, elle porte la charte. Seules les pages de club et de selection
     recoivent la couleur dominante de leur blason, posee en variable par le
     generateur.

     **La dose n'est pas la meme des deux cotes, et c'est une decision de Mehdi du
     21/09/2026.** Sur une page d'equipe, la couleur dit de qui on parle et elle a le
     droit de se voir. Sur une page de catalogue elle ne dit rien : elle se reduit a
     une teinte, juste assez pour que l'encadre se detache du fond de page. */
  --teinte:var(--accent);--part-halo:11%;--part-fond:4%;
  /* Un halo derriere le blason, pas un aplat : il designe le cote ou regarder et
     laisse le titre sur un fond presque neutre, ou il reste lisible.
     La premiere declaration est le repli des navigateurs sans color-mix : ils
     ignorent la seconde, qui est invalide pour eux, et gardent un degrade gris. */
  background:radial-gradient(120% 150% at 92% 28%,var(--accent-clair) 0%,
             rgba(0,0,0,0) 58%),linear-gradient(120deg,var(--fond-doux),var(--surface) 64%);
  background:radial-gradient(120% 150% at 92% 28%,
               color-mix(in srgb,var(--teinte) var(--part-halo),var(--surface)) 0%,
               rgba(0,0,0,0) 58%),
             linear-gradient(120deg,
               color-mix(in srgb,var(--teinte) var(--part-fond),var(--fond-doux)),
               var(--surface) 64%)}
/* Le haut de page d'un club ou d'une selection, seul a porter sa couleur pleine. */
.hero-equipe{--part-halo:34%;--part-fond:12%}
/* En sombre, la meme dose donne un bandeau gris : le melange se fait avec une surface
   sombre, qui absorbe la couleur au lieu de l'eclaircir. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hero{--part-halo:16%;--part-fond:7%}
  :root:not([data-theme="light"]) .hero-equipe{--part-halo:46%;--part-fond:20%}
}
:root[data-theme="dark"] .hero{--part-halo:16%;--part-fond:7%}
:root[data-theme="dark"] .hero-equipe{--part-halo:46%;--part-fond:20%}
/* Sans tuile, le texte prend toute la largeur : une colonne « auto » vide laisserait
   sa gouttiere de 30 px et decalerait le titre sans rien mettre en face. */
.hero-sans-tuile{grid-template-columns:minmax(0,1fr)}
.hero h1{font-size:40px;line-height:1.05;letter-spacing:-.025em;margin:14px 0 0;
  font-weight:800;text-transform:uppercase}
/* Sans bulles au-dessus, le titre n'a rien a repousser. */
.hero-dit > h1:first-child{margin-top:0}
/* Un titre qui est une phrase et non un nom. La capitale d'affiche va a « Ligue 1 »,
   elle transforme « Tout l'équipement football, au meilleur prix » en cri. */
.hero-phrase h1{text-transform:none;font-size:34px;line-height:1.15;
  letter-spacing:-.02em;font-weight:700}

/* ------------------------------------------------------------------ L'accueil.

   Le seul endroit du site ou l'on ne cherche pas encore quelque chose de precis : il a
   donc droit a sa propre mise en page, centree, avec la recherche au milieu.

   Le fond est un terrain vu du dessus, en traits tres pales, qui derive lentement. Il
   dit de quoi le site parle sans une image, ne pese rien, et se coupe tout seul pour
   qui a desactive les animations.

   **Il est sombre, et c'est le seul endroit du site qui le soit** avec la bande du
   haut. Un comparateur qui ouvre sur du blanc ressemble a un catalogue ; le fond sombre
   fait ressortir le champ de recherche et les visuels produits, qui sont detoures sur
   blanc, et il enchaine visuellement avec la bande de promotions juste au-dessus. Le
   reste du site reste clair : on ne lit pas 8 000 fiches produit sur du noir. */
.accueil{position:relative;width:100vw;margin:0 0 10px calc(50% - 50vw);
  padding:58px 20px 50px;overflow:hidden;text-align:center;
  --accueil-encre:#eef3f6;--accueil-douce:#9dafba;
  color:var(--accueil-encre);
  background:radial-gradient(74% 96% at 80% 4%,rgba(0,168,231,.26),rgba(0,0,0,0) 62%),
             radial-gradient(60% 80% at 6% 104%,rgba(0,168,231,.13),rgba(0,0,0,0) 70%),
             #0e1419}
.accueil-terrain{position:absolute;inset:-6% -4%;color:#ffffff;opacity:.08;
  pointer-events:none;animation:derive 48s ease-in-out infinite alternate}
.accueil-terrain svg{width:100%;height:100%}
@keyframes derive{from{transform:translate3d(-1.5%,0,0) scale(1.02)}
                  to{transform:translate3d(1.5%,0,0) scale(1.06)}}
@media (prefers-reduced-motion:reduce){.accueil-terrain{animation:none}}
.accueil-dedans{position:relative;max-width:820px;margin:0 auto}
.accueil-eyebrow{display:inline-block;margin:0 0 20px;padding:6px 15px;
  border:1px solid var(--accent);border-radius:var(--rayon-pill);color:var(--accent-vif);
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.accueil h1{font-size:clamp(34px,5.6vw,62px);line-height:1.02;letter-spacing:-.035em;
  margin:0;font-weight:800;text-transform:uppercase}
.accueil h1 span{display:block;color:var(--accent)}
.accueil-chapeau{margin:18px auto 0;max-width:60ch;color:var(--encre-douce);
  font-size:16px;line-height:1.6}
.recherche-grande{max-width:640px;margin:26px auto 0;padding:0 8px 0 20px;
  background:var(--surface);box-shadow:var(--ombre)}
.recherche-grande input{padding:16px 0;font-size:17px}
.recherche-grande .suggestions{text-align:left}
.bouton-chercher{border:0;border-radius:var(--rayon-pill);background:var(--accent);
  color:var(--accent-ink);font:600 15px var(--police);padding:11px 20px;cursor:pointer;
  flex:none;display:inline-flex;align-items:center;gap:8px;transition:background .15s}
.bouton-chercher:hover{background:var(--accent-vif);color:#fff}
@media (max-width:560px){.bouton-chercher span{display:none}
  .bouton-chercher{padding:11px 14px}}
/* Les raccourcis sont de vrais liens, et c'est ce qui permet au champ de recherche de
   n'exister que si le script tourne. */
.accueil-populaire{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;
  align-items:center;margin:22px 0 0;font-size:14px;color:var(--encre-faible)}
/* Les raccourcis portent des noms de clubs, pas des nombres : ils sortent de la regle
   generale qui met les puces en chasse fixe. */
.accueil-populaire .puce{background:var(--surface);font-size:14px;padding:7px 15px;
  font-family:var(--police)}
.accueil-chiffres{display:flex;flex-wrap:wrap;gap:14px 46px;justify-content:center;
  margin:40px 0 0;padding:0;list-style:none}
.accueil-chiffres b{display:block;font-family:var(--mono);font-size:27px;
  font-weight:700;color:var(--encre);font-variant-numeric:tabular-nums;
  letter-spacing:-.02em}
.accueil-chiffres li{color:var(--encre-douce);font-size:13px}

/* Le passage au fond sombre. Ces sept regles viennent APRES les composants qu'elles
   corrigent et non avant : a specificite egale, c'est la derniere declaration qui
   gagne, et placees plus haut elles laissaient le chapeau en gris moyen sur du noir. */
.accueil h1{color:var(--accueil-encre)}
.accueil-chapeau{color:var(--accueil-douce)}
.accueil-eyebrow{border-color:rgba(255,255,255,.26);color:var(--accent)}
.accueil-chiffres b{color:var(--accueil-encre)}
.accueil-chiffres li{color:var(--accueil-douce)}
.accueil-populaire{color:var(--accueil-douce)}
.accueil-populaire .puce{background:rgba(255,255,255,.07);color:var(--accueil-encre);
  border-color:rgba(255,255,255,.17)}
.accueil-populaire .puce:hover{border-color:var(--accent);color:var(--accent)}

/* Les trois lignes de methode, sous le haut de page. Elles repondent aux questions
   qu'on se pose devant un comparateur inconnu : d'ou viennent les prix, a quelle
   frequence, et ce qu'ils garantissent. */
.methode{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;
  margin:24px 0 34px;padding:0 0 26px;border-bottom:1px solid var(--trait)}
.methode-item{display:flex;gap:13px;align-items:flex-start}
.methode-item .icone{width:22px;height:22px;flex:none;color:var(--accent);margin-top:2px}
.methode-item strong{display:block;font-size:15px}
.methode-item span{display:block;color:var(--encre-douce);font-size:13px;line-height:1.5}

/* L'en-tete d'un bloc d'accueil : le titre a gauche, le lien « tout voir » a droite.
   Meme composition que les sections de la page Equipes, et la meme regle a corriger. */
.bloc-tete{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  margin:0 0 16px}
.bloc-tete h2{margin:0}

/* Ce qui a baisse depuis le releve precedent. Une ligne par article, l'ancien prix
   barre et le nouveau a cote : c'est la seule baisse que le site puisse certifier,
   puisqu'il a releve les deux prix lui-meme. */
.mouvements{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
.mouvement{display:flex;align-items:center;gap:13px;padding:11px 14px;
  border:1px solid var(--trait);border-radius:var(--rayon);background:var(--surface);
  transition:border-color .15s,box-shadow .15s}
.mouvement:hover{border-color:var(--accent);box-shadow:var(--ombre)}
.mouvement-image{width:52px;height:52px;flex:none;border-radius:8px;
  background:var(--media);display:grid;place-items:center;overflow:hidden}
.mouvement-image img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.mouvement-dit{min-width:0;flex:1}
.mouvement-marque{display:block;font-family:var(--mono);font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--encre-douce)}
.mouvement-nom{display:block;font-size:13px;line-height:1.35;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.mouvement-prix{flex:none;font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:13px;text-align:right}
.mouvement-prix s{color:var(--encre-faible)}
.mouvement-prix b{display:block;font-size:15px}
.mouvement-delta{flex:none;font-family:var(--mono);font-size:12px;font-weight:700;
  color:var(--accent-sombre);background:var(--accent-clair);border-radius:var(--rayon-pill);
  padding:4px 9px}
.bloc-note{font-family:var(--mono);font-size:12px;color:var(--encre-douce)}

/* Les raccourcis de l'accueil : cinq marques, trois equipes, une rangee.
   Les marques menent a leur rayon avec leur filtre deja coche, les equipes a leur page.
   Un seul composant pour les deux, parce que « Nike » et « PSG » sont deux facons
   d'entrer dans le meme catalogue, pas deux natures de choses. */
.raccourcis{display:flex;flex-wrap:wrap;gap:22px 30px;justify-content:center;
  padding:4px 0 8px}
.raccourci{display:flex;flex-direction:column;align-items:center;gap:9px;
  text-align:center;width:104px}
.raccourci-tuile{width:80px;height:80px;border-radius:50%;background:var(--fond-doux);
  border:1px solid var(--trait);display:grid;place-items:center;overflow:hidden;
  transition:border-color .15s,box-shadow .15s,transform .18s}
.raccourci:hover .raccourci-tuile{border-color:var(--accent);box-shadow:var(--ombre);
  transform:translateY(-3px)}
/* Un logo de marque en noir uni, un blason de club dans ses couleurs : un ecusson
   noirci ne se reconnait plus, alors qu'un logo de marque est deja monochrome. */
.raccourci img{object-fit:contain;filter:brightness(0);opacity:.8;transition:opacity .15s}
.raccourci:hover img{opacity:1}
.raccourci-blason img{filter:none;opacity:1}
.raccourci-initiales{font-family:var(--mono);font-weight:800;font-size:22px;
  color:var(--encre-faible)}
.raccourci-nom{font-size:13px;font-weight:600;line-height:1.25}
.raccourci-sous{font-family:var(--mono);font-size:10px;color:var(--encre-faible)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .raccourci img{filter:brightness(0) invert(1)}
  :root:not([data-theme="light"]) .raccourci-blason img{filter:none}
}
:root[data-theme="dark"] .raccourci img{filter:brightness(0) invert(1)}
:root[data-theme="dark"] .raccourci-blason img{filter:none}

/* Les vitrines a onglets : maillots par championnat, puis par continent. Les onglets
   sont dans un carrousel de puces, comme le filtre de la page Equipes : a huit
   championnats sur un telephone, une rangee qui passe a la ligne trois fois ne se lit
   plus.

   **Elles s'appelaient `.onglet-panneau` et ne s'affichaient pas.** La fiche produit a
   deja un systeme d'onglets qui porte ce nom, en `display:none` par defaut et revele
   par un `:checked ~`. Les panneaux de l'accueil en heritaient et sortaient a zero
   pixel, avec leurs dix cartes dedans. D'ou le prefixe : deux composants differents ne
   partagent pas un nom de classe. */
.vitrine-onglet{border:1px solid var(--trait);border-radius:var(--rayon-pill);
  padding:9px 17px;font:600 13px var(--police);letter-spacing:.04em;
  text-transform:uppercase;background:var(--surface);color:var(--encre-douce);
  cursor:pointer;flex:none;transition:background .15s,border-color .15s,color .15s}
.vitrine-onglet:hover{border-color:var(--accent);color:var(--accent)}
.vitrine-onglet-actif,.vitrine-onglet-actif:hover{background:var(--accent);
  border-color:var(--accent);color:var(--accent-ink)}
.vitrine-panneau{padding-top:18px}
.vitrine-tout{margin:16px 0 0;text-align:center}
.bouton-tout{display:inline-block;border:1px solid var(--trait-fort);
  border-radius:var(--rayon-pill);padding:11px 26px;font-size:14px;font-weight:600;
  background:var(--surface);transition:border-color .15s,color .15s,transform .15s}
.bouton-tout::after{content:" \2192";opacity:.5}
.bouton-tout:hover{border-color:var(--accent);color:var(--accent);
  transform:translateY(-1px)}
/* La piste de cartes produit. Quatre par vue sur poste fixe, comme la grille, pour que
   l'oeil retrouve le meme rythme d'un bloc a l'autre. */
.piste-cartes{--par-vue:4;gap:16px;padding:4px 4px 10px;scroll-snap-type:x mandatory}
.piste-cartes .carte{flex:none;scroll-snap-align:start;
  width:calc((100% - (var(--par-vue) - 1) * 16px) / var(--par-vue))}

/* Les joueurs. On ne cherche pas toujours un club : on cherche le maillot de Mbappe, et
   il faut alors savoir qu'il joue au Real Madrid et en equipe de France. Les deux
   blasons se chevauchent comme une pile de cartes : poses bord a bord, ils se liraient
   comme deux boutons. */
.joueurs{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.joueur{border:1px solid var(--trait);border-radius:var(--rayon);background:var(--surface);
  padding:14px 16px 15px;display:flex;flex-direction:column;gap:3px;
  transition:border-color .15s,box-shadow .15s,transform .15s}
.joueur:hover{border-color:var(--accent);box-shadow:var(--ombre);transform:translateY(-2px)}
.joueur-blasons{display:flex;align-items:center;height:36px;margin-bottom:9px;
  padding-left:2px}
.joueur strong{font-size:15px;line-height:1.3}
.joueur em{font-style:normal;color:var(--encre-douce);font-size:12px;
  font-family:var(--mono)}
.mosaique-logo{width:34px;height:34px;object-fit:contain;flex:none;padding:4px;
  background:var(--surface);border:1px solid var(--trait);border-radius:50%;
  margin-left:-10px;transition:transform .2s}
.mosaique-logo:first-child{margin-left:0}
.joueur:hover .mosaique-logo{transform:translateY(-2px)}

/* Quatre affaires par rangee, deux rangees : c'est ce qui tient au-dessus de la ligne
   de flottaison une fois le haut de page passe. */
.grille-affaires{grid-template-columns:repeat(4,minmax(0,1fr))}

/* Le pave de bas d'accueil. Ses liens sont DANS les phrases, seule forme de maillage
   que l'annexe editoriale reconnaisse. */
.substance-accueil{max-width:none;padding:24px 28px}
.substance-accueil h2{margin:0 0 12px;font-size:20px}
.substance-accueil p{max-width:80ch;margin:0 0 12px}
.substance-accueil a:not(.bouton){color:var(--accent)}
.substance-accueil a:hover{text-decoration:underline}

/* ------------------------------------------------- Les pages de texte.

   Onze pages : ce que fait le site, les promotions, le lexique, le blog, et les
   mentions que la loi impose. Une seule regle de mise en forme pour toutes, comme il
   n'y a qu'un seul haut de page. La mesure de lecture est bornee a 72 caracteres :
   au-dela, l'oeil perd sa ligne en revenant a gauche. */
.texte{max-width:72ch;padding-bottom:28px}
.texte h2{font-size:21px;margin:0 0 12px}
.texte p{margin:0 0 13px;line-height:1.68}
.texte a:not(.bouton){color:var(--accent)}
.texte a:hover{text-decoration:underline}
.texte .tableau-tailles{margin:4px 0 16px}

/* ------------------------------------------------- La mise en page d'un billet.

   **La colonne de lecture est centree, pas calee a gauche.** Les pages de texte du site
   sont des pages de service : on y cherche une information, la colonne a gauche et
   l'oeil va droit dessus. Un billet se lit en entier, et une colonne de 72 caracteres
   posee a gauche d'une page de 1 120 px laissait la moitie droite vide, ce qui donne
   une page inachevee plutot qu'un article.

   Chaque bloc se centre donc de lui-meme, et deux d'entre eux sortent de la colonne :
   les tableaux, parce que quatre colonnes de texte n'y tiennent pas, et les grilles de
   produits, qui sont des images et n'ont pas de mesure de lecture. C'est la respiration
   d'un article : du texte etroit, des respirations larges. */
.texte-billet{max-width:none;padding-bottom:10px}
.texte-billet > *{max-width:70ch;margin-left:auto;margin-right:auto}
.texte-billet > .tableau-contenu{max-width:920px}
.texte-billet > .grille{max-width:none}
/* Un filet au-dessus de chaque intertitre : sur un article de neuf cents mots, c'est ce
   qui donne le rythme quand on le parcourt en diagonale.
   Il est pose sans exception pour le premier : une regle en `:nth-of-type` aurait
   dependu du nombre de sections qui precedent dans la page, donc se serait decalee au
   premier bloc ajoute. Un filet de plus sous la ligne de service ne gene personne. */
.texte-billet h2{margin:8px auto 16px;padding-top:26px;
  border-top:1px solid var(--trait)}
.texte-billet p{font-size:16px;line-height:1.72}
.texte-billet .liste-texte{max-width:70ch;margin-left:auto;margin-right:auto}
.texte-billet .encadre-note{max-width:70ch;margin:0 auto 16px}
.liste-texte{margin:0 0 14px;padding-left:20px;line-height:1.68}
.liste-texte li{margin:0 0 7px}
/* Les sources d'un billet d'actualite. En petit et en gris : elles sont la pour qui
   veut verifier, pas pour etre lues avant l'article. */
.liste-sources{margin:0 auto;padding-left:20px;max-width:70ch;font-size:13px;
  line-height:1.6;color:var(--encre-douce)}
.liste-sources li{margin:0 0 5px}
.liste-sources a{color:var(--accent);text-decoration:underline;
  text-underline-offset:2px}
.liste-texte em{font-style:normal;font-family:var(--mono);font-size:12px;
  color:var(--accent-sombre);background:var(--accent-clair);
  border-radius:var(--rayon-pill);padding:2px 8px}
.encadre-note{border-left:3px solid var(--accent);background:var(--fond-doux);
  border-radius:0 var(--rayon) var(--rayon) 0;padding:15px 18px}
.encadre-note p{margin:0}

/* Les promotions par marchand. */
.promos{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.promo-marchand{border:1px solid var(--trait);border-radius:var(--rayon);
  background:var(--surface);padding:16px 18px}
.promo-tete{margin:0 0 4px;display:flex;align-items:baseline;justify-content:space-between;
  gap:10px}
.promo-tete strong{font-size:16px}
.promo-chiffre{font-family:var(--mono);font-size:11px;color:var(--encre-douce)}
.promo-maxi{margin:0 0 10px;font-size:14px;color:var(--encre-douce)}
.promo-maxi b{font-family:var(--mono);font-size:19px;color:var(--accent-vif)}
.promo-marchand .liste-texte{margin:0;padding-left:0;list-style:none}
.promo-marchand .liste-texte li{display:flex;align-items:baseline;gap:10px;
  justify-content:space-between;font-size:14px}

/* Le blog. **Les visuels d'un billet sont les produits dont il parle**, jamais une photo
   d'illustration : un bandeau de stade ne dit rien, ne mene nulle part et pese plus que
   les trois visuels reunis. Ceux-ci sont deja dans le cache du navigateur la moitie du
   temps, puisqu'ils servent aussi aux cartes du catalogue. */
.billets{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.billet{border:1px solid var(--trait);border-radius:var(--rayon);background:var(--surface);
  padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;
  transition:border-color .15s,box-shadow .15s,transform .15s}
.billet-vignettes{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;
  margin-bottom:4px}
.billet-vignettes span{aspect-ratio:1;border-radius:8px;background:var(--media);
  overflow:hidden;display:grid;place-items:center}
.billet-vignettes img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;
  transition:transform .3s}
.billet:hover .billet-vignettes img{transform:scale(1.06)}
/* Le bandeau de tete d'un billet : trois visuels sur une bande large, juste sous le
   titre. Il annonce le sujet sans occuper un ecran entier. */
.billet-visuel{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 26px}
/* Meme regle que les tuiles : pose en absolu, sinon la hauteur venue de l'aspect-ratio
   ne descend pas jusqu'a l'image et le produit se fait rogner. */
.billet-visuel span{position:relative;aspect-ratio:4/3;border-radius:var(--rayon);
  background:var(--media);overflow:hidden}
.billet-visuel img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  mix-blend-mode:multiply}
.grille-billet{margin:6px 0 4px}
.billet:hover{border-color:var(--accent);box-shadow:var(--ombre);transform:translateY(-2px)}
.billet-eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent-vif)}
.billet strong{font-size:17px;line-height:1.3}
.billet-resume{color:var(--encre-douce);font-size:14px;line-height:1.55;flex:1}
.billet-lien{font-size:13px;color:var(--accent);font-weight:600}
/* La ligne de service en tete d'un billet : la categorie, la date du relevé, le temps
   de lecture. Les trois choses qu'on cherche avant de decider de lire. */
.billet-service{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;
  margin:0 0 14px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--encre-faible)}
.billet-etiquette{background:var(--accent-clair);color:var(--accent-sombre);
  border-radius:var(--rayon-pill);padding:4px 11px;font-weight:700}
.billet-chapeau-fort{margin:0 0 4px;padding-left:14px;
  border-left:3px solid var(--trait-fort);color:var(--encre-douce);font-size:14px;
  line-height:1.6}
/* Les intertitres d'un billet sont en capitales : c'est la forme des references du
   secteur, et elle donne a un article de 900 mots des reperes qu'on voit en diagonale.
   **La regle vise les billets et eux seuls** : la meme casse sur « D'ou viennent les
   prix » ou sur une mention legale transformerait une explication en cri. */
.texte-billet h2{text-transform:uppercase;letter-spacing:-.005em;font-size:18px;
  margin:0 0 14px}
.hero-resume{margin:10px 0 0;color:var(--encre-douce);font-size:15px}
.hero-texte{margin:12px 0 0;color:var(--encre-douce);font-size:15px;line-height:1.65;
  max-width:62ch}
/* La tuile ne change pas de taille selon ce qu'elle porte : c'est elle qui donne le
   cadre, le blason ou le logo s'y inscrit a surface egale comme partout ailleurs. */
.hero-tuile{width:140px;height:140px;border-radius:var(--rayon-lg);
  background:var(--media);border:1px solid var(--trait);display:grid;place-items:center;
  overflow:hidden}
/* Un logo de marque en noir uni, comme les vignettes du rayon Chaussures : la page
   d'une marque n'est pas une publicite pour cette marque. */
.marque-logo{object-fit:contain;filter:brightness(0);opacity:.82}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .marque-logo{filter:brightness(0) invert(1)}
}
:root[data-theme="dark"] .marque-logo{filter:brightness(0) invert(1)}

/* Les bulles de faits. Le picto porte l'information autant que le mot : c'est lui qui
   fait lire « Parc des Princes » comme un stade sans qu'on ecrive « Stade : ». */
.bulles{display:flex;flex-wrap:wrap;gap:8px}
.bulle{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;font-size:13px;
  border-radius:var(--rayon-pill);background:var(--surface);border:1px solid var(--trait);
  color:var(--encre-douce);white-space:nowrap;line-height:1.2}
.bulle .icone{width:15px;height:15px;color:var(--accent)}
a.bulle{transition:border-color .15s,color .15s}
a.bulle:hover{border-color:var(--accent);color:var(--accent)}

.pied{border-top:1px solid var(--trait);margin-top:40px;padding:34px 0 46px;
  background:var(--fond-doux);color:var(--encre-douce);font-size:13px}
/* Quatre colonnes, deux rangees. Elles etaient six sur une ligne tant que le pied ne
   portait que les rayons, les equipes et les trois equipementiers ; les colonnes « Le
   site » et « Informations » les ont portees a huit, et six par ligne laissait deux
   colonnes orphelines en dessous. En `auto-fit`, la derniere passait dessous des que la
   fenetre descendait sous 1 180 px, ce qui donnait le meme pied bancal. */
.pied-maillage{display:grid;gap:22px 26px;grid-template-columns:repeat(4,minmax(0,1fr));
  padding-bottom:30px;margin-bottom:26px;border-bottom:1px solid var(--trait)}
.pied-titre-colonne{font-weight:600;color:var(--encre);margin:0 0 10px;font-size:13px}
.pied-maillage ul{list-style:none;padding:0;margin:0}
.pied-maillage li{margin:0 0 6px;line-height:1.45}
.pied-maillage a{color:var(--encre-douce)}
.pied-maillage a:hover{color:var(--accent)}
.pied-titre{font-weight:700;color:var(--encre);margin:0 0 4px;font-size:15px}
.pied p{margin:0 0 8px}
.mention{max-width:760px;font-size:12px;opacity:.85}

/* Trois paliers, pas davantage. Au-dela, chaque retouche demande de verifier des
   combinaisons que personne ne verifie. */

@media (max-width:1024px){
  .grille-tailles{grid-template-columns:repeat(7,1fr)}
  /* Six colonnes de pied ne tiennent plus : trois et trois valent mieux qu'une
     sixieme orpheline. */
  .pied-maillage{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
  .colonnes-filtre{grid-template-columns:200px minmax(0,1fr);gap:22px}
  /* Trois affaires par rangee : a quatre, les cartes tombent sous 200 px et le nom du
     produit passe sur trois lignes. */
  .grille-affaires{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (max-width:768px){
  .fiche{grid-template-columns:1fr;gap:24px}
  /* En une colonne, une galerie collante recouvrirait le reste de la fiche. */
  .fiche-visuel{position:static}
  .fiche h1{font-size:27px}
  .tableau-offres .tailles-cell{display:none}
  .tableau-offres th:nth-child(4){display:none}
  /* Deux colonnes de cartes, jamais une. Une seule colonne donne des cartes enormes
     et oblige a faire defiler pour comparer deux articles, ce qui est exactement ce
     qu'on vient faire sur un comparateur. */
  .grille{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .grille-equipes{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  /* La tuile passe au-dessus du titre plutot qu'a cote : a 360 px de large, une
     colonne de 140 px ne laisserait que deux mots par ligne au titre. */
  .hero{grid-template-columns:minmax(0,1fr);gap:16px;padding:20px}
  .hero-tuile{width:84px;height:84px;order:-1}
  .hero h1{font-size:28px;margin-top:12px}
  .hero-dit > h1:first-child{margin-top:0}
  .hero-resume{font-size:14px}
  /* Deux vignettes et le debut d'une troisieme : sur un telephone il n'y a pas de
     fleches, et c'est cette carte coupee qui dit qu'on peut faire glisser. */
  .piste-equipes{--par-vue:2.15}
  /* Les filtres passent au-dessus des produits et cessent de suivre le defilement :
     une colonne collante sur un telephone mangerait l'ecran. */
  .colonnes-filtre{grid-template-columns:1fr;gap:20px}
  .panneau-filtres{position:static}
  .grille-tailles{grid-template-columns:repeat(5,1fr)}
  .contenu{padding:0 16px}
  /* La barre d'entete passe sur trois lignes, logo, navigation, recherche. Sans cela,
     les liens viennent recouvrir le logo des 420px de large. Ce n'est pas le tiroir
     lateral que decrit le guide, c'est la version qui ne demande aucun JavaScript ; le
     tiroir se substituera sans toucher au reste. */
  /* Le retrait lateral vient de `.contenu` et doit survivre ici : ecrit `padding:12px 0`,
     il l'ecrasait, et le logo comme les liens de navigation venaient coller au bord de
     l'ecran. Le defaut se voyait a tout moment sur telephone. */
  .entete-barre{height:auto;display:flex;flex-direction:column;align-items:stretch;
    gap:8px;padding:12px 20px 10px}
  .recherche-entete{max-width:none;order:3}
  .accueil{padding:38px 16px 34px}
  .accueil-chiffres{gap:12px 28px;margin-top:28px}
  .accueil-chiffres b{font-size:22px}
  .methode{grid-template-columns:1fr;gap:15px;margin:18px 0 26px;padding-bottom:22px}
  .mouvements{grid-template-columns:1fr}
  /* Deux cartes et le debut d'une troisieme : sur un telephone il n'y a pas de fleches,
     et c'est cette carte coupee qui dit qu'on peut faire glisser. */
  .piste-cartes{--par-vue:2.15}
  .raccourcis{gap:16px 18px}
  .raccourci{width:84px}
  .raccourci-tuile{width:66px;height:66px}
  .substance-accueil{padding:20px 18px}
  .nav{gap:18px;overflow-x:auto;padding-bottom:8px;scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  .nav a{white-space:nowrap}
  /* L'entete collante mangerait un tiers de l'ecran une fois sur deux lignes. */
  .entete{position:static}
  .offre-prix{padding-right:0}
  .offre-tete{gap:10px}
}

@media (max-width:480px){
  .grille-tailles{grid-template-columns:repeat(4,1fr)}
  .pied-maillage{grid-template-columns:1fr}
  .carte{padding:10px}
}