/* ==========================================================================
   Hector — feuille commune (version 00 « Fidèle »)
   Reprend « Test Web » 182:17899 (desktop 1440) et « T3 — Mobile » 204:995 (390).
   Les autres versions chargent ce fichier puis leur propre CSS (v/XX/style.css).
   Les valeurs viennent de tokens.css (Design System 309:1024).
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; background: var(--c-cream); color: var(--c-ink); font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
:focus-visible { outline: 3px solid var(--c-green-dark); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.container { width: min(var(--container), 100% - 2 * var(--gutter-mobile)); margin-inline: auto; }
.container--wide { width: min(var(--container-wide), 100% - 2 * var(--gutter-mobile)); margin-inline: auto; }
.section { padding-block: 120px; }
.center { text-align: center; }
.accent { color: var(--c-green-dark); }
.accent-bright { color: var(--c-green); }
.light { font-weight: 400; color: var(--c-slate); }

/* ---------- Typo ---------- */
.h-display { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); font-weight: 400; }
.h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); font-weight: 600; color: var(--c-ink-2); }
.h2--xl { font-size: var(--fs-h2-xl); line-height: var(--lh-h2-xl); }
.h2--regular { font-weight: 400; }
.lead { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--c-slate); }
.lead--l { font-size: var(--fs-lead-l); line-height: 1.5; font-weight: 500; }
.lead--grey { color: var(--c-grey); font-size: var(--fs-body-l); line-height: 1.4; }

/* ---------- Boutons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--btn-height); padding: var(--btn-pad-y) var(--btn-pad-x); border-radius: var(--btn-radius); font: var(--btn-font); white-space: nowrap; transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s; }
.btn:hover { transform: translateY(var(--btn-hover-shift)); }
.btn:active { transform: scale(var(--btn-active-scale)); }
.btn--primary { background: var(--btn-primary-bg); color: var(--btn-primary-fg); }
.btn--primary:hover { box-shadow: var(--sh-button-hover); }
.btn--secondary { background: var(--btn-secondary-bg); border: var(--btn-secondary-border); }
.btn--dark { background: var(--btn-dark-bg); color: var(--btn-dark-fg); }
.btn--block { width: 100%; }
.btn--lg { min-height: 52px; font-size: 17px; }

/* ---------- Chips / pastilles ---------- */
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--r-14); background: var(--c-green-pale); color: var(--c-ink); font-weight: 500; font-size: 16px; line-height: 1.4; box-shadow: var(--sh-chip); }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-8); background: var(--c-green-pale); color: var(--c-green-dark); font-size: var(--fs-label); font-weight: 600; }
.tag--solid { background: var(--c-green-dark); color: #fff; }
.stars-img { height: 20px; width: auto; }

/* ---------- Barre « versions » (retour au sélecteur) ---------- */
.vbar { position: fixed; left: 16px; bottom: 16px; z-index: 90; display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; border-radius: 999px; background: rgba(17, 27, 33, .88); color: #fff; font: 500 13px/1.2 var(--font-sans); box-shadow: 0 8px 24px rgba(0,0,0,.2); backdrop-filter: blur(8px); }
.vbar__num { font-family: var(--font-mono); background: rgba(255,255,255,.14); border-radius: 999px; padding: 3px 8px; }
.vbar a:hover { text-decoration: underline; }
@media (max-width: 600px) { .vbar { left: 10px; bottom: 10px; font-size: 12px; } .vbar__name { display: none; } }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--c-cream) 92%, transparent); backdrop-filter: blur(12px); }
.site-header__inner { height: var(--header-height); display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-inline: 60px; }
.logo { display: inline-flex; align-items: center; gap: 8px; font-size: 22px; font-weight: 500; color: var(--c-ink-logo); letter-spacing: -.3px; }
.logo img { width: 36px; height: 36px; border-radius: 50%; box-shadow: var(--sh-logo); }
.logo b { color: var(--c-green); font-weight: 700; }
.nav { display: flex; gap: 40px; font-size: var(--fs-nav); font-weight: 500; }
.nav a:hover { color: var(--c-green-dark); }
.burger { display: none; width: 44px; height: 44px; border-radius: 12px; align-items: center; justify-content: center; }
.burger span, .burger span::before, .burger span::after { display: block; width: 20px; height: 2px; background: var(--c-ink); border-radius: 2px; position: relative; }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; }
.burger span::before { top: -6px; } .burger span::after { top: 6px; }
.mnav { display: none; }
.site-header.is-open .mnav { display: flex; flex-direction: column; gap: 4px; padding: 8px 20px 20px; }
.mnav a { padding: 12px 0; font-size: 18px; font-weight: 500; border-bottom: 1px solid var(--c-border-faq); }

/* ---------- Hero ---------- */
.hero { padding: 32px 32px 0; }
.hero__box { position: relative; overflow: hidden; border-radius: var(--r-25); min-height: 740px; display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 40px; padding: 64px 104px; color: #fff; isolation: isolate; }
.hero__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.hero__box::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(40, 32, 22, .5); }
.hero__badge { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px 12px 16px; border-radius: 999px; background: var(--c-glass); border: 1px solid var(--c-glass-border); backdrop-filter: blur(8px); font-size: 16px; font-weight: 500; margin-bottom: 28px; }
.hero__badge img { height: 22px; width: auto; }
.hero__title { font-size: var(--fs-display); line-height: 1; letter-spacing: var(--ls-display); font-weight: 400; max-width: 520px; }
.hero__lead { margin-top: 32px; font-size: var(--fs-body-hero); line-height: 25px; max-width: 560px; }
.hero__chips { margin-top: 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.hero__cta { display: none; }
.hero__card { position: relative; justify-self: end; width: min(440px, 100%); aspect-ratio: 1; transform: rotate(8deg); }
.hero__card img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-24); box-shadow: var(--sh-postcard); }
.hero__made { position: absolute; right: -12px; bottom: 22px; display: inline-flex; gap: 8px; align-items: center; padding: 6px 12px; border-radius: 999px; background: #fff; color: var(--c-ink); font-size: 12px; font-weight: 500; box-shadow: var(--sh-chip); }

/* ---------- Comment ça marche ---------- */
.steps__head { text-align: center; }
.steps__head .lead { margin-top: 18px; }
.steps__rail { position: relative; display: flex; justify-content: space-between; margin: 56px 0 76px; padding-bottom: 14px; font-size: 13px; font-style: italic; color: var(--c-slate); }
.steps__rail::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--g-steps-rail); border-radius: 2px; }
.steps__rail span { display: inline-flex; align-items: center; gap: 8px; }
.steps__rail span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c-ink); }
.steps__rail span:last-child::before { background: var(--c-green); box-shadow: var(--sh-step-dot); }
.steps__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.step { position: relative; background: #fff; border-radius: var(--r-14); padding: 22px 20px 20px; }
.step:nth-child(2) { margin-top: 44px; }
.step__sticker { position: absolute; right: 18px; top: -38px; width: 74px; height: 74px; object-fit: contain; filter: drop-shadow(0 10px 6px rgba(17,27,33,.18)); }
.step__num { font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-step-num); letter-spacing: var(--ls-step-num); color: var(--c-green-dark); }
.step__title { margin-top: 14px; font-size: var(--fs-card-title); line-height: 24px; font-weight: 600; }
.step__text { margin-top: 8px; font-size: var(--fs-body-s); line-height: 24px; color: var(--c-slate); }
.step__media { margin-top: 20px; border-radius: var(--r-14); overflow: hidden; aspect-ratio: 266 / 160; background: var(--c-cream-2); }
.step__media video, .step__media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 4000 photos (bulles flottantes) ---------- */
.photos { position: relative; padding: 40px 0 120px; overflow: hidden; }
.photos__text { position: relative; z-index: 1; max-width: 1060px; margin: 0 auto; text-align: center; padding-inline: 20px; }
.photos__title { font-size: 46px; line-height: 52px; letter-spacing: -1px; font-weight: 600; color: var(--c-ink-2); }
.photos__text p { margin-top: 24px; font-size: var(--fs-lead); line-height: 30px; color: var(--c-ink-2); }
.bubbles { position: relative; height: 230px; max-width: 1300px; margin: 0 auto; }
.bubbles--top { margin-bottom: 30px; }
.bubbles--bottom { margin-top: 30px; }
.bubble { position: absolute; display: flex; align-items: center; gap: 10px; }
.bubble__avatar { width: 64px; height: 64px; border-radius: 50%; }
.bubble__msg { display: inline-flex; align-items: flex-end; gap: 8px; padding: 6px 10px 6px 10px; background: var(--c-wa-bubble-in); border-radius: 0 var(--r-wa-bubble) var(--r-wa-bubble) var(--r-wa-bubble); box-shadow: var(--sh-wa-bubble); font-size: 14px; line-height: 20px; white-space: nowrap; }
.bubble--out .bubble__msg { background: var(--c-wa-bubble-out); border-radius: var(--r-wa-bubble) 0 var(--r-wa-bubble) var(--r-wa-bubble); }
.bubble__time { font-size: 10px; color: var(--c-wa-time); display: inline-flex; align-items: center; gap: 3px; transform: translateY(1px); }
.bubble__time img { width: 14px; height: 10px; }
.bubble--out { flex-direction: row-reverse; }
.bubble--solo .bubble__msg { display: none; }
.float { animation: float 6s ease-in-out infinite; }
.float:nth-child(2n) { animation-delay: -2s; } .float:nth-child(3n) { animation-delay: -4s; }
@keyframes float { 50% { transform: translateY(-8px); } }

/* ---------- Pensé pour durer ---------- */
.durer { background: #fff; padding: 56px 0; }
.durer__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; }
.durer__img { width: 100%; height: auto; }
.durer__title { font-size: var(--fs-h3-durer); line-height: 48px; letter-spacing: -1.28px; font-weight: 600; }
.durer__title .light { font-weight: 400; color: var(--c-ink-2); }
.durer__text { margin-top: 18px; font-size: var(--fs-body-l); line-height: 27px; color: var(--c-slate); max-width: 490px; }
.durer .btn { margin-top: 28px; }

/* ---------- Hector n'oublie personne (iPhone) ---------- */
.oubli__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.oubli__title { font-size: 59px; line-height: 60px; letter-spacing: -1px; font-weight: 600; color: var(--c-ink-2); }
.oubli__text { margin-top: 28px; font-size: var(--fs-lead); line-height: 30px; color: var(--c-ink-2); max-width: 470px; }
.oubli .btn { margin-top: 28px; }
.phone { width: 380px; max-width: 100%; margin-inline: auto; border-radius: var(--r-40); overflow: hidden; background: var(--c-wa-chat-bg); box-shadow: var(--sh-phone); font-family: var(--font-ios); position: relative; }
.phone__status { display: flex; justify-content: space-between; align-items: center; padding: 18px 30px 6px 42px; font-weight: 600; font-size: 16px; }
.phone__status span:last-child { display: flex; gap: 6px; align-items: center; }
.phone__status img { height: 12px; width: auto; }
.phone__head { display: flex; align-items: center; gap: 10px; padding: 8px 18px 10px 10px; background: var(--c-wa-panel); backdrop-filter: blur(25px); position: relative; z-index: 1; }
.phone__head .av { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.phone__head b { font-size: 16px; font-weight: 600; flex: 1; }
.phone__head img.ic { width: 22px; height: 22px; }
.phone__chat { position: relative; padding: 14px 12px 16px; display: flex; flex-direction: column; gap: 6px; min-height: 520px; }
.phone__chat::before { content: ""; position: absolute; inset: 0; background: url(../img/whatsapp-chat-bg-pattern.png) 0 0 / 432px auto; opacity: .1; }
.wa { position: relative; max-width: 78%; padding: 6px 8px 6px 10px; border-radius: 10px; font-size: 14.5px; line-height: 19px; background: #fff; align-self: flex-start; box-shadow: 0 1px .5px rgba(11,20,26,.13); }
.wa--out { align-self: flex-end; background: var(--c-wa-bubble-out-ios); }
.wa__time { float: right; margin: 6px 0 -4px 10px; font-size: 11px; color: var(--c-wa-time); display: inline-flex; align-items: center; gap: 3px; }
.wa__time img { width: 16px; height: auto; }
.wa--photo { padding: 3px; }
.wa--photo img { border-radius: 8px; width: 100%; height: auto; }
.wa__react { position: absolute; bottom: -14px; left: 10px; background: #fff; border: 1px solid var(--c-wa-reaction-border); border-radius: 999px; padding: 1px 6px; font-size: 12px; line-height: 18px; }
.wa--out .wa__react { left: auto; right: 10px; }
.wa--has-react { margin-bottom: 14px; }
.phone__bar { display: flex; align-items: center; gap: 10px; padding: 8px 14px 22px; background: var(--c-wa-panel); position: relative; }
.phone__bar .field { flex: 1; height: 34px; border-radius: 999px; background: #fff; border: 1px solid rgba(0,0,0,.06); }
.phone__bar img { width: 24px; height: 24px; }
.phone__bar .send { width: 32px; height: 32px; border-radius: 50%; background: var(--c-green-product); display: grid; place-items: center; }
.phone__bar .send img { width: 16px; height: 16px; }

/* ---------- Témoignages vidéo ---------- */
.tv__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 36px; }
.tv__title { font-size: var(--fs-h2); line-height: 54px; letter-spacing: -1px; font-weight: 400; color: var(--c-ink-2); }
.arrows { display: flex; gap: 8px; }
.arrows button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--c-border-card); background: #fff; font-size: 20px; line-height: 1; }
.arrows button:hover { border-color: var(--c-ink); }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 48px) / 3); gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
.tcard { display: flex; flex-direction: column; justify-content: flex-start; background: #fff; border-radius: var(--r-20); overflow: hidden; border: 1px solid var(--c-border-soft); text-align: left; }
.tcard__media { position: relative; aspect-ratio: 366 / 242; }
.tcard__media img.ph { width: 100%; height: 100%; object-fit: cover; }
.tcard__media::after { content: ""; position: absolute; inset: 0; background: var(--g-photo-bottom); }
.tcard__play { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(255,255,255,.95); display: grid; place-items: center; z-index: 1; box-shadow: 0 4px 14px rgba(0,0,0,.2); transition: transform .2s; }
.tcard:hover .tcard__play { transform: translate(-50%, -50%) scale(1.08); }
.tcard__play::before { content: ""; border-left: 16px solid var(--c-ink-2); border-top: 10px solid transparent; border-bottom: 10px solid transparent; margin-left: 4px; }
.tcard__name, .tcard__dur { position: absolute; bottom: 14px; z-index: 1; color: #fff; font-size: 13px; font-weight: 600; }
.tcard__name { left: 16px; }
.tcard__dur { right: 16px; background: rgba(0,0,0,.55); padding: 2px 8px; border-radius: 6px; font-weight: 500; }
.tcard__body { padding: 18px 20px 20px; }
.tcard__quote { font-size: 15px; line-height: 22px; font-weight: 600; color: var(--c-ink-2); }
.tcard__verified { margin-top: 8px; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--c-grey); }
.tcard__verified img { height: 16px; width: auto; }

/* ---------- Réserve (fiche produit) ---------- */
.reserve__head { text-align: center; }
.reserve__head .lead--grey { margin-top: 18px; }
.live { display: flex; justify-content: center; flex-wrap: wrap; gap: 24px; margin-top: 32px; font-size: 15px; font-weight: 500; }
.live span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; }
.live__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-green); animation: pulse 2s infinite; }
.live__offer { background: var(--c-green-pale); border-radius: 999px; }
@keyframes pulse { 50% { box-shadow: 0 0 0 5px rgba(37,211,102,.18); } }
.reserve__grid { margin-top: 56px; display: grid; grid-template-columns: 660px 1fr; gap: 84px; align-items: start; padding-inline: 62px; max-width: 1440px; margin-inline: auto; }
.gallery { display: grid; grid-template-columns: 92px 1fr; gap: 16px; }
.gallery__thumbs { display: flex; flex-direction: column; gap: 14px; }
.gallery__thumbs button { border-radius: var(--r-12); overflow: hidden; border: 2px solid transparent; aspect-ratio: 92 / 88; }
.gallery__thumbs button[aria-current="true"] { border-color: var(--c-green); }
.gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.gallery__main { border-radius: var(--r-20); overflow: hidden; aspect-ratio: 550 / 498; background: var(--c-cream-2); }
.gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.selector__label { margin: 26px 0 12px; font-weight: 600; font-size: 15px; }
.offers { display: flex; flex-direction: column; gap: 14px; }
.offer { position: relative; display: grid; grid-template-columns: 24px 64px 1fr auto auto; align-items: center; gap: 14px; padding: 14px 22px 14px 16px; background: #fff; border: 1px solid var(--c-border-card); border-radius: var(--r-18); cursor: pointer; text-align: left; width: 100%; transition: border-color .2s, background .2s; }
.offer:hover { border-color: var(--c-green); }
.offer.is-selected { background: var(--c-green-pale); border: 2px solid var(--c-green); padding: 13px 21px 13px 15px; }
.offer__radio { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #b9bfc4; background: #fff; }
.offer.is-selected .offer__radio { border: 0; background: var(--c-green); box-shadow: inset 0 0 0 4px #fff, 0 0 0 1.5px var(--c-green); }
.offer__img { width: 64px; height: 64px; border-radius: var(--r-12); object-fit: cover; }
.offer__name { font-size: 17px; font-weight: 600; }
.offer__count { white-space: nowrap; font-size: 14px; color: var(--c-green-dark); font-weight: 500; }
.offer__sub { font-size: 13px; color: var(--c-grey); }
.offer__price { text-align: right; }
.offer__price b { display: block; font-size: 22px; font-weight: 600; white-space: nowrap; }
.offer.is-selected .offer__price b { color: var(--c-green-dark); }
.offer__price small { font-size: 12px; color: var(--c-grey); white-space: nowrap; }
.offer__badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: var(--c-green); color: var(--c-ink); font-size: 11px; font-weight: 700; letter-spacing: .3px; padding: 3px 12px; border-radius: 6px; white-space: nowrap; }
.offer .tag--solid { font-size: 14px; padding: 4px 10px; }
.offer__mtag { display: none !important; }
.offer__total-m { display: none; }
.offer__info { min-width: 0; }
.detail { position: relative; padding-top: 6px; }
.detail__from { position: absolute; right: 10px; top: 4px; transform: rotate(4deg); }
.detail__name { font-size: var(--fs-h3); line-height: 1.3; font-weight: 600; letter-spacing: -.5px; }
.detail__tagline { margin-top: 10px; font-size: 17px; font-weight: 600; }
.detail__text { margin-top: 12px; font-size: 15px; line-height: 23px; color: var(--c-grey); }
.checks { margin-top: 18px; display: grid; gap: 9px; }
.checks li { display: flex; gap: 10px; align-items: baseline; font-size: 15px; }
.checks li::before { content: "✓"; color: var(--c-green-dark); font-weight: 700; }
.detail__price { margin-top: 26px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }
.detail__price b { font-size: 40px; line-height: 1; font-weight: 600; color: var(--c-green-dark); letter-spacing: -.5px; }
.detail__price s { color: var(--c-grey); font-size: 16px; }
.detail__total { margin-top: 10px; font-size: 13px; color: var(--c-grey); }
.detail .btn { margin-top: 18px; }
.pay { margin-top: 14px; text-align: center; font-size: 12px; color: var(--c-grey); }
.pay__line { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.pay__line img { width: 14px; height: 14px; }
.pay__logos { margin-top: 10px; display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.pay__logos span { min-width: 49px; height: 22px; padding: 0 6px; border-radius: var(--r-4); border: 1px solid var(--c-border-soft); background: #fff; display: inline-grid; place-items: center; font-size: 9px; font-weight: 800; letter-spacing: .2px; }
.pay__logos .visa { color: var(--c-visa); font-style: italic; } .pay__logos .cb { color: var(--c-cb); } .pay__logos .stripe { background: var(--c-stripe); color: #fff; border-color: transparent; }
.norisk { margin-top: 34px; }
.norisk h3 { font-size: 17px; font-weight: 600; }
.norisk ul { margin-top: 16px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; text-align: center; }
.norisk img { width: 56px; height: 56px; margin: 0 auto 8px; object-fit: contain; }
.norisk b { display: block; font-size: 14px; line-height: 22px; font-weight: 600; }
.norisk span { display: block; font-size: 14px; line-height: 22px; color: var(--c-grey); }
.sticky-buy { display: none; }

/* ---------- Preuve sociale ---------- */
.proof { background: #fff; padding: 0 0 90px; position: relative; }
.proof__top { position: relative; display: grid; grid-template-columns: 536px 1fr; gap: 40px; align-items: center; max-width: 900px; margin: 0 auto; transform: translateY(-120px); margin-bottom: -60px; }
.proof__photo { position: relative; }
.proof__photo img.team { width: 100%; border-radius: var(--r-20); aspect-ratio: 536 / 287; object-fit: cover; object-position: 30% 50%; }
.proof__mascot { position: absolute; right: -50px; bottom: -40px; width: 140px; }
.proof__rating { text-align: center; }
.proof__rating strong { display: block; font-size: 22px; font-weight: 600; color: var(--c-slate); }
.proof__rating .stars { display: flex; justify-content: center; gap: 4px; margin: 6px 0; }
.proof__rating .stars img { width: 26px; height: 26px; }
.proof__rating span { color: var(--c-slate); font-size: 15px; }
.proof__title { margin-top: 70px; text-align: center; font-size: var(--fs-h2); line-height: 1.15; font-weight: 500; letter-spacing: -.5px; color: var(--c-ink-2); padding-inline: 20px; }
.proof__lead { text-align: center; margin-top: 8px; font-size: var(--fs-body-l); color: var(--c-slate); padding-inline: 20px; }
.reviews { margin-top: 40px; padding-inline: 24px; scroll-padding-inline: 24px; display: grid; grid-auto-flow: column; grid-auto-columns: 310px; gap: 26px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.reviews::-webkit-scrollbar { display: none; }
.review { scroll-snap-align: start; font-size: 14px; line-height: 22px; color: var(--c-slate); }
.review .stars { display: flex; gap: 2px; margin-bottom: 14px; }
.review .stars img { width: 18px; height: 18px; }
.review cite { display: block; margin-top: 18px; font-style: normal; font-size: 13px; color: var(--c-grey); }

/* ---------- Comparatif ---------- */
.compare__head { text-align: center; }
.compare__title { font-size: var(--fs-h2); line-height: 1.12; letter-spacing: -1px; font-weight: 600; color: var(--c-ink); }
.compare__head .lead--grey { margin-top: 18px; font-size: 18px; }
.ctable { margin: 64px auto 0; display: grid; grid-template-columns: 1fr 320px 320px; max-width: 1010px; }
.ctable__labels { padding-top: 168px; }
.ctable__labels li, .ctable__col li { height: 93px; display: flex; flex-direction: column; justify-content: center; }
.ctable__labels b { font-size: 15px; font-weight: 600; }
.ctable__labels span { font-size: 13px; color: var(--c-grey); line-height: 18px; }
.ctable__col { border-radius: var(--r-24); text-align: center; padding-bottom: 20px; }
.ctable__col--hector { background: #fff; border: 2px solid var(--c-green); box-shadow: var(--sh-hector-col); position: relative; z-index: 1; }
.ctable__col--others { background: rgba(255,255,255,.45); border: 1px solid var(--c-border-soft); border-left: 0; border-radius: 0 var(--r-24) var(--r-24) 0; margin-block: 0; }
.ctable__colhead { height: 168px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.ctable__colhead img.lg { width: 38px; height: 38px; border-radius: 50%; box-shadow: var(--sh-tile); }
.ctable__colhead b { font-size: 22px; font-weight: 600; }
.ctable__logos { display: flex; }
.ctable__logos img { width: 32px; height: 32px; border-radius: var(--r-10); object-fit: cover; margin-left: -4px; box-shadow: var(--sh-tile); background: #fff; }
.ctable__col--hector li { gap: 8px; font-size: 14px; color: var(--c-ink); padding-inline: 16px; }
.ctable__col--hector li img { width: 26px; height: 26px; margin: 0 auto; }
.ctable__col--others li { font-size: 14px; color: var(--c-grey); padding-inline: 30px; }
.ctable__col--others .ctable__colhead span { color: var(--c-grey); font-size: 15px; }
.ctable__ico { display: none; }

/* ---------- Pour tous ceux que tu aimes de loin ---------- */
.loin__title { text-align: center; font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -1px; font-weight: 500; color: var(--c-ink-2); }
.bento { margin-top: 56px; display: grid; grid-template-columns: 1.78fr 1fr; grid-template-rows: 262px 262px; gap: 20px; }
.bento__card { position: relative; border-radius: var(--r-24); overflow: hidden; color: #fff; display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; isolation: isolate; }
.bento__card img.bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.bento__card:hover img.bg { transform: scale(1.04); }
.bento__card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--g-bento-small); }
.bento__card--big { grid-row: span 2; padding: 20px 20px 22px; }
.bento__card--big::before { background: var(--g-bento-large); }
.bento__tag { position: absolute; top: 16px; left: 16px; background: #fff; color: var(--c-ink); font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 999px; }
.bento__card h3 { font-size: 20px; font-weight: 600; line-height: 1.25; }
.bento__card--big h3 { font-size: 30px; }
.bento__card p { margin-top: 6px; font-size: 13px; line-height: 19px; opacity: .92; }
.bento__card--big p { font-size: 18px; line-height: 26px; }
.bento__quote { margin-top: 14px; display: inline-flex; align-self: flex-start; gap: 10px; align-items: center; padding: 6px 12px; border-radius: 10px; background: rgba(255,255,255,.14); backdrop-filter: blur(6px); font-size: 13px; }
.bento__quote .st { color: var(--c-green-star); letter-spacing: 1px; }
.loin__cta { text-align: center; margin-top: 50px; }

/* ---------- FAQ ---------- */
.faq__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.collage { position: relative; height: 420px; margin-top: 30px; }
.collage img { position: absolute; border-radius: var(--r-16); object-fit: cover; box-shadow: var(--sh-photo); }
.collage .c1 { left: 56px; top: 0; width: 354px; height: 352px; }
.collage .c2 { right: 40px; top: 46px; width: 104px; height: 120px; }
.collage .c3 { left: 0; top: 224px; width: 138px; height: 192px; }
.faq__title { font-size: var(--fs-h3); line-height: 1.3; font-weight: 600; letter-spacing: -.5px; margin-bottom: 18px; }
.faq details { border-bottom: 1px solid var(--c-border-faq); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 17px 0; font-size: var(--fs-faq-q); font-weight: 600; line-height: 36px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 16px; height: 16px; background: url(../img/icon-chevron-down.svg) center / contain no-repeat; transition: transform .25s; }
.faq details[open] summary::after { transform: rotate(180deg); }
.faq details p { padding: 0 30px 20px 0; color: var(--c-slate); font-size: 15px; line-height: 24px; }

/* ---------- CTA final ---------- */
.final { background: var(--c-paper); padding: 120px 0 110px; text-align: center; }
.final__title { font-size: var(--fs-h2-cta); line-height: var(--lh-h2-cta); letter-spacing: var(--ls-h2-cta); font-weight: 600; color: var(--c-night); max-width: 720px; margin: 0 auto; }
.final__lead { margin-top: 30px; font-size: 22px; line-height: 30px; color: var(--c-grey); padding-inline: 20px; }
.wa-input { margin: 40px auto 0; width: min(400px, 100% - 40px); display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 999px; background: #fff; box-shadow: var(--sh-input); text-align: left; transition: transform .2s; }
.wa-input:hover { transform: translateY(-2px); }
.wa-input img.av { width: 36px; height: 36px; border-radius: 50%; }
.wa-input span { flex: 1; color: var(--c-muted); font-size: 15px; }
.wa-input i { width: 32px; height: 32px; border-radius: 50%; background: var(--c-green-product); display: grid; place-items: center; }
.wa-input i img { width: 16px; height: 16px; }

/* ---------- Footer ---------- */
.footer { background: var(--c-footer); color: #fff; font-family: var(--font-footer); padding: 46px 0 40px; }
.footer__inner { border-top: 1px solid var(--c-footer-line); padding-top: 40px; display: grid; grid-template-columns: 1fr 208px 208px 200px; gap: 24px; }
.footer .logo { color: #fff; }
.footer__social { display: flex; gap: 8px; margin-top: 24px; }
.footer__social a { width: 34px; height: 34px; border-radius: var(--r-10); background: var(--c-footer-chip); display: grid; place-items: center; }
.footer__social img { width: 16px; height: 16px; }
.footer__lang { margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--r-10); background: var(--c-footer-chip); font-size: 14px; }
.footer__lang img { width: 16px; height: 12px; }
.footer h4 { font-size: 15px; font-weight: 500; margin-bottom: 16px; }
.footer ul { display: grid; gap: 9px; }
.footer ul a { font-size: 13px; color: var(--c-footer-text); }
.footer ul a:hover { color: #fff; }
.footer__legal { margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--c-footer-line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--c-footer-text); }
.footer__legal nav { display: flex; flex-wrap: wrap; gap: 6px 16px; }

/* ---------- Modal (témoignages) ---------- */
.modal { border: 0; padding: 0; border-radius: var(--r-24); max-width: min(560px, 100% - 32px); box-shadow: 0 30px 80px rgba(0,0,0,.3); }
.modal::backdrop { background: rgba(17,27,33,.6); backdrop-filter: blur(4px); }
.modal img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.modal__body { padding: 24px 28px 28px; }
.modal__body p { font-size: 17px; line-height: 27px; color: var(--c-slate); }
.modal__body cite { display: block; margin-top: 14px; font-style: normal; font-weight: 600; }
.modal__close { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; background: #fff; font-size: 20px; box-shadow: var(--sh-chip); }

/* ---------- Apparition au scroll ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .float, .live__dot { animation: none; } html { scroll-behavior: auto; } }

/* ==========================================================================
   Tablette
   ========================================================================== */
@media (max-width: 1200px) {
  .site-header__inner { padding-inline: 24px; }
  .nav { gap: 24px; }
  .hero__box { padding: 56px 56px; }
  .reserve__grid { grid-template-columns: 1fr 1fr; gap: 48px; padding-inline: 24px; }
  .ctable { grid-template-columns: 1fr 280px 280px; }
}
@media (max-width: 960px) {
  .nav { display: none; }
  .burger { display: inline-flex; }
  .section { padding-block: 88px; }
  .hero__box { grid-template-columns: 1fr; min-height: 0; }
  .hero__card { justify-self: center; width: min(340px, 80%); }
  .durer__grid, .oubli__grid, .faq__grid { grid-template-columns: 1fr; gap: 40px; }
  .reserve__grid { grid-template-columns: minmax(0, 1fr); }
  .proof__top { grid-template-columns: 1fr; max-width: 560px; padding-inline: 20px; }
  .bubbles { display: none; }
  .photos { padding: 88px 0; }
}

/* ==========================================================================
   Mobile 390 (T3 — Mobile 204:995)
   ========================================================================== */
@media (max-width: 600px) {
  :root { --header-height: 60px; }
  .section { padding-block: 72px; }
  .site-header__inner { padding-inline: 16px; gap: 8px; }
  .logo { font-size: 20px; } .logo img { width: 32px; height: 32px; }
  .site-header .btn { padding: 10px 14px; min-height: 40px; font-size: 14px; }
  .hero { padding: 8px 12px 0; }
  .hero__box { padding: 28px 20px 32px; border-radius: var(--r-24); gap: 28px; }
  .hero__box::before { background: var(--c-hero-overlay-mobile); }
  .hero__badge { font-size: 13px; padding: 8px 12px; margin-bottom: 18px; } .hero__badge img { height: 16px; }
  .hero__title { font-size: 40px; line-height: 44px; }
  .hero__lead { margin-top: 18px; font-size: 16px; line-height: 24px; }
  .hero__chips { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .hero__chips .chip { font-size: 13px; padding: 7px 10px; border-radius: var(--r-12); }
  .hero__cta { display: flex; margin-top: 22px; }
  .hero__card { width: 78%; }
  .h2 { font-size: 30px; line-height: 35px; }
  .lead--l { font-size: 18px; line-height: 26px; }
  .steps__rail { display: none; }
  .steps__grid { grid-template-columns: 1fr; gap: 44px; margin-top: 56px; }
  .step:nth-child(2) { margin-top: 0; }
  .step__sticker { width: 62px; height: 62px; top: -30px; }
  .photos { padding: 64px 0; }
  .photos__title { font-size: 28px; line-height: 34px; }
  .photos__text p { font-size: 17px; line-height: 26px; }
  .bubbles { display: block; height: auto; display: flex; flex-direction: column; gap: 12px; padding-inline: 16px; margin-block: 28px; }
  .bubble { position: static; animation: none; }
  .bubble--solo { display: none; }
  .bubble--out { align-self: flex-end; }
  .bubble__avatar { width: 40px; height: 40px; }
  .bubble__msg { font-size: 13px; white-space: normal; }
  .bubble[data-desktop-only] { display: none; }
  .durer { padding: 48px 0; }
  .durer__title { font-size: 30px; line-height: 38px; }
  .durer__text { font-size: 17px; line-height: 26px; }
  .durer .btn, .oubli .btn { width: 100%; }
  .oubli__title { font-size: 40px; line-height: 44px; }
  .oubli__text { font-size: 17px; line-height: 26px; }
  .oubli__grid { gap: 32px; }
  .oubli .oubli__cta-mobile { order: 3; }
  .phone { width: 100%; }
  .phone__chat { min-height: 0; }
  .tv__title { font-size: 32px; line-height: 37px; }
  .arrows { display: none; }
  .rail { grid-auto-columns: 84%; gap: 14px; margin-right: calc(-1 * var(--gutter-mobile)); padding-right: var(--gutter-mobile); }
  .reserve__grid { margin-top: 28px; padding-inline: var(--gutter-mobile); gap: 0; }
  .live { flex-direction: column; align-items: center; gap: 8px; margin-top: 20px; font-size: 14px; }
  .gallery { grid-template-columns: 1fr; }
  .gallery__main { order: -1; aspect-ratio: 1 / .9; }
  .gallery__thumbs { flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .gallery__thumbs button { flex: 0 0 62px; }
  .reserve__left { display: contents; }
  .reserve__grid .gallery { order: 1; }
  .reserve__grid .detail { order: 2; margin-top: 18px; }
  .reserve__grid .selector { order: 3; }
  .detail__from, .detail__price, .detail__total, .detail > .btn, .detail .pay, .norisk { display: none; }
  .detail__name { font-size: 28px; }
  .detail__tagline { font-size: 16px; }
  .offer { grid-template-columns: 22px 52px 1fr auto; padding: 12px 14px; gap: 10px; }
  .offer.is-selected { padding: 11px 13px; }
  .offer__img { width: 52px; height: 52px; }
  .offer__sub, .offer__total-d { display: none !important; }
  .offer__total-m { display: inline; }
  .offer > .tag--solid { display: none; }
  .offer__count .offer__mtag { display: inline-flex !important; margin-left: 6px; padding: 1px 6px; font-size: 12px; }
  .offer__price b { font-size: 17px; }
  .sticky-buy { display: block; margin-top: 18px; }
  .sticky-buy .btn { width: 100%; justify-content: space-between; padding-inline: 22px; }
  .sticky-buy .pay { display: block; }
  .proof { padding-bottom: 64px; }
  .proof__top { transform: none; margin: 0 auto; padding-top: 40px; gap: 34px; }
  .proof__mascot { width: 90px; right: -8px; bottom: -28px; }
  .proof__title { font-size: 28px; margin-top: 56px; }
  .proof__lead { font-size: 16px; }
  .reviews { grid-auto-columns: 82%; padding-inline: 20px; scroll-padding-inline: 20px; }
  .ctable__labels { padding-right: 10px; min-width: 0; }
  .hero__badge { font-size: 12px; white-space: nowrap; gap: 8px; } .hero__badge img { height: 14px; }
  .rail { align-items: start; }
  .compare__title { font-size: 28px; line-height: 34px; }
  .compare__head .lead--grey { font-size: 16px; }
  .ctable { grid-template-columns: 1fr 76px 76px; margin-top: 36px; }
  .ctable__labels { padding-top: 76px; }
  .ctable__labels li, .ctable__col li { height: 84px; }
  .ctable__labels b { font-size: 14px; line-height: 19px; }
  .ctable__labels span { font-size: 12px; line-height: 16px; }
  .ctable__colhead { height: 76px; }
  .ctable__colhead img.lg, .ctable__logos, .ctable__colhead .tag, .ctable__colhead span { display: none; }
  .ctable__colhead b { font-size: 14px; }
  .ctable__col--others .ctable__colhead::before { content: "Les autres"; font-size: 13px; font-weight: 600; color: var(--c-grey); }
  .ctable__col--others .ctable__colhead b { display: none; }
  .ctable__col li .txt { display: none; }
  .ctable__ico { display: block; width: 28px; height: 28px; margin: 0 auto; }
  .ctable__col--hector li img:not(.ctable__ico) { display: none; }
  .ctable__col--others li, .ctable__col--hector li { padding-inline: 0; }
  .ctable__col { border-radius: 18px; }
  .ctable__col--others { border-radius: 0 18px 18px 0; }
  .loin__title { font-size: 30px; line-height: 36px; }
  .bento { grid-template-columns: 1fr; grid-template-rows: 420px 240px 240px; gap: 14px; margin-top: 32px; }
  .bento__card--big { grid-row: auto; }
  .bento__card--big h3 { font-size: 24px; }
  .bento__card--big p { font-size: 15px; line-height: 22px; }
  .loin__cta .btn { width: 100%; }
  .collage { height: 330px; margin-top: 0; }
  .collage .c1 { left: 40px; width: calc(100% - 60px); height: 280px; }
  .collage .c2 { right: 0; top: 20px; width: 84px; height: 100px; }
  .collage .c3 { top: 190px; width: 110px; height: 150px; }
  .faq__title { font-size: 28px; }
  .faq summary { font-size: 16px; line-height: 23px; font-weight: 500; }
  .final { padding: 80px 0; }
  .final__lead { font-size: 17px; line-height: 26px; margin-top: 20px; }
  .footer__inner { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__legal { flex-direction: column; }
}