/* ==========================================================================
   v02 — « Une page Tarifs »
   Accueil sans sélecteur (prix d'appel dans le hero + bandeau Tarifs),
   page /v/02/tarifs/ dédiée, loupe sur la carte, chrono à la place du comparatif.
   ========================================================================== */
.eyebrow { display: inline-block; margin-bottom: 18px; padding: 6px 12px; border-radius: 999px; background: var(--c-green-pale); color: var(--c-green-dark); font: 600 12px/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.btn--ghost { background: #fff; color: var(--c-ink); box-shadow: inset 0 0 0 1.5px var(--c-ink); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--c-ink), var(--sh-hover-neutral); }
/* ---------- Preuve sociale (sans photo d'équipe) ---------- */
.proof--slim { padding: 96px 0 40px; }
.proof--slim .proof__rating { display: flex; flex-direction: column; align-items: center; }
.proof--slim .proof__mascot { position: static; width: 104px; margin-bottom: 6px; }
.proof--slim .proof__title { margin-top: 26px; }

/* ---------- Tarifs : 3 cartes après les avis, avant la FAQ ---------- */
.tarifs { background: #fff; padding-top: 72px; }
.tarifs__head { text-align: center; }
.tarifs__head .lead--grey { margin-top: 18px; }
.tarifs__offer { display: inline-block; margin-top: 22px; padding: 8px 14px; border-radius: 999px; background: var(--c-green-pale); font-size: 15px; font-weight: 500; }
.pcards { margin-top: 64px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.pcard { position: relative; display: flex; flex-direction: column; padding: 32px 28px 28px; border-radius: var(--r-24); background: var(--c-cream); border: 1px solid var(--c-border-card); }
.pcard--hl { background: #fff; border: 2px solid var(--c-green); padding: 31px 27px 27px; box-shadow: var(--sh-hector-col); transform: translateY(-14px); }
.pcard__badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); padding: 5px 14px; border-radius: var(--r-8); background: var(--c-green); color: var(--c-ink); font-size: 12px; font-weight: 700; letter-spacing: .4px; white-space: nowrap; }
.pcard__name { font-size: 24px; line-height: 1.2; font-weight: 600; letter-spacing: -.4px; }
.pcard__sub { margin-top: 4px; font-size: 15px; color: var(--c-grey); }
.pcard__count { margin-top: 22px; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 15px; font-weight: 600; color: var(--c-green-dark); }
.pcard__unit { margin-top: 10px; display: flex; align-items: baseline; gap: 8px; }
.pcard__unit b { font-size: 52px; line-height: 1; font-weight: 600; letter-spacing: -1.5px; color: var(--c-ink); }
.pcard--hl .pcard__unit b { color: var(--c-green-dark); }
.pcard__unit span { font-size: 17px; color: var(--c-grey); }
.pcard__total { margin-top: 8px; font-size: 14px; color: var(--c-grey); }
.pcard__total b { color: var(--c-ink); font-weight: 600; }
.pcard .btn { margin-top: 24px; }
.pcard__checks { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--c-border-faq); }
.pcard__checks li { font-size: 14.5px; line-height: 1.4; }
.pcards__swipe { display: none; }
.tarifs__trust { margin: 48px auto 0; max-width: 900px; padding: 30px 36px 26px; border-radius: var(--r-24); background: var(--c-cream); }
.tarifs__trust .norisk { margin-top: 0; }
.tarifs__trust .norisk h3 { text-align: center; }
.tarifs__trust .pay { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--c-border-faq); font-size: 13px; }


/* ---------- Hero : CTA visible + prix d'appel ---------- */
.hero__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 20px; margin-top: 30px; }
.hero__from { color: #fff; font-size: 15px; line-height: 1.45; max-width: 300px; }
.hero__from b { font-size: 17px; }
.hero__from a { font-weight: 600; text-decoration: underline; text-underline-offset: 4px; white-space: nowrap; }
.hero__from a:hover { color: var(--c-green-pale); }

/* ---------- Pensé pour durer : la loupe ---------- */
.loupe { background: #fff; padding: 96px 0; }
.loupe .container { width: min(1240px, 100% - 2 * var(--gutter-mobile)); }
.loupe__grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.loupe__stage { position: relative; container-type: inline-size; }
.loupe__img { width: 100%; height: auto; }
.lens { position: absolute; z-index: 2; left: calc(var(--fx) * 100%); top: calc(var(--fy) * 100%); width: 230px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; transform: translate(-50%, -50%); background: #fff; border: 4px solid #fff; box-shadow: 0 0 0 2px var(--c-green), 0 24px 50px rgba(17, 27, 33, .28); pointer-events: none; transition: left .55s var(--ease), top .55s var(--ease); }
.lens img { position: absolute; max-width: none; width: calc(var(--s) * 100cqw); left: calc(50% - var(--fx) * var(--s) * 100cqw); top: calc(50% - var(--fy) * var(--s) * 55.814cqw); transition: width .55s var(--ease), left .55s var(--ease), top .55s var(--ease); }
.hs { position: absolute; z-index: 3; left: calc(var(--fx) * 100%); top: calc(var(--fy) * 100%); width: 34px; height: 34px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--c-green); color: var(--c-ink); font: 700 14px/34px var(--font-mono); text-align: center; box-shadow: 0 0 0 4px rgba(255, 255, 255, .9), 0 6px 14px rgba(0, 0, 0, .2); animation: hs-pulse 2.4s infinite; transition: opacity .3s; }
.hs.is-active { opacity: 0; pointer-events: none; }
@keyframes hs-pulse { 50% { box-shadow: 0 0 0 4px rgba(255, 255, 255, .9), 0 0 0 12px rgba(37, 211, 102, .25); } }
.loupe__side .durer__text { margin-top: 14px; font-size: 18px; line-height: 26px; }
.loupe__tabs { margin-top: 24px; display: grid; gap: 8px; }
.loupe__tabs button { width: 100%; display: flex; gap: 12px; align-items: flex-start; padding: 10px 14px; border-radius: var(--r-14); border: 1px solid var(--c-border-soft); background: var(--c-cream); text-align: left; transition: background .25s, border-color .25s; }
.loupe__tabs i { flex: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 1px solid var(--c-border-card); font: 700 12px/24px var(--font-mono); font-style: normal; text-align: center; }
.loupe__tabs b { display: block; font-size: 15px; font-weight: 600; }
.loupe__tabs small { display: block; font-size: 13.5px; line-height: 1.4; color: var(--c-grey); }
.loupe__tabs button.is-active { background: var(--c-green-pale); border-color: var(--c-green); }
.loupe__tabs button.is-active i { background: var(--c-green); border-color: var(--c-green); }
.loupe__side .btn { margin-top: 24px; }

/* ---------- Bandeau Tarifs (après les témoignages) ---------- */
.teaser { padding: 0 0 24px; margin-top: -40px; }
.teaser__box { display: flex; align-items: center; gap: 24px; padding: 20px 22px 20px 26px; border-radius: var(--r-20); background: var(--c-green-pale); border: 1px solid rgba(31, 168, 85, .25); transition: transform .2s var(--ease), box-shadow .2s; }
.teaser__box:hover { transform: translateY(-2px); box-shadow: var(--sh-card); }
.teaser__intro { display: flex; flex-direction: column; align-items: flex-start; }
.teaser__intro .eyebrow { margin-bottom: 6px; background: #fff; }
.teaser__title { font-size: 20px; line-height: 1.3; font-weight: 600; }
.teaser__packs { display: flex; gap: 8px; margin-left: auto; }
.teaser__pack { display: flex; flex-direction: column; padding: 7px 12px; border-radius: var(--r-12); background: #fff; border: 1px solid transparent; }
.teaser__pack b { font-size: 14px; font-weight: 600; }
.teaser__pack small { font-size: 13px; color: var(--c-grey); white-space: nowrap; }
.teaser__pack.is-hl { border-color: var(--c-green); }
.teaser__btn { flex: none; }

/* ---------- Chrono (remplace le comparatif) ---------- */
.chrono .compare__head .eyebrow { margin-bottom: 18px; }
.chrono__grid { max-width: 960px; margin: 56px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.chrono__card { padding: 28px; border-radius: var(--r-24); background: rgba(255, 255, 255, .55); border: 1px solid var(--c-border-soft); }
.chrono__card--hector { background: #fff; border: 2px solid var(--c-green); padding: 27px; box-shadow: var(--sh-hector-col); }
.chrono__head { display: flex; align-items: center; gap: 12px; min-height: 48px; }
.chrono__head b { display: block; font-size: 20px; font-weight: 600; }
.chrono__head .tag { margin-top: 4px; }
.chrono__logo { width: 40px; height: 40px; border-radius: 50%; box-shadow: var(--sh-tile); }
.chrono__logos { display: flex; flex: none; }
.chrono__logos img { width: 30px; height: 30px; margin-left: -4px; border-radius: var(--r-10); object-fit: cover; background: #fff; box-shadow: var(--sh-tile); }
.chrono__sublabel { display: block; font-size: 13px; color: var(--c-grey); }
.watch { position: relative; width: 168px; margin: 24px auto 8px; }
.watch svg { width: 100%; height: auto; overflow: visible; }
.watch__track { fill: none; stroke: #e9eeea; stroke-width: 8; }
.watch__prog { fill: none; stroke: var(--c-green); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 60px 60px; }
.watch__time { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--c-green-dark); }
.watch__time b { font-size: 54px; font-weight: 600; letter-spacing: -1.5px; }
.watch__time span { font-size: 22px; font-weight: 600; margin-left: 2px; }
.watch__time--others { display: none; }
.watch__hand { stroke: var(--c-grey); stroke-width: 4; stroke-linecap: round; transform-origin: 60px 60px; animation: hand 3s linear infinite; }
.watch__pin { fill: var(--c-grey); }
@keyframes hand { to { transform: rotate(360deg); } }
.watch__note { text-align: center; font-size: 15px; font-style: italic; color: var(--c-grey); }
.chrono__card--hector .watch + .chrono__steps { margin-top: 18px; }
.chrono__steps { counter-reset: st; margin-top: 18px; display: grid; gap: 8px; }
.chrono__steps li { counter-increment: st; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--r-12); background: #f4f6f4; font-size: 15px; font-weight: 600; opacity: .3; transform: translateX(-6px); transition: opacity .4s, transform .4s, background-color .4s; }
.chrono__steps li::before { content: counter(st); flex: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; font: 700 11px/22px var(--font-mono); text-align: center; }
.chrono__steps li.is-on { opacity: 1; transform: none; }
.chrono__card--hector .chrono__steps li.is-on { background: var(--c-green-pale); }
.chrono__card--hector .chrono__steps li.is-on::before { background: var(--c-green); }
.chrono__steps--others li { color: var(--c-slate); font-weight: 500; }
.chrono__more { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--c-border-faq); display: grid; gap: 8px; font-size: 14px; }
.chrono__more li { display: flex; gap: 8px; }
.chrono__more--yes li::before { content: "✓"; color: var(--c-green-dark); font-weight: 700; }
.chrono__more--no { color: var(--c-grey); }
.chrono__more--no li::before { content: "✕"; color: var(--c-cross); }

/* ---------- Page Tarifs ---------- */
.ptop { padding: 64px 0 28px; text-align: center; }
.ptop__crumb { font-size: 14px; color: var(--c-grey); }
.ptop__crumb a { text-decoration: underline; text-underline-offset: 3px; }
.ptop__title { margin-top: 14px; font-size: var(--fs-h2-cta); line-height: var(--lh-h2-cta); letter-spacing: var(--ls-h2-cta); font-weight: 600; color: var(--c-ink-2); }
.ptop .lead--grey { margin-top: 18px; }
.ptop__trust { margin-top: 22px; display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 8px; padding: 8px 14px; border-radius: 999px; background: #fff; font-size: 14px; color: var(--c-slate); box-shadow: var(--sh-card); }
.ptop__trust .stars { display: flex; gap: 2px; }
.ptop__trust .stars img { width: 16px; height: 16px; }
.calc-wrap { padding: 20px 0 0; }
.calc { --p: .5; max-width: 980px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; padding: 34px 40px; border-radius: var(--r-24); background: #fff; box-shadow: var(--sh-card); border: 1px solid var(--c-border-soft); }
.calc__title { font-size: 22px; line-height: 1.3; font-weight: 600; }
.calc__range { -webkit-appearance: none; appearance: none; width: 100%; height: 10px; margin: 28px 0 14px; border-radius: 999px; background: linear-gradient(var(--c-green) 0 0) 0 / calc(var(--p) * 100%) 100% no-repeat, #e6ebe7; cursor: pointer; }
.calc__range::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; 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: 26px; height: 26px; border-radius: 50%; background: #fff; border: 3px solid var(--c-green); }
.calc__ticks { display: flex; justify-content: space-between; }
.calc__ticks button { padding: 6px 8px; border-radius: 8px; font-size: 15px; color: var(--c-grey); font-weight: 500; }
.calc__ticks button.is-on { color: var(--c-green-dark); font-weight: 700; background: var(--c-green-pale); }
.calc__right { padding-left: 40px; border-left: 1px solid var(--c-border-faq); }
.calc__name { font-size: 15px; font-weight: 600; color: var(--c-green-dark); }
.calc__unit { margin-top: 6px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; }
.calc__unit b { font-size: 56px; line-height: 1; font-weight: 600; letter-spacing: -1.5px; }
.calc__unit span:not(.tag) { font-size: 18px; color: var(--c-grey); }
.calc__unit s { font-size: 16px; color: var(--c-grey); }
.calc__line { margin-top: 8px; font-size: 14px; color: var(--c-grey); }
.calc__right .btn { margin-top: 18px; }
.page-tarifs .tarifs { background: none; padding-top: 72px; padding-bottom: 48px; }
.page-tarifs .pcards { margin-top: 0; }
.page-tarifs .pcard--hl { transform: none; background: var(--c-cream); border: 1px solid var(--c-border-card); padding: 32px 28px 28px; box-shadow: none; }
.page-tarifs .pcard--hl .pcard__unit b { color: var(--c-ink); }
.page-tarifs .pcard { background: rgba(255, 255, 255, .5); transition: transform .35s var(--ease), box-shadow .35s, border-color .35s, background-color .35s; }
.page-tarifs .pcard.is-active { background: #fff; border: 2px solid var(--c-green); padding: 31px 27px 27px; box-shadow: var(--sh-hector-col); transform: translateY(-10px); }
.page-tarifs .pcard.is-active .pcard__unit b { color: var(--c-green-dark); }
.pcard__mini { margin-top: 14px; text-align: center; font-size: 14px; color: var(--c-grey); }
.incl { max-width: 980px; margin: 64px auto 0; }
.incl__title { text-align: center; font-size: 26px; font-weight: 600; letter-spacing: -.4px; }
.incl__list { margin-top: 24px; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.incl__list li { display: flex; gap: 10px; align-items: center; padding: 14px 16px; border-radius: var(--r-14); background: #fff; border: 1px solid var(--c-border-soft); font-size: 15px; font-weight: 500; }
.incl__list li::before { content: "✓"; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--c-green-pale); color: var(--c-green-dark); font-weight: 700; font-size: 13px; display: grid; place-items: center; }
.page-tarifs .tarifs__trust { background: #fff; margin-top: 40px; }
.pfaq { padding-top: 40px; }
.pfaq__inner { max-width: 780px; }
.pfaq__more { margin-top: 22px; }
.pfaq__more a { color: var(--c-green-dark); font-weight: 600; }

/* ==========================================================================
   Tablette
   ========================================================================== */
@media (max-width: 1100px) {
  .teaser__box { flex-wrap: wrap; }
  .teaser__packs { margin-left: 0; order: 3; width: 100%; }
}
@media (max-width: 960px) {
  .loupe__grid, .calc { grid-template-columns: minmax(0, 1fr); }
  .chrono__grid { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .pcards { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-inline: auto; }
  .pcard--hl { order: -1; }
  .page-tarifs .pcards { gap: 18px; }
  .page-tarifs .pcard.is-active { transform: none; }
  .calc__right { padding-left: 0; border-left: 0; padding-top: 24px; border-top: 1px solid var(--c-border-faq); }
}

/* ==========================================================================
   Mobile 390
   ========================================================================== */
@media (max-width: 600px) {
  .hero__actions { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 22px; }
  .hero__actions .btn { width: 100%; }
  .hero__from { max-width: none; text-align: center; font-size: 14px; }

  .loupe { padding: 64px 0; }
  .loupe__grid { gap: 28px; }
  .loupe__stage { margin-inline: calc(-1 * var(--gutter-mobile)); }
  .lens { width: 136px; border-width: 3px; }
  .hs { width: 28px; height: 28px; font-size: 12px; line-height: 28px; }
  .loupe__side .btn { width: 100%; }

  .teaser { margin-top: -24px; }
  .teaser__box { flex-direction: column; align-items: stretch; gap: 14px; padding: 20px 18px; }
  .teaser__title { font-size: 18px; }
  .teaser__packs { flex-direction: column; gap: 6px; order: 0; }
  .teaser__pack { flex-direction: row; justify-content: space-between; align-items: baseline; }
  .teaser__btn { width: 100%; }

  .proof--slim { padding: 64px 0 24px; }
  .proof--slim .proof__mascot { width: 84px; }

  .chrono__grid { margin-top: 36px; gap: 16px; }
  .chrono__card { padding: 22px 18px; }
  .chrono__card--hector { padding: 21px 17px; }
  .watch { width: 140px; }
  .watch__time b { font-size: 44px; }

  .ptop { padding: 40px 0 20px; }
  .ptop__trust { border-radius: 16px; }
  .calc { padding: 24px 18px; gap: 8px; }
  .calc__title { font-size: 19px; }
  .calc__unit b { font-size: 46px; }
  .calc__right .btn { width: 100%; }
  .page-tarifs .tarifs { padding-top: 48px; }
  .page-tarifs .pcard, .page-tarifs .pcard--hl { padding: 24px 20px 20px; }
  .page-tarifs .pcard.is-active { padding: 23px 19px 19px; }
  .pcard__unit b { font-size: 44px; }
  .incl { margin-top: 44px; }
  .incl__title { font-size: 22px; }
  .incl__list { grid-template-columns: minmax(0, 1fr); }
  .tarifs__trust { padding: 24px 16px 20px; }
  .tarifs__trust .norisk ul { grid-template-columns: 1fr 1fr; row-gap: 18px; }
}
@media (prefers-reduced-motion: reduce) { .hs, .watch__hand { animation: none; } .lens, .lens img { transition: none; } }