/* 03 — « Tout se joue dans WhatsApp » */
:root { --ink-stamp: #24324f; --paper: #fffdf6; --serif: "Fraunces", Georgia, serif; }

/* ---------- Boutons WhatsApp ---------- */
.waico { flex: none; }
.btn--wa { gap: 8px; }
.btn--xl { min-height: 58px; padding-inline: 28px; font-size: 18px; border-radius: 16px; box-shadow: 0 10px 24px rgba(37, 211, 102, .28); }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--c-green-dark); background: var(--c-green-pale); padding: 6px 12px; border-radius: 999px; margin-bottom: 18px; }
.eyebrow .waico { width: 16px; height: 16px; }

/* ---------- Hero ---------- */
.hero__wa { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.hero__wa-note { font-size: 14px; opacity: .9; }
.hero__chips { flex-direction: row; flex-wrap: wrap; }

/* ---------- Pensé pour durer : philatélie ---------- */
.phil { background: var(--paper); padding: 110px 0 90px; position: relative; overflow: hidden; }
.phil::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 31px, rgba(36, 50, 79, .05) 31px 32px); pointer-events: none; }
.phil .container { position: relative; }
.phil__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 72px; align-items: center; }
.phil__stampzone { position: relative; display: grid; place-items: center; min-height: 480px; }
.phil__stampwrap { filter: drop-shadow(0 18px 30px rgba(36, 50, 79, .18)) drop-shadow(0 2px 2px rgba(0,0,0,.12)); transform: rotate(-4deg); }
.phil__stamp { --t: 18px; --h: 5.5px; width: 320px; padding: var(--t); background: #fff;
  -webkit-mask: radial-gradient(circle var(--h) at 50% 50%, #0000 96%, #000) calc(var(--t) / -2) calc(var(--t) / -2) / var(--t) var(--t) round, linear-gradient(#000 0 0) content-box;
  mask: radial-gradient(circle var(--h) at 50% 50%, #0000 96%, #000) calc(var(--t) / -2) calc(var(--t) / -2) / var(--t) var(--t) round, linear-gradient(#000 0 0) content-box; }
.phil__stampin { position: relative; border: 2px solid #e8dfc9; padding: 10px; background: #fbf7ee; }
.phil__photo { aspect-ratio: 245 / 320; background: url(/assets/img/durer-postcard-annotated.jpg) 29.2% 43.5% / 561.6% auto no-repeat; }
.phil__place { position: absolute; left: 22px; bottom: 16px; font-family: var(--serif); font-size: 34px; font-weight: 700; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.35); font-style: italic; }
.phil__brand { position: absolute; left: 22px; top: 16px; font-family: var(--serif); font-size: 18px; font-weight: 700; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.4); }
.phil__brand b { color: var(--c-green); }
.phil__postmark { position: absolute; width: 360px; right: -60px; top: 6px; color: var(--ink-stamp); opacity: .78; transform: rotate(-12deg); font-family: var(--font-mono); mix-blend-mode: multiply; }
.phil__fiche { background: #fff; border: 1px solid #e8dfc9; border-radius: 6px; padding: 34px 36px 36px; box-shadow: 0 1px 0 #e8dfc9, 0 24px 50px rgba(36, 50, 79, .08); position: relative; }
.phil__fiche::after { content: ""; position: absolute; top: -12px; left: 50%; width: 110px; height: 24px; transform: translateX(-50%) rotate(-2deg); background: rgba(230, 255, 218, .85); border: 1px solid rgba(31, 168, 85, .2); }
.phil__kicker { font-family: var(--font-mono); font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--c-grey); margin-bottom: 10px; }
.phil .durer__title { font-family: var(--serif); font-weight: 700; letter-spacing: -.5px; }
.phil .durer__title .light { font-weight: 500; font-style: italic; color: var(--c-slate); }
.phil__meta { margin: 18px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px dashed #d8ccb0; border-bottom: 1px dashed #d8ccb0; }
.phil__meta div { padding: 10px 0; }
.phil__meta div + div { border-left: 1px dashed #d8ccb0; padding-left: 16px; }
.phil__meta dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--c-grey); }
.phil__meta dd { margin: 2px 0 0; font-weight: 600; font-size: 15px; }
.phil__list { margin-top: 6px; }
.phil__list li { display: grid; grid-template-columns: 52px 30px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid #f0e8d6; }
.phil__thumb { grid-row: span 2; width: 52px; height: 52px; border-radius: 6px; border: 1px solid #e8dfc9; background: url(/assets/img/durer-postcard-annotated.jpg) no-repeat; }
.phil__thumb--photo { background-position: 29.2% 43.5%; background-size: 561.6% auto; }
.phil__thumb--stamp { background-position: 67.8% 18.1%; background-size: 1196% auto; }
.phil__thumb--mot { background-position: 64% 55%; background-size: 560% auto; }
.phil__thumb--coeur { background-position: 70.1% 75.9%; background-size: 1349% auto; }
.phil__num { grid-row: span 2; font-family: var(--font-mono); font-size: 13px; color: var(--c-green-dark); }
.phil__list b { font-size: 16px; font-weight: 600; }
.phil__list li > span:last-child { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--c-slate); }
.phil .durer__text { font-size: 17px; line-height: 26px; margin-top: 18px; }
.phil .btn { margin-top: 22px; }
.phil__piece { margin: 72px auto 0; max-width: 1000px; text-align: center; background: #fff; border: 1px solid #e8dfc9; border-radius: 6px; padding: 18px 18px 16px; box-shadow: 0 24px 50px rgba(36, 50, 79, .08); }
.phil__piece img { width: 100%; height: auto; }
.phil__piece figcaption { margin-top: 6px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--c-grey); }

/* ---------- Réserve dans la conversation ---------- */
.chatbuy { background: linear-gradient(180deg, var(--c-cream) 0%, #f1fbec 100%); }
.chatbuy__grid { display: grid; grid-template-columns: 1fr 400px; gap: 80px; align-items: center; }
.chatbuy__lead { margin-top: 18px; font-size: 19px; line-height: 28px; color: var(--c-slate); max-width: 520px; }
.chatbuy__how { margin: 28px 0 30px; display: grid; gap: 12px; }
.chatbuy__how li { display: flex; gap: 14px; align-items: center; font-size: 17px; font-weight: 500; }
.chatbuy__how b { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid var(--c-green); color: var(--c-green-dark); font-family: var(--font-mono); font-size: 14px; }
.chatbuy__note { margin-top: 14px; font-size: 14px; color: var(--c-grey); }
.chatbuy__reas { margin-top: 34px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; max-width: 540px; }
.chatbuy__reas li { display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--c-grey); }
.chatbuy__reas img { width: 40px; height: 40px; object-fit: contain; flex: none; }
.chatbuy__reas b { display: block; color: var(--c-ink); font-weight: 600; }
.chatbuy .phone { width: 400px; }
.chatbuy .phone__chat { min-height: 0; gap: 8px; }
.wa--list { max-width: 88%; padding: 10px 12px 8px; }
.wa-list__head { font-weight: 700; font-size: 15px; }
.wa-list__body { margin-top: 4px; font-size: 14px; line-height: 19px; }
.wa-list__foot { margin-top: 6px; font-size: 12px; color: var(--c-wa-time); }
.wa-opts { position: relative; display: grid; gap: 6px; max-width: 88%; }
.wa-opt { position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 10px; padding: 10px 12px; background: #fff; border-radius: 10px; box-shadow: 0 1px .5px rgba(11,20,26,.13); transition: transform .15s, box-shadow .15s; }
.wa-opt:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(11,20,26,.12); }
.wa-opt__name { font-weight: 600; font-size: 15px; color: #027eb5; }
.wa-opt__name small { font-weight: 500; font-size: 12px; color: var(--c-grey); margin-left: 4px; }
.wa-opt__sub { grid-column: 1; font-size: 12px; color: var(--c-grey); }
.wa-opt__price { grid-row: 1 / span 2; grid-column: 2; align-self: center; text-align: right; font-weight: 700; font-size: 17px; }
.wa-opt__price em { display: block; font-style: normal; font-size: 11px; font-weight: 700; color: var(--c-green-dark); }
.wa-opt.is-reco { outline: 2px solid var(--c-green); margin-top: 10px; }
.wa-opt__badge { position: absolute; top: -10px; left: 12px; font-size: 10px; font-weight: 700; letter-spacing: .3px; background: var(--c-green); color: var(--c-ink); padding: 2px 8px; border-radius: 5px; }
.wa-hint { align-self: center; margin-top: 4px; font-size: 12px; color: var(--c-slate); background: rgba(255,255,255,.75); border-radius: 8px; padding: 4px 10px; text-align: center; position: relative; }

/* ---------- Avant / après ---------- */
.ba-sec .compare__title { font-family: var(--font-sans); }
.ba { position: relative; margin: 56px auto 0; aspect-ratio: 16 / 8.2; max-width: 1128px; border-radius: 28px; overflow: hidden; background: #222; user-select: none; touch-action: pan-y; box-shadow: 0 30px 60px rgba(17, 27, 33, .14); }
.ba__after, .ba__before { position: absolute; inset: 0; }
.fridge { position: absolute; inset: 0; background: linear-gradient(100deg, #f4f5f3 0%, #e9ebe8 55%, #f7f8f6 100%); }
.fridge::after { content: ""; position: absolute; left: 0; right: 0; top: 30%; height: 2px; background: rgba(0,0,0,.06); box-shadow: 0 1px 0 #fff; }
.fridge__handle { position: absolute; right: 3.2%; top: 8%; width: 14px; height: 20%; border-radius: 8px; background: linear-gradient(90deg, #cfd3d0, #f9faf9 60%, #c3c8c4); box-shadow: 0 6px 12px rgba(0,0,0,.12); }
.print { position: absolute; background: #fff; padding: 8px 8px 24px; box-shadow: 0 14px 26px rgba(0,0,0,.18); }
.print img { width: 100%; height: 100%; object-fit: cover; }
.print::before { content: ""; position: absolute; top: -9px; left: 50%; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #6ee59a, #1fa855 70%); box-shadow: 0 3px 5px rgba(0,0,0,.25); z-index: 1; }
.print--1 { left: 6%; top: 16%; width: 23%; aspect-ratio: 1 / 1.1; transform: rotate(-6deg); }
.print--2 { left: 30%; top: 44%; width: 24%; aspect-ratio: 1.25 / 1; transform: rotate(4deg); }
.print--3 { left: 56%; top: 13%; width: 21%; aspect-ratio: 1 / 1.12; transform: rotate(-3deg); }
.print--4 { left: 73%; top: 50%; width: 22%; aspect-ratio: 1.3 / 1; transform: rotate(5deg); }
.print--2::before { background: radial-gradient(circle at 35% 35%, #ffd27a, #e1a32b 70%); }
.print--4::before { background: radial-gradient(circle at 35% 35%, #ff9b8a, #e1512b 70%); }
.ba__before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); background: radial-gradient(120% 90% at 30% 50%, #3a3f45 0%, #1d2024 70%); display: grid; place-items: center start; padding-left: 12%; }
.gal { width: 270px; border-radius: 34px; background: #000; padding: 10px; box-shadow: 0 30px 60px rgba(0,0,0,.45), inset 0 0 0 2px #333; }
.gal__bar { display: flex; justify-content: space-between; color: #fff; font: 600 11px var(--font-ios); padding: 4px 16px 6px; }
.gal__head { display: flex; justify-content: space-between; align-items: baseline; color: #fff; padding: 2px 8px 8px; font-family: var(--font-ios); }
.gal__head b { font-size: 20px; } .gal__head span { font-size: 11px; color: #9aa0a6; }
.gal__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; border-radius: 0 0 24px 24px; overflow: hidden; }
.gal__grid > * { aspect-ratio: 1; width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.75) brightness(.9); }
.sc { background: linear-gradient(#f2f2f2 0 18%, #fff 18% 100%); position: relative; }
.sc::before { content: ""; position: absolute; left: 14%; right: 14%; top: 32%; height: 40%; background: repeating-linear-gradient(180deg, #d6d6d6 0 3px, transparent 3px 8px); }
.sc--b { background: linear-gradient(#1f2c34 0 18%, #0b141a 18% 100%); }
.sc--b::before { background: repeating-linear-gradient(180deg, #2a3942 0 4px, transparent 4px 10px); }
.sc--c { background: linear-gradient(#e8f0fe 0 22%, #fff 22%); }
.sc--c::before { top: 30%; height: 30%; background: linear-gradient(90deg, #c9d8f5 0 60%, transparent 60%) 0 0 / 100% 6px repeat-y; }
.snork { background: url(/assets/img/durer-postcard-annotated.jpg) 29.2% 43.5% / 561.6% auto no-repeat; }
.ba__label { position: absolute; top: 20px; left: 20px; padding: 7px 14px; border-radius: 999px; background: rgba(0,0,0,.6); color: #fff; font-size: 14px; font-weight: 600; backdrop-filter: blur(6px); white-space: nowrap; }
.ba__label--after { left: auto; right: 20px; background: #fff; color: var(--c-ink); }
.ba__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: #fff; pointer-events: none; box-shadow: 0 0 12px rgba(0,0,0,.3); }
.ba__handle span { position: absolute; top: 50%; left: 50%; width: 52px; height: 52px; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 20px; font-weight: 700; letter-spacing: 2px; color: var(--c-ink); box-shadow: 0 8px 20px rgba(0,0,0,.25); }
.ba__range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.ba__range:focus-visible + * , .ba:focus-within .ba__handle span { outline: 3px solid var(--c-green); outline-offset: 2px; }
.ba__points { margin: 34px auto 0; max-width: 1128px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ba__points li { display: flex; gap: 10px; align-items: center; font-size: 15px; font-weight: 500; background: #fff; border-radius: 14px; padding: 14px 16px; }
.ba__points img { width: 24px; height: 24px; flex: none; }

/* ---------- CTA final ---------- */
.final__btn { margin-top: 34px; }
.final .wa-input { margin-top: 18px; }

/* ---------- Bouton flottant (mobile) ---------- */
.wa-fab { display: none; }

@media (max-width: 1200px) {
  .chatbuy__grid { grid-template-columns: 1fr 380px; gap: 48px; }
  .phil__grid { gap: 40px; }
}
@media (max-width: 960px) {
  .phil__grid, .chatbuy__grid { grid-template-columns: 1fr; }
  .phil__stampzone { min-height: 400px; }
  .ba__points { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .site-header .btn--wa .waico { width: 16px; height: 16px; }
  .hero__cta { display: none; }
  .hero__wa { margin-top: 22px; }
  .hero__wa .btn { width: 100%; }
  .hero__wa-note { font-size: 13px; }
  .btn--xl { min-height: 54px; font-size: 17px; }
  .phil { padding: 64px 0 56px; }
  .phil__stampzone { min-height: 330px; }
  .phil__stamp { width: 220px; --r: 7px; }
  .phil__place { font-size: 24px; left: 16px; bottom: 12px; }
  .phil__brand { font-size: 14px; left: 16px; top: 10px; }
  .phil__postmark { width: 210px; right: -64px; top: 6px; }
  .phil__fiche { padding: 26px 18px 24px; }
  .phil__meta { grid-template-columns: 1fr; }
  .phil__meta div + div { border-left: 0; padding-left: 0; border-top: 1px dashed #d8ccb0; }
  .phil__list li { grid-template-columns: 44px 24px 1fr; column-gap: 10px; }
  .phil__thumb { width: 44px; height: 44px; }
  .phil__list b { font-size: 15px; }
  .phil__list li > span:last-child { font-size: 14px; }
  .phil .btn { width: 100%; }
  .phil__piece { margin-top: 40px; }
  .chatbuy__lead { font-size: 17px; line-height: 26px; }
  .chatbuy__how li { font-size: 16px; }
  .chatbuy__text .btn { width: 100%; }
  .chatbuy__reas { grid-template-columns: 1fr; }
  .chatbuy .phone { width: 100%; }
  .wa--list, .wa-opts { max-width: 94%; }
  .ba { aspect-ratio: 4 / 5.2; border-radius: 20px; margin-top: 32px; }
  .ba__before { padding-left: 6%; place-items: center start; }
  .gal { width: 168px; border-radius: 24px; padding: 6px; }
  .gal__bar { font-size: 9px; padding: 2px 10px 4px; }
  .gal__head b { font-size: 15px; } .gal__head span { font-size: 9px; }
  .gal__grid { border-radius: 0 0 18px 18px; }
  .print { padding: 4px 4px 12px; }
  .print--1 { left: 6%; top: 14%; width: 40%; }
  .print--2 { left: 10%; top: 58%; width: 42%; }
  .print--3 { left: 54%; top: 18%; width: 38%; }
  .print--4 { left: 50%; top: 60%; width: 42%; }
  .ba__label { font-size: 11px; top: 12px; left: 12px; padding: 5px 10px; white-space: normal; max-width: 44%; }
  .ba__label--after { left: auto; right: 12px; }
  .ba__handle span { width: 42px; height: 42px; font-size: 16px; }
  .ba__points { grid-template-columns: 1fr; gap: 8px; }
  .final__btn .btn { width: calc(100% - 40px); }
  .wa-fab { display: inline-flex; position: fixed; right: 12px; bottom: 12px; z-index: 80; align-items: center; gap: 8px; padding: 12px 16px; border-radius: 999px; background: var(--c-green); color: var(--c-ink); font-weight: 700; font-size: 15px; box-shadow: 0 10px 24px rgba(17, 27, 33, .25); transform: translateY(120px); transition: transform .3s var(--ease); }
  .wa-fab.is-on { transform: none; }
}

/* Preuve : la photo ne chevauche plus le titre */
.proof { padding-top: 90px; }
.proof__top { transform: none; margin-bottom: 0; }
.proof__title { margin-top: 64px; }
@media (max-width: 600px) { .proof { padding-top: 56px; } .proof__top { padding-top: 0; } .proof__title { margin-top: 48px; } }