/* urneanimal.fr — la mise en page COMMUNE à toutes les fiches produit (Doux Repos, Tout Près…).
   Photos à gauche, nom et achat à droite (l'un sous l'autre sur téléphone).
   Le comportement est dans js/fiche.js ; tout ce qui change d'une urne à l'autre (photos, prix, stock,
   mesures) vient de js/catalogue.js ; les textes (titre, description, matière) sont dans chaque page.
   ⚠ Quand on modifie ce fichier : changer le ?v= dans TOUTES les pages. */
.fiche{max-width:1260px;margin:0 auto;padding:22px clamp(16px, 4vw, 60px) clamp(56px, 8vw, 110px)}
.fil{margin-bottom:clamp(16px, 2.4vw, 30px)}
.fiche-grille{display:grid;grid-template-columns:minmax(0, 1.08fr) minmax(0, 1fr);gap:clamp(28px, 5vw, 88px);align-items:start}

/* Arrivée douce. Uniquement un déplacement, JAMAIS une opacité (voir l'accueil). */
@keyframes monte{from{transform:translateY(16px)}}
.galerie,.infos > *{animation:monte 1s cubic-bezier(.2,.7,.2,1) both}
.infos > :nth-child(2){animation-delay:.04s} .infos > :nth-child(3){animation-delay:.08s}
.infos > :nth-child(4){animation-delay:.12s} .infos > :nth-child(5){animation-delay:.16s}
.infos > :nth-child(6){animation-delay:.2s}  .infos > :nth-child(n+7){animation-delay:.24s}

/* ── À gauche : les photos ──
   Une « piste » qui défile (glissement natif au doigt, aimantée photo par photo).
   Le papier est posé sur CHAQUE diapo : c'est lui que l'image « multiplie ». */
.galerie{position:sticky;top:calc(var(--h-entete) + 20px)}
.galerie-in{width:min(100%, calc(100svh - var(--h-entete) - 218px));min-width:min(100%, 380px)}
.galerie-scene{position:relative;aspect-ratio:1;border-radius:26px;overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 30px 60px -44px rgba(46,33,25,.55);
  border:1px solid rgba(58,42,32,.07)}
.piste{display:flex;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;scrollbar-width:none;border-radius:inherit}
.piste::-webkit-scrollbar{display:none}
.piste:focus-visible{outline:2px solid var(--bois);outline-offset:-4px}
.diapo{flex:0 0 100%;height:100%;scroll-snap-align:start;scroll-snap-stop:always;position:relative;
  overflow:hidden;background:var(--scene)}
.diapo img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply;
  transform-origin:var(--zx, 50%) var(--zy, 50%);
  transition:transform .5s cubic-bezier(.2,.7,.2,1), transform-origin .15s linear}
.galerie-scene.zoom .diapo.active img{transform:scale(1.85)}
.galerie-scene.zoom{cursor:zoom-in}

.fleche{position:absolute;top:50%;z-index:2;width:46px;height:46px;margin-top:-23px;border-radius:50%;
  display:grid;place-items:center;color:var(--espresso);background:rgba(255,252,247,.86);
  box-shadow:0 8px 20px -10px rgba(46,33,25,.55), 0 0 0 1px rgba(58,42,32,.06);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:transform .3s cubic-bezier(.2,.7,.2,1), opacity .3s, background-color .25s}
.fleche svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.fleche-prec{left:14px} .fleche-suiv{right:14px}
@media (hover:hover){
  .galerie-scene:not(:hover) .fleche:not(:focus-visible){opacity:0}
  .galerie-scene:not(:hover) .fleche-prec{transform:translateX(-8px)}
  .galerie-scene:not(:hover) .fleche-suiv{transform:translateX(8px)}
  .fleche:hover{background:#fff;transform:scale(1.07)}
}
.galerie-compteur{position:absolute;top:16px;right:18px;z-index:2;font:500 12.5px/1 var(--sans);letter-spacing:.16em;
  color:var(--gris-texte);font-variant-numeric:tabular-nums;pointer-events:none}
.galerie-compteur b{color:var(--espresso);font-weight:700}
.galerie-legende{position:absolute;left:20px;bottom:16px;z-index:2;overflow:hidden;pointer-events:none;
  font:italic 500 22px/1.2 var(--serif);color:var(--espresso)}
.galerie-legende span{display:inline-block}
/* Gros plan sans fond blanc (Bel Écrin : du bois jusqu'aux bords) : légende et compteur sur une
   pastille claire, sinon le texte foncé se perd dans le bois. Les autres photos ne changent pas. */
.galerie-legende span,.galerie-compteur{border-radius:999px;transition:background-color .35s}
.galerie-scene.sur-photo .galerie-legende span{padding:3px 13px 5px;background:rgba(251,247,241,.92)}
.galerie-scene.sur-photo .galerie-compteur{padding:6px 10px;margin:-6px -10px 0 0;background:rgba(251,247,241,.92)}

/* Les étoiles, à la place du compteur (« Notre note » le 28/09) : RETIRÉES le 29/09 à la demande de Nino, plus
   aucune fiche ne les affiche ; style gardé au cas où (voir js/fiche.js : la source toujours écrite à côté). Toujours sur une pastille claire, lisible sur toutes les photos. Les étoiles pleines
   sont une copie des vides, rognée à la note : entières (--e) puis la part de la suivante (--r). */
.galerie-note{position:absolute;top:14px;right:14px;z-index:2;display:inline-flex;align-items:center;gap:8px;
  padding:7px 11px 7px 10px;border-radius:999px;background:rgba(251,247,241,.92);pointer-events:none;
  box-shadow:0 0 0 1px rgba(58,42,32,.08),0 8px 18px -12px rgba(46,33,25,.55)}
.note-etoiles{position:relative;display:block;--t:15px;--g:2px}
.note-vides,.note-pleines{display:flex;gap:var(--g)}
.note-etoiles svg{width:var(--t);height:var(--t);flex:none;stroke-width:1.6;stroke-linejoin:round}
.note-vides svg{fill:none;stroke:rgba(122,74,38,.42)}
.note-pleines{position:absolute;left:0;top:0;width:0;overflow:hidden}
.note-pleines svg{fill:var(--bois);stroke:var(--bois)}
.galerie-note.rempli .note-pleines{width:calc(var(--e) * (var(--t) + var(--g)) + var(--r) * var(--t));
  transition:width 1.5s cubic-bezier(.45,.05,.25,1) .4s}
.galerie-note.rempli .note-etoiles{animation:note-fin .55s ease-in-out 1.85s}
@keyframes note-fin{50%{transform:scale(1.08)}}
.note-mot{font:600 11.5px/1 var(--sans);letter-spacing:.05em;color:var(--espresso);white-space:nowrap}

/* Sous la grande photo : les animaux dans des ronds (on voit où l'on est).
   Un anneau glisse jusqu'au rond de la photo affichée, qui gonfle un instant à chaque changement. */
.ronds{position:relative;display:flex;justify-content:center;gap:14px;margin-top:16px;padding:7px 0}
.rond{position:relative;width:56px;height:56px;flex:none;border-radius:50%;overflow:hidden;background:var(--scene);
  box-shadow:0 0 0 1px rgba(58,42,32,.14);transform:scale(.9);
  transition:transform .45s cubic-bezier(.3,1.4,.5,1), box-shadow .3s}
.rond img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply;transform:scale(1.3)}
.rond[aria-current="true"]{transform:scale(1.06);box-shadow:0 10px 20px -12px rgba(46,33,25,.75);
  animation:rond-pop .55s cubic-bezier(.3,1.5,.5,1)}
@keyframes rond-pop{0%{transform:scale(.9)}55%{transform:scale(1.2)}100%{transform:scale(1.06)}}
@media (hover:hover){ .rond:not([aria-current="true"]):hover{transform:scale(1)} }
.ronds-anneau{position:absolute;left:0;top:50%;width:68px;height:68px;margin-top:-34px;border-radius:50%;
  border:1.5px solid var(--bois);pointer-events:none;transform:translateX(var(--x, 0px));
  transition:transform .6s cubic-bezier(.3,1.25,.4,1)}
.ronds-anneau.fige{transition:none}

/* ── À droite : le nom, le choix, le panier ── */
.infos{padding-top:4px}
.infos-sur{display:flex;align-items:center;gap:11px;font:600 11px/1.3 var(--sans);letter-spacing:.24em;
  text-transform:uppercase;color:var(--bois)}
.infos-sur::before{content:"";width:28px;height:1px;background:currentColor;opacity:.7;flex:none}
.infos h1{margin-top:14px;font:600 clamp(46px, 5.2vw, 72px)/.95 var(--serif);letter-spacing:-.012em}
.infos h1 em{font-style:italic;font-weight:500;color:var(--bois)}
.infos-accroche{margin-top:16px;max-width:29em;font:italic 400 clamp(19px, 1.55vw, 22px)/1.42 var(--serif);color:#5C4636}
.infos-prix{margin-top:20px;font:600 34px/1 var(--serif);color:var(--espresso);font-variant-numeric:lining-nums}
.infos-prix span{display:inline-block}   /* le prix glisse quand on change de modèle (Clair Refuge) */

.choix-animal{margin-top:26px;padding-top:24px;border-top:1px solid rgba(58,42,32,.12)}
.choix-titre{font-size:14.5px;font-weight:600;color:var(--espresso);display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.choix-nom{display:inline-block;overflow:hidden;font:italic 500 20px/1.15 var(--serif);color:var(--bois)}
.choix-nom span{display:inline-block}
.animaux{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px}
.animal{position:relative;display:block;cursor:pointer;border-radius:50%}
.animal input{position:absolute;left:50%;top:50%;width:1px;height:1px;opacity:0;margin:0}
.animal-vignette{display:block;width:60px;height:60px;border-radius:50%;overflow:hidden;background:var(--scene);
  box-shadow:0 0 0 1px rgba(58,42,32,.16);transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s}
.animal-vignette img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply;transform:scale(1.3)}
.animal input:checked + .animal-vignette{transform:translateY(-3px);
  box-shadow:0 0 0 2px var(--ivoire), 0 0 0 3.5px var(--bois), 0 12px 20px -12px rgba(46,33,25,.7)}
.animal input:focus-visible + .animal-vignette{outline:2px solid var(--bois);outline-offset:6px}
/* Le nom de l'animal dans une petite bulle, au survol (sur ordinateur) */
.animal::after{content:attr(data-nom);position:absolute;left:50%;bottom:calc(100% + 9px);z-index:3;
  transform:translate(-50%, 5px);white-space:nowrap;pointer-events:none;opacity:0;
  background:var(--espresso);color:var(--creme);font:500 12.5px/1 var(--sans);padding:7px 10px;border-radius:8px;
  transition:opacity .2s, transform .25s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover){
  .animal:hover .animal-vignette{transform:translateY(-3px)}
  .animal:hover::after{opacity:1;transform:translate(-50%, 0)}
}

/* « Quelle taille ? » (Terre Fidèle) : trois cartes côte à côte, le nom et le poids d'animal */
.choix-taille{margin-top:22px}
.tailles{display:flex;gap:10px;margin-top:12px}
.taille-choix{position:relative;flex:1 1 0;min-width:0;cursor:pointer}
.taille-choix input{position:absolute;left:50%;top:50%;width:1px;height:1px;opacity:0;margin:0}
.taille-pastille{display:flex;flex-direction:column;align-items:center;gap:3px;padding:11px 6px 10px;border-radius:14px;
  background:#FBF7F1;border:1px solid rgba(58,42,32,.14);text-align:center;
  transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .3s, background-color .3s}
.taille-pastille b{font:600 15px/1.2 var(--sans);color:var(--espresso)}
.taille-pastille small{font:500 12.5px/1.2 var(--sans);color:var(--gris-texte);white-space:nowrap}
.taille-choix input:checked + .taille-pastille{background:#fff;border-color:var(--bois);transform:translateY(-2px);
  box-shadow:0 0 0 1px var(--bois), 0 12px 20px -14px rgba(46,33,25,.7)}
.taille-choix input:focus-visible + .taille-pastille{outline:2px solid var(--bois);outline-offset:3px}
@media (hover:hover){ .taille-choix:hover .taille-pastille{transform:translateY(-2px)} }

/* « Combien ? » (Un Peu de Lui) : « Une » ou « Les deux », chacune avec sa photo. La carte des deux
   porte ce qu'on y gagne (pastille rouge, qui saute quand on la choisit). Sous le prix, quand on prend
   les deux : « les deux, au lieu de 2 × 29 € ». */
.infos-prix small{display:inline-block;margin-left:12px;vertical-align:.18em;font:500 14px/1.3 var(--sans);color:var(--gris-texte)}
.infos-prix small:empty{display:none}
.choix-lot{margin-top:26px;padding-top:24px;border-top:1px solid rgba(58,42,32,.12)}
.lots{display:flex;gap:10px;margin-top:14px}
.lot-choix{position:relative;flex:1 1 0;min-width:0;cursor:pointer}
.lot-choix input{position:absolute;left:50%;top:50%;width:1px;height:1px;opacity:0;margin:0}
.lot-pastille{display:flex;align-items:center;gap:11px;height:100%;padding:9px 12px 9px 9px;border-radius:16px;
  background:#FBF7F1;border:1px solid rgba(58,42,32,.14);
  transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .3s, background-color .3s}
.lot-vignette{width:48px;height:48px;flex:none;border-radius:50%;overflow:hidden;background:var(--scene);
  box-shadow:0 0 0 1px rgba(58,42,32,.12)}
.lot-vignette img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply;transform:scale(1.25)}
.lot-texte{display:flex;flex-direction:column;gap:3px;min-width:0}
.lot-texte b{font:600 15px/1.2 var(--sans);color:var(--espresso)}
.lot-texte small{font:600 17px/1.1 var(--serif);color:var(--bois);font-variant-numeric:lining-nums}
.lot-choix input:checked + .lot-pastille{background:#fff;border-color:var(--bois);transform:translateY(-2px);
  box-shadow:0 0 0 1px var(--bois), 0 12px 20px -14px rgba(46,33,25,.7)}
.lot-choix input:focus-visible + .lot-pastille{outline:2px solid var(--bois);outline-offset:3px}
.lot-gain{position:absolute;top:-10px;right:10px;padding:4px 9px;border-radius:999px;background:var(--rouge);color:#fff;
  font:700 12px/1 var(--sans);letter-spacing:.02em;box-shadow:0 6px 12px -6px rgba(163,25,44,.7);pointer-events:none}
.lot-gain:empty{display:none}
.lot-gain.pop{animation:pop-gain .55s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop-gain{0%{transform:scale(.7) rotate(-8deg)}60%{transform:scale(1.18) rotate(3deg)}100%{transform:none}}
/* Plus assez en stock pour les deux : la carte se grise */
.lot-choix.indispo{cursor:not-allowed}
.lot-choix.indispo .lot-pastille{opacity:.5;transform:none;box-shadow:none}
.lot-choix.indispo .lot-gain{background:#A89886;box-shadow:none}
@media (hover:hover){ .lot-choix:not(.indispo):hover .lot-pastille{transform:translateY(-2px)} }

.mesures{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.mesures > div{display:flex;align-items:center;gap:11px;padding:10px 16px 10px 12px;border-radius:14px;
  background:#FBF7F1;border:1px solid rgba(58,42,32,.1)}
.mesures svg{width:26px;height:26px;flex:none;fill:none;stroke:var(--bois);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.mesures dt{font:600 10.5px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gris-texte)}
.mesures dd{margin-top:2px;font:600 15px/1.25 var(--sans);color:var(--espresso)}
/* Urne à modèle unique (pas de « Lequel lui ressemble ? ») : le même filet que le choix du modèle */
.infos-prix + .mesures{margin-top:26px;padding-top:24px;border-top:1px solid rgba(58,42,32,.12)}

/* Le stock : rouge d'alerte et petit gonflement, comme la pastille du panier */
.stock{display:inline-flex;align-items:center;gap:10px;margin-top:22px;padding:9px 16px 9px 13px;border-radius:999px;
  font:600 14px/1.25 var(--sans);transform-origin:18px 50%}
.stock-point{width:9px;height:9px;border-radius:50%;flex:none}
.stock.alerte{background:#FCE9EB;color:#A3192C;box-shadow:inset 0 0 0 1px rgba(211,38,58,.24);
  animation:gonfle-stock 2.4s ease-out infinite}
.stock.alerte .stock-point{background:var(--rouge);animation:halo 2.4s ease-out infinite}
.stock.alerte.relance{animation:pop-stock .5s cubic-bezier(.3,1.6,.5,1), gonfle-stock 2.4s ease-out .5s infinite}
/* 4 ou 5 exemplaires (27/09) : la même alerte, en ambre, qui gonfle plus doucement */
.stock.alerte.bientot{background:#FDF0DF;color:#834309;box-shadow:inset 0 0 0 1px rgba(214,122,24,.3);
  animation-duration:3.2s}
.stock.alerte.bientot .stock-point{background:#DB7A1C;animation:halo-ambre 3.2s ease-out infinite}
.stock.alerte.bientot.relance{animation:pop-stock .5s cubic-bezier(.3,1.6,.5,1), gonfle-stock 3.2s ease-out .5s infinite}
@keyframes halo-ambre{0%{box-shadow:0 0 0 0 rgba(219,122,28,.55)}75%,100%{box-shadow:0 0 0 9px rgba(219,122,28,0)}}
.stock.ok{background:#E6F2EA;color:#1F6B45} .stock.ok .stock-point{background:#2F8A5B}
.stock.epuise{background:#EFE9E1;color:var(--gris-texte)} .stock.epuise .stock-point{background:#A89886}
@keyframes gonfle-stock{0%{transform:scale(1)}16%{transform:scale(1.05)}32%,100%{transform:scale(1)}}
@keyframes pop-stock{0%{transform:scale(.9)}60%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes halo{0%{box-shadow:0 0 0 0 rgba(211,38,58,.6)}75%,100%{box-shadow:0 0 0 9px rgba(211,38,58,0)}}

/* Le bouton du panier. Deux faces qui glissent (même idée que le bandeau du haut), un reflet
   qui le traverse de temps en temps, une onde au clic — et la photo qui s'envole vers le panier. */
.btn-panier{position:relative;display:block;width:100%;height:62px;margin-top:16px;border-radius:999px;overflow:hidden;
  isolation:isolate;background:var(--espresso);color:var(--creme);font:600 16.5px/1 var(--sans);letter-spacing:.02em;
  box-shadow:0 18px 34px -18px rgba(46,33,25,.8), inset 0 1px 0 rgba(255,255,255,.08);
  transition:background-color .35s, transform .2s, box-shadow .35s}
.btn-face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:11px;
  transition:transform .55s cubic-bezier(.7,0,.2,1)}
.btn-face svg{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.btn-prix{font-weight:500;opacity:.78}
.btn-ok{transform:translateY(105%)}
.btn-panier.ajoute{background:var(--bois)}
.btn-panier.ajoute .btn-repos{transform:translateY(-105%)}
.btn-panier.ajoute .btn-ok{transform:translateY(0)}
.btn-ok svg{stroke-width:2.1}
.btn-panier.ajoute .btn-ok path{stroke-dasharray:24;stroke-dashoffset:24;animation:trace .45s .25s ease-out forwards}
@keyframes trace{to{stroke-dashoffset:0}}
.btn-panier::before{content:"";position:absolute;top:0;bottom:0;left:0;width:34%;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg, rgba(255,240,220,0), rgba(255,240,220,.2) 50%, rgba(255,240,220,0));
  transform:translateX(-120%) skewX(-18deg);animation:reflet 6s cubic-bezier(.4,0,.2,1) 1.8s infinite}
@keyframes reflet{0%{transform:translateX(-120%) skewX(-18deg)}22%,100%{transform:translateX(400%) skewX(-18deg)}}
.onde{position:absolute;z-index:-1;border-radius:50%;pointer-events:none;background:rgba(255,238,215,.3);
  transform:scale(0);animation:onde .7s ease-out forwards}
@keyframes onde{to{transform:scale(1);opacity:0}}
@media (hover:hover){
  .btn-panier:not(:disabled):hover{background:var(--bois-fonce);transform:translateY(-2px);
    box-shadow:0 22px 38px -18px rgba(46,33,25,.85), inset 0 1px 0 rgba(255,255,255,.1)}
  .btn-panier.ajoute:hover{background:var(--bois)}
}
.btn-panier:not(:disabled):active{transform:scale(.985)}
.btn-panier:disabled{cursor:default;background:#8E7E70;box-shadow:none}
.btn-panier:disabled::before{animation:none}

/* La photo qui s'envole vers le panier */
.vol{position:fixed;left:0;top:0;z-index:60;width:66px;height:66px;pointer-events:none}
.vol-in{width:100%;height:100%;border-radius:50%;overflow:hidden;background:var(--scene);
  box-shadow:0 0 0 2px #fff, 0 12px 26px -8px rgba(46,33,25,.6)}
.vol img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply;transform:scale(1.3)}

/* Description et dimensions */
.bloc{margin-top:36px;padding-top:26px;border-top:1px solid rgba(58,42,32,.12)}
.bloc h2{display:flex;align-items:center;gap:12px;font:600 11.5px/1 var(--sans);letter-spacing:.24em;
  text-transform:uppercase;color:var(--bois)}
.bloc h2::after{content:"";flex:1;height:1px;background:linear-gradient(90deg, rgba(122,74,38,.35), rgba(122,74,38,0))}
.bloc p{margin-top:14px;font-size:16px;line-height:1.72;color:#4A382C}
.bloc p:first-of-type::first-letter{float:left;font:600 3.35em/.8 var(--serif);color:var(--bois);margin:.08em .1em 0 0}
.bloc .note{font-size:13.5px;line-height:1.6;color:var(--gris-texte)}
.bloc .note::first-letter{all:unset}
.dims{display:grid;grid-template-columns:auto 1fr;margin-top:14px;font-size:14.5px}
.dims dt,.dims dd{padding:11px 0;border-bottom:1px solid rgba(58,42,32,.09)}
.dims dt{color:var(--gris-texte);padding-right:24px}
.dims dd{text-align:right;font-weight:600;color:var(--espresso)}

/* Changement d'animal : les noms glissent (déplacement seul) */
@keyframes glisse{from{transform:translateY(.55em)}}
.glisse{animation:glisse .45s cubic-bezier(.2,.7,.2,1)}

@media (min-width:900px) and (max-width:1100px){
  .animaux{gap:9px} .animal-vignette{width:52px;height:52px}
}
@media (max-width:899px){
  .fiche-grille{grid-template-columns:minmax(0, 1fr)}
  .galerie{position:static}
  .galerie-in{width:100%;min-width:0;max-width:560px;margin-inline:auto}
  .infos{max-width:560px;margin-inline:auto;width:100%}
  .fiche > .fil{max-width:560px;margin-inline:auto}
}
@media (max-width:599px){
  .fiche{padding-top:14px}
  .galerie-scene{border-radius:20px}
  .fleche{width:40px;height:40px;margin-top:-20px}
  .fleche-prec{left:10px} .fleche-suiv{right:10px}
  .galerie-legende{font-size:19px;left:16px;bottom:13px}
  .galerie-compteur{top:13px;right:15px}
  .galerie-note{top:12px;right:12px;gap:7px;padding:6px 10px 6px 9px}
  .note-etoiles{--t:13px}
  .note-mot{font-size:11px}
  .infos h1{font-size:clamp(42px, 13vw, 54px)}
  .animaux{gap:8px}
  .animal-vignette{width:48px;height:48px}
  .infos-sur{letter-spacing:.2em}
  .btn-panier{height:58px;font-size:16px}
  .ronds{gap:11px}
  .rond{width:44px;height:44px}
  .ronds-anneau{width:54px;height:54px;margin-top:-27px}
}
@media (max-width:399px){
  .lots{gap:8px} .lot-pastille{gap:8px;padding:8px 9px 8px 8px} .lot-vignette{width:40px;height:40px}
}
@media (max-width:359px){
  .animaux{gap:6px} .animal-vignette{width:42px;height:42px}
  .tailles{gap:6px} .taille-pastille small{font-size:11.5px}
  .ronds{gap:8px} .rond{width:38px;height:38px}
  .ronds-anneau{width:48px;height:48px;margin-top:-24px}
}

@media (prefers-reduced-motion:reduce){
  .galerie,.infos > *,.glisse,.stock.alerte,.stock.alerte.relance,.stock.alerte .stock-point,
  .stock.alerte.bientot,.stock.alerte.bientot.relance,.stock.alerte.bientot .stock-point,
  .btn-panier::before,.rond[aria-current="true"],.lot-gain.pop,.galerie-note.rempli .note-etoiles{animation:none}
  .galerie-note.rempli .note-pleines{transition:none}
  .btn-face,.diapo img,.rond,.ronds-anneau,.animal-vignette,.fleche,.taille-pastille,.lot-pastille{transition:none}
  .btn-panier.ajoute .btn-ok path{animation:none;stroke-dashoffset:0}
}

/* ───────────── Les offres (04/10/2026) : prix barré VRAI et « −N % » (js/fiche.js, majOffre) ───────────── */
.prix-offre{display:inline-flex;align-items:center;gap:10px;margin-left:14px;vertical-align:.22em}
.prix-offre s{font:500 20px/1 var(--serif);color:var(--gris-texte);text-decoration-thickness:1.5px}
.prix-offre b{padding:5px 9px 4px;border-radius:999px;background:#B3261E;color:#fff;font:700 12.5px/1 var(--sans);letter-spacing:.02em}
.prix-offre-info{margin-top:8px;font-size:12.5px;color:var(--gris-texte)}