/* ============================================================ BK26 — Booking nouvelle génération (26/08/2026) Feuille AUTONOME : aucun style hérité du bloc booking de home.css (classes bk26-*, plus de .v3-booking sur la home). Langage : pill segmentée, segment surélevé, ombres multi- étages, CTA circulaire dégradé, transitions 120-320 ms, charte Prestige (or #C9A962 sur verre sombre). Les popovers (.bk26-pop) sont portés dans . ============================================================ */ /* ── Carte ────────────────────────────────────────────────── */ .bk26{ position:relative; max-width:560px;width:100%;min-width:0;justify-self:end;isolation:isolate; background: radial-gradient(120% 140% at 80% 0%, rgba(201,169,98,.10) 0%, transparent 45%), linear-gradient(160deg, rgba(24,23,28,.92) 0%, rgba(14,14,18,.94) 100%); -webkit-backdrop-filter:saturate(160%) blur(30px); backdrop-filter:saturate(160%) blur(30px); border:1px solid rgba(255,255,255,.09); border-radius:28px; padding:1.5rem; color:#fff; font-family:var(--f-sans,'Inter',system-ui,sans-serif); box-shadow: 0 0 0 1px rgba(0,0,0,.25), 0 2px 6px rgba(0,0,0,.20), 0 12px 28px rgba(0,0,0,.34), 0 42px 90px -24px rgba(0,0,0,.6); } @media (min-width:768px){ .bk26{padding:1.75rem;} } @media (max-width:639px){ .bk26{border-radius:24px;max-width:100%;} } .bk26__aura{ position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;z-index:0; background:radial-gradient(320px circle at var(--bk26-mx,78%) var(--bk26-my,-10%), rgba(201,169,98,.13), transparent 62%); } .bk26 > *{position:relative;z-index:1;} /* ── Header ───────────────────────────────────────────────── */ .bk26__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:1.1rem;} .bk26__live,.bk26__reply{ font-size:11px;letter-spacing:.02em;color:rgba(255,255,255,.55); display:inline-flex;align-items:center;gap:7px;white-space:nowrap; } .bk26__reply{border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:4px 11px;background:rgba(255,255,255,.04);} @media (max-width:639px){ .bk26__reply{display:none;} } .bk26__live-dot{ width:7px;height:7px;border-radius:50%;background:#7ed321;flex:none; box-shadow:0 0 8px rgba(126,211,33,.8); animation:bk26-live 2.4s ease-in-out infinite; } @keyframes bk26-live{0%,100%{opacity:1}50%{opacity:.35}} .bk26__steps{display:inline-flex;gap:6px;} .bk26__steps span{ width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.16); transition:background .3s,box-shadow .3s,transform .3s; } .bk26__steps span.is-on{background:#c9a962;box-shadow:0 0 8px rgba(201,169,98,.7);transform:scale(1.15);} /* ── Étapes / panneaux ────────────────────────────────────── */ .bk26__step{display:none;} .bk26__step.is-active{display:block;} .bk26__pane{display:none;} .bk26__pane.is-active{display:block;} /* ── Onglets segmentés + glisseur ─────────────────────────── */ .bk26__tabs{ position:relative;display:flex;gap:4px;align-items:stretch; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.07); border-radius:999px;padding:4px;margin-bottom:1.1rem; } .bk26__glider{ position:absolute;top:4px;bottom:4px;left:0;width:0;border-radius:999px; background:linear-gradient(135deg, rgba(201,169,98,.28), rgba(201,169,98,.14)); border:1px solid rgba(201,169,98,.35); box-shadow:0 4px 14px rgba(201,169,98,.18); transition:transform .32s cubic-bezier(.22,1,.36,1),width .32s cubic-bezier(.22,1,.36,1),opacity .2s; pointer-events:none;opacity:0; } .bk26__tab{ flex:1;background:transparent;border:0;border-radius:999px; color:rgba(255,255,255,.6);font-family:inherit;font-size:.8125rem;font-weight:500; padding:.62rem .5rem;cursor:pointer;white-space:nowrap; transition:color .16s cubic-bezier(.4,0,.2,1);position:relative;z-index:1; } .bk26__tab:hover{color:rgba(255,255,255,.9);} .bk26__tab.is-active{color:#e8d5a3;font-weight:600;} .bk26__tab--explore{ flex:0 0 auto;display:inline-flex;align-items:center;gap:6px; color:rgba(255,255,255,.5);padding:.62rem .85rem; } .bk26__tab--explore.is-active{color:#0a0a0a;background:#c9a962;} @media (max-width:479px){ .bk26__tab--explore span{display:none;} } /* ── Rail pill (étape 1) ──────────────────────────────────── */ .bk26__rail{ display:flex;align-items:center; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09); border-radius:999px;padding:6px;margin-bottom:1rem; box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 2px 10px rgba(0,0,0,.25); } .bk26__cell{ flex:1 1 0;min-width:0;border-radius:999px; padding:.6rem 1.1rem;cursor:pointer;position:relative; display:flex;flex-direction:column;gap:.25rem; transition:background .16s cubic-bezier(.4,0,.2,1),box-shadow .16s cubic-bezier(.4,0,.2,1); } .bk26__cell:first-of-type{flex-grow:1.15;padding-left:1.35rem;} .bk26__cell:hover, .bk26__cell:focus-within{ background:rgba(255,255,255,.09); box-shadow:0 0 0 1px rgba(255,255,255,.06), 0 6px 18px rgba(0,0,0,.35); } .bk26__sep{ width:1px;align-self:center;height:26px;background:rgba(255,255,255,.12);flex:none; transition:opacity .16s; } .bk26__cell:hover + .bk26__sep, .bk26__cell:focus-within + .bk26__sep, .bk26__sep:has(+ .bk26__cell:hover), .bk26__sep:has(+ .bk26__cell:focus-within){opacity:0;} .bk26__label{ color:rgba(255,255,255,.5);font-size:10px;letter-spacing:.08em; text-transform:uppercase;font-weight:600; } .bk26__cell:focus-within .bk26__label{color:#c9a962;} .bk26__req{color:#c9a962;font-style:normal;} .bk26__opt{color:rgba(255,255,255,.35);font-style:normal;font-size:10px;text-transform:none;letter-spacing:0;} /* Champs natifs remplacés par le moteur (accessibles, invisibles) */ .bk26__native{ width:100%;background:transparent;border:0;color:#fff;font-family:inherit; font-size:.9375rem;font-weight:500;padding:0; } .bk26__native--hidden{ position:absolute!important;width:1px;height:1px;opacity:0;pointer-events:none; } .bk26__value{ display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%; background:transparent;border:0;padding:0;margin:0;cursor:pointer; font-family:inherit;font-size:.9375rem;font-weight:500;color:#fff;text-align:left; } .bk26__value span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .bk26__value.is-placeholder{color:rgba(255,255,255,.42);font-weight:400;} .bk26__value svg{color:#c9a962;flex:none;transition:transform .25s cubic-bezier(.22,1,.36,1);} .bk26__value[aria-expanded="true"] svg:first-of-type{transform:rotate(180deg);} .bk26__input{ width:100%;background:transparent;border:0;color:#fff;font-family:inherit; font-size:.9375rem;font-weight:500;padding:0;outline:none; } .bk26__input::placeholder{color:rgba(255,255,255,.42);font-weight:400;} /* ── CTA circulaire dégradé ───────────────────────────────── */ .bk26__go{ width:52px;height:52px;flex:none;border-radius:50%;border:0;padding:0;cursor:pointer; display:inline-flex;align-items:center;justify-content:center; background:linear-gradient(135deg,#e8d5a3 0%,#c9a962 45%,#a8852f 100%); color:#0a0a0a; box-shadow:0 2px 6px rgba(0,0,0,.3),0 10px 26px rgba(201,169,98,.38); transition:transform .12s ease,box-shadow .2s,filter .2s; } .bk26__go:hover{filter:brightness(1.08);transform:scale(1.05);box-shadow:0 2px 6px rgba(0,0,0,.3),0 0 42px rgba(201,169,98,.5);} .bk26__go:active{transform:scale(.94);} .bk26__go-label{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0; } /* ── Erreurs inline ───────────────────────────────────────── */ .bk26__err{ margin:0 0 .8rem;font-size:12px;color:#f0a8a0; display:flex;align-items:center;gap:6px; } .bk26__err[hidden]{display:none;} .bk26__err::before{content:"";width:6px;height:6px;border-radius:50%;background:#e07862;flex:none;} /* ── Lien visio ───────────────────────────────────────────── */ .bk26__visio{ width:100%;display:inline-flex;align-items:center;justify-content:center;gap:9px; background:transparent;border:1px solid rgba(255,255,255,.12);border-radius:999px; color:rgba(255,255,255,.6);font-family:inherit;font-size:.8125rem;font-weight:500; padding:.85rem 1rem;cursor:pointer; transition:color .2s,border-color .2s,background .2s,transform .2s; } .bk26__visio:hover{color:#e8d5a3;border-color:rgba(201,169,98,.4);background:rgba(201,169,98,.06);transform:translateY(-1px);} .bk26__visio-ico{display:inline-grid;place-items:center;color:#c9a962;} /* ── Showroom ─────────────────────────────────────────────── */ .bk26__eyebrow{ display:inline-flex;align-items:center;gap:8px; font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:#c9a962; margin-bottom:.5rem; } .bk26__eyebrow::before{content:"";width:18px;height:1px;background:#c9a962;} .bk26__sh-title{ font-family:var(--f-serif,'Fraunces',serif);font-size:1.25rem;font-weight:600; color:#fff;margin:0 0 1rem; } .bk26__sh-grid{display:grid;grid-template-columns:1fr;gap:.6rem;} @media (min-width:520px){ .bk26__sh-grid{grid-template-columns:1fr 1fr;} } /* ── Étape 2 ──────────────────────────────────────────────── */ .bk26__back{ display:inline-flex;align-items:center;gap:7px;background:transparent;border:0; color:rgba(255,255,255,.55);font-family:inherit;font-size:.8125rem;font-weight:500; padding:0;margin-bottom:.9rem;cursor:pointer;transition:color .2s; } .bk26__back:hover{color:#e8d5a3;} .bk26__back svg{transition:transform .2s;} .bk26__back:hover svg{transform:translateX(-2px);} .bk26__summary{ display:flex;align-items:baseline;gap:10px;flex-wrap:wrap; background:rgba(201,169,98,.07); border:1px solid rgba(201,169,98,.22);border-radius:16px; padding:.85rem 1.1rem;margin-bottom:1rem; } .bk26__sum-type{ font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:600; color:#0a0a0a;background:#c9a962;border-radius:999px;padding:3px 10px; } .bk26__sum-svc{font-family:var(--f-serif,'Fraunces',serif);font-size:1.05rem;font-weight:600;color:#fff;} .bk26__sum-meta{flex-basis:100%;font-size:.8125rem;color:rgba(255,255,255,.55);} .bk26__title{ font-family:var(--f-serif,'Fraunces',serif);font-size:1.3rem;font-weight:600; color:#fff;margin:0 0 1rem; } .bk26__stack{display:grid;gap:.6rem;margin-bottom:.9rem;} .bk26__field{ display:flex;flex-direction:column;gap:.3rem; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09); border-radius:16px;padding:.8rem 1.1rem; transition:border-color .16s,background .16s,box-shadow .16s; } .bk26__field:focus-within{ border-color:rgba(201,169,98,.55); background:rgba(255,255,255,.08); box-shadow:0 0 0 3px rgba(201,169,98,.12),0 6px 18px rgba(0,0,0,.3); } .bk26__field:focus-within .bk26__label{color:#c9a962;} .bk26__consent{ display:flex;align-items:flex-start;gap:9px; font-size:12px;color:rgba(255,255,255,.55);line-height:1.45; border-radius:14px;padding:.2rem .2rem .9rem;cursor:pointer; } .bk26__consent input{accent-color:#c9a962;margin-top:1px;flex:none;} .bk26__consent:hover{color:rgba(255,255,255,.8);} .bk26__submit{ width:100%;border:0;border-radius:999px;cursor:pointer; background:linear-gradient(135deg,#e8d5a3 0%,#c9a962 55%,#b8944a 100%); color:#0a0a0a;font-family:inherit;font-size:.95rem;font-weight:600;letter-spacing:.01em; padding:1rem 1.2rem; box-shadow:0 10px 30px rgba(201,169,98,.28); transition:filter .2s,box-shadow .25s,transform .15s; } .bk26__submit:hover{filter:brightness(1.07);box-shadow:0 0 44px rgba(201,169,98,.4);transform:translateY(-1px);} .bk26__submit:active{transform:scale(.985);} .bk26__submit:disabled{opacity:.7;cursor:wait;transform:none;} .bk26__alt{ width:100%;display:inline-flex;align-items:center;justify-content:center;gap:8px; background:transparent;border:0;color:rgba(255,255,255,.5); font-family:inherit;font-size:.78rem;padding:.85rem 0 0;cursor:pointer;transition:color .2s; } .bk26__alt:hover{color:#e8d5a3;} .bk26__alt strong{font-weight:600;color:rgba(255,255,255,.75);} .bk26__alt:hover strong{color:#e8d5a3;} .bk26__dot{width:6px;height:6px;border-radius:50%;background:#7ed321;box-shadow:0 0 6px rgba(126,211,33,.8);flex:none;} /* ── Étape 3 ──────────────────────────────────────────────── */ .bk26__success{text-align:center;padding:.6rem 0 .4rem;} .bk26__check{ width:64px;height:64px;border-radius:50%;margin:0 auto 1rem; display:grid;place-items:center;color:#0a0a0a; background:linear-gradient(135deg,#e8d5a3,#c9a962); box-shadow:0 10px 30px rgba(201,169,98,.4); animation:bk26-pop-in .5s cubic-bezier(.34,1.56,.64,1) both; } @keyframes bk26-pop-in{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}} .bk26__ok-title{font-family:var(--f-serif,'Fraunces',serif);font-size:1.35rem;font-weight:600;color:#fff;margin:0 0 .4rem;} .bk26__ok-text{font-size:.875rem;color:rgba(255,255,255,.6);margin:0 auto;max-width:34ch;line-height:1.5;} /* ── Popovers (dans ) ───────────────────────────────── */ .bk26-pop{ position:fixed;z-index:2147483000; background:rgba(18,18,22,.97); -webkit-backdrop-filter:blur(26px);backdrop-filter:blur(26px); border:1px solid rgba(255,255,255,.08);border-radius:16px; box-shadow:0 26px 70px rgba(0,0,0,.62); opacity:0;pointer-events:none;transform:translateY(-6px); transition:opacity .22s cubic-bezier(.22,1,.36,1),transform .22s cubic-bezier(.22,1,.36,1); font-family:var(--f-sans,'Inter',system-ui,sans-serif); } .bk26-pop.is-open{opacity:1;pointer-events:auto;transform:translateY(0);} .bk26-pop.is-sheet{ left:50%!important;top:50%!important;width:min(340px,92vw)!important; transform:translate(-50%,-46%);max-height:76vh;overflow-y:auto; box-shadow:0 0 0 100vmax rgba(0,0,0,.62),0 26px 70px rgba(0,0,0,.6); } .bk26-pop.is-sheet.is-open{transform:translate(-50%,-50%);} .bk26-pop--list{padding:8px;max-height:min(440px,68vh);overflow-y:auto;} /* Liste multi-choix : en-tête de catégorie, coche, prix « dès », pied de validation. Le pied colle en bas du popover pour rester atteignable une fois la liste défilée. */ .bk26-pop__grp{ margin:10px 8px 4px;font-family:var(--f-sans,'Inter',system-ui,sans-serif); font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase; color:rgba(232,213,163,.62); } .bk26-pop__grp:first-child{margin-top:2px;} .bk26-pop__tick{ flex:none;width:17px;height:17px;border-radius:5px; border:1px solid rgba(255,255,255,.26);position:relative;transition:border-color .18s,background .18s; } .bk26-pop__opt.is-sel .bk26-pop__tick{background:#c9a962;border-color:#c9a962;} .bk26-pop__opt.is-sel .bk26-pop__tick::after{ content:'';position:absolute;left:5px;top:1.5px;width:4px;height:9px; border:solid #1a1a1a;border-width:0 2px 2px 0;transform:rotate(42deg); } .bk26-pop__name{flex:1;min-width:0;} .bk26-pop__price{flex:none;font-size:12px;color:rgba(255,255,255,.45);} .bk26-pop__opt.is-sel .bk26-pop__price{color:rgba(232,213,163,.7);} .bk26-pop__price--addon{font-style:italic;opacity:.8;} .bk26-pop__done{ position:sticky;bottom:-8px;display:block;width:100%;margin-top:8px; padding:11px 14px;border:0;border-radius:11px;background:#c9a962;color:#1a1a1a; font-family:inherit;font-size:13px;font-weight:600;cursor:pointer; } .bk26-pop__done:hover,.bk26-pop__done:focus-visible{background:#e8d5a3;outline:none;} .bk26-pop__opt{ display:flex;align-items:center;gap:9px;width:100%;text-align:left; background:transparent;border:0;border-radius:11px;padding:12px 14px; color:#fff;font-family:inherit;font-size:14px;cursor:pointer;transition:background .18s; } .bk26-pop__opt:hover,.bk26-pop__opt:focus-visible{background:rgba(201,169,98,.1);outline:none;} .bk26-pop__opt.is-sel{color:#e8d5a3;background:rgba(201,169,98,.08);} .bk26-pop__opt--loc svg{color:#c9a962;flex:none;} .bk26-pop__opt--loc span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} /* ── Calendrier ───────────────────────────────────────────── */ .bk26-pop--cal{width:308px;padding:18px;} .bk26-cal__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;} .bk26-cal__title{ font-family:var(--f-serif,'Fraunces',serif);font-size:16px;font-weight:600;color:#fff; text-transform:capitalize; } .bk26-cal__nav{ width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.12); background:transparent;color:#c9a962;cursor:pointer;font-size:16px;line-height:1; display:grid;place-items:center;font-family:inherit;transition:background .2s; } .bk26-cal__nav:hover{background:rgba(201,169,98,.1);} .bk26-cal__dow{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:6px;} .bk26-cal__dow span{ text-align:center;font-size:10px;letter-spacing:.06em;text-transform:uppercase; color:rgba(255,255,255,.34);padding:4px 0; } .bk26-cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;} .bk26-cal__day{ aspect-ratio:1;border:1px solid transparent;background:transparent; color:rgba(255,255,255,.82);border-radius:9px;font-size:13px;cursor:pointer; font-family:inherit;position:relative;padding:0;transition:border-color .2s,background .2s; } .bk26-cal__day:hover:not(:disabled){border-color:rgba(201,169,98,.45);} .bk26-cal__day:disabled{color:rgba(255,255,255,.2);cursor:default;} .bk26-cal__day.is-sat{color:#e8d5a3;font-weight:600;} .bk26-cal__day.is-sat::after{ content:"";position:absolute;bottom:4px;left:50%;transform:translateX(-50%); width:3px;height:3px;border-radius:50%;background:#c9a962; } .bk26-cal__day.is-sel{background:#c9a962;color:#0a0a0a;border-color:#c9a962;font-weight:600;} .bk26-cal__note{ margin:11px 2px 0;font-size:11px;color:rgba(255,255,255,.5); display:flex;align-items:center;gap:7px; } .bk26-cal__note span{width:7px;height:7px;border-radius:50%;background:#c9a962;box-shadow:0 0 6px #c9a962;flex:none;} /* ── Rail mobile empilé ───────────────────────────────────── */ @media (max-width:639px){ .bk26__rail{flex-direction:column;align-items:stretch;border-radius:20px;gap:4px;} .bk26__sep{display:none;} .bk26__cell{padding:.7rem 1rem;border-radius:15px;} .bk26__cell:first-of-type{padding-left:1rem;} .bk26__go{ width:100%;height:auto;border-radius:15px;padding:.95rem 1rem;margin-top:2px;gap:8px; } .bk26__go-label{ position:static;width:auto;height:auto;margin:0;clip:auto;overflow:visible; font-size:.95rem;font-weight:600; } } /* ════════════════════════════════════════════════════════════ V2 « Invitation Vivante » — synthèse du Conseil des 4 (26/08) Springs linear(), bordure d'or vivante @property, morphing View Transitions, sceau génératif, onde de choc, focus ciné, retrait au scroll. Chaque bloc dégrade proprement. ════════════════════════════════════════════════════════════ */ /* ── Physique à ressort : cubic d'abord (fallback), linear() écrase quand le navigateur sait (88 % — Chrome 113+/Safari 16.4+/FF 116+) */ :root{ --bk26-spring: cubic-bezier(.22,1,.36,1); --bk26-spring: linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1); } .bk26__glider{transition:transform .5s var(--bk26-spring),width .5s var(--bk26-spring),opacity .2s;} .bk26-pop{transition:opacity .22s cubic-bezier(.22,1,.36,1),transform .45s var(--bk26-spring);} .bk26__go{transition:transform .35s var(--bk26-spring),box-shadow .2s,filter .2s;} .bk26__steps span{transition:background .3s,box-shadow .3s,transform .45s var(--bk26-spring);} /* ── Bordure d'or vivante : anneau conique qui tourne lentement, s'intensifie à l'approche du pointeur (--bk26-edge posé en JS) */ @property --bk26-ang{syntax:'';inherits:true;initial-value:0deg;} .bk26::after{ content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;z-index:2; padding:1px; background:conic-gradient(from var(--bk26-ang), transparent 0%, rgba(201,169,98,.05) 12%, rgba(232,213,163,.85) 22%, rgba(201,169,98,.05) 32%, transparent 45%, rgba(201,169,98,.30) 70%, transparent 82%); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude; opacity:calc(.35 + var(--bk26-edge, 0) * .65); animation:bk26-ring 9s linear infinite; transition:opacity .3s; } @keyframes bk26-ring{to{--bk26-ang:360deg;}} /* ── Focus cinématographique : pendant une saisie au step 2, seuls le champ actif et le bouton restent nets */ .bk26__stack:focus-within .bk26__field:not(:focus-within){ opacity:.55;transform:scale(.985); transition:opacity .3s,transform .3s; } .bk26__stack .bk26__field{transition:opacity .3s,transform .3s,border-color .16s,background .16s,box-shadow .16s;} /* ── Retrait au scroll (CSS pur, Chrome/Safari récents ; les autres : rien) */ @supports (animation-timeline: scroll()){ @media (prefers-reduced-motion: no-preference){ .bk26{ animation:bk26-recede linear both; animation-timeline:scroll(root); animation-range:0 60vh; } @keyframes bk26-recede{to{transform:scale(.965) translateY(14px);opacity:.55;}} } } /* ── Morphing entre étapes (View Transitions) : les éléments qui « voyagent » du rail vers le récap portent le même nom */ .bk26.is-vt [data-bk-cell="service"] .bk26__value span{view-transition-name:bk26-svc;} .bk26.is-vt [data-bk-sum="svc"]{view-transition-name:bk26-svc;} .bk26.is-vt .bk26__go{view-transition-name:bk26-cta;} .bk26.is-vt .bk26__submit{view-transition-name:bk26-cta;} ::view-transition-group(bk26-svc), ::view-transition-group(bk26-cta){animation-duration:.42s;animation-timing-function:var(--bk26-spring);} ::view-transition-old(root),::view-transition-new(root){animation-duration:.22s;} /* ── Onde de choc au submit (l'impact « caisse claire ») ──── */ .bk26__wave{ position:absolute;border-radius:50%;pointer-events:none;z-index:3; border:2px solid rgba(232,213,163,.9); box-shadow:0 0 24px rgba(201,169,98,.55), inset 0 0 18px rgba(201,169,98,.35); transform:translate(-50%,-50%) scale(0);opacity:1; width:120px;height:120px; } /* ── Étincelles (canvas posé par le JS, plein cadre carte/pop) ─ */ .bk26__fx{position:absolute;inset:0;pointer-events:none;z-index:4;} /* ── Sceau génératif : avatar vivant du concierge ─────────── */ .v3-cc__seal{ width:46px;height:46px;border-radius:50%;flex:none; background:radial-gradient(circle at 35% 30%, rgba(232,213,163,.18), rgba(20,20,24,.9)); border:1px solid rgba(201,169,98,.4); box-shadow:0 0 18px rgba(201,169,98,.25); } .v3-cc__seal.is-thinking{animation:bk26-breathe 1.6s ease-in-out infinite;} @keyframes bk26-breathe{0%,100%{transform:scale(1);box-shadow:0 0 18px rgba(201,169,98,.25);} 50%{transform:scale(1.06);box-shadow:0 0 30px rgba(201,169,98,.5);}} #v3-cc .v3-cc__head{display:flex;align-items:center;gap:10px;} /* ── Révélation « starlight » de l'estimation ─────────────── */ .v3-cc__price{animation:bk26-starlight 1.1s ease-out both;} @keyframes bk26-starlight{ 0%{opacity:0;text-shadow:0 0 22px rgba(232,213,163,.95);letter-spacing:.06em;} 55%{opacity:1;text-shadow:0 0 30px rgba(232,213,163,.8);} 100%{opacity:1;text-shadow:0 0 0 rgba(232,213,163,0);letter-spacing:normal;} } /* ── Son (opt-in) : petit interrupteur dans le header ─────── */ .bk26__snd{ background:transparent;border:1px solid rgba(255,255,255,.1);border-radius:999px; color:rgba(255,255,255,.45);width:26px;height:26px;flex:none;cursor:pointer; display:inline-grid;place-items:center;padding:0;transition:color .2s,border-color .2s; } .bk26__snd:hover{color:#e8d5a3;border-color:rgba(201,169,98,.4);} .bk26__snd[aria-pressed="true"]{color:#c9a962;border-color:rgba(201,169,98,.55);} /* ── Jour sélectionné : éclipse dorée ─────────────────────── */ .bk26-cal__day.is-sel{ background:radial-gradient(circle at 50% 40%, #e8d5a3, #c9a962 70%); box-shadow:0 0 16px rgba(201,169,98,.6); } /* ── Mouvement réduit ─────────────────────────────────────── */ @media (prefers-reduced-motion: reduce){ .bk26__live-dot,.bk26__check{animation:none;} .bk26__glider,.bk26-pop{transition:none;} .bk26__aura{display:none;} .bk26::after{animation:none;opacity:.3;} .v3-cc__seal.is-thinking{animation:none;} .v3-cc__price{animation:none;} .bk26__stack:focus-within .bk26__field:not(:focus-within){transform:none;} } /* ── iOS : 16px minimum sur les champs (20/09/2026) ─────────────────────── Sous 16px, Safari ZOOME la page dès qu'on touche un champ, et la mise en page saute — c'est ce qui donne l'impression que le formulaire déborde. Les trois champs du héro étaient à .9375rem (15px) ; l'écart d'un pixel avec le desktop ne se voit pas, le zoom intempestif si. */ @media (max-width: 767px) { .bk26__native, .bk26__input, .bk26__value { font-size: 16px; } }