/* Généré par tools/build-public.mjs (CSS_MIROIRS) : NE PAS MODIFIER À LA MAIN. */
.tf-demo {--line: rgba(28,22,17,.1);
    --fs-2xs: .75rem;
    --fs-xs: .875rem;
    --fs-s: 1rem;
    --fs-m: 1.125rem;
    --fs-l: 1.3rem;
    --fs-h3: clamp(1.35rem, 1.9vw, 1.7rem);
    --fs-h2: clamp(2rem, 4vw, 3rem);
    --fs-display: clamp(2.5rem, 5.6vw, 4.5rem);
    --fs-num: clamp(3.2rem, 7vw, 5.4rem);
    --r-s: 12px; --r-m: 20px; --r-l: 32px; --r-pill: 999px;
    --sh-1: 0 0 0 1px rgba(28,22,17,.06), 0 1px 2px rgba(28,22,17,.05);
    --sh-2: 0 10px 26px -14px rgba(28,22,17,.4);
    --sh-3: 0 40px 80px -40px rgba(28,22,17,.35);
    --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 32px; --sp-5: 48px;
    --sec: clamp(96px, 12vw, 160px);
    --gap-arg: clamp(96px, 10vw, 140px);
    --btn-h: 52px; --btn-h-s: 40px;
    --ease: cubic-bezier(.2,.8,.2,1);
    --ease-move: cubic-bezier(.3,.7,.2,1);}
.tf-demo .dev-tab { position: relative; background: #2A2622; padding: 1.6%; border-radius: 4.2% / 5.6%; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), var(--sh-3); }
.tf-demo .dev-tab .lp-ipad-screen { border-radius: 2.6% / 3.5%; }
.tf-demo .dev-tab--xl { max-width: 720px; margin: 0 auto; }
.tf-demo .qs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 auto 22px; max-width: 760px; }
.tf-demo .qs-b {
    position: relative; overflow: hidden; display: inline-flex; align-items: center; min-height: var(--btn-h-s); padding: 0 18px; border-radius: var(--r-pill);
    border: 1px solid var(--line); background: transparent; color: var(--zinc); font: inherit; font-size: var(--fs-s); font-weight: 500; cursor: pointer;
    transition: background-color .25s, color .25s, border-color .25s, transform .2s var(--ease);
}
.tf-demo .qs-b[aria-pressed="true"] { background: #fff; border-color: rgba(186,74,44,.45); color: var(--sienna); box-shadow: var(--sh-1); }
.tf-demo .qs-b::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: 6px; height: 2px; border-radius: 2px; background: rgba(186,74,44,.35); transform: scaleX(0); transform-origin: left; }
.tf-demo .qs-b[aria-pressed="true"]::after { transform: scaleX(var(--qs-p, 0)); }
.tf-demo .qs-b:active { transform: scale(.97); }
.tf-demo .qs-b:focus-visible { outline: 3px solid rgba(186,74,44,.35); outline-offset: 2px; }
@media (hover: hover) {
.tf-demo .qs-b[aria-pressed="false"]:hover { color: var(--espresso); border-color: rgba(28,22,17,.25); }
}
@media (max-width: 560px) {
.tf-demo .qs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.tf-demo .qs-b { justify-content: center; min-height: 48px; padding: 9px 10px 11px; font-size: .82rem; line-height: 1.25; text-align: center; }
.tf-demo .qs-b::after { left: 14px; right: 14px; bottom: 5px; }
}
@media (prefers-reduced-motion: reduce) {
.tf-demo .qs-b::after { display: none; }
}
.tf-demo .wa-line { min-height: 44px; }
.tf-demo .wa-line-txt { display: inline; text-align: left; }
@media (max-width: 560px) {
.tf-demo .offer-sec .wa-line { justify-content: center; text-align: center; }
.tf-demo .offer-sec .wa-line-q { display: none; }
}
.tf-demo .di-screen { position: relative; aspect-ratio: 1180 / 820; overflow: hidden; background: #F5F0E8; border-radius: 2.6% / 3.7%; }
.tf-demo .di-stage { position: absolute; left: 0; top: 0; width: 1180px; height: 820px; transform-origin: 0 0; transform: scale(var(--k, .5)); }
.tf-demo .di-screens { position: absolute; inset: 0; transition: filter .45s var(--ease), transform .45s var(--ease); }
.tf-demo .di-screens.is-veiled { filter: blur(6px); transform: scale(1.03); }
.tf-demo .di-s { position: absolute; inset: 0; opacity: 0; visibility: hidden; }
.tf-demo .di-s.is-on { opacity: 1; visibility: visible; }
.tf-demo .di-s > img.di-full { position: absolute; inset: 0; width: 1180px; height: 820px; display: block; }
.tf-demo .di-s > img.di-full { height: 823px; }
.tf-demo .di-hero { position: absolute; left: 483.6px; top: 114px; width: 686.4px; height: 429px; border-radius: 16px; overflow: hidden; opacity: 0; background: #1c1611; }
.tf-demo .di-hero video { width: 100%; height: 100%; object-fit: cover; display: block; }
.tf-demo .di-hero::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(to top, rgba(0,0,0,.55), transparent); pointer-events: none; }
.tf-demo .di-hero-cap { position: absolute; left: 24px; bottom: 18px; z-index: 1; color: #fff; }
.tf-demo .di-hero-cap small { display: block; font: 600 11px/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; opacity: .9; margin-bottom: 7px; }
.tf-demo .di-hero-cap span { font-family: var(--font-display); font-size: 21px; }
.tf-demo .di-left { position: absolute; left: 0; top: 0; width: 452px; height: 820px; display: block; }
.tf-demo .di-col { position: absolute; left: 452px; top: 0; width: 728px; height: 820px; overflow: hidden; }
.tf-demo .di-col img { width: 728px; max-width: none; height: auto; display: block; will-change: transform; }
.tf-demo .di-col img + img { position: absolute; left: 0; top: 0; visibility: hidden; }
.tf-demo .di-col img + img.is-on { visibility: visible; }
.tf-demo .di-pill { position: absolute; left: 529px; top: 747px; width: 122px; height: 42px; border-radius: 21px; box-shadow: 0 6px 18px -6px rgba(28,22,17,.28); }
.tf-demo .di-press { position: absolute; border-radius: var(--r-m); background: rgba(28,22,17,.07); opacity: 0; pointer-events: none; }
.tf-demo .di-veil { position: absolute; inset: 0; background: rgba(61,58,53,.45); opacity: 0; pointer-events: none; }
.tf-demo .di-card { position: absolute; left: 50%; top: 50%; opacity: 0; transform: translate(-50%, -50%); pointer-events: none; }
.tf-demo .di-card img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 32px; box-shadow: 0 25px 80px rgba(0,0,0,.25); display: block; }
.tf-demo .di-card img + img { opacity: 0; }
.tf-demo .di-card img { max-width: none; }
.tf-demo .di-finger { position: absolute; left: 0; top: 0; width: 58px; height: 58px; margin: -29px 0 0 -29px; opacity: 0; pointer-events: none; z-index: 5; }
.tf-demo .di-finger i { position: absolute; inset: 0; border-radius: 50%; background: rgba(58,48,40,.34); box-shadow: inset 0 0 0 2.5px rgba(255,255,255,.95), 0 0 0 1px rgba(28,22,17,.18), 0 8px 22px rgba(28,22,17,.3); backdrop-filter: blur(3px); }
.tf-demo .di-finger b { position: absolute; inset: 0; border-radius: 50%; border: 3px solid rgba(255,255,255,.95); box-shadow: 0 0 0 1px rgba(28,22,17,.15); opacity: 0; }
@media (prefers-reduced-motion: reduce) {
.tf-demo .di-screens { transition: none; }
}
.tf-demo .ag-stage .di-finger { z-index: 6; }
.tf-demo .dc-ic { position: absolute; left: 50%; top: 50%; width: 88px; height: 88px; margin-left: -44px; fill: none; stroke: #BA4A2C; opacity: 0; pointer-events: none; }
.tf-demo .dc-send { stroke-width: 1.5; }
.tf-demo .dc-check circle { stroke-width: 2; }
.tf-demo .dc-check path { stroke-width: 3; }
.tf-demo .dc-send.is-on { opacity: 1; animation: dc-pulse 1s ease-in-out infinite alternate; }
.tf-demo .dc-check.is-on { opacity: 1; animation: dc-confirm .35s ease-out both; }
.tf-demo .dc-tel { position: absolute; right: 2%; bottom: -10%; width: 24%; aspect-ratio: 71.6 / 146.6; z-index: 3; opacity: 0; pointer-events: none; filter: drop-shadow(0 34px 34px rgba(28,22,17,.34)) drop-shadow(0 6px 10px rgba(28,22,17,.22)); }
.tf-demo .dc-tel::before { content: ""; position: absolute; right: -1.5%; top: 25%; width: 1.8%; height: 11%; border-radius: 0 4px 4px 0; background: linear-gradient(90deg, #4d4a46, #8a867f 60%, #3a3835); }
.tf-demo .dc-tel::after { content: ""; position: absolute; left: -1.5%; top: 19%; width: 1.8%; height: 15%; border-radius: 4px 0 0 4px; background: linear-gradient(270deg, #4d4a46, #8a867f 60%, #3a3835); -webkit-mask: linear-gradient(#000 0 30%, transparent 30% 40%, #000 40% 100%); mask: linear-gradient(#000 0 30%, transparent 30% 40%, #000 40% 100%); }
.tf-demo .dc-tel-in { position: absolute; inset: 0; container-type: inline-size; border-radius: 17.5% / 8.6%; background: linear-gradient(150deg, #8d8981 0%, #45433f 12%, #22211f 45%, #3c3a37 85%, #908b83 100%); }
.tf-demo .dc-tel-in::before { content: ""; position: absolute; inset: 1.3% 2.7%; border-radius: 16.3% / 7.9%; background: #050505; }
.tf-demo .dc-tel-in::after { content: ""; position: absolute; z-index: 5; left: 35%; right: 35%; top: 3.3%; height: 3.6%; border-radius: 99px; background: #000; }
.tf-demo .dc-t { position: absolute; inset: 2.3% 5%; border-radius: 13.6% / 6.6%; overflow: hidden; container-type: inline-size; line-height: 1.25; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-family: var(--font-body); background: #FAF8F5; color: var(--espresso); opacity: 0; transition: opacity .3s ease; }
.tf-demo .dc-t.is-on { opacity: 1; }
.tf-demo .dc-t p { margin: 0; }
.tf-demo .dc-sb { position: absolute; z-index: 4; left: 5%; right: 5%; top: 3.1%; height: 4%; display: flex; align-items: center; justify-content: space-between; padding: 0 9% 0 10%; font: 600 4.4cqw/1 -apple-system, "SF Pro Text", system-ui, sans-serif; color: #111; letter-spacing: -.01em; }
.tf-demo .dc-sb-ic { display: flex; align-items: center; gap: 1.3cqw; }
.tf-demo .dc-sb-ic svg { height: 3.2cqw; width: auto; fill: currentColor; }
.tf-demo .dc-sb-ic svg:last-child { height: 3.4cqw; }
.tf-demo .dc-hi { position: absolute; z-index: 4; left: 34%; right: 34%; bottom: 3.4%; height: 1.15%; border-radius: 99px; background: #111; }
.tf-demo .dc-tel[data-sombre] .dc-sb { color: #fff; }
.tf-demo .dc-tel[data-sombre] .dc-hi { background: #fff; }
.tf-demo .dc-t--scan { background: radial-gradient(120% 80% at 50% 45%, #3a332e, #1d1916); color: #fff; }
.tf-demo .dc-t--scan p { font-size: 5.6cqw; font-weight: 600; margin-top: 9cqw !important; }
.tf-demo .dc-visee { position: relative; width: 66cqw; aspect-ratio: 1; }
.tf-demo .dc-visee i { position: absolute; width: 22%; height: 22%; border: 1.4cqw solid #ffd60a; }
.tf-demo .dc-visee i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; border-radius: 4cqw 0 0 0; }
.tf-demo .dc-visee i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; border-radius: 0 4cqw 0 0; }
.tf-demo .dc-visee i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 4cqw; }
.tf-demo .dc-visee i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; border-radius: 0 0 4cqw 0; }
.tf-demo .dc-qr { position: absolute; inset: 13%; border-radius: 2cqw; background: #fff url("../assets/demo-calc/carte-bateau-payer.webp") 50% 55% / 219% auto no-repeat; opacity: .92; transform: perspective(60cqw) rotateX(8deg); }
.tf-demo .dc-ligne { position: absolute; left: 8%; right: 8%; top: 12%; height: 1cqw; border-radius: 1cqw; background: #ffd60a; box-shadow: 0 0 4cqw 1cqw rgba(255,214,10,.55); }
.tf-demo .dc-t--scan.is-on .dc-ligne { animation: dc-scan 1.1s ease-in-out infinite alternate; }
.tf-demo .dc-t--wa { background: #EFEAE2; justify-content: flex-start; align-items: stretch; text-align: left; font-family: -apple-system, "SF Pro Text", system-ui, sans-serif; color: #111B21; }
.tf-demo .wa-h { display: flex; align-items: center; gap: 3cqw; padding: 15cqw 4cqw 3.5cqw; background: #F6F5F3; border-bottom: 1px solid rgba(0,0,0,.08); }
.tf-demo .wa-back { color: #007AFF; font-size: 12cqw; line-height: .6; margin-right: 1cqw; }
.tf-demo .wa-av { flex: none; width: 12cqw; height: 12cqw; border-radius: 50%; display: grid; place-items: center; background: #BA4A2C; color: #fff; font-size: 4.6cqw; font-weight: 700; }
.tf-demo .wa-n { line-height: 1.2; }
.tf-demo .wa-nom, .tf-demo .wa-statut { display: block; margin: 0; }
.tf-demo .wa-nom { font-size: 6.4cqw; font-weight: 600; }
.tf-demo .wa-statut { margin-top: .4cqw; font-size: 4.6cqw; color: #667781; }
.tf-demo .wa-fil { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; padding: 4cqw 3.5cqw; }
.tf-demo .wa-bulle { max-width: 92%; padding: 3cqw 3.6cqw 1.8cqw; border-radius: 4cqw 1cqw 4cqw 4cqw; background: #D9FDD3; font-size: 5.6cqw; line-height: 1.3; box-shadow: 0 1px .5px rgba(0,0,0,.13); opacity: 0; transform: translateY(8cqw) scale(.96); transform-origin: 100% 100%; transition: opacity .3s ease, transform .4s cubic-bezier(.2,.8,.2,1); }
.tf-demo .wa-bulle em { display: block; margin-top: .8cqw; text-align: right; font-style: normal; font-size: 3.8cqw; color: #667781; }
.tf-demo .wa-bulle i { font-style: normal; color: #53BDEB; letter-spacing: -.12em; }
.tf-demo .wa-bar { display: flex; align-items: flex-end; gap: 2.4cqw; padding: 3cqw 3cqw 12cqw; background: #F6F5F3; }
.tf-demo .wa-in { flex: 1; max-height: 44cqw; overflow: hidden; padding: 2.8cqw 3.8cqw; border-radius: 5cqw; background: #fff; font-size: 5.4cqw; line-height: 1.3; transition: max-height .35s ease, color .2s; }
.tf-demo .wa-send { flex: none; width: 13cqw; height: 13cqw; border-radius: 50%; display: grid; place-items: center; background: #25D366; }
.tf-demo .wa-send svg { width: 7cqw; height: 7cqw; fill: #fff; margin-left: .8cqw; }
.tf-demo .dc-t--wa.is-envoye .wa-bulle:not(.wa-bulle--in) { opacity: 1; transform: none; }
.tf-demo .wa-bulle--in { align-self: flex-start; background: #fff; border-radius: 1cqw 4cqw 4cqw 4cqw; transform-origin: 0 100%;
    max-height: 0; padding-top: 0; padding-bottom: 0; margin-top: 0; overflow: hidden;
    transition: max-height .45s cubic-bezier(.2,.8,.2,1), padding .45s, margin .45s, opacity .3s .15s, transform .4s .15s cubic-bezier(.2,.8,.2,1); }
.tf-demo .dc-t--wa.is-repondu .wa-bulle--in { opacity: 1; transform: none; max-height: 80cqw; padding-top: 3cqw; padding-bottom: 1.8cqw; margin-top: 3cqw; }
.tf-demo .wa-lien { display: flex; align-items: center; gap: 2.4cqw; margin-top: 2.2cqw; padding: 2.4cqw; border-radius: 2.4cqw; background: #F0F2F5; }
.tf-demo .wa-lien-ic { flex: none; width: 9cqw; height: 9cqw; border-radius: 2cqw; display: grid; place-items: center; background: #635BFF; color: #fff; font: 800 5.4cqw/1 Arial, sans-serif; }
.tf-demo .wa-lien b { display: block; font-size: 4.4cqw; font-weight: 600; color: #111B21; }
.tf-demo .wa-lien small { display: block; font-size: 3.8cqw; color: #027EB5; }
.tf-demo .dc-tel:not([data-produit="depart"]) .st-v--depart, .tf-demo .dc-tel[data-produit="depart"] .st-v--bateau { display: none; }
.tf-demo .dc-t--wa.is-envoye .wa-in { color: transparent; max-height: 10cqw; }
.tf-demo .dc-t--stripe { background: #fff; justify-content: flex-start; align-items: stretch; text-align: center; padding: 17% 8% 6%; color: #1a1f36; font-family: -apple-system, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif; }
.tf-demo .st-head { display: flex; align-items: center; justify-content: center; gap: 2cqw; padding-bottom: 5cqw; border-bottom: 1px solid #ebeef1; }
.tf-demo .st-logo-svg { width: 24cqw; height: auto; display: block; }
.tf-demo .st-lock { font-size: 4.6cqw; }
.tf-demo .st-m { margin-top: auto !important; font-size: 6cqw; font-weight: 600; }
.tf-demo .st-prod { margin-top: 1cqw !important; font-size: 5cqw; color: #697386; }
.tf-demo .st-px { margin-top: 3cqw !important; font-size: 17cqw; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.tf-demo .st-carte { display: flex; align-items: center; justify-content: center; gap: 3cqw; margin-top: 9cqw; padding: 4cqw; border: 1px solid #e3e8ee; border-radius: 3cqw; font-size: 5.4cqw; font-weight: 500; }
.tf-demo .st-visa { font: italic 800 5cqw/1 Arial, sans-serif; color: #1a1f71; letter-spacing: -.03em; }
.tf-demo .st-btn { position: relative; display: block; margin-top: 5cqw; padding: 5cqw; border-radius: 3cqw; background: #635BFF; color: #fff; font-size: 6.2cqw; font-weight: 600; box-shadow: 0 2px 5px rgba(50,50,93,.18); }
.tf-demo .st-spin { display: none; width: 7cqw; height: 7cqw; margin: 0 auto; border: 1cqw solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; }
.tf-demo .st-btn.is-load .st-btn-t { display: none; }
.tf-demo .st-btn.is-load .st-spin { display: block; animation: st-spin .7s linear infinite; }
.tf-demo .st-pw { margin-top: auto !important; padding-top: 5cqw; text-align: center; font-size: 4.4cqw; color: #697386; }
.tf-demo .st-pw b { margin-left: .6cqw; font: 700 5.4cqw/1 "Helvetica Neue", Arial, sans-serif; letter-spacing: -.05em; color: #635BFF; }
.tf-demo .dc-t--paye { background: #fff; font-family: -apple-system, "SF Pro Text", system-ui, sans-serif; color: #1a1f36; }
.tf-demo .dc-t--paye svg { width: 30cqw; height: 30cqw; fill: none; stroke: #0a8a4f; stroke-linecap: round; stroke-linejoin: round; }
.tf-demo .dc-t--paye svg circle { stroke-width: 2.2; fill: #e6f6ee; stroke: #0a8a4f; }
.tf-demo .dc-t--paye svg path { stroke-width: 3.4; }
.tf-demo .dc-t--paye.is-on svg { animation: dc-confirm .4s ease-out both; }
.tf-demo .st-ok-t { margin-top: 6cqw !important; font-size: 8cqw; font-weight: 700; }
.tf-demo .st-ok-s { margin-top: 2cqw !important; font-size: 5.4cqw; color: #697386; }
.tf-demo .dc-t--paye .st-pw { position: absolute; left: 0; right: 0; bottom: 12cqw; }
.tf-demo .dc-t--maps { background: #F2EFE9; justify-content: flex-end; align-items: stretch; font-family: "Google Sans", Roboto, -apple-system, system-ui, sans-serif; color: #202124; }
.tf-demo .gm-carte { position: absolute; inset: 0; }
.tf-demo .gm-carte img, .tf-demo .gm-carte svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; max-width: none; object-fit: cover; }
.tf-demo .gm-route { stroke-dasharray: 100; stroke-dashoffset: 100; }
.tf-demo .dc-t--maps.is-on .gm-route { animation: gm-trace 1.8s .3s cubic-bezier(.45,.05,.3,1) forwards; }
.tf-demo .gm-pin { opacity: 0; }
.tf-demo .dc-t--maps.is-on .gm-pin { animation: gm-pin .45s 1.9s ease-out forwards; }
.tf-demo .gm-sheet { position: relative; margin: 0 2.5cqw 9cqw; padding: 5cqw 5cqw 5.5cqw; border-radius: 6cqw; background: #fff; text-align: left; box-shadow: 0 -1cqw 5cqw rgba(0,0,0,.12); }
.tf-demo .gm-t { font-size: 7.4cqw; }
.tf-demo .gm-t b { color: #188038; font-weight: 600; }
.tf-demo .gm-t span { font-size: 5.2cqw; color: #5f6368; }
.tf-demo .gm-d { margin-top: 1.4cqw !important; font-size: 4.6cqw; line-height: 1.3; color: #5f6368; }
.tf-demo .gm-btn { display: block; margin-top: 4.5cqw; padding: 3.8cqw; border-radius: 99px; background: #1A73E8; color: #fff; text-align: center; font-size: 5.6cqw; font-weight: 600; }
@media (max-width: 767px) {
.tf-demo .dc-tel { right: 1%; bottom: -19%; width: 24%; }
}
@keyframes dc-pulse { to { transform: translate(5px, -5px); opacity: .5; } }
@keyframes dc-confirm { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes dc-scan { to { top: 86%; } }
@keyframes st-spin { to { transform: rotate(360deg); } }
@keyframes gm-trace { to { stroke-dashoffset: 0; } }
@keyframes gm-pin { to { opacity: 1; } }