/* ==========================================================================
   Micro-interactions — Anatole Lebreton
   Six comportements validés. Chaque bloc est indépendant : on peut en
   intégrer un sans les autres.
   ========================================================================== */

:root {
  --alb-sand:  #E6E2D5;
  --alb-navy:  #090947;
  --alb-lime:  #DCFE54;
  --alb-teal:  #0B4650;
  --alb-grey:  #D7D5CE;
}

/* ==========================================================================
   1 · AJOUT AU PANIER — états du bouton
   ========================================================================== */

.alb-btn-cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 28px;
  border: 0;
  border-radius: 4px;
  background: var(--alb-lime);
  color: var(--alb-teal);
  font: 700 14px/1.2 Montserrat, system-ui, sans-serif;
  letter-spacing: .02em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 200ms, color 200ms, opacity 200ms;
}
/* Le bouton est désormais un <a> (il mène à la fiche Ecwid) : il faut donc
   retirer le soulignement, et `text-align` ne vient plus du <button>. */
a.alb-btn-cart, a.alb-quick-buy { text-decoration: none; text-align: center; }
a.alb-btn-cart:hover, a.alb-quick-buy:hover { text-decoration: none; }

.alb-btn-cart:hover:not(:disabled) { background: var(--alb-teal); color: var(--alb-lime); }
.alb-btn-cart:focus-visible { outline: 2px solid var(--alb-navy); outline-offset: 3px; }
.alb-btn-cart:disabled { cursor: default; }

/* L'icône du Figma est un tracé PLEIN en 32 × 35 (ratio 0,914), pas un
   contour. D'où `fill: currentColor` et non `fill: none` + stroke : avec
   l'ancienne règle le panier devenait invisible et seul un liséré douteux
   restait. Et la hauteur suit le ratio, sinon l'icône est écrasée. */
.alb-btn-cart__icon { width: 20px; height: 22px; flex: 0 0 20px; }
.alb-btn-cart__icon svg { width: 100%; height: 100%; display: block; fill: currentColor; }
.alb-btn-cart__label { display: inline-block; }

/* Message d'échec d'ajout. Discret mais lisible : un panier qui refuse en
   silence est la première cause d'abandon qu'on ne voit jamais dans les
   statistiques. */
.alb-cart-status {
  margin: 10px 0 0;
  font: 400 13px/1.4 Montserrat, system-ui, sans-serif;
  color: #8A2B2B;
}
.alb-cart-status[hidden] { display: none; }

/* État « ajout en cours » */
.alb-btn-cart.is-loading { opacity: .75; pointer-events: none; }
.alb-btn-cart.is-loading .alb-btn-cart__icon svg { animation: alb-spin 800ms linear infinite; }

/* État « ajouté » */
.alb-btn-cart.is-added {
  background: var(--alb-teal);
  color: #fff;
  pointer-events: none;
}

@keyframes alb-spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   1 bis · AJOUT RAPIDE SUR CARTE — pastille qui s'élargit au survol

   Technique : on anime grid-template-columns de `auto 0fr` à `auto 1fr`.
   C'est la seule façon propre d'animer une largeur vers le contenu sans
   connaître cette largeur à l'avance — aucun max-width arbitraire.
   Le label glisse de derrière l'icône (translateX 100% → 0).

   Support : Chrome 107+, Safari 16+, Firefox 120+. Au-delà, le label
   apparaît sans glisser — dégradation acceptable.
   ========================================================================== */

/* Mesures relevées sur les deux états Figma :
   replié 40 × 40, déployé 187 × 40, rayon 8, fond #DCFE54 dans les deux cas.
   Le fond ne change pas au survol : c'est le déploiement qui fait l'état. */

.alb-quick-buy {
  display: grid;
  align-content: center;
  height: 40px;
  padding: 0 11px;
  border: 0;
  border-radius: 8px;
  background: var(--alb-lime);
  color: var(--alb-navy);
  cursor: pointer;
  overflow: hidden;                 /* masque le label replié */
}

.alb-quick-buy__content {
  display: inline-grid;
  align-items: center;
  grid-template-columns: auto 0fr;  /* icône + colonne de largeur nulle */
  gap: 0;
  transition: grid-template-columns 300ms cubic-bezier(.4, 0, .2, 1),
              gap 300ms cubic-bezier(.4, 0, .2, 1);
}

.alb-quick-buy__icon { display: inline-grid; }
.alb-quick-buy__icon svg { width: 18px; height: 21px; display: block; }

/* Confirmation : le « + » s'efface pendant qu'une coche se dessine à sa place.
   Le sac ne bouge pas, le label ne change pas, le fond non plus.
   La longueur réelle du tracé de la coche est 8,93 — d'où le dasharray à 9. */

.alb-quick-buy__icon .alb-bag   { fill: currentColor; }

.alb-quick-buy__icon .alb-plus  {
  fill: currentColor;
  transform-origin: 19.9px 22.1px;  /* centre du « + » dans le viewBox */
  transition: opacity 200ms, transform 250ms cubic-bezier(.4, 0, .2, 1);
}

.alb-quick-buy__icon .alb-check {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 9;
  stroke-dashoffset: 9;             /* coche masquée au repos */
  transition: stroke-dashoffset 350ms cubic-bezier(.4, 0, .2, 1);
}

.alb-quick-buy.is-added .alb-plus  { opacity: 0; transform: scale(.4); }
.alb-quick-buy.is-added .alb-check { stroke-dashoffset: 0; }

.alb-quick-buy__label {
  display: inline-block;
  width: 100%;
  min-width: 0;                     /* indispensable : rend la colonne repliable */
  white-space: nowrap;
  font: 500 15px/1 Montserrat, system-ui, sans-serif;
  text-transform: none;             /* « Ajouter au panier », pas en capitales */
  transform: translateX(100%);
  opacity: 0;
  transition: transform 300ms cubic-bezier(.4, 0, .2, 1), opacity 300ms;
}

/* Déploiement — au survol du bouton, au survol de la carte, au focus clavier,
   ou sur demande via .is-open (tactile, où le survol n'existe pas). */
.alb-quick-buy:hover               .alb-quick-buy__content,
.alb-quick-buy:focus-visible       .alb-quick-buy__content,
.alb-quick-buy.is-open             .alb-quick-buy__content,
.alb-card:hover .alb-quick-buy     .alb-quick-buy__content {
  grid-template-columns: auto 1fr;
  gap: 14px;
}
.alb-quick-buy:hover               .alb-quick-buy__label,
.alb-quick-buy:focus-visible       .alb-quick-buy__label,
.alb-quick-buy.is-open             .alb-quick-buy__label,
.alb-card:hover .alb-quick-buy     .alb-quick-buy__label {
  transform: translateX(0);
  opacity: 1;
}

.alb-quick-buy:focus-visible { outline: 2px solid var(--alb-navy); outline-offset: 3px; }
.alb-quick-buy:active { transform: scale(.97); }

/* États — le fond reste citron en permanence, y compris après l'ajout :
   c'est la coche qui porte la confirmation, rien d'autre. */
.alb-quick-buy.is-loading { pointer-events: none; opacity: .7; }
.alb-quick-buy.is-busy    { pointer-events: none; }
.alb-quick-buy:disabled   { background: var(--alb-grey); color: #717171; cursor: default; pointer-events: none; }

/* Position sur la carte produit : en bas à droite du visuel */
.alb-quick-buy__container {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 2;
}

/* Sur tactile, pas de survol — et laisser le label déployé en permanence
   ferait déborder la pastille hors de la carte. On reste donc en icône
   seule : l'aria-label porte déjà « Ajouter au panier : <produit> ».
   Le JS déclenche un déploiement d'une seconde à l'entrée dans l'écran
   (classe .is-open), juste pour enseigner l'affordance. */

/* Garde-fou : la pastille ne dépasse jamais de son conteneur */
.alb-quick-buy { max-width: 100%; }
.alb-quick-buy__container { max-width: calc(100% - 28px); }

/* ==========================================================================
   1b · PANIER LATÉRAL — glisse depuis la droite en 300 ms
   ========================================================================== */

.alb-drawer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  visibility: hidden;
  pointer-events: none;
}
.alb-drawer.is-open { visibility: visible; pointer-events: auto; }

.alb-drawer__overlay {
  position: absolute;
  inset: 0;
  background: rgba(9, 9, 71, .35);
  opacity: 0;
  transition: opacity 300ms ease;
}
.alb-drawer.is-open .alb-drawer__overlay { opacity: 1; }

.alb-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(420px, 100%);
  background: #fff;
  box-shadow: -8px 0 40px rgba(9, 9, 71, .12);
  transform: translateX(100%);
  transition: transform 300ms cubic-bezier(.4, 0, .2, 1);
  display: flex;
  flex-direction: column;
}
.alb-drawer.is-open .alb-drawer__panel { transform: translateX(0); }

.alb-drawer__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px; border-bottom: 1px solid var(--alb-sand);
}
.alb-drawer__body  { flex: 1; overflow-y: auto; padding: 24px; }
.alb-drawer__footer{ padding: 24px; border-top: 1px solid var(--alb-sand); }

/* Empêche le scroll de la page derrière le panier */
body.alb-no-scroll { overflow: hidden; }

/* ==========================================================================
   2 · COMPTEUR DU PANIER — impulsion au changement
   ========================================================================== */

.alb-cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--alb-navy);
  color: #fff;
  font: 700 11px/1 Montserrat, system-ui, sans-serif;
}
.alb-cart-count.is-bump { animation: alb-bump 400ms cubic-bezier(.3, 1.6, .5, 1); }

@keyframes alb-bump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}

/* ==========================================================================
   3 · FILTRES PAR FAMILLE — réorganisation animée
   ========================================================================== */

.alb-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
@media (max-width: 1024px) { .alb-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .alb-grid { grid-template-columns: 1fr; } }

.alb-grid__item { transition: opacity 200ms ease; }
.alb-grid__item.is-hidden { display: none; }
.alb-grid__item.is-entering { opacity: 0; }

/* Barre de filtres — d'après la maquette :
   libellés séparés par un trait citron vertical, bloc citron plein
   derrière le filtre actif. Chaque collection garde sa typographie. */

.alb-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  margin-bottom: 36px;
}

.alb-filter {
  position: relative;
  padding: 8px 14px;
  border: 0;
  background: transparent;
  color: var(--alb-navy);
  font: 400 20px/1.2 Montserrat, system-ui, sans-serif;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease;
}

/* trait citron entre deux filtres */
.alb-filter + .alb-filter { margin-left: 34px; }
.alb-filter + .alb-filter::before {
  content: "";
  position: absolute;
  left: -19px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 30px;
  background: var(--alb-lime);
}

/* état actif : bloc citron plein derrière le libellé */
.alb-filter[aria-pressed="true"] { background: var(--alb-lime); color: var(--alb-navy); }
.alb-filter:hover:not([aria-pressed="true"]) { background: rgba(220, 254, 84, .35); }
.alb-filter:focus-visible { outline: 2px solid var(--alb-navy); outline-offset: 2px; }

/* identités typographiques — une classe par collection */
.alb-filter--display   { font-family: ElliotSix, Montserrat, sans-serif; text-transform: uppercase; }
.alb-filter--origines  { font-family: "EB Garamond", Georgia, serif; font-style: italic; font-size: 26px; }
.alb-filter--artefacts { font-family: "Anti Design Endeavour", Montserrat, sans-serif; letter-spacing: .06em; }
/* Interstices — les éditions en collaboration. Fonte à arrêter (cf. décisions
   en attente) ; en l'état on reprend la romaine d'Origines sans l'italique,
   pour que la parenté se voie sans que les deux se confondent. */
.alb-filter--interstices { font-family: "EB Garamond", Georgia, serif; font-size: 24px; }

@media (max-width: 640px) {
  .alb-filter { font-size: 16px; padding: 6px 10px; }
  .alb-filter + .alb-filter { margin-left: 22px; }
  .alb-filter + .alb-filter::before { left: -13px; height: 22px; width: 3px; }
}

/* ==========================================================================
   4 · SÉLECTEUR DE FORMAT — le prix se met à jour visiblement
   ========================================================================== */

.alb-price {
  display: inline-block;
  font: 600 20px/1.3 Montserrat, system-ui, sans-serif;
  color: var(--alb-navy);
  transition: opacity 150ms ease, transform 150ms ease;
}
.alb-price.is-updating { opacity: 0; transform: translateY(-4px); }

/* ==========================================================================
   5 · NAVIGATION — se cache au scroll vers le bas
   ========================================================================== */

.alb-nav {
  position: sticky;
  top: 0;
  z-index: 900;
  background: var(--alb-sand);
  transform: translateY(0);
  transition: transform 300ms cubic-bezier(.4, 0, .2, 1), box-shadow 300ms;
}
.alb-nav.is-hidden { transform: translateY(-100%); }
.alb-nav.is-stuck  { box-shadow: 0 2px 16px rgba(9, 9, 71, .08); }

/* ==========================================================================
   6 · IMAGES — ratio réservé et fondu au chargement
   ========================================================================== */

.alb-media {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--alb-sand);   /* couleur d'attente, évite le flash blanc */
  aspect-ratio: var(--alb-ratio, 4 / 5);
}
.alb-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 400ms ease;
}
.alb-media img.is-loaded { opacity: 1; }

/* ==========================================================================
   MOUVEMENT RÉDUIT — tout se coupe proprement
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .alb-drawer__panel,
  .alb-drawer__overlay,
  .alb-nav,
  .alb-price,
  .alb-grid__item,
  .alb-media img { transition: none !important; }

  /* l'ajout rapide : pas de glissement, la coche apparaît sans se dessiner */
  .alb-quick-buy__content,
  .alb-quick-buy__label,
  .alb-quick-buy__icon .alb-plus,
  .alb-quick-buy__icon .alb-check { transition: none !important; }

  .alb-cart-count.is-bump { animation: none; }
  .alb-btn-cart.is-loading .alb-btn-cart__icon svg { animation: none; }
  .alb-nav.is-hidden { transform: none; }   /* la nav reste visible */
}