/* urneanimal.fr — LA PAGE PANIER (/panier/) : la jauge de la livraison offerte, les articles, le code de
   réduction, le récapitulatif, les petites attentions. Le comportement est dans js/panier.js.
   ⚠ Quand on modifie ce fichier : changer le ?v= dans TOUTES les pages. */

/* Les écritures du graveur, pour montrer le prénom gravé tel qu'il a été composé (Mot Doux).
   Les mêmes que css/atelier.css ; le navigateur ne télécharge que celle qui sert. */
@font-face{font-family:"UA Carlito";font-weight:400;font-display:swap;src:url(/polices/carlito.woff2) format("woff2")}
@font-face{font-family:"UA STIX Two";font-weight:400 700;font-display:swap;src:url(/polices/stix-two-text.woff2) format("woff2")}
@font-face{font-family:"UA STIX Two";font-style:italic;font-weight:700;font-display:swap;src:url(/polices/stix-two-text-italique.woff2) format("woff2")}
@font-face{font-family:"UA Mali";font-weight:600;font-display:swap;src:url(/polices/mali.woff2) format("woff2")}
@font-face{font-family:"UA Caveat Brush";font-weight:400;font-display:swap;src:url(/polices/caveat-brush.woff2) format("woff2")}
@font-face{font-family:"UA Cookie";font-weight:400;font-display:swap;src:url(/polices/cookie.woff2) format("woff2")}
@font-face{font-family:"UA Kaushan";font-weight:400;font-display:swap;src:url(/polices/kaushan-script.woff2) format("woff2")}
@font-face{font-family:"UA Grandstander";font-weight:700;font-display:swap;src:url(/polices/grandstander.woff2) format("woff2")}
@font-face{font-family:"UA Norican";font-weight:400;font-display:swap;src:url(/polices/norican.woff2) format("woff2")}
@font-face{font-family:"UA Amatic SC";font-weight:400;font-display:swap;src:url(/polices/amatic-sc.woff2) format("woff2")}
@font-face{font-family:"UA Amatic SC";font-weight:700;font-display:swap;src:url(/polices/amatic-sc-gras.woff2) format("woff2")}
@font-face{font-family:"UA Sacramento";font-weight:400;font-display:swap;src:url(/polices/sacramento.woff2) format("woff2")}

.panier{max-width:1260px;margin:0 auto;padding:22px clamp(16px, 4vw, 60px) clamp(56px, 8vw, 110px)}
@keyframes monte{from{transform:translateY(16px)}}   /* déplacement seul, jamais d'opacité */
.glisse{display:inline-block;animation:glisse .45s cubic-bezier(.2,.7,.2,1)}
@keyframes glisse{from{transform:translateY(7px)}}

.pan-tete{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 18px;margin-top:clamp(14px, 2.4vw, 30px);
  animation:monte .9s cubic-bezier(.2,.7,.2,1) both}
.pan-tete h1{font:600 clamp(42px, 5vw, 68px)/.95 var(--serif);letter-spacing:-.015em}
.pan-tete h1 em{font-style:italic;font-weight:500;color:var(--bois)}
.pan-compte{font:500 14.5px/1 var(--sans);color:var(--gris-texte)}

/* ───────────── La livraison offerte : la jauge ───────────── */
.livraison{margin-top:22px;padding:18px clamp(18px, 2.4vw, 28px) 14px;border-radius:22px;background:#FBF7F1;
  border:1px solid rgba(58,42,32,.1);box-shadow:0 22px 44px -38px rgba(46,33,25,.55);
  animation:monte .9s cubic-bezier(.2,.7,.2,1) .06s both}
.livraison-msg{display:flex;align-items:center;gap:10px;min-height:26px;font:500 15.5px/1.35 var(--sans);color:var(--espresso)}
.livraison-msg.glisse{display:flex}
.livraison-msg svg{width:22px;height:22px;flex:none;fill:none;stroke:var(--bois);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.livraison-msg .msg-logo{width:22px;height:22px;flex:none;border-radius:5.5px}   /* le logo de La Poste (js/panier.js) */
.livraison-msg b{font-weight:700;color:var(--bois-fonce)}
.livraison-msg.ok svg{stroke:#2F8A5B;stroke-width:2.2}
.livraison-msg.ok b{color:#1F6B45}

.jauge{position:relative;height:12px;margin:18px 40px 0 6px;border-radius:999px;background:rgba(58,42,32,.1)}
/* Le plein : des rayures qui défilent (ça avance), le bois qui chauffe vers le caramel */
.jauge-plein{position:relative;height:100%;width:0;border-radius:inherit;
  background:repeating-linear-gradient(-45deg, rgba(255,255,255,.2) 0 7px, rgba(255,255,255,0) 7px 14px),
             linear-gradient(90deg, #8E5A2E, #D29652);
  background-size:19.8px 19.8px, 100% 100%;animation:rayures 1.1s linear infinite;
  transition:width 1.1s cubic-bezier(.3,.8,.25,1)}
@keyframes rayures{to{background-position:19.8px 0, 0 0}}
/* Au bout de la jauge, le logo de La Poste (l'oiseau bleu sur son jaune, images/livraison/ ; à la place du camion
   depuis le 29/09) : il avance avec le remplissage et plane doucement. */
.jauge-camion{position:absolute;right:-18px;top:50%;width:36px;height:36px;margin-top:-18px;border-radius:50%;
  display:grid;place-items:center;background:#FFCB05;box-shadow:0 0 0 2px #FFFDF9, 0 8px 16px -8px rgba(46,33,25,.55)}
.jauge-camion img{width:25px;height:auto;animation:plane 1.5s ease-in-out infinite alternate}
@keyframes plane{from{transform:translateY(.8px)}to{transform:translateY(-1.2px)}}
.jauge-but{position:absolute;right:-40px;top:50%;width:32px;height:32px;margin-top:-16px;border-radius:50%;
  display:grid;place-items:center;background:#F1E6D6;color:var(--bois);transition:background .5s, color .5s, box-shadow .5s}
.jauge-but svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* Seuil atteint : le vert, le camion arrive au cadeau, qui s'ouvre d'un bond */
.jauge.atteinte .jauge-plein{background:repeating-linear-gradient(-45deg, rgba(255,255,255,.2) 0 7px, rgba(255,255,255,0) 7px 14px),
  linear-gradient(90deg, #2F8A5B, #63B487);background-size:19.8px 19.8px, 100% 100%}
.jauge.atteinte .jauge-camion{opacity:0;transition:opacity .3s .8s}
.jauge.atteinte .jauge-but{background:#2F8A5B;color:#fff;box-shadow:0 0 0 5px rgba(47,138,91,.16)}
.jauge.fete .jauge-but{animation:cadeau .7s cubic-bezier(.3,1.6,.5,1)}
@keyframes cadeau{0%{transform:scale(1)}35%{transform:scale(1.35) rotate(-10deg)}65%{transform:scale(.92) rotate(6deg)}100%{transform:scale(1)}}
.jauge-etincelles{position:absolute;right:-24px;top:50%;width:0;height:0;pointer-events:none}
.jauge-etincelles i{position:absolute;left:-3.5px;top:-3.5px;width:7px;height:7px;border-radius:50%;background:var(--c);
  animation:eclat .95s cubic-bezier(.15,.7,.3,1) var(--d) both}
.jauge-etincelles i:nth-child(3n){width:5px;height:5px;border-radius:1px;transform:rotate(45deg)}
@keyframes eclat{0%{transform:translate(0, 0) scale(.3);opacity:1}70%{opacity:1}100%{transform:translate(var(--x), var(--y)) scale(1);opacity:0}}
.jauge-bornes{display:flex;justify-content:space-between;margin:10px 40px 0 6px;font:500 12px/1 var(--sans);
  color:var(--gris-texte);letter-spacing:.02em}

/* ───────────── Les articles et le récapitulatif ───────────── */
.pan-grille{display:grid;grid-template-columns:minmax(0, 1fr) minmax(300px, 380px);gap:clamp(24px, 3.6vw, 52px);
  margin-top:28px;align-items:start}
.lignes{list-style:none;border-top:1px solid rgba(58,42,32,.12)}
.ligne{display:grid;grid-template-columns:96px minmax(0, 1fr) auto auto 36px;grid-template-areas:"photo infos qte prix retirer";
  gap:8px 20px;align-items:center;padding:18px 6px 18px 0;border-bottom:1px solid rgba(58,42,32,.12);
  animation:monte .8s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.12s + var(--i, 0) * .06s)}
.ligne.arrive{animation:arrive .9s cubic-bezier(.2,.7,.2,1) both}
@keyframes arrive{0%{transform:translateX(-16px);background:rgba(224,168,76,.2)}55%{background:rgba(224,168,76,.12)}100%{transform:none;background:rgba(224,168,76,0)}}
.ligne.part{overflow:hidden;opacity:0;padding-top:0;padding-bottom:0;border-bottom-color:transparent;
  transition:height .4s cubic-bezier(.4,0,.2,1), padding .4s cubic-bezier(.4,0,.2,1), opacity .25s, border-color .4s}
.ligne-photo{grid-area:photo;display:block;width:96px;height:96px;border-radius:18px;overflow:hidden;background:var(--scene);
  border:1px solid rgba(58,42,32,.07)}
.ligne-photo img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.ligne-sans-photo{display:block;width:100%;height:100%}
@media (hover:hover){ a.ligne-photo:hover img{transform:scale(1.06)} }
.ligne-infos{grid-area:infos;min-width:0}
.ligne-nom{font:600 23px/1.1 var(--serif);letter-spacing:-.005em}
.ligne-nom a{text-decoration:none;background:linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition:background-size .4s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover){ .ligne-nom a:hover{background-size:100% 1px} }
.ligne-detail{margin-top:4px;font-size:14px;color:var(--gris-texte)}
.ligne-stock{display:flex;align-items:center;gap:7px;margin-top:7px;font:600 12.5px/1.25 var(--sans);color:#834309}
.ligne-stock::before{content:"";width:7px;height:7px;border-radius:50%;flex:none;background:#DB7A1C}
.ligne-stock.rouge{color:#A3192C}
.ligne-stock.rouge::before{background:var(--rouge)}
/* La gravure (Mot Doux) : le prénom dans SON écriture, puis le reste de ce qui sera gravé */
.ligne-gravure{display:grid;gap:3px;max-width:420px;margin-top:10px;padding:9px 14px 11px;border-radius:12px;
  background:#F3EADD;border:1px solid rgba(58,42,32,.07)}
.grav-titre{font:600 10.5px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gris-texte)}
.grav-prenom{font-size:27px;line-height:1.15;color:var(--espresso);overflow-wrap:anywhere}
.grav-plus{font-size:13px;line-height:1.4;color:#5C4636}

.ligne-qte{grid-area:qte;display:inline-flex;align-items:center;height:42px;border-radius:999px;
  border:1px solid rgba(58,42,32,.2);background:#FFFCF7}
.ligne-qte button{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;color:var(--espresso);
  transition:background .2s, opacity .2s}
.ligne-qte button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
.ligne-qte button:disabled{opacity:.28;cursor:default}
@media (hover:hover){ .ligne-qte button:not(:disabled):hover{background:rgba(58,42,32,.07)} }
.qte-val{display:inline-block;min-width:20px;text-align:center;font:600 15.5px/1 var(--sans);font-variant-numeric:tabular-nums}
.qte-val.monte{animation:chiffre-monte .35s cubic-bezier(.2,.7,.2,1)}
.qte-val.descend{animation:chiffre-descend .35s cubic-bezier(.2,.7,.2,1)}
@keyframes chiffre-monte{from{transform:translateY(9px)}}
@keyframes chiffre-descend{from{transform:translateY(-9px)}}
.ligne-prix{grid-area:prix;min-width:86px;text-align:right;white-space:nowrap}
.ligne-total{font:600 22px/1.1 var(--serif)}
.ligne-unite{display:block;margin-top:3px;font:500 12px/1.2 var(--sans);color:var(--gris-texte)}
.ligne-unite:empty{display:none}
.ligne-retirer{grid-area:retirer;width:36px;height:36px;display:grid;place-items:center;border-radius:50%;color:#8C7A6B;
  transition:background .2s, color .2s}
.ligne-retirer svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
@media (hover:hover){ .ligne-retirer:hover{background:rgba(211,38,58,.08);color:var(--rouge)} }
.pan-note{margin-top:14px;padding:11px 14px;border-radius:12px;background:#FDF0DF;color:#834309;font-size:14px}

/* Le récapitulatif, qui suit le défilement sur ordinateur */
.recap{position:sticky;top:calc(var(--h-entete) + 20px);padding:24px clamp(18px, 2vw, 26px) 22px;border-radius:22px;
  background:#FBF7F1;border:1px solid rgba(58,42,32,.1);box-shadow:0 26px 50px -40px rgba(46,33,25,.6);
  animation:monte .9s cubic-bezier(.2,.7,.2,1) .12s both}
.recap h2{font:600 27px/1 var(--serif)}
.code{margin-top:18px;border-top:1px solid rgba(58,42,32,.12);border-bottom:1px solid rgba(58,42,32,.12)}
.code summary{display:flex;align-items:center;gap:9px;padding:14px 0;list-style:none;cursor:pointer;
  font:600 14.5px/1.2 var(--sans);color:var(--bois-fonce)}
.code summary::-webkit-details-marker{display:none}
.code summary svg{width:19px;height:19px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.code summary::after{content:"";width:7px;height:7px;margin:0 4px 3px auto;border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;transform:rotate(45deg);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.code[open] summary::after{transform:translate(0, 4px) rotate(-135deg)}
.code-form{display:flex;gap:8px;padding-bottom:14px}
.code-form input{flex:1;min-width:0;height:46px;padding:0 14px;border-radius:12px;border:1px solid #B5A08A;background:#FFFDF9;
  font:600 16px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--espresso)}   /* 16 px : pas de zoom sur iPhone */
.code-form input::placeholder{font-weight:400;letter-spacing:0;text-transform:none;color:#7A6A5C}
.code-form input:focus{outline:2px solid var(--bois);outline-offset:1px}
.code-form button{height:46px;padding:0 16px;border-radius:12px;background:var(--espresso);color:var(--creme);font:600 14px/1 var(--sans)}
.code-msg{margin:-4px 0 14px;font-size:13.5px;line-height:1.4}
.code-msg:empty{display:none}
.code-msg.erreur{color:#A3192C}
.code-msg.ok{color:#1F6B45}
.secoue{animation:secoue .45s}
@keyframes secoue{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}

.totaux{display:grid;gap:11px;margin-top:16px}
.totaux > div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:15px}
.totaux dt{color:#5C4636}
.totaux dd{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.reduc dt{display:flex;align-items:center;gap:6px}
.reduc b{font-weight:700;letter-spacing:.05em;color:var(--espresso)}
.reduc dd{color:#1F6B45}
.reduc.pop{animation:pop-ligne .6s cubic-bezier(.3,1.5,.5,1)}
@keyframes pop-ligne{0%{transform:scale(.94)}60%{transform:scale(1.03)}100%{transform:scale(1)}}
.code-retirer{width:22px;height:22px;display:inline-grid;place-items:center;border-radius:50%;font:500 17px/1 var(--sans);color:#8C7A6B}
@media (hover:hover){ .code-retirer:hover{background:rgba(211,38,58,.08);color:var(--rouge)} }
.offerte{color:#1F6B45;font-weight:700}
.totaux .total{margin-top:6px;padding-top:15px;border-top:1px solid rgba(58,42,32,.14);align-items:center}
.total dt{font:600 23px/1 var(--serif);color:var(--espresso)}
.total dt small{font:500 11.5px/1 var(--sans);letter-spacing:.08em;color:var(--gris-texte)}
.total dd{font:600 32px/1 var(--serif)}

/* L'assurance livraison, au-dessus des totaux (le reste du style : .pp-assurance dans css/commun.css) */
.recap-assurance{margin:4px 0 16px}
.recap-assurance[hidden]{display:none}
.btn-commander{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;height:58px;margin-top:20px;border-radius:999px;background:var(--espresso);color:var(--creme);
  font:600 16px/1 var(--sans);letter-spacing:.02em;box-shadow:0 18px 30px -18px rgba(46,33,25,.85);transition:background .3s}
.btn-commander-prix{opacity:.78;font-weight:500}
.btn-commander svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .35s cubic-bezier(.2,.7,.2,1)}
/* un reflet qui le traverse de temps en temps, comme le bouton des fiches */
.btn-commander::before{content:"";position:absolute;top:0;bottom:0;left:-40%;width:30%;z-index:-1;
  background:linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.14), rgba(255,255,255,0));
  transform:skewX(-18deg);animation:reflet 6s ease-in-out 1.6s infinite}
@keyframes reflet{0%{left:-40%}14%,100%{left:120%}}
@media (hover:hover){
  .btn-commander:hover{background:var(--bois-fonce)}
  .btn-commander:hover svg{transform:translateX(4px)}
}
.commander-msg{margin-top:12px;padding:12px 14px;border-radius:12px;background:#F3EADD;font-size:14px;line-height:1.45;color:#4A382B}
.commander-msg.glisse{display:block}
.recap-note{margin-top:14px;font-size:12.5px;line-height:1.4;color:var(--gris-texte);text-align:center}

/* ───────────── Panier vide ───────────── */
.vide{padding:36px 0 6px;text-align:center;animation:monte .9s cubic-bezier(.2,.7,.2,1) .1s both}
.vide-dessin{width:118px;height:118px;margin:0 auto;fill:none;stroke:var(--bois);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vide-patte{fill:var(--bois);stroke:none;opacity:.85;transform-box:fill-box;transform-origin:50% 100%;animation:patte 3s ease-in-out infinite}
@keyframes patte{0%,70%,100%{transform:translateY(0)}78%{transform:translateY(-5px) rotate(-6deg)}88%{transform:translateY(0)}}
.vide h2{margin-top:10px;font:600 clamp(30px, 3.4vw, 40px)/1.05 var(--serif)}
.vide p{max-width:31em;margin:10px auto 0;color:#5C4636}
.vide .vide-liens{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:24px}
.vide-btn{padding:14px 22px;border-radius:999px;background:var(--espresso);color:var(--creme);text-decoration:none;font:600 14.5px/1 var(--sans)}
.vide-btn + .vide-btn{background:transparent;color:var(--espresso);box-shadow:inset 0 0 0 1.5px var(--espresso)}

/* ───────────── Les petites attentions ───────────── */
.extras{margin-top:clamp(48px, 6vw, 84px);padding-top:clamp(26px, 3vw, 38px);border-top:1px solid rgba(58,42,32,.12)}
.extras-tete{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:14px 24px}
.extras-sur{display:flex;align-items:center;gap:11px;font:600 11px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--bois)}
.extras-sur::before{content:"";width:28px;height:1px;background:currentColor;opacity:.7}
.extras h2{margin-top:12px;font:600 clamp(30px, 3.4vw, 44px)/1.02 var(--serif);letter-spacing:-.01em}
.extras h2 em{font-style:italic;font-weight:500;color:var(--bois)}
.extras-tout{display:inline-flex;align-items:center;gap:7px;padding-bottom:4px;font:600 14px/1 var(--sans);color:var(--bois-fonce);text-decoration:none}
.extras-tout svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s}
@media (hover:hover){ .extras-tout:hover svg{transform:translateX(4px)} }
/* La rangée qui défile (29/09) : une carte à côté de l'autre, qu'on fait glisser au doigt, aux flèches ou en
   tirant la barre dessous. La barre de défilement du navigateur est cachée : c'est `.extras-barre` qui la
   remplace (sa poignée a la largeur de ce qu'on voit). Les bords s'estompent du côté où il reste des cartes
   (`--fg` / `--fd`, posés par js/panier.js). Quand tout tient à l'écran (`.fixe`) : ni flèches ni barre. */
.extras-droite{display:flex;align-items:center;gap:18px}
.extras-fleches{display:flex;gap:8px}
.extras-fleche{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:#FBF7F1;color:var(--espresso);
  box-shadow:inset 0 0 0 1px rgba(58,42,32,.16), 0 10px 20px -16px rgba(46,33,25,.6);
  transition:background .3s, color .3s, box-shadow .3s, opacity .3s, transform .25s cubic-bezier(.2,.7,.2,1)}
.extras-fleche svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.extras-fleche:disabled{opacity:.35;cursor:default;box-shadow:inset 0 0 0 1px rgba(58,42,32,.16)}
@media (hover:hover){ .extras-fleche:not(:disabled):hover{background:var(--espresso);color:var(--creme)} }
.extras-fleche:not(:disabled):active{transform:scale(.92)}
.extras.fixe .extras-fleches,.extras.fixe .extras-barre{display:none}
.extras-grille{--fg:0px;--fd:0px;list-style:none;display:flex;gap:clamp(16px, 2vw, 26px);margin:18px -4px 0;padding:4px 4px 30px;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:4px;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 var(--fg), #000 calc(100% - var(--fd)), transparent);
          mask-image:linear-gradient(to right, transparent, #000 var(--fg), #000 calc(100% - var(--fd)), transparent)}
.extras-grille::-webkit-scrollbar{display:none}
.extras-grille.tire{scroll-snap-type:none}   /* pendant qu'on tire la barre : pas d'aimant */
.extras-grille > .extra{flex:0 0 min(86%, 400px);scroll-snap-align:start}   /* 86 % : au téléphone, la suivante dépasse */
.extras-barre{position:relative;height:18px;margin-top:-12px;cursor:pointer;touch-action:none}
.extras-barre::before{content:"";position:absolute;left:0;right:0;top:7px;height:4px;border-radius:99px;background:rgba(58,42,32,.11)}
.extras-curseur{position:absolute;top:7px;left:var(--x, 0%);width:var(--w, 100%);height:4px;border-radius:99px;background:var(--bois);
  transition:height .2s, top .2s, background .2s}
.extras-barre:hover .extras-curseur,.extras-barre.tire .extras-curseur{top:6px;height:6px;background:var(--bois-fonce)}
.extra{display:grid;grid-template-columns:clamp(112px, 12vw, 156px) minmax(0, 1fr);gap:clamp(14px, 1.8vw, 22px);align-items:center;padding:14px;border-radius:22px;
  background:#FBF7F1;border:1px solid rgba(58,42,32,.09);box-shadow:0 22px 40px -36px rgba(46,33,25,.55);
  animation:monte .9s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.2s + var(--i, 0) * .08s)}
.extra-photo{position:relative;display:block;aspect-ratio:1;border-radius:16px;overflow:hidden;background:var(--scene)}
.extra-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply;opacity:0;
  transition:opacity .45s, transform .7s cubic-bezier(.2,.7,.2,1)}
.extra-photo img.active{opacity:1}
@media (hover:hover){ .extra:hover .extra-photo img.active{transform:scale(1.05)} }
.extra-nom{font:600 23px/1.1 var(--serif);letter-spacing:-.005em}
.extra-nom a{text-decoration:none}
@media (hover:hover){ .extra-nom a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px} }
.extra-accroche{margin-top:4px;font-size:13.5px;line-height:1.35;color:var(--gris-texte)}
.extra-couleurs{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.extra-couleur{width:26px;height:26px;border-radius:50%;overflow:hidden;background:var(--scene);
  box-shadow:0 0 0 1px rgba(58,42,32,.16);transition:transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s}
.extra-couleur img{width:100%;height:100%;object-fit:cover;transform:scale(1.9)}
.extra-couleur[aria-checked="true"]{box-shadow:0 0 0 2px #FBF7F1, 0 0 0 3.3px var(--bois);transform:translateY(-1px)}
.extra-bas{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:13px}
.extra-prix{font:600 22px/1 var(--serif)}
.extra-ajout{position:relative;overflow:hidden;height:40px;padding:0 16px;border-radius:999px;background:var(--espresso);
  color:var(--creme);font:600 13.5px/1 var(--sans);white-space:nowrap;transition:background .3s}
.extra-ajout-repos,.extra-ajout-ok{display:flex;align-items:center;justify-content:center;gap:6px;
  transition:transform .4s cubic-bezier(.2,.8,.3,1)}
.extra-ajout-ok{position:absolute;inset:0;background:#2F8A5B;color:#fff;transform:translateY(105%)}
.extra-ajout.ajoute .extra-ajout-repos{transform:translateY(-150%)}
.extra-ajout.ajoute .extra-ajout-ok{transform:none}
.extra-ajout svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.extra-ajout:disabled{background:#E7DDCF;color:#6B5A4C;cursor:default}
.extra-ajout:disabled svg{display:none}
@media (hover:hover){ .extra-ajout:not(:disabled):hover{background:var(--bois-fonce)} }

/* « Retiré du panier · Annuler » */
.annule{position:fixed;left:50%;bottom:max(20px, env(safe-area-inset-bottom));z-index:45;display:flex;align-items:center;gap:16px;
  width:max-content;max-width:calc(100vw - 32px);padding:12px 14px 12px 18px;border-radius:14px;background:var(--espresso);
  color:var(--creme);font-size:14px;line-height:1.35;box-shadow:0 18px 40px -16px rgba(0,0,0,.55);transform:translateX(-50%)}
.annule.montre{animation:toast .5s cubic-bezier(.2,.8,.3,1.15)}
@keyframes toast{from{transform:translate(-50%, 46px)}}
.annule button{flex:none;padding:4px 2px;color:#F4DEB9;font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* ───────────── Tablette et téléphone ───────────── */
@media (max-width:959px){
  .pan-grille{grid-template-columns:minmax(0, 1fr)}
  .recap{position:static}
}
@media (max-width:639px){
  .ligne{grid-template-columns:78px minmax(0, 1fr) auto 32px;
    grid-template-areas:"photo infos infos retirer" "photo qte prix prix";gap:12px 14px;padding:16px 0}
  .ligne-photo{width:78px;height:78px;border-radius:15px;align-self:start}
  .ligne-qte{justify-self:start;height:40px}
  .ligne-qte button{width:38px;height:38px}
  .ligne-retirer{align-self:start;margin-top:-4px}
  .ligne-nom{font-size:21px}
  .grav-prenom{font-size:24px}
  .jauge{margin-right:38px}
  .jauge-bornes{margin-right:38px}
  .livraison-msg{font-size:14.5px}
  .extra{grid-template-columns:104px minmax(0, 1fr);gap:14px;padding:12px}
  .extra-bas{flex-wrap:wrap}
  .annule{bottom:max(14px, env(safe-area-inset-bottom))}
}

@media (prefers-reduced-motion:reduce){
  .pan-tete,.livraison,.ligne,.ligne.arrive,.recap,.vide,.extra,.glisse,.qte-val,.secoue,.reduc.pop,.annule.montre,
  .jauge-plein,.jauge-camion img,.jauge.fete .jauge-but,.vide-patte,.btn-commander::before{animation:none}
  .jauge-plein,.ligne.part,.extra-ajout-repos,.extra-ajout-ok,.extra-photo img{transition:none}
}