/* ---------- Carte postale recomposée (crops de la vraie carte durer-postcard-annotated.jpg, sans les annotations) ---------- */
.pc { --src: url(/assets/img/durer-postcard-annotated.jpg); position: relative; container-type: inline-size; aspect-ratio: 3 / 2; background: #f9f9f7; border-radius: 3px; box-shadow: 0 18px 40px rgba(65, 31, 17, .16), 0 2px 4px rgba(0,0,0,.08); overflow: hidden; }
.pc > * { position: absolute; }
.pc__photo { left: 5cqw; top: 6cqw; width: 36cqw; height: 47cqw; background: var(--src) 29.2% 43.5% / 561.6% auto no-repeat; border: .9cqw solid #fff; box-shadow: 0 0 0 .35cqw #c9a85a; }
.pc__sep { left: 48cqw; top: 6cqw; bottom: 6cqw; border-left: 1.5px dotted #8c8c8c; }
.pc__stamp { right: 4cqw; top: 4cqw; width: 15cqw; aspect-ratio: 1; background: var(--src) 67.7% 18.3% / 1217.7% auto no-repeat; }
.pc__pm { right: 17cqw; top: 6cqw; width: 15cqw; color: #2b3a55; opacity: .8; transform: rotate(-10deg); font-family: var(--font-mono); }
.pc__mot { left: 51.5cqw; top: 23cqw; width: 45cqw; aspect-ratio: 318 / 185; background: var(--src) 62.4% 53.5% / 432.7% auto no-repeat; mix-blend-mode: multiply; filter: brightness(1.04) contrast(1.12); }
.pc__mot::after { content: ""; position: absolute; right: 0; top: 8%; width: 8%; height: 22%; background: #f9f9f7; }
.pc__coeur { right: 5cqw; bottom: 4cqw; width: 12cqw; aspect-ratio: 95 / 83; background: var(--src) 69.5% 75.2% / 1448% auto no-repeat; mix-blend-mode: multiply; }

/* 04 — « Le calculateur de sourires » */
:root { --hand: "Caveat", cursive; --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .12 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* Hero : ancre de prix */
.hero__buy { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.hero__anchor { font-size: 16px; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28); backdrop-filter: blur(6px); }
.hero__anchor b { color: #b9f5cf; }
.hero__chips { flex-direction: row; flex-wrap: wrap; }

/* Pensé pour durer : 2026 → 2046 */
.age { background: #fff; }
.age__head { text-align: center; max-width: 760px; margin: 0 auto; }
.age__kicker { font-family: var(--font-mono); font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--c-green-dark); margin-bottom: 12px; }
.age .durer__text { margin: 18px auto 0; max-width: 620px; }
.age__line { position: relative; margin-top: 64px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; }
.age__line::before { content: ""; position: absolute; left: 6%; right: 6%; top: 15px; height: 2px; background: linear-gradient(90deg, var(--c-green) 0%, #c9a85a 55%, #9b7b4f 100%); }
.age__item { position: relative; text-align: center; }
.age__year { position: relative; z-index: 1; display: inline-block; padding: 4px 16px; border-radius: 999px; background: #fff; border: 2px solid var(--c-green); font-family: var(--font-mono); font-size: 15px; font-weight: 500; }
.age__item--2 .age__year { border-color: #c9a85a; }
.age__item--3 .age__year { border-color: #9b7b4f; }
.age__stage { margin: 40px auto 0; width: 100%; max-width: 340px; aspect-ratio: 3 / 2.25; display: grid; place-items: center; }
.age__stage .pc { width: 100%; }
.age__item--1 .pc { transform: rotate(-2deg); }
.age__item--2 .pc { transform: rotate(3deg); filter: sepia(.38) saturate(.8) contrast(.97); border-radius: 6px; }
.age__item--3 .pc { transform: rotate(-5deg); filter: sepia(.78) saturate(.55) brightness(.95) contrast(.9); border-radius: 12px; }
.age__item--2 .pc::after, .age__item--3 .pc::after { content: ""; position: absolute; inset: 0; background: var(--grain); mix-blend-mode: multiply; opacity: .22; pointer-events: none; }
.age__item--3 .pc::after { opacity: .5; background: linear-gradient(97deg, transparent 49.4%, rgba(255,255,255,.55) 49.8%, rgba(90,60,30,.25) 50.4%, transparent 51%), radial-gradient(120% 120% at 50% 50%, transparent 55%, rgba(120,80,30,.35) 100%), var(--grain); }
.age__item--2 .pc::before { content: ""; position: absolute; z-index: 2; top: -4px; left: 50%; width: 70px; height: 20px; margin-left: -35px; background: rgba(255, 250, 220, .7); transform: rotate(-3deg); box-shadow: 0 1px 2px rgba(0,0,0,.1); }
.age__cap { margin-top: 36px; font-size: 15px; line-height: 23px; color: var(--c-slate); max-width: 320px; margin-inline: auto; }
.age__cap b { display: block; font-size: 17px; color: var(--c-ink); margin-bottom: 4px; }
.age__cta { text-align: center; margin-top: 48px; }

/* Calculateur */
.calc__head { text-align: center; }
.calc__head .lead--grey { margin-top: 16px; }
.calc__box { margin-top: 48px; display: grid; grid-template-columns: 1.15fr 1fr; background: #fff; border-radius: 28px; box-shadow: 0 30px 70px rgba(31, 168, 85, .14); overflow: hidden; border: 1px solid var(--c-border-soft); }
.calc__ask { padding: 44px 48px; }
.calc__q { display: block; font-size: 22px; line-height: 1.3; font-weight: 600; color: var(--c-ink-2); }
.calc__n { margin-top: 22px; display: flex; align-items: baseline; gap: 10px; }
.calc__n output { font-size: 88px; line-height: 1; font-weight: 600; letter-spacing: -3px; color: var(--c-green-dark); font-variant-numeric: tabular-nums; }
.calc__n span { font-size: 24px; font-weight: 500; color: var(--c-slate); }
.calc__range { -webkit-appearance: none; appearance: none; width: 100%; height: 10px; margin: 26px 0 0; border-radius: 999px; background: linear-gradient(90deg, var(--c-green) var(--p), #e7ece8 var(--p)); cursor: pointer; }
.calc__range::-webkit-slider-thumb { -webkit-appearance: none; width: 32px; height: 32px; border-radius: 50%; background: #fff; border: 3px solid var(--c-green); box-shadow: 0 4px 12px rgba(0,0,0,.18); }
.calc__range::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 3px solid var(--c-green); }
.calc__ticks { position: relative; height: 22px; margin: 10px 16px 0; font-family: var(--font-mono); font-size: 12px; color: var(--c-grey); }
.calc__ticks span { position: absolute; transform: translateX(-50%); }
.calc__ideas { margin-top: 22px; font-size: 14px; line-height: 21px; color: var(--c-grey); max-width: 480px; }
.calc__result { padding: 40px 44px; background: var(--c-green-pale); }
.calc__reco { font-family: var(--font-mono); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--c-green-dark); }
.calc__name { margin-top: 6px; font-size: 38px; line-height: 1.1; font-weight: 600; letter-spacing: -.8px; }
.calc__sub { margin-top: 6px; font-size: 15px; color: var(--c-slate); }
.calc__nums { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.calc__nums > div { background: #fff; border-radius: 16px; padding: 14px 16px; }
.calc__nums span { display: block; font-size: 13px; color: var(--c-grey); }
.calc__nums b { display: block; margin-top: 2px; font-size: 26px; font-weight: 600; white-space: nowrap; color: var(--c-ink); }
.calc__nums > div:first-child b { color: var(--c-green-dark); }
.calc__nums small { display: flex; gap: 6px; align-items: center; margin-top: 4px; font-size: 13px; color: var(--c-grey); }
.calc__nums em { font-style: normal; font-size: 12px; padding: 2px 6px; }
.calc__left { margin: 16px 0 18px; font-size: 14px; color: var(--c-slate); min-height: 21px; }
.calc__reas { margin-top: 12px; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; font-size: 12px; color: var(--c-grey); }
.calc__offers { margin-top: 22px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.mini { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; text-align: left; padding: 16px 18px; border-radius: 18px; background: #fff; border: 1px solid var(--c-border-card); transition: border-color .2s, background .2s; }
.mini:hover { border-color: var(--c-green); }
.mini.is-on { border: 2px solid var(--c-green); padding: 15px 17px; background: #fbfffa; }
.mini__badge { position: absolute; top: -10px; left: 16px; font-size: 10px; font-weight: 700; background: var(--c-green); padding: 2px 8px; border-radius: 5px; }
.mini__name { font-size: 17px; font-weight: 600; }
.mini .tag { grid-column: 2; grid-row: 1; justify-self: end; font-size: 12px; }
.mini__count { grid-column: 1 / -1; font-size: 13px; color: var(--c-grey); }
.mini__price { grid-column: 1 / -1; margin-top: 6px; font-size: 13px; color: var(--c-grey); }
.mini__price b { font-size: 20px; color: var(--c-ink); margin-right: 4px; }

/* Ce que tu n'as plus à faire */
.chores__pad { position: relative; margin: 52px auto 0; max-width: 900px; background: #fffef8; border-radius: 6px; padding: 30px 40px 30px 92px; box-shadow: 0 1px 0 #ece4cf, 0 24px 60px rgba(65, 31, 17, .10); background-image: repeating-linear-gradient(180deg, transparent 0 51px, #e3eef5 51px 52px); background-position: 0 70px; }
.chores__pad::before { content: ""; position: absolute; left: 66px; top: 0; bottom: 0; width: 2px; background: rgba(225, 81, 43, .35); }
.chores__pin { font-family: var(--hand); font-size: 30px; font-weight: 700; color: var(--c-slate); line-height: 40px; }
.chores__list li { min-height: 52px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 24px; padding: 6px 0; }
.chore { -webkit-box-decoration-break: clone; box-decoration-break: clone; font-family: var(--hand); font-size: 27px; line-height: 1.15; color: #6b6f78; text-decoration: none; background: linear-gradient(rgba(225, 81, 43, .85), rgba(225, 81, 43, .85)) 0 58% / 0 2.5px no-repeat; transition: background-size .6s var(--ease) calc(var(--i) * .12s + .3s); }
.chores__pad.is-in .chore { background-size: 100% 2.5px; }
.chores__fix { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; color: var(--c-ink); }
.chores__fix img { width: 30px; height: 30px; border-radius: 50%; flex: none; box-shadow: var(--sh-logo); }

/* Preuve : pas de chevauchement */
.proof { padding-top: 90px; }
.proof__top { transform: none; margin-bottom: 0; }
.proof__title { margin-top: 64px; }

@media (max-width: 960px) {
  .calc__box { grid-template-columns: 1fr; }
  .age__line { grid-template-columns: 1fr; gap: 56px; }
  .age__line::before { left: 50%; right: auto; top: 0; bottom: 0; width: 2px; height: auto; background: linear-gradient(180deg, var(--c-green), #9b7b4f); opacity: .5; }
}
@media (max-width: 600px) {
  .hero__cta { display: none; }
  .hero__buy { margin-top: 22px; }
  .hero__buy .btn { width: 100%; }
  .hero__anchor { font-size: 14px; }
  .age__stage { max-width: 300px; margin-top: 24px; }
  .age__cap { margin-top: 20px; background: #fff; position: relative; }
  .age__cta .btn { width: 100%; }
  .calc__box { margin-top: 32px; border-radius: 22px; }
  .calc__ask { padding: 26px 20px 22px; }
  .calc__q { font-size: 19px; }
  .calc__n output { font-size: 64px; }
  .calc__result { padding: 24px 20px; }
  .calc__name { font-size: 30px; }
  .calc__nums b { font-size: 21px; }
  .calc__offers { grid-template-columns: 1fr; gap: 14px; }
  .chores__pad { padding: 22px 16px 22px 40px; background-position: 0 60px; }
  .chores__pad::before { left: 26px; }
  .chores__pin { font-size: 26px; }
  .chores__list li { grid-template-columns: 1fr; gap: 4px; padding: 10px 0; }
  .chore { font-size: 24px; }
  .chores__fix { font-size: 15px; }
  .proof { padding-top: 56px; } .proof__top { padding-top: 0; } .proof__title { margin-top: 48px; }
}