/* urneanimal.fr — ce qui est COMMUN à toutes les pages : police, couleurs, bandeau du haut,
   bandeau de la marque (logo, recherche, panier), fil d'Ariane, pied de page.
   Ce qui est propre à une page reste dans cette page. */

/* Police des titres hébergée ICI (licence OFL, polices/OFL.txt) : jamais chargée chez Google,
   qui recevrait l'adresse IP de chaque visiteur. Fichiers « variables » : une seule graisse
   couvre de 300 à 700. */
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300 700;font-display:swap;
  src:url(/polices/cormorant-garamond.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:300 700;font-display:swap;
  src:url(/polices/cormorant-garamond-italique.woff2) format("woff2")}

:root{
  --ivoire:#F7F1E7;      /* fond de page */
  --papier:#EFE6D8;      /* bandeau de la marque : le papier du logo */
  --espresso:#2E2119;    /* bandeau du haut, textes foncés */
  --encre:#3A2A20;       /* icônes */
  --bois:#7A4A26;        /* sous-titre du logo, survols */
  --bois-fonce:#5E3719;
  --creme:#F6EDDF;       /* texte du bandeau du haut */
  --rouge:#D3263A;       /* pastille du panier */
  --gris-texte:#6B5A4C;  /* textes secondaires (5,9:1 sur l’ivoire, 5,3:1 sur le papier) */
  --serif:"Cormorant Garamond","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Avenir Next","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --h-bandeau:32px;      /* bandeau du haut : fin sur ordinateur et tablette… */
  --h-entete:72px;       /* 04/10 : la hauteur du bandeau RESSERRÉ (on la voit en descendant) : décalage des blocs collants */
  /* marge des bandeaux : ni collé au bord, ni au milieu — elle grandit avec l'écran */
  --marge-entete:clamp(16px, calc(20vw - 43px), 400px);

  /* La « scène » où posent les urnes (fiches, catégories) : un papier chaud, éclairé au centre,
     à peine grainé. Les photos, sur fond blanc, s'y fondent avec mix-blend-mode:multiply —
     à poser sur le PARENT DIRECT de l'image. */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .38 0 0 0 0 .27 0 0 0 0 .17 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --scene:var(--grain), radial-gradient(115% 90% at 50% 36%, #FCF8F2 0%, #F3EBDF 55%, #E7DAC7 100%);
}
@media (max-width:599px){
  :root{ --h-bandeau:40px; --h-entete:56px; }   /* …un peu plus haut sur téléphone */
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
/* `hidden` doit TOUJOURS gagner : sinon un display:flex/grid posé plus bas l'emporte
   (piège payé plusieurs fois sur les autres sites). */
[hidden]{display:none!important}
html{background:var(--ivoire);-webkit-text-size-adjust:100%}
html,body{max-width:100%;overflow-x:hidden;overflow-x:clip}   /* clip, pas hidden seul : garde le sticky */
body{font-family:var(--sans);color:var(--espresso);background:var(--ivoire);line-height:1.5;
  -webkit-font-smoothing:antialiased}
img,svg{display:block}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--bois);outline-offset:3px;border-radius:6px}

/* ───────────── 1. Bandeau du haut : un cube qui bascule toutes les 3 secondes ───────────── */
.bandeau{height:var(--h-bandeau);background:var(--espresso);color:var(--creme);
  perspective:420px;overflow:hidden;position:relative;z-index:30}
.cube{position:relative;height:100%;transform-style:preserve-3d;
  transform:translateZ(calc(var(--h-bandeau) / -2)) rotateX(0deg)}
/* La transition n'existe QUE pendant la bascule : quand la classe part, le cube revient à plat
   d'un coup, pendant que la face du dessous devient la face avant. C'est le JS qui pilote,
   avec une minuterie — jamais sur la fin de l'animation (gelée dans un onglet en arrière-plan). */
.cube.tourne{transition:transform .76s cubic-bezier(.62,.02,.26,1);
  transform:translateZ(calc(var(--h-bandeau) / -2)) rotateX(90deg)}
.face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:9px;
  background:var(--espresso);backface-visibility:hidden;-webkit-backface-visibility:hidden;
  font-size:13px;font-weight:500;letter-spacing:.03em;white-space:nowrap;padding:0 16px}
.face svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.face-avant{transform:rotateX(0deg) translateZ(calc(var(--h-bandeau) / 2))}
.face-dessous{transform:rotateX(-90deg) translateZ(calc(var(--h-bandeau) / 2));
  background:#3A2A20}   /* un ton plus clair : c'est ce qui donne le relief du cube */
.face-logo{width:18px;height:18px;flex:none;border-radius:4.5px}   /* le logo de La Poste (js/commun.js, ICONES) */
@media (max-width:599px){ .face{font-size:13.5px} .face svg{width:18px;height:18px} .face-logo{width:19px;height:19px} }

/* ───────────── 2. Le GRAND BANDEAU de la marque (04/10/2026) ─────────────
   Demande de Nino (capture d'amispourtoujours.com) : « le grand bandeau en haut, dans la couleur de notre site, le logo au
   milieu, recherche à gauche, compte et panier à droite, avec les mêmes effets » — puis le menu des collections, puis un
   second bandeau (« Des hommages qui racontent une histoire », .hommages). Seule l'ARCHITECTURE est reprise : nos couleurs
   (le bois du logo), notre logo, nos mots. Mêmes identifiants qu'avant (#btn-recherche, #lien-panier, #pastille, #recherche) :
   la recherche, la pastille et le panneau du panier de js/commun.js n'ont pas changé.
   En descendant la page, le bandeau se resserre (.replie) et le menu se range ; il revient dès qu'on remonte (js/commun.js, § 1 bis).
   Téléphone et tablette (< 1000 px) : un bandeau de 60 px — menu + recherche à gauche, logo couché au centre, compte + panier
   à droite — et le menu devient un panneau qui glisse depuis la gauche (comme celui du panier, depuis la droite). */
.entete{position:sticky;top:0;z-index:20;
  --h-bande:118px;--h-bande-replie:66px;
  background:#6A3E1F;box-shadow:0 10px 30px -22px rgba(46,33,25,.75)}
.entete-in{position:relative;isolation:isolate;height:var(--h-bande);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:0 clamp(16px, 3.4vw, 56px);color:#F6EDDF;
  background:var(--grain), radial-gradient(90% 160% at 50% -30%, #92603A 0%, #7A4A26 46%, #63391B 100%);
  transition:height .45s cubic-bezier(.2,.75,.2,1)}
/* un fil de lumière sous le bandeau, comme le reflet du sceau */
.entete-in::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg, transparent, rgba(246,237,223,.35), transparent)}
.entete-g{display:flex;align-items:center;gap:4px;justify-self:start}
.actions{display:flex;align-items:center;gap:4px;justify-self:end}

/* Le logo, au centre : le sceau (crème, patte couleur bois) au-dessus du nom */
.marque{display:flex;flex-direction:column;align-items:center;gap:7px;text-decoration:none;color:#FBF5EA;
  -webkit-tap-highlight-color:transparent}
.marque-sceau{width:46px;height:46px;flex:none;overflow:visible;transition:width .45s cubic-bezier(.2,.75,.2,1), height .45s cubic-bezier(.2,.75,.2,1)}
.marque-sceau .rond{fill:#F6EDDF}
.marque-sceau .reflet{fill:none;stroke:#7A4A26;stroke-width:.9;opacity:.35}
.marque-sceau .patte{fill:#7A4A26;transform-box:view-box;transform-origin:20px 27px}
.marque-sceau .coeur{fill:#7A4A26;transform-box:view-box;transform-origin:20px 24px}
.marque-mot{font:600 34px/1 var(--serif);letter-spacing:.005em;white-space:nowrap;text-shadow:0 1px 0 rgba(46,33,25,.25);
  transition:font-size .45s cubic-bezier(.2,.75,.2,1)}
.marque-mot em{font-style:italic;font-weight:500;color:#EED2A6;padding-left:.02em}
@media (hover:hover){
  .marque:hover .patte,.marque:focus-visible .patte{animation:coucou .95s cubic-bezier(.3,1.4,.5,1)}
  .marque:hover .coeur,.marque:focus-visible .coeur{animation:bat 1.1s ease-in-out .15s 2}
}
@keyframes coucou{0%{transform:rotate(0)}25%{transform:rotate(-16deg)}55%{transform:rotate(9deg)}80%{transform:rotate(-3deg)}100%{transform:rotate(0)}}
@keyframes bat{0%,100%{transform:scale(1)}20%{transform:scale(1.2)}40%{transform:scale(.96)}60%{transform:scale(1.1)}}

/* Recherche, Compte, Panier : une icône et son mot */
.entete-lien{position:relative;display:inline-flex;align-items:center;gap:9px;height:46px;padding:0 12px;border-radius:999px;
  color:#F6EDDF;text-decoration:none;font:500 14px/1 var(--sans);letter-spacing:.02em;-webkit-tap-highlight-color:transparent;
  transition:background-color .25s, color .25s}
.entete-lien svg{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){ .entete-lien:hover{background:rgba(246,237,223,.12);color:#fff} }
.entete-lien:focus-visible,.menu-btn:focus-visible{outline:2px solid #EED2A6;outline-offset:2px}
.entete-lien[aria-expanded="true"]{background:rgba(246,237,223,.16)}
.menu-btn{display:none}

/* La pastille du panier : rouge, auréole rouge plus clair, petit gonflement d'alerte */
.pastille{position:absolute;top:2px;right:2px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;
  background:var(--rouge);color:#fff;font:700 11.5px/20px var(--sans);text-align:center;
  font-variant-numeric:tabular-nums;
  box-shadow:0 0 0 2px #7A4A26,0 0 10px 1px rgba(236,92,106,.55),0 0 0 0 rgba(236,92,106,.55);
  animation:alerte 2.4s ease-out infinite}
.pastille.gonfle{animation:pop .5s cubic-bezier(.3,1.6,.5,1),alerte 2.4s ease-out .5s infinite}
@keyframes alerte{
  0%  {transform:scale(1);   box-shadow:0 0 0 2px #7A4A26,0 0 10px 1px rgba(236,92,106,.55),0 0 0 0 rgba(236,92,106,.6)}
  16% {transform:scale(1.16)}
  32% {transform:scale(1)}
  75%,100%{transform:scale(1);box-shadow:0 0 0 2px #7A4A26,0 0 10px 1px rgba(236,92,106,.55),0 0 0 11px rgba(236,92,106,0)}
}
@keyframes pop{0%{transform:scale(.4)}60%{transform:scale(1.3)}100%{transform:scale(1)}}
/* Le panier « reçoit » un article (fiche produit) : petit sursaut de l'icône */
#lien-panier.recoit svg{animation:recoit .55s cubic-bezier(.3,1.5,.5,1)}
@keyframes recoit{0%{transform:scale(1)}35%{transform:scale(1.22) rotate(-8deg)}65%{transform:scale(.94) rotate(4deg)}100%{transform:scale(1)}}

/* Le menu des collections : sur le papier, sous le bandeau. Le trait sous le lien naît du milieu. */
.menu{background:var(--papier);border-bottom:1px solid rgba(58,42,32,.1);display:grid;grid-template-rows:1fr;
  transition:grid-template-rows .4s cubic-bezier(.2,.75,.2,1)}
.menu-liste{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:2px clamp(6px, 1.4vw, 22px);
  max-width:1320px;margin:0 auto;padding:8px clamp(16px, 3vw, 48px);min-height:0;overflow:hidden}
.menu-liste a{position:relative;display:block;padding:11px 6px 12px;color:var(--espresso);text-decoration:none;
  font:500 14.5px/1.2 var(--sans);letter-spacing:.01em;white-space:nowrap;transition:color .2s}
.menu-liste a::after{content:"";position:absolute;left:6px;right:6px;bottom:6px;height:1.5px;border-radius:2px;background:var(--bois);
  transform:scaleX(0);transition:transform .35s cubic-bezier(.2,.75,.2,1)}
@media (hover:hover){ .menu-liste a:hover{color:var(--bois-fonce)} .menu-liste a:hover::after{transform:scaleX(1)} }
.menu-liste a[aria-current="page"]::after{transform:scaleX(1)}
.menu-liste a[aria-current="page"]{color:var(--bois-fonce)}
.menu-liste .menu-offres{color:#B3261E}
.menu-liste .menu-offres::after{background:#B3261E}
.menu-tete,.menu-pied{display:none}

/* En descendant : le bandeau se resserre (logo couché, plus petit) et le menu se range */
.entete.replie .entete-in{height:var(--h-bande-replie)}
.entete.replie .marque{flex-direction:row;gap:10px}
.entete.replie .marque-sceau{width:32px;height:32px}
.entete.replie .marque-mot{font-size:27px}
.entete.range .menu{grid-template-rows:0fr;border-bottom-color:transparent}

/* Le second bandeau : « Des hommages qui racontent une histoire » et la note (04/10/2026).
   4,8/5 et 294 = toutes les notes des annonces AliExpress de nos modèles, relevées le 04/10 (outils/gabarit.py) ;
   « sur nos modèles » (choisi par Nino le 03/10) doit rester : ce ne sont pas des clients d'UrneAnimal. */
.hommages{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 22px;
  padding:16px 20px 15px;background:var(--ivoire);border-bottom:1px solid rgba(58,42,32,.08);text-align:center}
.hm-titre{font:600 13px/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--espresso)}
.hm-note{display:inline-flex;align-items:center;gap:8px;color:var(--gris-texte);text-decoration:none;font:500 14px/1.3 var(--sans);white-space:nowrap}
.hm-note b{font-weight:700;color:var(--espresso)}
.hm-etoiles{--n:4.8;display:block;width:90px;height:16px;flex:none;
  background:linear-gradient(90deg, #D99A2B calc(var(--n) * 20% * var(--rempli, 1)), rgba(122,74,38,.2) 0);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 16'%3E%3Cpath d='M8 .4l2.35 4.75 5.25.77-3.8 3.7.9 5.22L8 12.38l-4.7 2.46.9-5.22L.4 5.92l5.25-.77z'/%3E%3C/svg%3E") 0 0 / 18px 16px repeat-x;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 16'%3E%3Cpath d='M8 .4l2.35 4.75 5.25.77-3.8 3.7.9 5.22L8 12.38l-4.7 2.46.9-5.22L.4 5.92l5.25-.77z'/%3E%3C/svg%3E") 0 0 / 18px 16px repeat-x}
@media (hover:hover){ .hm-note:hover span:last-child{text-decoration:underline;text-underline-offset:3px} }

/* ── Téléphone et tablette ── */
@media (max-width:999px){
  .entete{--h-bande:62px;--h-bande-replie:56px}
  .entete-in{padding:0 8px}
  .entete-mot{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .entete-lien{width:44px;height:44px;padding:0;justify-content:center}
  .menu-btn{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:#F6EDDF;-webkit-tap-highlight-color:transparent}
  .menu-btn svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
  .marque,.entete.replie .marque{flex-direction:row;gap:8px}
  .marque-sceau,.entete.replie .marque-sceau{width:28px;height:28px}
  .marque-mot,.entete.replie .marque-mot{font-size:24px}
  .entete.range .menu{grid-template-rows:1fr}
  /* le menu devient un panneau qui glisse depuis la gauche */
  .menu{position:fixed;top:0;left:0;bottom:0;z-index:80;width:min(360px, 88vw);display:flex;flex-direction:column;
    background:var(--ivoire);border:0;box-shadow:30px 0 60px -30px rgba(30,21,15,.5);
    transform:translateX(-104%);visibility:hidden;transition:transform .5s cubic-bezier(.2,.75,.2,1), visibility 0s .5s}
  .menu.ouvert{transform:none;visibility:visible;transition:transform .5s cubic-bezier(.2,.75,.2,1)}
  .menu-tete{display:flex;align-items:center;justify-content:space-between;padding:16px 14px 14px 22px;background:var(--papier);
    border-bottom:1px solid rgba(58,42,32,.1)}
  .menu-tete p{font:600 26px/1 var(--serif)}
  .menu-tete p em{font-style:italic;font-weight:500;color:var(--bois)}
  .menu-fermer{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;color:var(--encre)}
  .menu-fermer svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
  .menu-liste{flex:1;display:block;width:100%;margin:0;overflow-y:auto;overscroll-behavior:contain;padding:8px 0 18px;max-width:none;scrollbar-width:thin}
  .menu-liste li{border-bottom:1px solid rgba(58,42,32,.07)}
  .menu-liste a{display:flex;align-items:center;justify-content:space-between;padding:15px 22px;font-size:16.5px}
  .menu-liste a::after{left:auto;right:22px;bottom:auto;top:50%;width:7px;height:7px;border-radius:0;background:none;
    border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:translateY(-50%) rotate(45deg);opacity:.45;
    transition:transform .3s}
  .menu-liste a[aria-current="page"]::after{transform:translateY(-50%) rotate(45deg);opacity:.8}
  .menu-liste .menu-offres::after{background:none}
  .menu.ouvert .menu-liste li{animation:pp-arrive .5s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.08s + var(--i, 0) * .035s)}
  .menu-pied{display:block;padding:16px 22px calc(18px + env(safe-area-inset-bottom));background:var(--papier);
    font-size:13px;color:var(--gris-texte);border-top:1px solid rgba(58,42,32,.1)}
  .menu-pied a{color:var(--bois-fonce);font-weight:600}
  .menu-ouvert .entete{z-index:95}
  .mn-voile{position:fixed;inset:0;z-index:70;background:rgba(30,21,15,.42);opacity:0;visibility:hidden;transition:opacity .35s, visibility 0s .35s}
  .mn-voile.ouvert{opacity:1;visibility:visible;transition:opacity .35s}
  .hommages{gap:4px 14px;padding:11px 14px 10px}
  .hm-titre{font-size:11px;letter-spacing:.16em}
  .hm-note{font-size:13px}
  .hm-etoiles{width:80px;height:14px;-webkit-mask-size:16px 14px;mask-size:16px 14px}
}
@media (max-width:359px){ .marque-mot{font-size:21px} .marque-sceau{width:24px;height:24px} .entete-lien{width:40px} .menu-btn{width:40px} }

/* Recherche : un bandeau qui s'ouvre sous la marque */
.recherche{border-top:1px solid rgba(58,42,32,.10);background:var(--papier);
  padding:14px var(--marge-entete) 18px}
.recherche form{display:flex;gap:8px;max-width:640px;margin:0 auto}
.recherche input{flex:1;min-width:0;height:48px;border-radius:999px;border:1px solid #9C8672;
  background:#FFFBF5;padding:0 20px;font:16px var(--sans);color:var(--espresso)}  /* 16 px : pas de zoom sur iPhone */
.recherche input::placeholder{color:#7A6A5C}
.recherche button[type=submit]{height:48px;padding:0 22px;border-radius:999px;background:var(--espresso);
  color:var(--creme);font-weight:600;font-size:15px}
.recherche-res{max-width:640px;margin:12px auto 0;font-size:14.5px;color:#5C4636;text-align:center}
.recherche-res:empty{display:none}
.recherche-res a{color:var(--bois-fonce);font-weight:600;text-underline-offset:3px}

/* ───────────── Fil d'Ariane (pages intérieures) ───────────── */
.fil{font-size:13px;color:var(--gris-texte);letter-spacing:.01em}
.fil ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:6px 0}
.fil li{display:flex;align-items:center}
.fil li + li::before{content:"";width:5px;height:5px;margin:0 11px 0 9px;border-top:1.3px solid currentColor;
  border-right:1.3px solid currentColor;transform:rotate(45deg);opacity:.55}
.fil a{color:var(--bois);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s}
@media (hover:hover){ .fil a:hover{border-bottom-color:currentColor} }
.fil [aria-current]{color:var(--espresso)}

/* ───────────── Pied de page ───────────── */
.pied{background:var(--espresso);color:#E9DDCB;text-align:center;padding:0 20px 38px}
/* En haut du pied (29/09) : « Paiement sécurisé par Stripe » et les logos des moyens de paiement que le
   paiement accepte VRAIMENT (images/paiement/LISEZMOI.txt) — logos d'acceptation, montrés tels quels. */
.pied-paiement{max-width:640px;margin:0 auto 40px;padding:40px 0 34px;border-bottom:1px solid rgba(233,221,203,.12)}
.pied-paiement-titre{display:inline-flex;align-items:center;gap:9px;font:600 11px/1.3 var(--sans);letter-spacing:.2em;
  text-transform:uppercase;color:#E9DDCB}
.pied-paiement-titre svg{width:16px;height:16px;flex:none;fill:none;stroke:#D8B98F;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pied-cartes{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:16px;padding:0;list-style:none}
.pied-cartes img{display:block;width:48px;height:auto;border-radius:5px;box-shadow:0 6px 14px -8px rgba(0,0,0,.7)}
@media (max-width:399px){ .pied-cartes{gap:8px} .pied-cartes img{width:42px} .pied-paiement-titre{letter-spacing:.14em} }
@media (max-width:359px){ .pied-cartes{gap:6px} .pied-cartes img{width:37px} }
.pied-marque{font:600 26px/1 var(--serif);letter-spacing:.01em;color:var(--creme)}
.pied-marque em{font-weight:500}
.pied p + p{margin-top:12px}
.pied-texte{font-size:14px;max-width:560px;margin-inline:auto;color:#D9CBB8;text-wrap:balance}
.pied-texte strong{color:var(--creme);font-weight:600}
.pied-copie{font-size:12.5px;color:#B9A892;letter-spacing:.04em}
/* Les liens du pied : conditions de vente et mentions légales, au pied de l'accueil et de ces deux pages seulement
   (souhait de Nino). « Paiement et carte enregistrée » n'y est plus depuis le 29/09 : c'est l'article 5 des CGV. */
.pied-liens{font-size:13px}
.pied-liens a{color:#E9DDCB;text-decoration:underline;text-decoration-color:rgba(233,221,203,.4);text-underline-offset:3px}
@media (hover:hover){ .pied-liens a:hover{color:#fff;text-decoration-color:currentColor} }

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (prefers-reduced-motion:reduce){
  .pastille,.pastille.gonfle,#lien-panier.recoit svg,.marque:hover .patte,.marque:hover .coeur{animation:none}
}

/* Le pied de page en colonnes (04/10/2026, comme les liens rapides d'amispourtoujours.com, nos mots) : la marque, nos urnes,
   les souvenirs, l'aide ; puis les liens légaux (CGV et mentions légales : désormais au pied de TOUTES les pages). */
.pied-colonnes{display:grid;grid-template-columns:1.4fr repeat(3, 1fr);gap:28px clamp(20px, 4vw, 60px);max-width:1180px;
  margin:0 auto 34px;text-align:left}
.pied-col .pied-texte{margin:12px 0 0;max-width:30em}
.pied-titre{font:600 11px/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#D8B98F}
.pied-col ul{list-style:none;margin-top:14px;display:grid;gap:9px}
.pied-col ul a{color:#E9DDCB;text-decoration:none;font-size:14px;transition:color .2s}
@media (hover:hover){ .pied-col ul a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px} }
@media (max-width:799px){
  .pied-colonnes{grid-template-columns:1fr 1fr;text-align:left}
  .pied-colonnes .pied-col:first-child{grid-column:1 / -1;text-align:center}
  .pied-col .pied-texte{margin-inline:auto}
}
.pied-liens{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px}
.pied-liens button{color:#E9DDCB;text-decoration:underline;text-decoration-color:rgba(233,221,203,.4);text-underline-offset:3px;font-size:13px}

/* ───────────── Le panneau du panier (03/10/2026) — construit par js/commun.js (« 2 bis ») ─────────────
   Il glisse depuis la droite ; le voile assombrit la page. Pas de fondu d'opacité sur le panneau lui-même. */
.pp-voile{position:fixed;inset:0;z-index:70;background:rgba(30,21,15,.42);opacity:0;visibility:hidden;
  transition:opacity .35s, visibility 0s .35s}
.pp-voile.ouvert{opacity:1;visibility:visible;transition:opacity .35s}
.pp{position:fixed;top:0;right:0;bottom:0;z-index:80;width:min(430px, 100%);display:flex;flex-direction:column;
  background:var(--ivoire);color:var(--espresso);box-shadow:-30px 0 60px -30px rgba(30,21,15,.5);
  transform:translateX(104%);visibility:hidden;transition:transform .5s cubic-bezier(.2,.75,.2,1), visibility 0s .5s}
.pp.ouvert{transform:none;visibility:visible;transition:transform .5s cubic-bezier(.2,.75,.2,1)}
html.pp-fige{overflow:hidden}
.pp-tete{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px 16px 24px;
  background:var(--papier);border-bottom:1px solid rgba(58,42,32,.1)}
.pp-tete h2{font:600 27px/1 var(--serif);letter-spacing:-.01em}
.pp-tete h2 em{font-style:italic;font-weight:500;color:var(--bois)}
.pp-nb{font:500 13.5px/1 var(--sans);color:var(--gris-texte);letter-spacing:0;vertical-align:3px}
.pp-fermer{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;color:var(--encre);transition:background .2s, transform .3s}
.pp-fermer svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.pp-jauge{padding:12px 24px 14px;border-bottom:1px solid rgba(58,42,32,.08);background:#FBF7F1}
.pp-jauge[hidden]{display:none}
.pp-jauge-msg{display:flex;align-items:center;gap:9px;font:500 14px/1.35 var(--sans)}
.pp-jauge-msg img{width:22px;height:22px;flex:none;border-radius:5.5px}
.pp-jauge-msg svg{width:20px;height:20px;flex:none;fill:none;stroke:#2F8A5B;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pp-jauge-msg b{font-weight:700;color:var(--bois-fonce)}
.pp-barre{position:relative;height:7px;margin-top:10px;border-radius:99px;background:#E8DCCB;overflow:hidden}
.pp-barre-plein{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:inherit;
  background:linear-gradient(90deg, #B07A45, var(--bois));transition:width .9s cubic-bezier(.2,.7,.2,1)}
.pp-jauge.ok .pp-barre-plein{background:linear-gradient(90deg, #4FA676, #2F8A5B)}
.pp-corps{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:4px 24px 14px}
.pp-lignes{list-style:none}
.pp-ligne{display:grid;grid-template-columns:76px minmax(0, 1fr) auto;gap:14px;align-items:start;padding:16px 0;
  border-bottom:1px solid rgba(58,42,32,.09);transition:transform .26s, opacity .26s}
.pp.ouvert .pp-ligne{animation:pp-arrive .55s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.12s + var(--i, 0) * .05s)}
@keyframes pp-arrive{from{transform:translateX(26px)}}
.pp-ligne.part{transform:translateX(40px);opacity:0}
.pp-photo{display:block;width:76px;height:76px;border-radius:14px;overflow:hidden;background:var(--scene);
  box-shadow:0 0 0 1px rgba(58,42,32,.08)}
.pp-photo img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply}
.pp-nom{font:600 19px/1.1 var(--serif)}
.pp-nom a{text-decoration:none}
.pp-detail-l{margin-top:3px;font-size:12.5px;line-height:1.35;color:var(--gris-texte)}
.pp-grav{margin-top:3px;font:italic 500 13.5px/1.3 var(--serif);color:var(--bois-fonce)}
.pp-bas{display:flex;align-items:center;gap:10px;margin-top:10px}
.pp-qte{display:flex;align-items:center;height:32px;border-radius:99px;background:#FBF7F1;box-shadow:0 0 0 1px rgba(58,42,32,.14)}
.pp-qte button{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;color:var(--encre)}
.pp-qte button:disabled{opacity:.3;cursor:default}
.pp-qte svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.pp-qte span{min-width:18px;text-align:center;font:600 14px/1 var(--sans)}
.pp-retirer{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;color:var(--gris-texte);transition:color .2s, background .2s}
.pp-retirer svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.pp-prix{font:600 18px/1 var(--serif);text-align:right;white-space:nowrap}
.pp-prix small{display:block;margin-top:5px;font:500 11.5px/1 var(--sans);color:var(--gris-texte)}
.pp-vide{padding:40px 6px 20px;text-align:center;color:var(--gris-texte);font-size:14.5px;line-height:1.5}
.pp-vide-titre{margin-bottom:6px;font:600 24px/1.1 var(--serif);color:var(--espresso)}
.pp-vide-liens{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:20px}
.pp-vide-liens a{padding:12px 18px;border-radius:99px;background:var(--bois);color:#fff;font:600 14px/1 var(--sans);text-decoration:none}
.pp-pied{display:grid;gap:12px;padding:16px 24px calc(18px + env(safe-area-inset-bottom));border-top:1px solid rgba(58,42,32,.1);
  background:#FBF7F1;box-shadow:0 -14px 24px -20px rgba(46,33,25,.22)}
.pp-pied[hidden]{display:none}
/* L'assurance livraison : un interrupteur, jamais coché d'avance */
.pp-assurance{position:relative;display:grid;grid-template-columns:40px minmax(0, 1fr) auto auto;gap:11px;align-items:center;
  padding:11px 12px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px rgba(58,42,32,.1);cursor:pointer}
.pp-as-icone{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#F1E6D6;color:var(--bois)}
.pp-as-icone svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pp-as-texte b{display:block;font:600 14.5px/1.25 var(--sans)}
.pp-as-texte small{display:block;margin-top:2px;font-size:12px;line-height:1.35;color:var(--gris-texte)}
.pp-as-texte a{color:inherit;text-underline-offset:2px}
.pp-as-prix{font:700 14px/1 var(--sans);color:var(--bois-fonce);white-space:nowrap}
.pp-assurance input{position:absolute;opacity:0;width:1px;height:1px}
.pp-inter{position:relative;width:44px;height:26px;border-radius:99px;background:#D9CBB8;transition:background .25s}
.pp-inter::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(46,33,25,.35);transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.pp-assurance input:checked + .pp-inter{background:var(--bois)}
.pp-assurance input:checked + .pp-inter::after{transform:translateX(18px)}
.pp-assurance input:focus-visible + .pp-inter{outline:2px solid var(--bois);outline-offset:3px}
.pp-totaux{display:grid;gap:6px;font-size:13.5px;color:var(--gris-texte)}
.pp-totaux div{display:flex;justify-content:space-between;gap:12px}
.pp-totaux div[hidden]{display:none}
.pp-totaux dd{font-weight:600;color:var(--espresso)}
.pp-totaux small{font-size:12px}
.pp-offerte{color:#2F8A5B}
.pp-valider{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:8px;height:56px;
  border-radius:999px;background:var(--espresso);color:var(--creme);font:600 16px/1 var(--sans);letter-spacing:.02em;text-decoration:none;
  box-shadow:0 18px 30px -18px rgba(46,33,25,.85);transition:background .3s}
.pp-valider-prix{opacity:.8;font-weight:500}
.pp-valider 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)}
.pp-valider::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:pp-reflet 6s ease-in-out 1.2s infinite}
@keyframes pp-reflet{0%{left:-40%}14%,100%{left:120%}}
.pp-msg{padding:10px 12px;border-radius:12px;background:#F3EADD;font-size:13.5px;line-height:1.45;color:#4A382B}
.pp-detail{justify-self:center;font:500 13.5px/1 var(--sans);color:var(--bois-fonce);text-underline-offset:3px}
.pp-paie{display:flex;justify-content:center;align-items:center;gap:7px;padding-top:12px;border-top:1px dashed rgba(58,42,32,.2);
  font:600 10.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gris-texte)}
.pp-paie svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.pp-cartes{list-style:none;display:flex;justify-content:center;flex-wrap:wrap;gap:7px;margin-top:-4px}
.pp-cartes img{display:block;width:38px;height:24px}
@media (hover:hover){
  .pp-fermer:hover{background:rgba(58,42,32,.08);transform:rotate(90deg)}
  .pp-retirer:hover{color:var(--rouge);background:rgba(211,38,58,.07)}
  .pp-qte button:not(:disabled):hover{background:rgba(58,42,32,.08)}
  .pp-valider:hover{background:var(--bois-fonce)}
  .pp-valider:hover svg{transform:translateX(4px)}
  .pp-nom a:hover{color:var(--bois)}
}
@media (max-width:399px){
  .pp-tete{padding-left:18px}
  .pp-jauge,.pp-corps{padding-left:18px;padding-right:18px}
  .pp-pied{padding-left:16px;padding-right:16px}
  .pp-ligne{grid-template-columns:64px minmax(0, 1fr) auto;gap:11px}
  .pp-photo{width:64px;height:64px}
  .pp-assurance{grid-template-columns:34px minmax(0, 1fr) auto auto;gap:9px;padding:10px}
  .pp-as-icone{width:34px;height:34px}
}
@media (prefers-reduced-motion:reduce){
  .pp,.pp-voile,.pp-barre-plein,.pp-ligne{transition:none}
  .pp.ouvert .pp-ligne,.pp-valider::before{animation:none}
}

/* Outil d'essai du panier : n'existe QU'EN LOCAL (localhost), jamais sur urneanimal.fr */
.essai{position:fixed;right:14px;bottom:14px;z-index:50;background:#fff;border:1px solid #d9cbb8;
  border-radius:14px;padding:10px 12px;font:13px var(--sans);box-shadow:0 10px 30px -12px rgba(0,0,0,.35);
  display:flex;align-items:center;gap:8px}
.essai button{border:1px solid #cdb9a2;border-radius:8px;padding:4px 10px;background:#FBF6EE;font-weight:600}