/* ═══════════════════════════════════════════════════════════
   AMAYNÜ — ÉTIQUETTES D'ÉTAT
   Une pièce unique, une pièce épuisée et un sur-mesure ne disent
   pas la même chose. Un seul système, quatre tons, partout pareil.
   ═══════════════════════════════════════════════════════════ */

.et{position:absolute;top:14px;left:14px;z-index:3;
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 12px 7px 11px;
  font-family:var(--sans,sans-serif);font-size:8.5px;font-weight:400;
  letter-spacing:.24em;text-transform:uppercase;white-space:nowrap;
  color:#fff;background:rgba(20,18,16,.62);
  -webkit-backdrop-filter:blur(9px) saturate(1.2);backdrop-filter:blur(9px) saturate(1.2);
  border:1px solid rgba(255,255,255,.22);
  transition:background .5s var(--ease,ease),border-color .5s var(--ease,ease),
             color .5s var(--ease,ease),transform .5s var(--ease,ease)}

/* la pastille : c'est elle qui porte le ton */
.et::before{content:'';width:5px;height:5px;flex:none;border-radius:50%;
  background:currentColor;box-shadow:0 0 0 3px rgba(255,255,255,.14)}
.et .lb{display:block}

/* ── les quatre tons ── */
.et.t-or{color:#E4C88E}
.et.t-sang{color:#E88B98}
.et.t-encre{color:#DDD6CB}
.et.t-gris{color:#A8A29A}

/* une pièce indisponible se signale par un trait, pas par du rouge */
.et.indispo{background:rgba(20,18,16,.5);border-style:dashed}

/* ── au survol / au doigt : l'étiquette se déplie et s'explique ── */
.et .aide{display:grid;grid-template-columns:0fr;
  transition:grid-template-columns .55s var(--ease,ease),
             opacity .4s var(--ease,ease),margin-left .55s var(--ease,ease);
  opacity:0;margin-left:-8px}
.et .aide span{overflow:hidden;min-width:0;
  font-size:8.5px;letter-spacing:.1em;text-transform:none;
  color:rgba(255,255,255,.8);line-height:1.5;
  border-left:1px solid rgba(255,255,255,.26);padding-left:0}
a:hover > .ph > .et, a:hover > .et, .et:hover, .et.open{
  background:rgba(20,18,16,.86);border-color:rgba(255,255,255,.42)}
a:hover > .ph > .et .aide, a:hover > .et .aide, .et:hover .aide, .et.open .aide{
  grid-template-columns:1fr;opacity:1;margin-left:0}
a:hover > .ph > .et .aide span, a:hover > .et .aide span,
.et:hover .aide span, .et.open .aide span{padding-left:10px}

/* pas de survol au doigt : on plie tout et on garde l'étiquette courte */
@media(hover:none){
  .et .aide{display:none}
  .et{font-size:8px;padding:6px 10px 6px 9px;letter-spacing:.2em}
}

/* ── la mention libre (Sfumato, Édition limitée…) ── */
.signe{position:absolute;top:14px;right:14px;z-index:3;
  font-size:8px;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(255,255,255,.9);text-shadow:0 1px 10px rgba(0,0,0,.7);
  padding:6px 2px;border-bottom:1px solid rgba(255,255,255,.4)}

/* ── voile sur une pièce indisponible ── */
.ph.est-indispo::after{content:'';position:absolute;inset:0;z-index:2;
  pointer-events:none;background:rgba(12,11,10,.34)}
.ph.est-indispo img{filter:grayscale(.55) brightness(.9)}

/* ── version en ligne, dans la fiche produit ── */
.et.inline{position:static;display:inline-flex;margin-bottom:20px;
  color:#1C1A17;background:rgba(28,26,23,.06);
  border-color:rgba(28,26,23,.24);backdrop-filter:none}
.et.inline .aide span{color:#5A554E;border-left-color:rgba(28,26,23,.22)}
.et.inline.t-or{color:#8A6C36}
.et.inline.t-sang{color:#6E1220}
.et.inline.t-encre{color:#3A342E}
.et.inline.t-gris{color:#7C7770}
/* dans la fiche l'explication est toujours dépliée : il y a la place */
.et.inline .aide{grid-template-columns:1fr;opacity:1;margin-left:0}
.et.inline .aide span{padding-left:10px}

/* ═══════════════════════════════════════════════════════════════
   PRIX ET DISPONIBILITÉ

   Parti pris : une étiquette de luxe ne crie pas. Pas de pastille
   rouge, pas de ruban en diagonale, pas de gras. Un point de quatre
   pixels, un filet, et le mot écrit petit et très espacé — la graisse
   du reste du site.

   Et surtout : LE CAS NORMAL NE S'ANNONCE PAS. Une pièce disponible
   et sans particularité ne porte aucune marque sur les grilles. On ne
   signale que ce qui change quelque chose pour le visiteur.
   ═══════════════════════════════════════════════════════════════ */

/* ── le prix ── */
.prix{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(24px,2.6vw,32px); line-height:1;
  color:var(--ink); letter-spacing:.005em; white-space:nowrap;
}
.prix i{
  font-family:var(--sans); font-style:normal;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--grey); margin-left:9px; vertical-align:.32em;
}
.prix-demande{
  font-style:italic; font-size:clamp(19px,2.1vw,25px);
  color:#3A342E;
}

/* ── la disponibilité, sur une fiche ── */
.dispo{
  display:flex; align-items:center; gap:10px;
  margin:0; font-size:9.5px; letter-spacing:.26em;
  text-transform:uppercase; font-weight:400; color:var(--grey);
}
.dispo span{ width:4px; height:4px; border-radius:50%;
  background:currentColor; flex:none }

.dispo--dispo  { color:#2E6B4F }
.dispo--unique { color:var(--gold) }
.dispo--mesure { color:var(--grey) }
.dispo--epuise { color:var(--grey) }
.dispo--partie { color:var(--blood) }

/* L'exemplaire unique mérite qu'on s'y arrête une seconde : un halo très
   léger, qui respire lentement. Rien de clignotant — une pièce de
   couture n'a pas à agiter les bras. */
.dispo--unique span{
  box-shadow:0 0 0 0 rgba(168,138,92,.5);
  animation:amaynuSouffle 3.4s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes amaynuSouffle{
  0%,100%{ box-shadow:0 0 0 0   rgba(168,138,92,.45) }
  50%    { box-shadow:0 0 0 5px rgba(168,138,92,0)   }
}
@media(prefers-reduced-motion:reduce){
  .dispo--unique span{ animation:none; box-shadow:0 0 0 3px rgba(168,138,92,.22) }
}

/* ── la pastille, sur une grille ── */
/* Posée sur un voile de papier plutôt que sur un aplat de couleur :
   elle se lit sans trouer la photo. */
.pastille{
  position:absolute; bottom:12px; left:12px; z-index:4;
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 12px;
  background:rgba(251,249,245,.92);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(28,26,23,.14);
  font-size:8px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--grey); white-space:nowrap; pointer-events:none;
}
.pastille::before{
  content:''; width:4px; height:4px; border-radius:50%;
  background:currentColor; flex:none;
}
.pastille--unique{ color:var(--gold) }
.pastille--partie{ color:var(--blood); border-color:rgba(110,18,32,.3) }
.pastille--epuise{ color:var(--grey) }

/* Une pièce partie se retire du regard sans disparaître : l'image perd
   un peu de sa couleur, et la retrouve au survol. */
.est-partie img{
  filter:saturate(.42) opacity(.78);
  transition:filter .7s var(--ease);
}
.est-partie:hover img{ filter:saturate(.92) opacity(1) }

@media(max-width:720px){
  .pastille{ bottom:8px; left:8px; padding:6px 10px; font-size:7.5px }
}

/* la pastille se pose dans le cadre : il lui faut un parent positionné */
.ph, .grid .it, .mgrid a, .scard{ position:relative }

/* le montant secondaire, sous le prix facturé */
.prix-sec{
  display:block; margin-top:7px;
  font-family:var(--sans); font-weight:300;
  font-size:12.5px; letter-spacing:.06em; color:var(--grey);
}
.prix-sec::before{ content:'≈ '; opacity:.6 }