/* MON LIVRE : MINIATURES, BOUTONS, AGRANDISSEMENT (28/09/2026)
   ------------------------------------------------------------------
   Repris du handoff Refontes/design_handoff_livre (livre-thumbs.css), au plus près. Toutes
   les classes sont préfixées `lv-` : le handoff utilisait des noms génériques (.thumb, .add,
   .see, .cf, .lb) qui existent ou existeront ailleurs dans l'appli. Les couleurs prennent
   les jetons de l'appli quand ils existent (--ink, --primary, --green, --line), les autres
   restent ceux du handoff. */

/* ---------- la miniature ---------- */
.lv-head { display: flex; gap: 14px; align-items: flex-start; }
.lv-head > .fav-head { flex: 1; min-width: 0; }
.lv-thumb {
  position: relative; flex: none; width: 96px; height: 96px; padding: 0; border: 0; border-radius: 20px;
  background: #FCEFD9; cursor: zoom-in; overflow: hidden; transform: rotate(-3deg);
  box-shadow: 0 0 0 3px #fff, 0 0 0 4.5px #EEDFC2, 0 8px 16px -8px rgba(90, 50, 10, .5);
  transition: transform .45s cubic-bezier(.3, 1.5, .4, 1), box-shadow .25s;
}
.slot:nth-child(even) .lv-thumb { transform: rotate(2.5deg); }
.lv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2, .8, .3, 1); }
.lv-thumb:hover { transform: rotate(0) scale(1.06); }
.lv-thumb:hover img { transform: scale(1.12); }
.lv-thumb:active { transform: rotate(0) scale(.96); }
.lv-thumb .lv-zm {
  position: absolute; right: 6px; bottom: 6px; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(42, 33, 27, .72); color: #fff; display: grid; place-items: center;
  opacity: 0; transform: scale(.6); transition: .3s cubic-bezier(.3, 1.5, .4, 1);
}
.lv-thumb .lv-zm svg { stroke: #fff; }
.lv-thumb:hover .lv-zm, .lv-thumb:focus-visible .lv-zm { opacity: 1; transform: none; }
@media (hover: none) { .lv-thumb .lv-zm { opacity: 1; transform: none; } }
/* La mention IA, discrète, sur la miniature aussi : l'image est une idée de présentation. */
.lv-thumb .lv-ia {
  position: absolute; left: 6px; top: 6px; padding: 1px 6px; border-radius: 999px;
  background: rgba(42, 33, 27, .62); color: #fff; font: 800 10px/1.5 var(--font-body, system-ui, sans-serif); letter-spacing: .04em;
}
.lv-thumb:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
.lv-thumb.lv-parti { visibility: hidden; }
/* Pas de photo : la tuile d'ingrédient (les dessins de la marmite), qui ne s'agrandit pas. */
.lv-thumb.lv-nophoto { cursor: default; display: grid; place-items: center; background: var(--lv-tuile, #FFF1D2); box-shadow: 0 0 0 3px #fff, 0 0 0 4.5px #EEDFC2; }
.lv-thumb.lv-nophoto:hover { transform: rotate(-3deg); }
.slot:nth-child(even) .lv-thumb.lv-nophoto:hover { transform: rotate(2.5deg); }
.lv-thumb.lv-nophoto svg { width: 62px; height: 62px; overflow: visible; }

/* ---------- les boutons : une action principale, deux ajouts ---------- */
.lv-acts { position: relative; display: flex; flex-direction: column; gap: 8px; margin-top: auto; padding-top: 14px; }
.lv-ligne { display: flex; gap: 8px; }
.lv-see {
  position: relative; flex: 1; display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 50px;
  border-radius: 999px; border: 0; background: var(--ink); color: #F6EEE3; font: 800 15px var(--font-display, system-ui, sans-serif);
  cursor: pointer; box-shadow: 0 3px 0 #0f0b08; overflow: hidden;
  transition: transform .3s cubic-bezier(.3, 1.5, .4, 1), box-shadow .15s, background .2s;
}
.lv-see svg { stroke: currentColor; }
.lv-see:hover { background: #3A2D22; transform: translateY(-1px); }
.lv-see:active { transform: translateY(2px); box-shadow: 0 1px 0 #0f0b08; }
.lv-see:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
.lv-see .lv-ar { position: absolute; right: 16px; display: grid; place-items: center; transition: transform .35s cubic-bezier(.3, 1.5, .4, 1); }
.lv-see:hover .lv-ar { transform: translateX(4px); }
.lv-adds { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lv-add {
  position: relative; display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 8px 0 10px; min-width: 0;
  border-radius: 16px; border: 1.5px solid #EEDFC2; background: var(--surface); cursor: pointer; color: var(--ink);
  font: 700 13.5px var(--font-body, system-ui, sans-serif); text-align: left;
  transition: background .25s, border-color .25s, color .25s;
}
.lv-add:hover { border-color: var(--primary); background: #FFFCF6; }
.lv-add:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.lv-add .lv-ai { flex: none; width: 30px; height: 30px; border-radius: 10px; background: #FFF1D2; color: #8A5A00; display: grid; place-items: center; transition: .3s cubic-bezier(.3, 1.5, .4, 1); }
.lv-add .lv-lbl { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-add .lv-pl { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--primary); color: #fff; display: grid; place-items: center; transition: .35s cubic-bezier(.3, 1.5, .4, 1); }
.lv-add .lv-pl svg { stroke: #fff; }
.lv-add.ok { background: var(--green-bg); border-color: #C6E4CE; color: var(--green); }
.lv-add.ok .lv-ai { background: #fff; color: var(--green); }
.lv-add.ok .lv-pl { background: var(--green); transform: rotate(360deg); }
.lv-add.asking { border-color: var(--primary); background: #FFFCF6; box-shadow: 0 0 0 4px var(--primary-bg); }
/* Modifier, pour une recette perso : discret, sous les ajouts. */
.lv-mod { align-self: center; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border: 0; background: none; color: var(--ink-soft); font: 700 13px var(--font-body, system-ui, sans-serif); cursor: pointer; border-radius: 999px; }
.lv-mod:hover { background: var(--surface-2); color: var(--ink); }

/* Les infobulles : souris seulement, après 250 ms pour ne pas clignoter. */
@media (hover: hover) {
  .lv-add::after {
    content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 10px); z-index: 4;
    transform: translate(-50%, 6px) scale(.92); opacity: 0; pointer-events: none;
    width: max-content; max-width: 190px; padding: 7px 11px; border-radius: 12px; background: var(--ink); color: #F6EEE3;
    font: 600 12.5px/1.35 var(--font-body, system-ui, sans-serif); text-align: center; white-space: normal;
    box-shadow: 0 8px 18px -8px rgba(42, 33, 27, .55); transition: opacity .18s ease, transform .3s cubic-bezier(.3, 1.5, .4, 1);
  }
  .lv-add::before {
    content: ""; position: absolute; left: 50%; bottom: calc(100% + 4px); margin-left: -6px; z-index: 4;
    border: 6px solid transparent; border-top-color: var(--ink); opacity: 0; transform: translateY(6px);
    transition: opacity .18s, transform .3s cubic-bezier(.3, 1.5, .4, 1);
  }
  .lv-add:hover::after { opacity: 1; transform: translate(-50%, 0) scale(1); transition-delay: .25s; }
  .lv-add:hover::before { opacity: 1; transform: none; transition-delay: .25s; }
  .lv-add.ok::after, .lv-add.ok::before, .lv-add.asking::after, .lv-add.asking::before { display: none; }
}

/* ---------- la bulle de confirmation des courses ---------- */
.lv-cf {
  position: absolute; left: 0; right: 0; bottom: 58px; z-index: 6; padding: 14px; border-radius: 20px;
  background: var(--surface); border: 2px solid var(--ink); box-shadow: 0 6px 0 var(--ink), 0 22px 40px -18px rgba(42, 33, 27, .5);
  display: flex; flex-direction: column; gap: 10px; transform-origin: 25% 100%; animation: lvCfIn .38s cubic-bezier(.3, 1.5, .4, 1);
}
.lv-cf.bye { animation: lvCfOut .2s ease forwards; }
@keyframes lvCfIn { from { opacity: 0; transform: translateY(10px) scale(.9); } }
@keyframes lvCfOut { to { opacity: 0; transform: translateY(6px) scale(.96); } }
.lv-cf-fl {
  position: absolute; bottom: -11px; left: 25%; width: 18px; height: 18px; margin-left: -9px; background: var(--surface);
  border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); border-bottom-right-radius: 4px;
}
.lv-cf-h { display: flex; align-items: center; gap: 9px; }
.lv-cf-h b { font: 800 15.5px var(--font-display, system-ui, sans-serif); }
.lv-cf-ic { flex: none; width: 32px; height: 32px; border-radius: 11px; display: grid; place-items: center; transform: rotate(-4deg); background: #FFF1D2; color: #8A5A00; }
.lv-cf-l { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.lv-cf-l li { position: relative; padding-left: 16px; font-size: 13.5px; line-height: 1.4; color: var(--ink-soft); }
.lv-cf-l li::before { content: ""; position: absolute; left: 3px; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }
.lv-cf-l b { color: var(--ink); }
.lv-cf-a { display: flex; gap: 8px; justify-content: flex-end; }
.lv-cf-a button { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 16px; border-radius: 999px; cursor: pointer; font: 800 14px var(--font-display, system-ui, sans-serif); white-space: nowrap; }
.lv-cf-a .lv-non { border: 1.5px solid #EEDFC2; background: var(--surface); color: var(--ink); }
.lv-cf-a .lv-non:hover { border-color: var(--ink); }
.lv-cf-a .lv-oui { border: 0; background: var(--primary); color: #fff; box-shadow: 0 3px 0 var(--primary-ink); transition: transform .25s cubic-bezier(.3, 1.5, .4, 1); }
.lv-cf-a .lv-oui svg { stroke: #fff; }
.lv-cf-a .lv-oui:active { transform: translateY(2px); }
/* La carte laisse dépasser la bulle et l'infobulle. */
.fav-card.rec, .ph-rec.lv-rec { overflow: visible; }

/* ---------- l'image agrandie ---------- */
.lv-lb { position: fixed; inset: 0; z-index: 440; pointer-events: none; }
.lv-lb.on { pointer-events: auto; }
.lv-lb-bg { position: absolute; inset: 0; background: rgba(30, 22, 16, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .35s ease; }
.lv-lb.on .lv-lb-bg { opacity: 1; }
.lv-lb-img { position: fixed; left: 0; top: 0; border-radius: 20px; object-fit: cover; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6); transform-origin: 0 0; will-change: transform; cursor: zoom-out; }
.lv-lb-cap {
  position: fixed; left: 50%; z-index: 2; transform: translate(-50%, 16px); opacity: 0; display: flex; align-items: center; gap: 12px;
  width: max-content; max-width: min(680px, calc(100% - 32px)); padding: 10px 10px 10px 18px; border-radius: 20px; background: var(--surface);
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .5); transition: opacity .3s ease, transform .45s cubic-bezier(.3, 1.5, .4, 1);
}
.lv-lb.on.shown .lv-lb-cap { opacity: 1; transform: translate(-50%, 0); }
.lv-lb-w { flex: 1; min-width: 0; }
.lv-lb-cap b { display: block; font: 800 16px/1.25 var(--font-display, system-ui, sans-serif); color: var(--ink); }
.lv-lb-cap span { font-size: 12.5px; color: var(--muted); font-weight: 700; }
.lv-lb-voir { flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 0; background: var(--primary); color: #fff; font: 800 14px var(--font-display, system-ui, sans-serif); cursor: pointer; white-space: nowrap; }
.lv-lb-voir svg { stroke: #fff; }
.lv-lb-x { position: fixed; right: 16px; top: calc(16px + env(safe-area-inset-top)); z-index: 3; width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--surface); color: var(--ink); cursor: pointer; display: grid; place-items: center; font-size: 26px; line-height: 1; opacity: 0; transform: scale(.6); transition: .35s cubic-bezier(.3, 1.5, .4, 1); }
.lv-lb.on.shown .lv-lb-x { opacity: 1; transform: none; }
.lv-lb-ia { position: fixed; z-index: 2; padding: 4px 10px; border-radius: 999px; background: rgba(42, 33, 27, .78); color: #fff; font: 700 11.5px var(--font-body, system-ui, sans-serif); opacity: 0; transition: opacity .3s .1s; }
.lv-lb.on.shown .lv-lb-ia { opacity: 1; }

/* ---------- téléphone ---------- */
@media (max-width: 600px) {
  .lv-thumb { width: 84px; height: 84px; }
  .lv-lb-cap { flex-wrap: wrap; }
  .lv-lb-voir { width: 100%; justify-content: center; }
  /* La fiche du téléphone : la miniature à gauche du texte, les boutons en bas. */
  .ph-rec.lv-rec .lv-head { padding: 12px 0 0 14px; gap: 4px; }
  .ph-rec.lv-rec .lv-head > .ph-r-body { flex: 1; min-width: 0; padding-left: 10px; }
  .ph-rec.lv-rec .lv-acts { padding: 4px 12px 12px; }
  .ph-rec.lv-rec .lv-see { min-height: 46px; font-size: 14.5px; }
  .ph-rec .lv-ligne .ph-more { flex: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lv-thumb, .lv-thumb img, .lv-add, .lv-see, .lv-cf, .lv-lb-bg, .lv-lb-cap, .lv-lb-x { transition-duration: .01ms; animation-duration: .01ms; }
}