/* ==========================================================================
   Offre — public/css/components/offer.css
   Barre d'achat collante (mobile), carte d'offre Solo, case de renonciation
   (art. L221-28 13°), bouton de paiement, réassurance, feuille de confirmation.
   Portés de design/maquettes/site/site.css et resultat.html. Jetons uniquement.
   La case de renonciation n'est JAMAIS pré-cochée ; le bouton plein ne paraît
   jamais indisponible : s'il est touché trop tôt, `.waiver.is-remind` rappelle.
   ========================================================================== */

/* ---------- Barre d'achat collante (mobile) ------------------------------- */
.buybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--surface-2) 94%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line); box-shadow: var(--shadow-sticky);
}
.buybar[hidden] { display: none; }
.buybar__price { font: 600 26px/1 var(--font-display); }
.buybar__ttc { font: 600 var(--fs-meta)/1 var(--font-ui); color: var(--ink-2); }
.buybar__sub { display: block; font: 500 var(--fs-meta)/1.2 var(--font-ui); color: var(--ink-3); margin-top: 4px; }
@media (min-width: 900px) { .buybar { display: none; } }

/* ---------- Annulation (retour de Stripe) --------------------------------- */
.cancel { display: grid; grid-template-columns: 22px 1fr; gap: 12px; padding: 14px 16px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--line); margin-bottom: 16px; font-size: 15px; }
.cancel .i { color: var(--ink-2); width: 20px; height: 20px; margin-top: 1px; }
.cancel b { font-weight: 600; }

/* ---------- Carte d'offre -------------------------------------------------- */
.offer { position: relative; padding: 24px 20px 20px; border-radius: var(--r-md); background: var(--surface-2); border: 1.5px solid var(--ink); box-shadow: var(--shadow-2); }
[data-theme="dark"] .offer { border-color: var(--line-strong); }
.offer__top { display: grid; grid-template-columns: 1fr 72px; gap: 16px; align-items: start; }
.offer h2 { margin-top: 8px; font-size: 32px; line-height: 1.05; }
.offer__sub { margin-top: 8px; font-size: 15px; color: var(--ink-2); }
@media (min-width: 900px) { .offer h2 { font-size: 34px; } }

/* Mini-couverture du rapport (objet : mêmes couleurs dans les deux thèmes) */
.mini-cover {
  width: 72px; height: 96px; border-radius: 4px; background: var(--cover-paper); transform: rotate(3deg);
  box-shadow: 0 10px 20px -10px var(--cover-shadow), 4px 4px 0 -1px var(--cover-edge);
  display: flex; flex-direction: column; align-items: center; padding-top: 12px;
}
.mini-cover small { font: italic 500 9px/1 var(--font-display); color: var(--cover-ink-2); }
.mini-cover b { font: 500 20px/1 var(--font-display); color: var(--cover-ink); margin-top: 2px; }
.mini-cover span { margin-top: 7px; display: grid; grid-template-columns: repeat(4, 9px); gap: 1px; padding: 3px 4px; background: var(--seal); border-radius: 2px; }
.mini-cover span i { font: 600 8px/1.1 var(--font-ko); font-style: normal; color: var(--on-seal); text-align: center; }

.price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.price b { font: 600 var(--fs-price)/1 var(--font-display); letter-spacing: -.01em; }
.price span { font-size: 15px; color: var(--ink-2); }
.price__ttc { font: 600 15px/1 var(--font-ui); letter-spacing: 0; color: var(--ink-2); }

.benefits { margin-top: 18px; display: grid; gap: 12px; }
.benefits li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; font-size: 16px; line-height: 1.45; color: var(--ink); }
.benefits .ck { width: 24px; height: 24px; border-radius: 50%; background: var(--accent-fill); color: var(--ink-on-accent); display: grid; place-items: center; margin-top: -1px; }
.benefits .ck .i { width: 14px; height: 14px; }
.benefits b { font-weight: 600; }
.benefits .ko { color: var(--wood); }

/* Sommaire replié dans la carte */
.chap { margin-top: 16px; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.chap summary { list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 48px; font: 500 15px/1 var(--font-ui); color: var(--ink); cursor: pointer; }
.chap summary::-webkit-details-marker { display: none; }
.chap summary .i { width: 18px; height: 18px; }
.chap ol { padding: 0 0 12px; margin: 0; list-style: none; font-size: 14px; color: var(--ink-2); }
.chap li { padding: 4px 0; }
.chap li span { display: inline-block; width: 26px; font: italic 500 16px/1 var(--font-display); color: var(--ink-3); font-variant-numeric: oldstyle-nums !important; }

/* ---------- Case de renonciation ------------------------------------------ */
.waiver { margin-top: 18px; padding: 14px; border-radius: var(--r-sm); background: var(--paper); border: 1.5px solid var(--line); transition: border-color var(--t-base), box-shadow var(--t-base); }
.waiver .check { font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.waiver .check a { color: var(--ink); }
.waiver.is-remind { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); animation: nudge 360ms var(--ease-out) 1; }
.waiver.is-remind .box { border-color: var(--accent); border-width: 2px; }
.waiver__msg { display: flex; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); font: 500 14px/1.4 var(--font-ui); color: var(--accent-ink); }
.waiver__msg .i { width: 18px; height: 18px; margin-top: 1px; }
@keyframes nudge { 0%, 100% { transform: none; } 30% { transform: translateX(-4px); } 60% { transform: translateX(3px); } }

/* ---------- Paiement, réassurance ----------------------------------------- */
.pay { margin-top: 12px; }
.pay .btn { width: 100%; font-size: 18px; }
.pay .btn.is-loading { font-size: 17px; }
.pay .spinner { width: 20px; height: 20px; border-width: 2.5px; }
.pay__under { margin-top: 10px; text-align: center; font-size: var(--fs-meta); color: var(--ink-3); }
.assure { margin-top: 18px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.assure div { display: grid; justify-items: center; text-align: center; gap: 6px; font-size: 12.5px; line-height: 1.35; color: var(--ink-2); padding: 10px 4px; border-radius: var(--r-sm); background: var(--paper); }
.assure .i { width: 20px; height: 20px; color: var(--ink); }
.ai-note { margin-top: 16px; font-size: var(--fs-meta); line-height: 1.5; color: var(--ink-3); }

/* ---------- Feuille de confirmation (bottom sheet) ------------------------ */
.sheet-backdrop { position: fixed; inset: 0; z-index: 30; background: color-mix(in srgb, var(--ink-block) 55%, transparent); }
.sheet-backdrop[hidden] { display: none; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 31; max-height: 92svh; overflow: auto;
  padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); background: var(--surface-2);
  border-radius: var(--r-md) var(--r-md) 0 0; box-shadow: var(--shadow-sticky);
  animation: sheet-up var(--t-slow) var(--ease-out) 1;
}
.sheet[hidden] { display: none; }
.sheet__grip { width: 40px; height: 4px; margin: 0 auto 16px; border-radius: var(--r-pill); background: var(--line-strong); }
.sheet__title { font: 600 var(--fs-h4)/1.25 var(--font-display); }
@keyframes sheet-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 900px) {
  .sheet { left: 50%; right: auto; bottom: 50%; width: min(32rem, 92vw); transform: translate(-50%, 50%); border-radius: var(--r-md); animation: none; }
}
@media (prefers-reduced-motion: reduce) { .waiver.is-remind, .sheet { animation: none; } }