/* MON LIVRE, REFONTE DE LISIBILITÉ (handoff Refontes/design_handoff_mon_livre, 03/11/2026)
   ------------------------------------------------------------------
   Écrite à la main d'après la maquette : toutes les classes sont préfixées `lb-` et vivent sous
   `.lb` (la maquette avait .cd, .th, .fav, .pop, .more…, des noms pris ailleurs dans l'appli).
   Les couleurs passent par les jetons de l'appli (--surface, --primary, --line…) pour suivre les
   ambiances ; les valeurs de la maquette restent en repli.
   Une seule page pour l'ordinateur et le téléphone : 1 colonne, puis 2 à 760 px, 3 à 1 000 px,
   mesurés sur la largeur du livre lui-même (container query), pas sur l'écran. */

.lb {
  --lb-ink: var(--ink, #2A211B);
  --lb-ink2: var(--ink-soft, #6A5C4C);
  --lb-muted: var(--muted, #9C8B79);
  --lb-line: var(--line, #EEDFC2);
  --lb-line2: #E6D3AE;
  --lb-cream: var(--surface-2, #FFF8EA);
  --lb-cream2: #FCEFD9;
  --lb-bg: var(--bg, #FFF9EE);
  --lb-card: var(--surface, #fff);
  --lb-or: var(--primary, #F0682F);
  --lb-or-d: var(--primary-ink, #DA541E);
  --lb-or-bg: var(--primary-bg, #FCE3D8);
  --lb-vert: var(--green, #33A15B);
  --lb-vert-d: #2C8B4E;
  --lb-vert-bg: var(--green-bg, #E6F3E9);
  --lb-sol: var(--gold, #FFC53D);
  --lb-sol-d: #B07800;
  --lb-sol-bg: var(--gold-bg, #FFF1D2);
  --lb-sombre: #33261B;
  --lb-plume: #2B3F7A;
  --lb-fd: var(--font-display, "Bricolage Grotesque", system-ui, sans-serif);
  --lb-fb: var(--font-body, "Hanken Grotesk", system-ui, sans-serif);
  --lb-fh: "Caveat", cursive;
  --lb-ressort: cubic-bezier(.3, 1.35, .45, 1);
  container: lb / inline-size;
  position: relative;
  color: var(--lb-ink);
}
/* Confinées SANS poids (:where sur la racine aussi) : « .lb button » pesait plus que .btn et retirait
   leur police aux boutons du brouillon de famille (vu le 03/11/2026). */
:where(.lb) :where(button) { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
:where(.lb) :where(h1, h2, h3, p) { margin: 0; }
.lb-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- la ligne du haut : onglets à gauche, « Ajouter une recette » à droite ---------- */
.lb-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.lb-seg { display: inline-grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 14px; background: var(--lb-card); border: 1.5px solid var(--lb-line); }
.lb-seg button { min-height: 40px; padding: 0 18px; border-radius: 10px; font: 800 14px var(--lb-fd); color: var(--lb-ink2); transition: background .25s, color .25s; }
.lb-seg button[aria-selected="true"] { background: var(--lb-sombre); color: #fff; }
.lb-addw { position: relative; }
.lb-add {
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 20px 0 14px; border-radius: 18px;
  background: var(--lb-or); color: #fff !important; border: 2px solid var(--lb-ink) !important; box-shadow: 0 4px 0 var(--lb-ink);
  font: 800 16px var(--lb-fd); transition: transform .25s var(--lb-ressort), box-shadow .2s;
}
.lb-add:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--lb-ink); }
.lb-add:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--lb-ink); }
.lb-add i { width: 30px; height: 30px; border-radius: 10px; background: #fff; color: var(--lb-or-d); display: grid; place-items: center; transition: transform .35s var(--lb-ressort); }
.lb-add[aria-expanded="true"] i { transform: rotate(45deg); }

/* Les menus (Ajouter, le réglage) : une entrée ET une sortie. */
.lb-pop {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 40; width: min(340px, calc(100vw - 32px)); padding: 8px;
  border-radius: 22px; background: var(--lb-card); border: 2px solid var(--lb-ink);
  box-shadow: 0 6px 0 var(--lb-ink), 0 30px 50px -20px rgba(60, 30, 10, .4);
  transform-origin: top right; animation: lb-pin .35s var(--lb-ressort);
}
.lb-pop.lb-out { animation: lb-pout .24s cubic-bezier(.5, 0, .75, 0) forwards; }
@keyframes lb-pin { from { opacity: 0; transform: translateY(-8px) scale(.97); } }
@keyframes lb-pout { to { opacity: 0; transform: translateY(-6px) scale(.94); } }
.lb-pop > button { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1px 12px; align-items: center; width: 100%; min-height: 64px; padding: 8px 10px; border-radius: 14px; text-align: left; }
.lb-pop > button:hover, .lb-pop > button:focus-visible { background: var(--lb-cream); }
.lb-pi { grid-row: span 2; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: var(--b); color: var(--c); border: 2px solid var(--lb-ink); rotate: var(--r, -4deg); }
.lb-pop b { font: 800 15px var(--lb-fd); }
.lb-pop small { font-size: 12.5px; color: var(--lb-ink2); }

/* ---------- le brouillon d'une recette de famille ---------- */
.lb .fa-bslot:empty { display: none; }
.lb .fa-bslot { margin-top: 18px; }
.lb .fa-bcard { border-radius: 18px; background: var(--lb-sol-bg); border: 2px dashed #E9C877; animation: lb-epingle .7s var(--lb-ressort) .25s both; transform-origin: 50% 0; }
@keyframes lb-epingle { 0% { opacity: 0; transform: rotate(-4deg) translateY(-10px); } 50% { opacity: 1; transform: rotate(2deg); } 75% { transform: rotate(-1deg); } }

/* ---------- le réglage « Tes plats du livre dans tes semaines » ---------- */
.lb-wk {
  position: relative; z-index: 12; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 2px 14px;
  margin-top: 16px; padding: 12px 12px 12px 14px; border-radius: 20px; background: var(--lb-card); border: 1.5px dashed var(--lb-line2);
}
.lb-wki { position: relative; width: 46px; height: 46px; border-radius: 14px; background: var(--lb-or-bg); border: 2px solid var(--lb-ink); display: grid; place-items: center; color: var(--lb-or-d); rotate: -4deg; }
.lb-wki em { position: absolute; right: -8px; bottom: -8px; width: 24px; height: 24px; border-radius: 50%; background: var(--lb-ink); color: #fff; display: grid; place-items: center; font-style: normal; }
.lb-wki em svg { transition: transform .8s var(--lb-ressort); }
.lb-wk:hover .lb-wki em svg, .lb-wk:has([aria-expanded="true"]) .lb-wki em svg { transform: rotate(120deg); }
.lb-wkt small { display: block; font: 800 10.5px var(--lb-fb); letter-spacing: .12em; text-transform: uppercase; color: var(--lb-muted); }
.lb-wkt b { display: block; font: 800 15px/1.2 var(--lb-fd); }
.lb-wks { display: block; margin-top: 1px; font-size: 12.5px; line-height: 1.35; color: var(--lb-ink2); }
.lb-wkv {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 46px; padding: 0 12px 0 16px;
  border-radius: 999px; background: var(--lb-sombre); color: #fff !important; font: 800 14px var(--lb-fd); white-space: nowrap;
  box-shadow: 0 3px 0 #120c08; transition: transform .3s var(--lb-ressort), box-shadow .2s;
}
.lb-wkv:hover { transform: translateY(-2px); box-shadow: 0 5px 0 #120c08; }
.lb-wkv svg { flex: none; transition: transform .4s var(--lb-ressort); }
.lb-wkv[aria-expanded="true"] svg { transform: rotate(180deg); }
.lb-saved { position: absolute; right: 20px; top: -13px; padding: 3px 10px; border-radius: 999px; background: var(--lb-vert); color: #fff; font: 800 12px var(--lb-fd); opacity: 0; pointer-events: none; rotate: -4deg; }
.lb-saved.on { animation: lb-saved 1.9s var(--lb-ressort); }
@keyframes lb-saved { 0% { opacity: 0; transform: scale(1.8) rotate(-14deg); } 14% { opacity: 1; transform: none; } 80% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-6px); } }
.lb-wk .lb-pop { top: calc(100% + 8px); right: 8px; width: min(360px, calc(100vw - 32px)); padding: 14px; }
.lb-wk .lb-pop p { margin: 0 0 10px; font: 800 14px var(--lb-fd); }
.lb-opts { display: grid; gap: 6px; }
.lb-opt { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 2px 10px; align-items: center; width: 100%; min-height: 52px; padding: 8px 10px; border-radius: 14px; border: 1.5px solid var(--lb-line) !important; text-align: left; }
.lb-opt:hover { background: var(--lb-cream); }
.lb-opt .lb-rd { grid-row: span 2; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--lb-line2); }
.lb-opt[aria-checked="true"] { border-color: var(--lb-ink) !important; background: var(--lb-cream); }
.lb-opt[aria-checked="true"] .lb-rd { border: 6px solid var(--lb-or); }
.lb-opt b { font: 800 14.5px var(--lb-fd); }
.lb-opt small { font-size: 12.5px; color: var(--lb-ink2); }

/* ---------- la barre d'outils, collée en haut au défilement ---------- */
.lb-tools { position: sticky; top: var(--lb-colle, 0px); z-index: 10; margin: 16px -16px 0; padding: 10px 16px; background: linear-gradient(var(--lb-bg) 82%, transparent); transition: box-shadow .25s; }
.lb-tools.lb-colle { box-shadow: 0 10px 18px -16px rgba(60, 30, 10, .45); }
.lb-tr1 { display: flex; gap: 8px; align-items: center; }
.lb-sr { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 4px 0 14px; border-radius: 15px; background: var(--lb-card); border: 1.5px solid var(--lb-line2); color: var(--lb-muted); transition: border-color .2s, box-shadow .25s; }
.lb-sr:focus-within { border-color: var(--lb-ink); box-shadow: 0 0 0 4px rgba(240, 104, 47, .14); }
.lb-sr input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 600 16px var(--lb-fb); color: var(--lb-ink); -webkit-appearance: none; appearance: none; }
.lb-sr input::-webkit-search-cancel-button { display: none; }
.lb-sr input::placeholder { color: var(--lb-muted); }
.lb-qx { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--lb-ink2); }
.lb-qx:hover { background: var(--lb-cream); }
.lb-ib { flex: none; height: 46px; min-width: 46px; padding: 0 12px; border-radius: 15px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--lb-card) !important; border: 1.5px solid var(--lb-line2) !important; font: 700 13.5px var(--lb-fb); color: var(--lb-ink2); }
.lb-ib:hover { border-color: var(--lb-ink2) !important; color: var(--lb-ink); }
.lb-ib .lb-lbl { display: none; }
.lb-ib.lb-spin svg { animation: lb-spin .5s var(--lb-ressort); }
@keyframes lb-spin { 50% { transform: rotate(180deg) scale(.8); } }
/* La rangée des filtres défile ; un fondu dit de quel côté il en reste, et une flèche y emmène. */
.lb-flw { position: relative; margin-top: 10px; }
.lb-fl { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; scroll-behavior: smooth; }
.lb-flw.lb-fd .lb-fl { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 64px), transparent); }
.lb-flw.lb-fg .lb-fl { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 64px), transparent); }
.lb-flw.lb-fg.lb-fd .lb-fl { -webkit-mask-image: linear-gradient(to right, transparent, #000 64px, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(to right, transparent, #000 64px, #000 calc(100% - 64px), transparent); }
.lb-fla {
  position: absolute; top: 0; z-index: 2; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--lb-card) !important; border: 1.5px solid var(--lb-line2) !important; color: var(--lb-ink);
  box-shadow: 0 3px 10px -4px rgba(60, 30, 10, .35); transition: transform .25s var(--lb-ressort), border-color .2s;
}
.lb-fla[hidden] { display: none; }
.lb-fla:hover { border-color: var(--lb-ink) !important; transform: scale(1.06); }
.lb-fla-g { left: -4px; }
.lb-fla-d { right: -4px; }
/* Au doigt, la rangée glisse : le fondu suffit, les flèches prendraient la place des filtres. */
@media (hover: none) { .lb-fla { display: none !important; } }
.lb-fl::-webkit-scrollbar { display: none; }
.lb-chip { flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px; border-radius: 999px; background: var(--lb-card) !important; border: 1.5px solid var(--lb-line2) !important; font: 700 13.5px var(--lb-fb); color: var(--lb-ink2); white-space: nowrap; transition: background .2s, color .2s, border-color .2s; }
.lb-chip:hover { border-color: var(--lb-ink2) !important; color: var(--lb-ink); }
.lb-chip i { font-style: normal; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--lb-cream); display: grid; place-items: center; font: 800 11px var(--lb-fd); }
.lb-chip[aria-pressed="true"] { background: var(--lb-ink) !important; border-color: var(--lb-ink) !important; color: #fff; }
.lb-chip[aria-pressed="true"] i { background: var(--lb-or); color: #fff; }
.lb-chip.lb-fam[aria-pressed="false"] i { background: var(--lb-or-bg); color: #B8410F; }
.lb-chip.lb-vide { opacity: .55; }
.lb-tools.lb-in .lb-sr { animation: lb-deploie .55s var(--lb-ressort) .15s both; transform-origin: left; }
.lb-tools.lb-in .lb-chip { animation: lb-eclot .45s var(--lb-ressort) both; animation-delay: calc(.25s + var(--k, 0) * 40ms); }
@keyframes lb-deploie { from { opacity: 0; transform: scaleX(.6); } }
@keyframes lb-eclot { from { opacity: 0; transform: scale(.6); } }

/* ---------- la grille ---------- */
.lb-grid { display: grid; gap: 12px; margin-top: 6px; padding-bottom: 30px; }
.lb-cd {
  position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 0 12px; padding: 10px; border-radius: 20px;
  background: var(--lb-card); border: 1.5px solid var(--lb-line);
  transition: transform .3s var(--lb-ressort), box-shadow .3s, border-color .2s;
}
.lb-grid.lb-in .lb-cd { animation: lb-cin .45s var(--lb-ressort) both; animation-delay: calc(var(--k, 0) * 40ms); }
.lb-grid.lb-in .lb-cd.lb-fm { animation: lb-feuille .8s cubic-bezier(.2, .9, .3, 1) both; animation-delay: calc(var(--k, 0) * 40ms); }
@keyframes lb-cin { from { opacity: 0; transform: translateY(18px) rotate(-1.5deg) scale(.96); } }
@keyframes lb-feuille { 0% { opacity: 0; transform: translate(-16px, -40px) rotate(-8deg); } 45% { opacity: 1; transform: translate(10px, 4px) rotate(3deg); } 70% { transform: translate(-4px, 0) rotate(-1deg); } }
@media (hover: hover) {
  .lb-cd:hover { border-color: var(--lb-ink); box-shadow: 0 5px 0 var(--lb-ink); transform: perspective(900px) translateY(-3px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
  .lb-cd:hover .lb-th > img { transform: scale(1.06) translate(var(--tx, 0px), var(--ty, 0px)); }
  .lb-cd:hover .lb-hw { transform: rotate(-2deg) translateY(-4px); box-shadow: 0 10px 16px -6px rgba(60, 30, 10, .45); }
}
.lb-cd.lb-fm { background: #FFFDF6; border: 2px solid var(--lb-ink); box-shadow: 0 4px 0 var(--lb-ink); }
/* Le coin corné : une découpe de la couleur du fond, puis un rabat cerné d'encre. */
.lb-cd.lb-fm::before { content: ""; position: absolute; z-index: 2; right: -2px; bottom: -6px; width: 31px; height: 31px; background: linear-gradient(to top left, var(--lb-bg) 50%, transparent 50%); pointer-events: none; }
.lb-cd.lb-fm::after { content: ""; position: absolute; z-index: 3; right: -2px; bottom: -2px; width: 27px; height: 27px; border-radius: 5px 0 0 0; background: linear-gradient(to bottom right, #F3E5C8 0 calc(50% - 1.2px), var(--lb-ink) calc(50% - 1.2px) calc(50% + 1.2px), transparent calc(50% + 1.2px)); box-shadow: inset 2px 2px 0 var(--lb-ink); pointer-events: none; transform-origin: 100% 100%; transition: transform .45s var(--lb-ressort); }
.lb-cd.lb-fm:hover::after { transform: scale(1.18); }
/* Toute la carte ouvre la fiche : un bouton posé dessous, les autres gestes au-dessus. */
.lb-open { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.lb-open:focus-visible { outline: 3px solid var(--lb-or); outline-offset: 3px; }
.lb-th { position: relative; width: 96px; height: 96px; border-radius: 14px; overflow: hidden; background: var(--lb-tuile, var(--lb-cream2)); display: grid; place-items: center; pointer-events: none; }
.lb-th > img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2, .8, .3, 1); }
.lb-th > svg { width: 78%; height: 78%; }
.lb-hw { position: relative; width: 72%; height: 84%; background: #FFFDF6; rotate: -5deg; box-shadow: 0 4px 10px -4px rgba(60, 30, 10, .4); overflow: hidden; transition: transform .45s var(--lb-ressort), box-shadow .3s; }
.lb-hw img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lb-hw::before { content: ""; position: absolute; z-index: 1; left: 30%; top: 2px; width: 34%; height: 9px; background: rgba(159, 205, 168, .9); rotate: -4deg; }
.lb-vc { width: 58%; aspect-ratio: 1; border-radius: 50%; background: var(--lb-or); border: 2.5px solid var(--lb-ink); box-shadow: 0 3px 0 var(--lb-ink); display: grid; place-items: center; color: #fff; }
.lb-pln { position: absolute; left: 5px; top: 5px; z-index: 2; display: inline-flex; align-items: center; gap: 3px; min-height: 20px; padding: 0 6px; border-radius: 999px; background: var(--lb-vert); color: #fff; font: 800 10.5px var(--lb-fb); box-shadow: 0 0 0 1.5px #fff; }
.lb-cb { display: flex; flex-direction: column; min-width: 0; padding: 2px 0; }
.lb-fp { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; min-height: 22px; padding: 0 8px; margin-bottom: 4px; border-radius: 999px; background: var(--lb-or); color: #fff; font: 800 11px var(--lb-fb); }
.lb-fp.lb-bro { background: var(--lb-sol-bg); color: var(--lb-sol-d); }
.lb-cb h3 { padding-right: 40px; font: 800 16px/1.2 var(--lb-fd); letter-spacing: -.01em; text-wrap: balance; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lb-mt { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin-top: 4px; font: 600 12.5px var(--lb-fb); color: var(--lb-muted); }
.lb-mt .lb-vg { display: inline-flex; align-items: center; gap: 3px; color: var(--lb-vert-d); }
.lb-mt .lb-ae { display: inline-flex; align-items: center; gap: 3px; color: var(--lb-or-d); }
.lb-mt .lb-vx { display: inline-flex; align-items: center; gap: 3px; color: #B8410F; }
/* L'étoile de l'appli (etoileHTML), posée en haut à droite, au-dessus du bouton qui ouvre. */
.lb-cd > .fav { position: absolute; right: 8px; top: 8px; z-index: 2; }
.lb .lv-acts { position: relative; z-index: 2; display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 8px; }
.lb .lv-add.lb-qb {
  flex: 0 1 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; width: auto; padding: 0 10px 0 6px; border-radius: 12px;
  background: var(--lb-cream); border: 0; box-shadow: none; font: 700 12.5px var(--lb-fb); color: var(--lb-ink2);
  transition: background .2s, color .2s, transform .25s var(--lb-ressort);
}
.lb .lv-add.lb-qb:hover { background: var(--lb-cream2); color: var(--lb-ink); transform: none; }
.lb .lv-add.lb-qb:active { transform: scale(.95); }
.lb .lv-add.lb-qb .lb-qi { width: 24px; height: 24px; border-radius: 8px; background: var(--lb-card); display: grid; place-items: center; color: var(--lb-or-d); }
.lb .lv-add.lb-qb[aria-pressed="true"], .lb .lv-add.lb-qb.ok { background: var(--lb-vert-bg); color: var(--lb-vert-d); }
.lb .lv-add.lb-qb[aria-pressed="true"] .lb-qi, .lb .lv-add.lb-qb.ok .lb-qi { background: var(--lb-vert); color: #fff; }
.lb .lv-add.lb-qb.lb-flip { animation: lb-flip .5s var(--lb-ressort); }
@keyframes lb-flip { 50% { transform: rotateX(90deg); } }
/* La bulle « Ajouter à tes courses ? » (livre.css) se pose sous les boutons rapides. */
.lb .lv-acts .lv-cf { left: 0; right: auto; top: calc(100% + 8px); }
.lb-more {
  grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px 14px; align-items: center; padding: 14px;
  border-radius: 20px; border: 2px dashed var(--lb-line2) !important; background: rgba(255, 255, 255, .5) !important; text-align: left; transition: border-color .2s, background .2s;
}
.lb-more:hover { border-color: var(--lb-ink) !important; background: var(--lb-card) !important; }
.lb-mf { grid-row: span 2; width: 52px; height: 52px; border-radius: 16px; background: var(--lb-sol-bg); border: 2px solid var(--lb-ink); overflow: hidden; rotate: -5deg; display: grid; place-items: center; }
.lb-mf svg { width: 100%; height: 100%; }
/* Trois vrais plats en éventail, à la place de Popotam quand le serveur les donne. */
.lb-mf.lb-mph { position: relative; display: block; background: none; border: 0; overflow: visible; rotate: 0deg; }
.lb-mph img { position: absolute; top: 2px; left: 50%; width: 34px; height: 44px; margin-left: -17px; object-fit: cover; border-radius: 8px; border: 2px solid var(--lb-ink); box-shadow: 0 2px 0 var(--lb-ink); }
.lb-mph img:nth-child(1) { transform: translateX(-12px) rotate(-12deg); }
.lb-mph img:nth-child(2) { transform: translateX(12px) rotate(10deg); }
.lb-mph img:nth-child(3) { transform: translateY(2px); z-index: 1; }
.lb-mt .lb-kc:empty { display: none; }
.lb-more b { display: block; font: 800 16px var(--lb-fd); }
.lb-more small { display: block; font-size: 13px; color: var(--lb-ink2); }
.lb-ar { grid-row: span 2; width: 36px; height: 36px; border-radius: 50%; background: var(--lb-ink); color: #fff; display: grid; place-items: center; }
.lb-none { grid-column: 1 / -1; padding: 30px 10px; text-align: center; color: var(--lb-ink2); }
.lb-none b { display: block; font: 800 18px var(--lb-fd); color: var(--lb-ink); margin-bottom: 4px; }
.lb-none button { margin-top: 12px; }

/* ---------- téléphone étroit ---------- */
@container lb (max-width: 520px) {
  .lb .fa-bcard { flex-wrap: wrap; }
  .lb-addw, .lb-add { width: 100%; }
  .lb-add { justify-content: center; }
  .lb-wk { grid-template-columns: auto minmax(0, 1fr); }
  .lb-wkv { grid-column: 1 / -1; margin-top: 10px; }
  .lb-wks { display: none; }
  .lb-wk .lb-pop { left: 0; right: 0; width: auto; }
  .lb-addw .lb-pop { left: 0; right: 0; width: auto; }
}

/* ---------- ordinateur ---------- */
@container lb (min-width: 760px) {
  .lb-tools { margin: 16px -4px 0; padding: 10px 4px; }
  .lb-ib .lb-lbl { display: inline; }
  .lb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .lb-cd { grid-template-columns: 1fr; padding: 10px 10px 12px; }
  .lb-th { width: 100%; height: auto; aspect-ratio: 4 / 3; margin-bottom: 12px; }
  .lb-th > svg { width: 52%; height: 70%; }
  .lb-hw { width: 46%; height: 78%; }
  .lb-vc { width: 36%; }
  .lb-pln { left: 8px; top: 8px; min-height: 24px; padding: 0 9px; font-size: 12px; }
  .lb-cd > .fav { top: 14px; right: 14px; }
  .lb-cb h3 { font-size: 17.5px; padding-right: 0; }
  .lb .lv-acts .lv-add.lb-qb { flex: 1; justify-content: center; }
  .lb-more { grid-column: auto; grid-template-columns: 1fr; justify-items: center; text-align: center; align-content: center; gap: 8px; }
  .lb-mf { grid-row: auto; width: 70px; height: 70px; }
  .lb-ar { grid-row: auto; }
}
@container lb (min-width: 1000px) { .lb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- arrivée sur la page ---------- */
.lb.lb-in .lb-tete { animation: lb-descend .5s var(--lb-ressort) both; }
.lb.lb-in .lb-add { animation: lb-rebond .7s var(--lb-ressort) .2s both; }
.lb.lb-in .lb-wk { animation: lb-cin .6s var(--lb-ressort) .35s both; }
@keyframes lb-descend { from { opacity: 0; transform: translateY(-14px); } }
@keyframes lb-rebond { 0% { opacity: 0; transform: scale(.6); } 60% { opacity: 1; transform: scale(1.06); } }
.lb-add.lb-bye { animation: lb-petit .35s var(--lb-ressort); }
@keyframes lb-petit { 40% { transform: scale(.94); } }

@media (prefers-reduced-motion: reduce) {
  .lb *, .lb *::before, .lb *::after { animation: none !important; transition: none !important; }
}