/* NJANSANG — styles propres à la page Bons cadeaux. Chargé après styles.css (même ordre de couches). */
@layer pages {
  .gift-layout { display: grid; gap: var(--space-6); }
  @media (min-width: 64em) { .gift-layout { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: var(--space-7); align-items: start; } .gift-preview { order: 2; } .gift-preview__sticky { position: sticky; top: calc(var(--header-h) + 1.5rem); } .gift-done { grid-column: 1 / -1; } }
  .gift-preview__sticky { display: grid; gap: 1rem; justify-items: center; padding: clamp(1.25rem, 1rem + 2vw, 2.5rem); border-radius: var(--radius-l); background: radial-gradient(90% 80% at 50% 20%, #3A2418, var(--color-nuit)); }
  .giftcard-3d { width: min(100%, 26rem); perspective: 1400px; }
  .giftcard-3d .giftcard { transform-style: preserve-3d; transition: transform var(--dur-5) var(--ease-in-out); }
  .giftcard-3d.is-flipped .giftcard { transform: rotateY(180deg); }
  @media (prefers-reduced-motion: reduce) {
    .giftcard-3d .giftcard { transform: none !important; }
    .giftcard-3d .giftcard__face--back { transform: none; opacity: 0; transition: opacity var(--dur-3); }
    .giftcard-3d.is-flipped .giftcard__face--back { opacity: 1; }
    .giftcard-3d.is-flipped .giftcard__face--front { opacity: 0; }
  }
  .gift-preview__tools { display: grid; gap: .5rem; justify-items: center; text-align: center; }
  .gift-preview__tools .btn--outline { --_bd: var(--color-creme); --_fg: var(--color-creme); }
  .gift-preview__tools .btn--outline:hover { --_bg: var(--color-creme); --_fg: var(--color-encre); }
  .gift-preview__note { font-size: .8125rem; color: var(--color-creme-attenue); }
  .gift-form { gap: var(--space-6); }
  .gstep { display: grid; gap: 1rem; padding-block-end: var(--space-5); border-block-end: 1px solid var(--color-ligne); }
  .gstep:last-of-type { border-block-end: 0; }
  .gstep__legend { display: flex; align-items: center; gap: .7rem; font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-size: 1.5rem; font-weight: 500; margin-block-end: 1rem; }
  .gstep__n { display: inline-grid; place-items: center; inline-size: 2rem; block-size: 2rem; border-radius: 50%; background: var(--color-terracotta); color: var(--color-ivoire); font-family: var(--font-body); font-size: .95rem; font-weight: 700; }
  .gstep__sim { font-family: var(--font-body); font-size: .9rem; color: var(--color-encre-2); font-weight: 500; }
  .amount { display: grid; gap: .75rem; padding: 1rem; border-radius: var(--radius-m); background: var(--color-lin); }
  .swatches { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
  .swatches legend { margin-block-end: .6rem; width: 100%; }
  .swatch { position: relative; display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; min-height: 44px; cursor: pointer; }
  .swatch input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
  .swatch__chip { inline-size: 2.25rem; block-size: 2.25rem; border-radius: 50%; box-shadow: inset 0 0 0 2px rgb(255 255 255 / .3); transition: box-shadow var(--dur-2); }
  .swatch--terre .swatch__chip { background: linear-gradient(140deg, #B34F2A, #8E3A1C); }
  .swatch--foret .swatch__chip { background: linear-gradient(140deg, #2C5C38, #1B3B23); }
  .swatch--nuit .swatch__chip { background: linear-gradient(140deg, #2E1C13, #140B07); box-shadow: inset 0 0 0 2px var(--color-ocre); }
  .swatch input:checked + .swatch__chip { box-shadow: 0 0 0 3px var(--color-creme), 0 0 0 5px var(--color-encre); }
  .swatch input:focus-visible + .swatch__chip { outline: 2px solid var(--color-encre); outline-offset: 6px; }
  .gift-total { display: flex; justify-content: space-between; align-items: baseline; padding: 1rem 1.25rem; border-radius: var(--radius-m); background: var(--color-lin); font-size: 1.05rem; }
  .gift-total strong { font-size: 1.35rem; }
  .gift-done { display: grid; gap: 1rem; justify-items: start; padding: clamp(1.25rem, 1rem + 2vw, 2.25rem); border-radius: var(--radius-l); background: #E4EEDF; border: 1px solid #A9C9A4; }
  .gift-done:focus { outline: none; }
  .gift-done h2 { font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.25rem); }
  .steps-4 { list-style: none; padding: 0; display: grid; gap: var(--space-4); }
  @media (min-width: 48em) { .steps-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .steps-4 li { display: grid; gap: .4rem; align-content: start; padding-block-start: 1rem; border-block-start: 1px solid var(--color-encre); }
  .steps-4__n { font-family: var(--font-display); font-style: italic; font-size: 2.5rem; line-height: 1; color: var(--color-terracotta); }
  .steps-4 h3 { font-size: 1.25rem; }
  .steps-4 p { color: var(--color-encre-2); font-size: .95rem; }
}

@media print {
  body:has(main.page-bons) > :not(main) { display: none !important; }
  main.page-bons > :not(.gift-config) { display: none !important; }
  main.page-bons :is(.gift-form, .gift-preview__tools, .gift-done) { display: none !important; }
  main.page-bons .gift-layout { display: block; }
  main.page-bons .gift-preview__sticky { background: none; padding: 0; position: static; }
  main.page-bons .giftcard-3d { width: 85.6mm; perspective: none; }
  main.page-bons .giftcard { transform: none !important; aspect-ratio: auto; }
  main.page-bons .giftcard__face { position: relative; inset: auto; height: 54mm; margin-block-end: 8mm; transform: none !important; opacity: 1 !important; box-shadow: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}