/* urneanimal.fr — la mise en page COMMUNE aux pages de catégorie (« Urnes en bois », « Urnes en
   céramique »…). Les cartes sont construites par js/categorie.js depuis js/catalogue.js.
   Chaque page garde ses textes et son motif en filigrane (.cat-motif : le veinage du bois, les
   cercles du tour de potier…).
   ⚠ Quand on modifie ce fichier : changer le ?v= dans TOUTES les pages. */
.categorie{max-width:1260px;margin:0 auto;padding:22px clamp(16px, 4vw, 60px) clamp(56px, 8vw, 110px)}

@keyframes monte{from{transform:translateY(18px)}}   /* déplacement seul, jamais d'opacité */

.cat-tete{position:relative;isolation:isolate;margin-top:clamp(18px, 3vw, 40px);padding-bottom:clamp(22px, 2.8vw, 34px);
  display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);gap:18px 60px;align-items:end;
  border-bottom:1px solid rgba(58,42,32,.12)}
.cat-tete > *{animation:monte 1s cubic-bezier(.2,.7,.2,1) both}
.cat-sur{grid-column:1 / -1;display:flex;align-items:center;gap:11px;font:600 11px/1 var(--sans);letter-spacing:.26em;
  text-transform:uppercase;color:var(--bois)}
.cat-sur::before{content:"";width:28px;height:1px;background:currentColor;opacity:.7}
.cat-tete h1{font:600 clamp(46px, 5.6vw, 82px)/.92 var(--serif);letter-spacing:-.015em}
.cat-tete h1 em{font-style:italic;font-weight:500;color:var(--bois)}
.cat-intro{max-width:32em;font:italic 400 clamp(18px, 1.5vw, 21px)/1.45 var(--serif);color:#5C4636;animation-delay:.08s}
/* Le motif de la page (quelques traits), en filigrane derrière le titre */
.cat-motif{position:absolute;right:0;top:-6px;width:min(46%, 520px);height:auto;z-index:-1;pointer-events:none;
  fill:none;stroke:rgba(122,74,38,.13);stroke-width:1.2;stroke-linecap:round}

.cat-barre{display:flex;justify-content:space-between;align-items:center;margin-top:20px;font-size:13.5px;color:var(--gris-texte)}
.cat-barre strong{color:var(--espresso);font-weight:600}

/* ── La grille des urnes ── */
/* 03/10 (demande de Nino) : plus d'urnes d'un coup d'œil — 4 par rangée sur ordinateur, 3 sur tablette
   ET sur téléphone (cartes resserrées, voir la fin du fichier). */
.grille{list-style:none;display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:clamp(18px, 2vw, 28px);margin-top:22px}
.carte{position:relative;animation:monte 1s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.12s + var(--i, 0) * .07s)}
.carte-scene{position:relative;aspect-ratio:1;border-radius:18px;overflow:hidden;background:var(--scene);
  border:1px solid rgba(58,42,32,.07);box-shadow:0 26px 50px -40px rgba(46,33,25,.6);
  transition:box-shadow .45s, transform .45s cubic-bezier(.2,.7,.2,1)}
/* Les photos des animaux, empilées : la choisie est au-dessus, les autres attendent en fondu */
.carte-scene img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply;
  opacity:0;transform:scale(1.02);transition:opacity .5s, transform .8s cubic-bezier(.2,.7,.2,1)}
.carte-scene img.active{opacity:1;transform:scale(1)}
.carte-nb{position:absolute;right:14px;top:14px;z-index:1;font:500 12px/1 var(--sans);color:var(--gris-texte);
  letter-spacing:.08em;padding:6px 0}
/* Une urne qui se prend aussi par deux : « Les deux : 49 € », en pastille, en haut à gauche */
.carte-lot{position:absolute;left:14px;top:14px;z-index:1;padding:7px 11px;border-radius:999px;background:rgba(255,252,247,.9);
  box-shadow:0 0 0 1px rgba(58,42,32,.1);font:600 12.5px/1 var(--sans);color:var(--bois-fonce);white-space:nowrap}
.carte-grave{display:inline-flex;align-items:center;gap:6px}
.carte-grave svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.carte-voir{position:absolute;left:50%;bottom:16px;z-index:1;display:inline-flex;align-items:center;gap:8px;
  padding:10px 16px;border-radius:999px;background:var(--espresso);color:var(--creme);font:600 13px/1 var(--sans);
  white-space:nowrap;transform:translate(-50%, 70px);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.carte-voir svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.carte-animaux{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:5px;margin-top:12px}
.carte-animal{width:28px;height:28px;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}
.carte-animal img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply;transform:scale(1.3)}
.carte-animal[aria-pressed="true"]{box-shadow:0 0 0 2px var(--ivoire), 0 0 0 3.2px var(--bois);transform:translateY(-2px)}
/* Urne à modèle unique : sa taille à la place des pastilles (même hauteur : les noms restent alignés) */
.carte-taille{display:flex;align-items:center;gap:6px;width:fit-content;height:28px;margin-top:12px;padding:0 11px 0 9px;
  border-radius:999px;background:#FBF7F1;border:1px solid rgba(58,42,32,.1);font:600 12px/1 var(--sans);color:var(--espresso)}
.carte-taille svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--bois);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}

.carte-corps{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:10px}
.carte-nom{font:600 clamp(19px, 1.7vw, 23px)/1.1 var(--serif);letter-spacing:-.005em}
.carte-nom a{text-decoration:none;background:linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition:background-size .45s cubic-bezier(.2,.7,.2,1)}
/* Toute la carte est cliquable (le lien du nom s'étend dessus) ; les pastilles restent au-dessus */
.carte-nom a::after{content:"";position:absolute;inset:0;z-index:1;border-radius:18px}
.carte-nom a:focus-visible{outline:none}
.carte-nom a:focus-visible::after{outline:2px solid var(--bois);outline-offset:6px}
.carte-prix{font:600 clamp(17px, 1.45vw, 20px)/1 var(--serif);white-space:nowrap}
/* Plusieurs modèles à plusieurs prix : « dès 59 € », puis le prix du modèle survolé */
.carte-des{margin-right:2px;font:500 13px/1 var(--sans);color:var(--gris-texte)}
.carte-accroche{margin-top:4px;font-size:13px;line-height:1.4;color:var(--gris-texte)}

@media (hover:hover){
  .carte:hover .carte-scene{transform:translateY(-4px);box-shadow:0 34px 60px -38px rgba(46,33,25,.7)}
  .carte:hover .carte-scene img.active{transform:scale(1.045)}
  .carte:hover .carte-voir{transform:translate(-50%, 0)}
  .carte:hover .carte-nom a{background-size:100% 1px}
  .carte-animal:hover{transform:translateY(-2px)}
}

.cat-suite{margin-top:clamp(40px, 6vw, 70px);text-align:center;font:italic 400 19px/1.4 var(--serif);color:#5C4636}
.cat-suite::before{content:"";display:block;width:44px;height:1px;margin:0 auto 18px;background:var(--bois);opacity:.5}

@media (max-width:1023px){
  .grille{grid-template-columns:repeat(3, minmax(0, 1fr))}
}
@media (max-width:767px){
  .cat-tete{grid-template-columns:minmax(0, 1fr)}
  .cat-motif{width:70%;top:10px}
  .carte-voir{display:none}
}
/* TÉLÉPHONE : 3 urnes par rangée (03/10) — la photo, le nom, le prix ; le reste est sur la fiche. */
@media (max-width:599px){
  .grille{gap:16px 9px;margin-top:16px}
  .carte-scene{border-radius:12px}
  .carte-nom a::after{border-radius:12px}
  .carte-animaux,.carte-taille,.carte-accroche,.carte-nb{display:none}
  .carte-corps{display:block;margin-top:7px}
  .carte-nom{font-size:15px;line-height:1.12;letter-spacing:0}
  .carte-prix{margin-top:4px;font-size:14px}
  .carte-des{font-size:10.5px}
  .carte-lot{left:6px;top:6px;padding:4px 7px;font-size:9.5px;letter-spacing:0}
  .carte-grave{gap:3px}
  .carte-grave svg{width:10px;height:10px}
  .carte-grave-plus{display:none}
}
@media (prefers-reduced-motion:reduce){
  .cat-tete > *,.carte{animation:none}
  .carte-scene,.carte-scene img,.carte-voir,.carte-animal,.carte-nom a{transition:none}
}

/* Les offres (04/10/2026) : le vrai prix d'avant, barré (js/categorie.js), et « −N % » sur la photo */
.carte-avant{margin-left:6px;font-size:.78em;font-weight:500;color:var(--gris-texte);text-decoration-thickness:1.3px}
.carte-offre{position:absolute;left:14px;bottom:14px;z-index:1;padding:6px 10px 5px;border-radius:999px;background:#B3261E;color:#fff;
  font:700 12px/1 var(--sans);letter-spacing:.02em;box-shadow:0 8px 18px -10px rgba(120,20,15,.8)}
@media (max-width:599px){ .carte-offre{left:6px;bottom:6px;padding:4px 7px;font-size:10px} }