/* ============================================================
   PADELSHOP — maquette fiche produit
   Reprend les mêmes tokens que la page d'accueil. Dans le thème,
   tokens + en-tête + pied de page deviennent des partials partagés.
   ============================================================ */

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
.h1{font-size:clamp(1.7rem,3vw,2.5rem);font-weight:800;line-height:1.02;font-variation-settings:'wdth' 114}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.9rem 1.5rem;border-radius:var(--r-btn);font-weight:700;font-size:.98rem;
  font-variation-settings:'wdth' 106;transition:background-color .16s ease,color .16s ease,transform .16s ease}
/* ---------- Barre d'annonce et en-tête (identiques à l'accueil) ---------- */
/* ---------- Fil d'ariane ---------- */
.ariane ol{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;padding-block:.8rem;margin:0;list-style:none}
/* ============================================================
   Bloc d'achat
   ============================================================ */
/* Les blocs de la fiche sont des cartes déjà bordées : deux bandes pleines
   collées l'une à l'autre laissaient 128 px de vide entre elles. Sur cette page,
   la bande respire moins — ce sont les cartes qui portent la séparation. */
.fiche-produit .band{padding-block:clamp(.9rem,1.8vw,1.4rem)}
.fiche-produit .achat{padding-bottom:clamp(1rem,2vw,1.6rem)}
/* Produits liés en tête de bande : leur filet et leur marge suffisent. */
.fiche-produit .band > .lies:first-child{margin-top:0}
.achat{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(1.5rem,3.5vw,3.25rem);align-items:start;padding-block:clamp(1.5rem,3vw,2.75rem)}
/* Galerie : la raquette posée sur le terrain, comme dans le héros */
/* La piste est sortie du flux, la scène décide seule de la hauteur. En grille
   c'est l'inverse qui se produisait : la ligne s'étirait à la colonne de
   vignettes, qui filait sous le bloc d'achat dès une dizaine de vues. */
.galerie{position:relative;padding-left:102px}
.vignettes-piste{position:absolute;left:0;top:0;bottom:0;width:88px;
  display:flex;flex-direction:column;gap:6px}
/* overflow:auto et non hidden : sans le script la bande reste défilable à la
   molette et au doigt, seules les flèches manquent. */
.vignettes{display:flex;flex-direction:column;gap:10px;flex:1;min-height:0;
  overflow:auto;scroll-behavior:smooth;scrollbar-width:none}
.vignettes::-webkit-scrollbar{display:none}
.vignettes-fleche{flex:none;display:grid;place-items:center;height:26px;padding:0;cursor:pointer;
  border:1px solid var(--ligne);border-radius:var(--r-tuile);background:var(--blanc);
  color:var(--court);transition:border-color .16s,background .16s}
.vignettes-fleche svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.vignettes-fleche:hover:not(:disabled){border-color:var(--azur);background:#EAF1FA}
.vignettes-fleche:disabled{opacity:.35;cursor:default}
.vignette{position:relative;aspect-ratio:1;border:2px solid var(--ligne);border-radius:var(--r-tuile);
  background:linear-gradient(165deg,#EAF1FA,#DCE7F5);display:grid;place-items:center;padding:.55rem .55rem 1.05rem;transition:border-color .16s}
.vignette svg{width:100%;height:100%;color:var(--court)}
.vignette:hover{border-color:var(--azur)}
.vignette[aria-pressed="true"]{border-color:var(--court)}
.vignette-nom{position:absolute;left:0;right:0;bottom:2px;font-size:.55rem;font-weight:700;color:var(--gris);text-align:center}
/* pan-y : le doigt fait défiler la page verticalement, mais un geste
   horizontal reste à la galerie, qui s'en sert pour changer de vue. */
.scene{position:relative;border-radius:var(--r-carte);overflow:hidden;aspect-ratio:1;
  touch-action:pan-y;background:linear-gradient(180deg,#1B5A9E,#124278);box-shadow:var(--lift-2)}
.scene-lignes{position:absolute;inset:0;width:100%;height:100%}
.scene-grille{position:absolute;inset:0;opacity:.14;
  background-image:repeating-linear-gradient(45deg,#fff 0 1px,transparent 1px 14px),
                   repeating-linear-gradient(-45deg,#fff 0 1px,transparent 1px 14px)}
/* .vue est le conteneur d'une vue : un dessin, ou une photo. Il porte la
   taille et l'inclinaison ; l'image, elle, se contente de le remplir. */
.vue{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-8deg);
  height:76%;width:auto;display:none}
.vue-actif{display:block}
.vue svg{height:100%;width:auto;color:#F4F7FA;filter:drop-shadow(0 18px 24px rgba(0,0,0,.35))}
/* Une photo ne s'incline pas : on ne penche que ce qu'on a dessiné. Et elle
   occupe toute la scène — les packshots portent déjà leur propre marge, en
   ajouter une seconde rapetissait le produit au centre d'un grand carré. */
.vue-photo{left:0;top:0;transform:none;width:100%;height:100%;padding:clamp(.5rem,2.5%,1.35rem)}
.vue-photo img{width:100%;height:100%;object-fit:contain;border-radius:var(--r-tuile)}
/* Packshot sur fond blanc uni. Les visuels fabricant sont détourés sur fond
   transparent : le terrain se voyait au travers du produit. On le retire donc
   ici — il reste le décor des vues dessinées, sur les fiches sans photo. */
.scene-photo{background:var(--blanc)}
.scene-photo .scene-grille,
.scene-photo .scene-lignes{display:none}
.scene-photo .scene-note{background:rgba(255,255,255,.93);border:1px solid var(--ligne)}
.vignette img{width:100%;height:100%;object-fit:cover;border-radius:2px}
/* Navigation horizontale sur la photo : au clavier et à la souris, le
   balayage tactile ne sert à rien. Les deux flèches restent discrètes et
   se renforcent au survol de la scène. */
.scene-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  display:grid;place-items:center;width:42px;height:42px;padding:0;cursor:pointer;
  border:1px solid var(--ligne);border-radius:50%;background:rgba(255,255,255,.82);
  color:var(--court);opacity:.55;transition:opacity .16s,background .16s,border-color .16s}
.scene-nav svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.scene-nav-avant{left:.85rem}
.scene-nav-apres{right:.85rem}
.scene:hover .scene-nav{opacity:1}
.scene-nav:hover{background:var(--blanc);border-color:var(--azur)}
.scene-nav:focus-visible{opacity:1;outline:2px solid var(--azur);outline-offset:2px}
@media(hover:none){.scene-nav{opacity:.9}}
.scene-badges{position:absolute;top:1rem;left:1rem;display:flex;gap:.4rem;z-index:3}
/* Ici les pastilles sont posées par leur conteneur : sans ce position:static
   elles héritent de l'absolu de style.css, se superposent et se plient. */
.scene-badges .badge{position:static;white-space:nowrap;font-size:.7rem;font-weight:800;
  padding:.3rem .6rem;border-radius:4px;color:#fff;background:var(--brique)}
.scene-badges .badge-court{background:var(--court)}
.scene-badges .badge-balle{background:var(--balle);color:var(--court)}
.scene-note{position:absolute;right:1rem;bottom:1rem;z-index:3;background:rgba(255,255,255,.93);
  border-radius:8px;padding:.45rem .7rem;font-size:.72rem;font-weight:600;color:var(--encre)}
@media(max-width:1024px){
  /* minmax(0,…) et pas 1fr : une colonne 1fr ne descend pas sous la largeur
     de son contenu, et la bande de vignettes élargissait toute la page. */
  .achat{grid-template-columns:minmax(0,1fr)}
  /* Sous 1024px la piste revient dans le flux, à l'horizontale sous la scène :
     les flèches encadrent alors la bande au lieu de la surmonter. */
  .galerie{display:flex;flex-direction:column;gap:10px;padding-left:0}
  .vignettes-piste{position:static;width:auto;flex-direction:row;align-items:stretch;order:2;min-width:0}
  .vignettes{flex-direction:row;min-width:0}
  .vignette{width:84px;flex:none}
  .vignettes-fleche{height:auto;width:26px}
  .vignettes-fleche svg{transform:rotate(-90deg)}
}
/* ---------- Colonne d'achat ---------- */
.boite{position:sticky;top:150px;display:flex;flex-direction:column;gap:1.1rem}
@media(max-width:1024px){
  .boite{position:static}
}
.marque-lien{font-size:.8rem;font-weight:700;color:var(--azur)}
.marque-lien:hover{text-decoration:underline}
.titre-bloc{display:flex;flex-direction:column;gap:.45rem}
.meta-produit{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem;font-size:.82rem;color:var(--gris)}
.meta-produit a{border-bottom:1px solid var(--ligne)}
.meta-produit a:hover{color:var(--azur);border-bottom-color:var(--azur)}
.prix-bloc{display:flex;flex-wrap:wrap;align-items:baseline;gap:.7rem;padding-block:.2rem}
.prix-bloc b{font-size:2.5rem;font-weight:900;font-variation-settings:'wdth' 114;line-height:1;letter-spacing:-.03em}
.prix-bloc s{color:var(--gris);font-size:1rem}
.prix-bloc .remise{font-size:.88rem;padding:.25rem .55rem;border-radius:5px}
.prix-note{font-size:.78rem;color:var(--gris);width:100%}
.stock{display:flex;align-items:center;gap:.5rem;font-size:.86rem;font-weight:600;color:var(--brique)}
/* Le rouge est réservé à l'urgence : il ne reste que quelques pièces. Un
   stock confortable se dit en vert, une rupture en gris. */
.stock-ok{color:var(--vert)}
.stock-non{color:var(--gris)}
.stock i{width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.stock-jauge{height:5px;border-radius:3px;background:var(--ligne);overflow:hidden;margin-top:.45rem}
.stock-jauge span{display:block;height:100%;width:23%;background:var(--brique)}
/* Choix du pack : le levier de panier moyen le plus efficace sur une raquette */
.packs{display:grid;gap:.55rem}
.packs-titre{font-size:.86rem;font-weight:700}
.pack{display:grid;grid-template-columns:auto 1fr auto;gap:.85rem;align-items:center;
  border:2px solid var(--ligne);border-radius:10px;padding:.85rem 1rem;background:var(--blanc);cursor:pointer;transition:border-color .16s,background-color .16s}
.pack:hover{border-color:var(--azur)}
.pack input{accent-color:var(--azur);width:18px;height:18px;margin:0}
.pack:has(input:checked){border-color:var(--court);background:var(--azur-pale)}
.pack-nom{font-size:.9rem;font-weight:700;line-height:1.3}
.pack-nom small{display:block;font-weight:500;color:var(--gris);font-size:.78rem}
.pack-prix{text-align:right;font-weight:800;font-size:.95rem;white-space:nowrap}
.pack-prix small{display:block;font-weight:700;color:var(--vert);font-size:.72rem}
/* Code promo : repris des boutiques de référence, il déclenche l'achat immédiat */
.promo-code{display:flex;align-items:center;gap:.7rem;background:var(--balle);color:var(--court);
  border-radius:8px;padding:.7rem .9rem;font-size:.85rem;font-weight:700}
/* Technologies du fabricant */
.techs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:1000px){
  .techs{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .techs{grid-template-columns:1fr}
}
.tech{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r-tuile);padding:1.1rem 1.15rem}
.tech b{display:block;font-size:.88rem;font-weight:800;margin-bottom:.3rem}
.tech p{font-size:.82rem;color:var(--gris);line-height:1.5}
.tech-present{border-left:4px solid var(--balle)}
/* Vus récemment : bande compacte, volontairement différente des cartes produit */
.recemment{display:flex;gap:12px;overflow-x:auto;padding-bottom:.5rem;scrollbar-width:thin}
.recent{flex:0 0 212px;display:flex;gap:.75rem;align-items:center;background:var(--blanc);
  border:1px solid var(--ligne);border-radius:var(--r-tuile);padding:.6rem .8rem .6rem .6rem;transition:border-color .16s}
.recent:hover{border-color:var(--azur)}
.recent-visuel{width:46px;height:56px;flex:none;background:linear-gradient(165deg,#EAF1FA,#DCE7F5);
  border-radius:4px;display:grid;place-items:center;padding:4px}
.recent-visuel svg{width:100%;height:100%;color:var(--court)}
.recent-nom{font-size:.78rem;font-weight:700;line-height:1.25}
.recent-nom small{display:block;font-weight:800;color:var(--encre);margin-top:.2rem}
.ligne-achat{display:grid;grid-template-columns:auto 1fr;gap:.7rem}
.compteur{display:flex;align-items:center;border:2px solid var(--ligne);border-radius:var(--r-btn);background:var(--blanc)}
.compteur button{width:42px;height:100%;font-size:1.2rem;font-weight:700;color:var(--gris)}
.compteur input{width:40px;text-align:center;border:0;background:transparent;font-weight:700;outline:none;-moz-appearance:textfield}
/* Réassurance sous le bouton d'achat : trois tuiles centrées, icône au-dessus,
   dans un cadre unique que des filets discrets divisent en trois. */
.rassure{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--ligne);border-radius:var(--r-carte);background:var(--blanc);overflow:hidden}
.rassure li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.5rem;padding:1.1rem .75rem}
.rassure li+li{box-shadow:inset 1px 0 0 var(--ligne)}
.rassure svg{flex:none;color:var(--azur)}
.rassure b{display:block;font-size:.82rem;font-weight:800;line-height:1.25}
.rassure span{display:block;font-size:.74rem;color:var(--gris);line-height:1.35;margin-top:.15rem}
@media(max-width:420px){
  .rassure{grid-template-columns:1fr}
  .rassure li{flex-direction:row;text-align:left;gap:.7rem;padding:.9rem 1rem}
  .rassure li+li{box-shadow:inset 0 1px 0 var(--ligne)}
}
/* ============================================================
   Caractéristiques et profil de jeu
   ============================================================ */
.fiche{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:clamp(1.25rem,3vw,2.5rem)}
.profil{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(1.25rem,3vw,2.75rem);align-items:center}
@media(max-width:760px){
  .profil{grid-template-columns:minmax(0,1fr);gap:1.4rem}
}
.texte-produit{font-size:.95rem;line-height:1.65}
.texte-produit>*+*{margin-top:.9rem}
.texte-produit h2,.texte-produit h3{font-size:1.02rem;font-weight:800;margin-top:1.4rem}
@media(max-width:900px){
  .fiche{grid-template-columns:minmax(0,1fr)}
}
/* L'échange de taille, sous la description et dans la même carte : un filet le
   sépare du texte, sans en faire un bloc à part. */
.echange{margin-top:1.5rem;padding-top:1.4rem;border-top:1px solid var(--ligne);font-size:.92rem;line-height:1.6}
.echange-seul{margin-top:0;padding-top:0;border-top:0}
.echange h3{font-size:1.02rem;font-weight:800;margin-bottom:.6rem}
.echange p{color:#243B52;margin-bottom:.8rem}
.echange p:last-child{margin-bottom:0}
.echange ul{display:grid;gap:.45rem;margin:0 0 .9rem}
.echange li{display:flex;gap:.6rem;align-items:flex-start;color:#243B52}
.echange svg{flex:none;color:var(--azur);margin-top:5px}
.carte{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r-carte);padding:clamp(1.25rem,2.5vw,1.9rem)}
.carte h2{margin-bottom:.4rem}
.carte-intro{color:var(--gris);font-size:.88rem;margin-bottom:1.3rem;max-width:48ch}
.specs{margin:0;display:grid;grid-template-columns:1fr}
.specs>div{display:flex;justify-content:space-between;gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--ligne)}
.specs dt{color:var(--gris);font-size:.86rem}
.specs dd{margin:0;font-weight:700;font-size:.88rem;text-align:right}
.radar{display:block;width:100%;max-width:340px;margin:0 auto;overflow:visible}
.radar-grille{fill:none;stroke:var(--ligne);stroke-width:1}
.radar-rayon{stroke:var(--ligne);stroke-width:1}
.radar-nom{fill:var(--gris);font-size:9.5px;font-weight:600}
.radar-forme{fill:var(--court);fill-opacity:.18;stroke:var(--court);stroke-width:2;stroke-linejoin:round}
.radar-point{fill:var(--court)}
.jauges{display:grid;gap:1.05rem}
.jauge{display:grid;grid-template-columns:110px 1fr 34px;gap:.9rem;align-items:center}
.jauge-nom{font-size:.86rem;font-weight:600}
.jauge-piste{height:9px;border-radius:5px;background:var(--azur-pale);position:relative;overflow:hidden}
.jauge-remplie{position:absolute;inset:0 auto 0 0;background:var(--court);border-radius:5px}
.jauge:first-child .jauge-remplie{background:var(--balle)}
.jauge-val{font-size:.82rem;font-weight:800;text-align:right;font-variation-settings:'wdth' 108}
.jauge-legende{margin-top:1.2rem;padding-top:1.1rem;border-top:1px solid var(--ligne);font-size:.8rem;color:var(--gris)}
@media(max-width:560px){
  .jauge{grid-template-columns:92px 1fr 32px;gap:.6rem}
}
.verdict{margin-top:1.3rem;background:var(--chaux);border-radius:10px;padding:1rem 1.15rem;font-size:.88rem;line-height:1.55}
.verdict b{display:block;margin-bottom:.3rem}
/* ============================================================
   Onglets
   ============================================================ */
.onglets-barre{display:flex;gap:.3rem;border-bottom:2px solid var(--ligne);overflow-x:auto;scrollbar-width:none;margin-bottom:1.75rem}
.onglets-barre::-webkit-scrollbar{display:none}
.onglet{padding:.9rem 1.15rem;font-size:.94rem;font-weight:700;color:var(--gris);white-space:nowrap;border-bottom:3px solid transparent;margin-bottom:-2px}
.onglet:hover{color:var(--encre)}
.onglet[aria-selected="true"]{color:var(--encre);border-bottom-color:var(--court)}
.panneau{display:none;max-width:78ch}
.panneau-actif{display:block}
.panneau h3{margin:1.6rem 0 .6rem;font-size:1.05rem}
.panneau h3:first-child{margin-top:0}
.panneau p{margin-bottom:.9rem;color:#243B52}
.panneau ul{display:grid;gap:.5rem;margin-bottom:1rem}
.panneau ul li{display:flex;gap:.6rem;align-items:flex-start;color:#243B52}
.panneau ul svg{flex:none;color:var(--azur);margin-top:5px}
/* ============================================================
   Compléments (vente additionnelle)
   ============================================================ */
.complements{background:var(--court);color:#fff;border-radius:var(--r-carte);padding:clamp(1.4rem,3vw,2.25rem);position:relative;overflow:hidden}
.complements>*{position:relative;z-index:2}
.complements>.scene-grille{position:absolute;inset:0;z-index:1;opacity:.08}
.complements h2{margin-bottom:.4rem}
.complements-intro{color:rgba(255,255,255,.72);font-size:.9rem;margin-bottom:1.5rem;max-width:52ch}
.options{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:1.5rem}
@media(max-width:900px){
  .options{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
  .options{grid-template-columns:1fr}
}
.option{display:grid;grid-template-columns:auto 1fr;gap:.75rem;align-items:center;
  background:rgba(255,255,255,.07);border:2px solid rgba(255,255,255,.14);border-radius:10px;padding:.85rem;cursor:pointer;transition:border-color .16s,background-color .16s}
.option:hover{border-color:rgba(216,242,63,.6)}
.option:has(input:checked){border-color:var(--balle);background:rgba(216,242,63,.12)}
.option input{accent-color:var(--balle);width:17px;height:17px;margin:0}
.option-nom{font-size:.84rem;font-weight:700;line-height:1.3}
.option-nom small{display:block;font-weight:800;color:var(--balle);font-size:.82rem;margin-top:.15rem}
.complements-bas{display:flex;flex-wrap:wrap;align-items:center;gap:1rem}
.complements-total{font-size:.9rem;color:rgba(255,255,255,.75)}
.complements-total b{color:#fff;font-size:1.4rem;font-weight:900;font-variation-settings:'wdth' 112;margin-left:.4rem}
/* ============================================================
   Avis
   ============================================================ */
.avis-grille{display:grid;grid-template-columns:280px minmax(0,1fr);gap:clamp(1.5rem,3vw,3rem);align-items:start}
@media(max-width:860px){
  .avis-grille{grid-template-columns:1fr}
}
.avis-score b{font-size:3.2rem;font-weight:900;font-variation-settings:'wdth' 114;line-height:1;display:block}
.avis-score .etoiles{font-size:1.15rem;display:block;margin:.4rem 0 .3rem}
.avis-score span{font-size:.85rem;color:var(--gris)}
.repartition{display:grid;gap:.45rem;margin-top:1.4rem}
.repartition li{display:grid;grid-template-columns:58px 1fr 30px;gap:.6rem;align-items:center;font-size:.8rem;color:var(--gris);white-space:nowrap}
.repartition-piste{height:7px;border-radius:4px;background:var(--ligne);overflow:hidden}
.repartition-piste span{display:block;height:100%;background:#F5A623}
.avis-liste{display:grid;gap:14px}
.avis-carte{background:var(--blanc);border:1px solid var(--ligne);border-left:4px solid var(--balle);border-radius:var(--r-tuile);padding:1.3rem}
.avis-tete{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin-bottom:.7rem}
.avis-tete .etoiles{font-size:.9rem}
.avis-tete time{font-size:.78rem;color:var(--gris)}
.verifie{display:inline-flex;align-items:center;gap:.3rem;color:var(--vert);font-weight:600;font-size:.78rem}
.avis-carte p{font-size:.93rem;margin-bottom:.7rem}
.avis-carte footer{font-size:.8rem;color:var(--gris)}
.avis-carte footer b{color:var(--encre);font-weight:700}
/* ============================================================
   Questions
   ============================================================ */
.questions{display:grid;gap:.6rem}
.question{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r-tuile);overflow:hidden}
.question summary{padding:1.05rem 1.25rem;font-weight:700;font-size:.95rem;cursor:pointer;display:flex;justify-content:space-between;gap:1rem;align-items:center;list-style:none}
.question summary::-webkit-details-marker{display:none}
.question summary::after{content:"+";font-size:1.4rem;font-weight:400;color:var(--azur);line-height:1}
.question[open] summary::after{content:"–"}
.question p{padding:0 1.25rem 1.25rem;color:#243B52;font-size:.92rem;max-width:92ch}
/* ============================================================
   Produits similaires
   ============================================================ */
.produit-visuel{position:relative;height:clamp(190px,17vw,225px);background:linear-gradient(165deg,#EAF1FA,#DCE7F5);display:grid;place-items:center;padding:1.5rem}
.produit-corps{padding:1rem 1.05rem 1.15rem;display:flex;flex-direction:column;gap:.4rem;flex:1}
.prix{display:flex;align-items:baseline;gap:.5rem;margin-top:auto;padding-top:.4rem}
.prix b{font-size:1.25rem;font-weight:900;font-variation-settings:'wdth' 112}
.prix s{color:var(--gris);font-size:.82rem}
/* ============================================================
   Barre d'achat persistante
   ============================================================ */
.barre-fixe{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--blanc);
  border-top:1px solid var(--ligne);box-shadow:0 -8px 24px -14px rgba(8,40,74,.45);
  transform:translateY(110%);transition:transform .22s ease}
.barre-fixe-visible{transform:translateY(0)}
.barre-fixe .wrap{display:flex;align-items:center;gap:1rem;padding-block:.7rem}
.barre-fixe-visuel{width:44px;height:44px;border-radius:6px;background:linear-gradient(165deg,#EAF1FA,#DCE7F5);display:grid;place-items:center;padding:4px;flex:none}
.barre-fixe-visuel svg{width:100%;height:100%;color:var(--court)}
.barre-fixe-nom{font-size:.85rem;font-weight:700;line-height:1.25;flex:1;min-width:0}
.barre-fixe-nom small{display:block;font-weight:500;color:var(--gris);font-size:.75rem}
.barre-fixe-prix{font-size:1.2rem;font-weight:900;font-variation-settings:'wdth' 112;white-space:nowrap}
@media(max-width:640px){
  .barre-fixe-visuel,.barre-fixe-nom small{display:none}
  .barre-fixe .btn{padding:.85rem 1.1rem}
}
/* ---------- Pied de page ---------- */
.pied{background:var(--encre);color:rgba(255,255,255,.68);padding-bottom:70px}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

/* Bas de fiche : produits liés et ventes additionnelles */
.lies{margin-top:3.4rem;padding-top:2.6rem;border-top:1px solid var(--ligne)}
.lies+.lies{margin-top:2.6rem}
.lies .tete-section{margin-bottom:1.4rem}