/* ==========================================================================
   Liste de naissance (liste-naissance.html) — préfixe ln-
   S'appuie sur base.css (jetons --pc-*, composants pc-*) (dont le cœur de la liste).
   Mobile d'abord. Repères : 36em, 48em, 64em.
   ========================================================================== */

.ln-hero { padding-block: var(--pc-space-2) var(--pc-space-6); }
.ln-hero__titre { margin-top: var(--pc-space-3); max-width: 22ch; overflow-wrap: anywhere; }
.ln-hero__intro { margin-top: var(--pc-space-4); max-width: 44rem; }
.ln-hero__intro:empty { display: none; }

.ln-page { padding-bottom: var(--pc-section); }

/* --- Mise en page : modèles + panneau de partage --- */
.ln-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pc-space-7);
}
@media (min-width: 64em) {
  .ln-grille { grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem); align-items: start; }
  .ln-partage { position: sticky; top: calc(var(--pc-header-h) + 1.25rem); }
}

.ln-section__titre {
  font-family: var(--pc-font-titre);
  font-variation-settings: var(--pc-soft);
  font-size: var(--pc-fs-xl);
  font-weight: 520;
  line-height: 1.2;
}
.ln-section__note { margin-top: var(--pc-space-2); font-size: var(--pc-fs-sm); color: var(--pc-texte-doux); }

/* --- Modèles --- */
.ln-liste {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pc-space-4);
  margin-top: var(--pc-space-5);
}
@media (min-width: 48em) and (max-width: 63.99em) {
  .ln-liste--partage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64em) {
  .ln-liste--partage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ln-item {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: var(--pc-space-4);
  padding: var(--pc-space-4);
  border: 1px solid var(--pc-trait);
  border-radius: var(--pc-radius-m);
  background: var(--pc-surface);
}
@media (min-width: 48em) { .ln-item { grid-template-columns: 11rem minmax(0, 1fr); } }

.ln-item__media {
  position: relative;
  display: block;
  align-self: start;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--pc-radius-s);
  background: var(--pc-papier);
}
.ln-item__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ln-item__img.is-packshot { object-fit: contain; padding: 8%; mix-blend-mode: multiply; }
.ln-item__media--vide,
.ln-item__media:not(:has(img)) { display: grid; place-items: center; }
.ln-item__marque { width: 2.75rem; height: 2.75rem; --pc-logo-fond: var(--pc-cuir-pale); --pc-logo-trait: var(--pc-cuir); }

.ln-item__corps { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.ln-item__nom {
  font-family: var(--pc-font-titre);
  font-variation-settings: var(--pc-soft);
  font-size: var(--pc-fs-lg);
  font-weight: 560;
  line-height: 1.15;
}
.ln-item__lien { color: var(--pc-encre); text-decoration: none; }
.ln-item__lien:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.ln-item__meta { font-size: var(--pc-fs-sm); color: var(--pc-texte-doux); }
.ln-item__meta .pc-price { font-size: var(--pc-fs-sm); }
.ln-item__pointure { max-width: 20rem; }
.ln-item__taille { font-size: var(--pc-fs-sm); }
.ln-item__taille-label { color: var(--pc-texte-doux); }
.ln-item__taille strong { font-size: var(--pc-fs-base); font-weight: 650; }

.ln-item__dispo {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  font-size: var(--pc-fs-xs);
  line-height: 1.35;
  color: var(--pc-encre-douce);
}
.ln-item__dispo::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--pc-vert);
  transform: translateY(-0.05em);
}
.ln-item__dispo[data-niveau="faible"] { color: var(--pc-terracotta-fonce); }
.ln-item__dispo[data-niveau="faible"]::before { background: var(--pc-terracotta); }
.ln-item__dispo[data-niveau="epuise"],
.ln-item__dispo[data-niveau="absent"],
.ln-item__dispo[data-niveau="aucune"] { color: var(--pc-texte-doux); }
.ln-item__dispo[data-niveau="epuise"]::before,
.ln-item__dispo[data-niveau="absent"]::before,
.ln-item__dispo[data-niveau="aucune"]::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--pc-trait-fort); }

.ln-item__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
  margin-top: auto;
  padding-top: 0.25rem;
}
.ln-item__autre { display: inline-flex; align-items: center; min-height: var(--pc-tap); font-size: var(--pc-fs-sm); }

/* Très petits écrans : vignette au-dessus du texte */
@media (max-width: 22.49em) {
  .ln-item { grid-template-columns: minmax(0, 1fr); }
  .ln-item__media { max-width: 9rem; }
}

/* Bouton présenté comme un lien (action dans la page) */
.ln-lien-bouton {
  display: inline-flex;
  align-items: center;
  min-height: var(--pc-tap);
  color: var(--pc-lien);
  font-size: var(--pc-fs-sm);
  font-weight: 550;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  border-radius: var(--pc-radius-xs);
}
.ln-lien-bouton:hover { color: var(--pc-action-survol); text-decoration-thickness: 2px; }

/* --- Partage --- */
.ln-partage {
  display: flex;
  flex-direction: column;
  gap: var(--pc-space-4);
  padding: var(--pc-space-5);
  border-radius: var(--pc-radius-l);
  background: var(--pc-creme);
}
.ln-partage .ln-section__titre { font-size: var(--pc-fs-lg); }
.ln-partage__texte { font-size: var(--pc-fs-sm); color: var(--pc-encre-douce); }
.ln-partage__lien { display: flex; flex-direction: column; gap: 0.375rem; }
.ln-partage__url { font-size: var(--pc-fs-sm); }
.ln-partage__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-top: 0.375rem; }
.ln-partage__apercu { display: inline-flex; align-items: center; min-height: var(--pc-tap); font-size: var(--pc-fs-sm); }
.ln-partage__statut { font-size: var(--pc-fs-sm); font-weight: 600; color: var(--pc-vert); }
.ln-partage__statut:empty { display: none; }
.ln-partage__note { font-size: var(--pc-fs-xs); line-height: 1.45; color: var(--pc-texte-doux); }

/* --- Liste reçue : « C'est votre liste ? » --- */
.ln-recuperer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--pc-space-2);
  max-width: 40rem;
  margin-top: var(--pc-space-7);
  padding-top: var(--pc-space-5);
  border-top: 1px solid var(--pc-trait);
  font-size: var(--pc-fs-sm);
  color: var(--pc-encre-douce);
}
.ln-recuperer__titre { font-size: var(--pc-fs-base); font-weight: 650; color: var(--pc-encre); }
.ln-recuperer__statut:empty { display: none; }
.ln-recuperer__statut .pc-link { display: inline-flex; align-items: center; min-height: var(--pc-tap); }

/* --- États --- */
.ln-vide { padding-top: var(--pc-space-4); }
.ln-vide__coeur {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  color: var(--pc-terracotta-fonce);
  background: var(--pc-creme);
}
.ln-vide__coeur .pc-liste-coeur { width: 1.75rem; height: 1.75rem; }
.ln-vide .pc-empty__title:focus { outline: none; }
.ln-reessayer { margin-top: var(--pc-space-4); }